Ensured wysiwyg details contents are wrapped in block elements

Fixes issue where inline-only content would disappear when unwrapping a
details block element.

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index 83d4fefb7d9db10d7ced7758b5a67fa25f3bf486..49d2add77cd1ad76d146baf4d386a40c4d7dd99b 100644 (file)
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -235,7 +235,7 @@ export function build(options) {
             "-doc-root[doc-root|#text]",
             "-li[details]",
             "+code-block[pre]",
             "-doc-root[doc-root|#text]",
             "-li[details]",
             "+code-block[pre]",

-            "+doc-root[code-block]"
+            "+doc-root[p|h1|h2|h3|h4|h5|h6|blockquote|code-block|div]"

         ].join(','),
         plugins: gatherPlugins(options),
         contextmenu: false,
         ].join(','),
         plugins: gatherPlugins(options),
         contextmenu: false,

diff --git a/resources/js/wysiwyg/plugins-details.js b/resources/js/wysiwyg/plugins-details.js
index 7d089e54face2e1f279d2801e2ca30afd2cd1421..44a0a35ab1228a4ffbe0ee49a263e8595684764a 100644 (file)
--- a/resources/js/wysiwyg/plugins-details.js
+++ b/resources/js/wysiwyg/plugins-details.js
@@ -2,6 +2,7 @@
  * @param {Editor} editor
  * @param {String} url
  */
  * @param {Editor} editor
  * @param {String} url
  */

+import {blockElementTypes} from "./util";

 
 function register(editor, url) {
 
 
 function register(editor, url) {
 


@@ -217,14 +218,26 @@ function ensureDetailsWrappedInEditable(detailsEl) {
     unwrapDetailsEditable(detailsEl);
 
     detailsEl.attr('contenteditable', 'false');
     unwrapDetailsEditable(detailsEl);
 
     detailsEl.attr('contenteditable', 'false');

-    const wrap = tinymce.html.Node.create('doc-root', {contenteditable: 'true'});
+    const rootWrap = tinymce.html.Node.create('doc-root', {contenteditable: 'true'});
+    let previousBlockWrap = null;
+

     for (const child of detailsEl.children()) {
     for (const child of detailsEl.children()) {

-        if (child.name !== 'summary') {
-            wrap.append(child);
+        if (child.name === 'summary') continue;
+        const isBlock = blockElementTypes.includes(child.name);
+
+        if (!isBlock) {
+            if (!previousBlockWrap) {
+                previousBlockWrap = tinymce.html.Node.create('p');
+                rootWrap.append(previousBlockWrap);
+            }
+            previousBlockWrap.append(child);
+        } else {
+            rootWrap.append(child);
+            previousBlockWrap = null;

         }
     }
 
         }
     }
 

-    detailsEl.append(wrap);
+    detailsEl.append(rootWrap);

 }
 
 /**
 }
 
 /**

diff --git a/resources/js/wysiwyg/util.js b/resources/js/wysiwyg/util.js
new file mode 100644 (file)
index 0000000..1f63b65
--- /dev/null
+++ b/resources/js/wysiwyg/util.js
@@ -0,0 +1,19 @@
+
+
+export const blockElementTypes = [
+    'p',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'div',
+    'blockquote',
+    'pre',
+    'code-block',
+    'details',
+    'ul',
+    'ol',
+    'table'
+];
\ No newline at end of file