X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/9e0b8a9fb6b0c96f9fed911544e22d9d56cb74a1..refs/pull/3598/head:/resources/js/wysiwyg/plugins-details.js

diff --git a/resources/js/wysiwyg/plugins-details.js b/resources/js/wysiwyg/plugins-details.js
index 90fdf84ec..44a0a35ab 100644
--- a/resources/js/wysiwyg/plugins-details.js
+++ b/resources/js/wysiwyg/plugins-details.js
@@ -2,10 +2,13 @@
  * @param {Editor} editor
  * @param {String} url
  */
+import {blockElementTypes} from "./util";
 
 function register(editor, url) {
 
     editor.ui.registry.addIcon('details', '<svg width="24" height="24"><path d="M8.2 9a.5.5 0 0 0-.4.8l4 5.6a.5.5 0 0 0 .8 0l4-5.6a.5.5 0 0 0-.4-.8ZM20.122 18.151h-16c-.964 0-.934 2.7 0 2.7h16c1.139 0 1.173-2.7 0-2.7zM20.122 3.042h-16c-.964 0-.934 2.7 0 2.7h16c1.139 0 1.173-2.7 0-2.7z"/></svg>');
+    editor.ui.registry.addIcon('togglefold', '<svg height="24"  width="24"><path d="M8.12 19.3c.39.39 1.02.39 1.41 0L12 16.83l2.47 2.47c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41l-3.17-3.17c-.39-.39-1.02-.39-1.41 0l-3.17 3.17c-.4.38-.4 1.02-.01 1.41zm7.76-14.6c-.39-.39-1.02-.39-1.41 0L12 7.17 9.53 4.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.03 0 1.42l3.17 3.17c.39.39 1.02.39 1.41 0l3.17-3.17c.4-.39.4-1.03.01-1.42z"/></svg>');
+    editor.ui.registry.addIcon('togglelabel', '<svg height="18" width="18" viewBox="0 0 24 24"><path d="M21.41,11.41l-8.83-8.83C12.21,2.21,11.7,2,11.17,2H4C2.9,2,2,2.9,2,4v7.17c0,0.53,0.21,1.04,0.59,1.41l8.83,8.83 c0.78,0.78,2.05,0.78,2.83,0l7.17-7.17C22.2,13.46,22.2,12.2,21.41,11.41z M6.5,8C5.67,8,5,7.33,5,6.5S5.67,5,6.5,5S8,5.67,8,6.5 S7.33,8,6.5,8z"/></svg>');
 
     editor.ui.registry.addButton('details', {
         icon: 'details',
@@ -17,57 +20,66 @@ function register(editor, url) {
 
     editor.ui.registry.addButton('removedetails', {
         icon: 'table-delete-table',
-        tooltip: 'Unwrap collapsible block',
+        tooltip: 'Unwrap',
         onAction() {
             unwrapDetailsInSelection(editor)
         }
     });
 
     editor.ui.registry.addButton('editdetials', {
-        icon: 'tag',
+        icon: 'togglelabel',
         tooltip: 'Edit label',
         onAction() {
-            const details = getSelectedDetailsBlock(editor);
-            const dialog = editor.windowManager.open(detailsDialog(editor));
-            dialog.setData({summary: getSummaryTextFromDetails(details)});
+            showDetailLabelEditWindow(editor);
         }
     });
 
-    editor.ui.registry.addButton('collapsedetails', {
-        icon: 'action-prev',
-        tooltip: 'Collapse',
-        onAction() {
-            const details = getSelectedDetailsBlock(editor);
-            details.removeAttribute('open');
-            editor.focus();
-        }
+    editor.on('dblclick', event => {
+        if (!getSelectedDetailsBlock(editor) || event.target.closest('doc-root')) return;
+        showDetailLabelEditWindow(editor);
     });
 
-    editor.ui.registry.addButton('expanddetails', {
-        icon: 'action-next',
-        tooltip: 'Expand',
+    editor.ui.registry.addButton('toggledetails', {
+        icon: 'togglefold',
+        tooltip: 'Toggle open/closed',
         onAction() {
             const details = getSelectedDetailsBlock(editor);
-            details.setAttribute('open', 'open');
+            details.toggleAttribute('open');
             editor.focus();
         }
     });
 
     editor.addCommand('InsertDetailsBlock', function () {
-        const content = editor.selection.getContent({format: 'html'});
+        let content = editor.selection.getContent({format: 'html'});
         const details = document.createElement('details');
         const summary = document.createElement('summary');
+        const id = 'details-' + Date.now();
+        details.setAttribute('data-id', id)
         details.appendChild(summary);
-        details.innerHTML += content;
 
+        if (!content) {
+            content = '<p><br></p>';
+        }
+
+        details.innerHTML += content;
         editor.insertContent(details.outerHTML);
+        editor.focus();
+
+        const domDetails = editor.dom.select(`[data-id="${id}"]`)[0] || null;
+        if (domDetails) {
+            const firstChild = domDetails.querySelector('doc-root > *');
+            if (firstChild) {
+                firstChild.focus();
+            }
+            domDetails.removeAttribute('data-id');
+        }
     });
 
     editor.ui.registry.addContextToolbar('details', {
         predicate: function (node) {
             return node.nodeName.toLowerCase() === 'details';
         },
-        items: 'removedetails editdetials collapsedetails expanddetails',
+        items: 'editdetials toggledetails removedetails',
         position: 'node',
         scope: 'node'
     });
@@ -77,6 +89,15 @@ function register(editor, url) {
     });
 }
 
+/**
+ * @param {Editor} editor
+ */
+function showDetailLabelEditWindow(editor) {
+    const details = getSelectedDetailsBlock(editor);
+    const dialog = editor.windowManager.open(detailsDialog(editor));
+    dialog.setData({summary: getSummaryTextFromDetails(details)});
+}
+
 /**
  * @param {Editor} editor
  */
@@ -107,7 +128,7 @@ function detailsDialog(editor) {
                 {
                     type: 'input',
                     name: 'summary',
-                    label: 'Toggle label text',
+                    label: 'Toggle label',
                 },
             ],
         },
@@ -138,7 +159,7 @@ function setSummary(editor, summaryContent) {
         let summary = details.querySelector('summary');
         if (!summary) {
             summary = document.createElement('summary');
-            details.appendChild(summary);
+            details.prepend(summary);
         }
         summary.textContent = summaryContent;
     });
@@ -149,19 +170,21 @@ function setSummary(editor, summaryContent) {
  */
 function unwrapDetailsInSelection(editor) {
     const details = editor.selection.getNode().closest('details');
+    const selectionBm = editor.selection.getBookmark();
+
     if (details) {
-        const summary = details.querySelector('summary');
+        const elements = details.querySelectorAll('details > *:not(summary, doc-root), doc-root > *');
+
         editor.undoManager.transact(() => {
-            if (summary) {
-                summary.remove();
-            }
-            while (details.firstChild) {
-                details.parentNode.insertBefore(details.firstChild, details);
+            for (const element of elements) {
+                details.parentNode.insertBefore(element, details);
             }
             details.remove();
         });
     }
+
     editor.focus();
+    editor.selection.moveToBookmark(selectionBm);
 }
 
 /**
@@ -170,31 +193,69 @@ function unwrapDetailsInSelection(editor) {
 function setupElementFilters(editor) {
     editor.parser.addNodeFilter('details', function(elms) {
         for (const el of elms) {
-            // el.attr('contenteditable', 'false');
-            // console.log(el);
-            // let wrap = el.find('div[detailswrap]');
-            // if (!wrap) {
-            //    wrap = document.createElement('div');
-            //    wrap.setAttribute('detailswrap', 'true');
-            // }
-            //
-            // for (const child of el.children) {
-            //     if (child.nodeName.toLowerCase() === 'summary' || child.hasAttribute('detailswrap')) {
-            //         continue;
-            //     }
-            //     wrap.appendChild(child);
-            // }
-            //
-            // el.appendChild(wrap);
-            // wrap.setAttribute('contenteditable', 'true');
+            ensureDetailsWrappedInEditable(el);
         }
     });
 
     editor.serializer.addNodeFilter('details', function(elms) {
-        for (const summaryEl of elms) {
-            summaryEl.attr('contenteditable', null);
+        for (const el of elms) {
+            unwrapDetailsEditable(el);
+            el.attr('open', null);
         }
     });
+
+    editor.serializer.addNodeFilter('doc-root', function(elms) {
+        for (const el of elms) {
+            el.unwrap();
+        }
+    });
+}
+
+/**
+ * @param {tinymce.html.Node} detailsEl
+ */
+function ensureDetailsWrappedInEditable(detailsEl) {
+    unwrapDetailsEditable(detailsEl);
+
+    detailsEl.attr('contenteditable', 'false');
+    const rootWrap = tinymce.html.Node.create('doc-root', {contenteditable: 'true'});
+    let previousBlockWrap = null;
+
+    for (const child of detailsEl.children()) {
+        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(rootWrap);
+}
+
+/**
+ * @param {tinymce.html.Node} detailsEl
+ */
+function unwrapDetailsEditable(detailsEl) {
+    detailsEl.attr('contenteditable', null);
+    let madeUnwrap = false;
+    for (const child of detailsEl.children()) {
+        if (child.name === 'doc-root') {
+            child.unwrap();
+            madeUnwrap = true;
+        }
+    }
+
+    if (madeUnwrap) {
+        unwrapDetailsEditable(detailsEl);
+    }
 }