Added a custom link context toolbar

[bookstack] / resources / js / wysiwyg / plugins-details.js

diff --git a/resources/js/wysiwyg/plugins-details.js b/resources/js/wysiwyg/plugins-details.js
index 83a29a29d9f4bd2880cc7562fa212af981a8f9d4..bcecf7131e5eeb1125f32ca9d79a05b6e091e7da 100644 (file)
--- a/resources/js/wysiwyg/plugins-details.js
+++ b/resources/js/wysiwyg/plugins-details.js
@@ -29,12 +29,15 @@ function register(editor, url) {
         icon: 'togglelabel',
         tooltip: 'Edit label',
         onAction() {
         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.on('dblclick', event => {
+        if (!getSelectedDetailsBlock(editor) || event.target.closest('doc-root')) return;
+        showDetailLabelEditWindow(editor);
+    });
+

     editor.ui.registry.addButton('toggledetails', {
         icon: 'togglefold',
         tooltip: 'Toggle open/closed',
     editor.ui.registry.addButton('toggledetails', {
         icon: 'togglefold',
         tooltip: 'Toggle open/closed',


@@ -46,13 +49,29 @@ function register(editor, url) {
     });
 
     editor.addCommand('InsertDetailsBlock', function () {
     });
 
     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 details = document.createElement('details');
         const summary = document.createElement('summary');

+        const id = 'details-' + Date.now();
+        details.setAttribute('data-id', id)

         details.appendChild(summary);
         details.appendChild(summary);

-        details.innerHTML += content;

 
 

+        if (!content) {
+            content = '<p><br></p>';
+        }
+
+        details.innerHTML += content;

         editor.insertContent(details.outerHTML);
         editor.insertContent(details.outerHTML);

+        editor.focus();
+
+        const domDetails = editor.dom.$(`[data-id="${id}"]`);
+        if (domDetails) {
+            const firstChild = domDetails.find('doc-root > *');
+            if (firstChild) {
+                firstChild[0].focus();
+            }
+            domDetails.removeAttr('data-id');
+        }

     });
 
     editor.ui.registry.addContextToolbar('details', {
     });
 
     editor.ui.registry.addContextToolbar('details', {


@@ -69,6 +88,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
  */
 /**
  * @param {Editor} editor
  */


@@ -99,7 +127,7 @@ function detailsDialog(editor) {
                 {
                     type: 'input',
                     name: 'summary',
                 {
                     type: 'input',
                     name: 'summary',

-                    label: 'Toggle label text',
+                    label: 'Toggle label',

                 },
             ],
         },
                 },
             ],
         },


@@ -141,19 +169,21 @@ function setSummary(editor, summaryContent) {
  */
 function unwrapDetailsInSelection(editor) {
     const details = editor.selection.getNode().closest('details');
  */
 function unwrapDetailsInSelection(editor) {
     const details = editor.selection.getNode().closest('details');

+    const selectionBm = editor.selection.getBookmark();
+

     if (details) {
     if (details) {

-        const summary = details.querySelector('summary');
+        const elements = details.querySelectorAll('details > *:not(summary, doc-root), doc-root > *');
+

         editor.undoManager.transact(() => {
         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();
         });
     }
             }
             details.remove();
         });
     }

+

     editor.focus();
     editor.focus();

+    editor.selection.moveToBookmark(selectionBm);

 }
 
 /**
 }
 
 /**


@@ -172,19 +202,28 @@ function setupElementFilters(editor) {
             el.attr('open', null);
         }
     });
             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) {
 }
 
 /**
  * @param {tinymce.html.Node} detailsEl
  */
 function ensureDetailsWrappedInEditable(detailsEl) {

+    unwrapDetailsEditable(detailsEl);
+

     detailsEl.attr('contenteditable', 'false');
     detailsEl.attr('contenteditable', 'false');

-    const wrap = tinymce.html.Node.create('div', {detailswrap: 'true', contenteditable: 'true'});
+    const wrap = tinymce.html.Node.create('doc-root', {contenteditable: 'true'});

     for (const child of detailsEl.children()) {
         if (child.name !== 'summary') {
             wrap.append(child);
         }
     }
     for (const child of detailsEl.children()) {
         if (child.name !== 'summary') {
             wrap.append(child);
         }
     }

+

     detailsEl.append(wrap);
 }
 
     detailsEl.append(wrap);
 }
 


@@ -193,11 +232,17 @@ function ensureDetailsWrappedInEditable(detailsEl) {
  */
 function unwrapDetailsEditable(detailsEl) {
     detailsEl.attr('contenteditable', null);
  */
 function unwrapDetailsEditable(detailsEl) {
     detailsEl.attr('contenteditable', null);

+    let madeUnwrap = false;

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

-        if (child.attr('detailswrap')) {
+        if (child.name === 'doc-root') {

             child.unwrap();
             child.unwrap();

+            madeUnwrap = true;

         }
     }
         }
     }

+
+    if (madeUnwrap) {
+        unwrapDetailsEditable(detailsEl);
+    }

 }
 
 
 }