Started support for WYSIWYG details/summary blocks

resources/js/wysiwyg/plugins-details.js

@@ -0,0 +1,207 @@
+/**
+ * @param {Editor} editor
+ * @param {String} url
+ */
+
+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.addButton('details', {
+        icon: 'details',
+        tooltip: 'Insert collapsible block',
+        onAction() {
+            editor.execCommand('InsertDetailsBlock');
+        }
+    });
+
+    editor.ui.registry.addButton('removedetails', {
+        icon: 'table-delete-table',
+        tooltip: 'Unwrap collapsible block',
+        onAction() {
+            unwrapDetailsInSelection(editor)
+        }
+    });
+
+    editor.ui.registry.addButton('editdetials', {
+        icon: 'tag',
+        tooltip: 'Edit label',
+        onAction() {
+            const details = getSelectedDetailsBlock(editor);
+            const dialog = editor.windowManager.open(detailsDialog(editor));
+            dialog.setData({summary: getSummaryTextFromDetails(details)});
+        }
+    });
+
+    editor.ui.registry.addButton('collapsedetails', {
+        icon: 'action-prev',
+        tooltip: 'Collapse',
+        onAction() {
+            const details = getSelectedDetailsBlock(editor);
+            details.removeAttribute('open');
+            editor.focus();
+        }
+    });
+
+    editor.ui.registry.addButton('expanddetails', {
+        icon: 'action-next',
+        tooltip: 'Expand',
+        onAction() {
+            const details = getSelectedDetailsBlock(editor);
+            details.setAttribute('open', 'open');
+            editor.focus();
+        }
+    });
+
+    editor.addCommand('InsertDetailsBlock', function () {
+        const content = editor.selection.getContent({format: 'html'});
+        const details = document.createElement('details');
+        const summary = document.createElement('summary');
+        details.appendChild(summary);
+        details.innerHTML += content;
+
+        editor.insertContent(details.outerHTML);
+    });
+
+    editor.ui.registry.addContextToolbar('details', {
+        predicate: function (node) {
+            return node.nodeName.toLowerCase() === 'details';
+        },
+        items: 'removedetails editdetials collapsedetails expanddetails',
+        position: 'node',
+        scope: 'node'
+    });
+
+    editor.on('PreInit', () => {
+        setupElementFilters(editor);
+    });
+}
+
+/**
+ * @param {Editor} editor
+ */
+function getSelectedDetailsBlock(editor) {
+    return editor.selection.getNode().closest('details');
+}
+
+/**
+ * @param {Element} element
+ */
+function getSummaryTextFromDetails(element) {
+    const summary = element.querySelector('summary');
+    if (!summary) {
+        return '';
+    }
+    return summary.textContent;
+}
+
+/**
+ * @param {Editor} editor
+ */
+function detailsDialog(editor) {
+    return {
+        title: 'Edit collapsible block',
+        body: {
+            type: 'panel',
+            items: [
+                {
+                    type: 'input',
+                    name: 'summary',
+                    label: 'Toggle label text',
+                },
+            ],
+        },
+        buttons: [
+            {
+                type: 'cancel',
+                text: 'Cancel'
+            },
+            {
+                type: 'submit',
+                text: 'Save',
+                primary: true,
+            }
+        ],
+        onSubmit(api) {
+            const {summary} = api.getData();
+            setSummary(editor, summary);
+            api.close();
+        }
+    }
+}
+
+function setSummary(editor, summaryContent) {
+    const details = getSelectedDetailsBlock(editor);
+    if (!details) return;
+
+    editor.undoManager.transact(() => {
+        let summary = details.querySelector('summary');
+        if (!summary) {
+            summary = document.createElement('summary');
+            details.appendChild(summary);
+        }
+        summary.textContent = summaryContent;
+    });
+}
+
+/**
+ * @param {Editor} editor
+ */
+function unwrapDetailsInSelection(editor) {
+    const details = editor.selection.getNode().closest('details');
+    if (details) {
+        const summary = details.querySelector('summary');
+        editor.undoManager.transact(() => {
+            if (summary) {
+                summary.remove();
+            }
+            while (details.firstChild) {
+                details.parentNode.insertBefore(details.firstChild, details);
+            }
+            details.remove();
+        });
+    }
+    editor.focus();
+}
+
+/**
+ * @param {Editor} 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');
+        }
+    });
+
+    editor.serializer.addNodeFilter('details', function(elms) {
+        for (const summaryEl of elms) {
+            summaryEl.attr('contenteditable', null);
+        }
+    });
+}
+
+
+/**
+ * @param {WysiwygConfigOptions} options
+ * @return {register}
+ */
+export function getPlugin(options) {
+    return register;
+}