import {blockElementTypes} from './util'; /** * @param {Editor} editor */ function getSelectedDetailsBlock(editor) { return editor.selection.getNode().closest('details'); } 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.prepend(summary); } summary.textContent = summaryContent; }); } /** * @param {Editor} editor */ function detailsDialog(editor) { return { title: 'Edit collapsible block', body: { type: 'panel', items: [ { type: 'input', name: 'summary', label: 'Toggle label', }, ], }, buttons: [ { type: 'cancel', text: 'Cancel', }, { type: 'submit', text: 'Save', primary: true, }, ], onSubmit(api) { const {summary} = api.getData(); setSummary(editor, summary); api.close(); }, }; } /** * @param {Element} element */ function getSummaryTextFromDetails(element) { const summary = element.querySelector('summary'); if (!summary) { return ''; } return summary.textContent; } /** * @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 */ function unwrapDetailsInSelection(editor) { const details = editor.selection.getNode().closest('details'); const selectionBm = editor.selection.getBookmark(); if (details) { const elements = details.querySelectorAll('details > *:not(summary, doc-root), doc-root > *'); editor.undoManager.transact(() => { for (const element of elements) { details.parentNode.insertBefore(element, details); } details.remove(); }); } editor.focus(); editor.selection.moveToBookmark(selectionBm); } /** * @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); } } /** * @param {tinymce.html.Node} detailsEl */ function ensureDetailsWrappedInEditable(detailsEl) { unwrapDetailsEditable(detailsEl); detailsEl.attr('contenteditable', 'false'); const rootWrap = window.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 = window.tinymce.html.Node.create('p'); rootWrap.append(previousBlockWrap); } previousBlockWrap.append(child); } else { rootWrap.append(child); previousBlockWrap = null; } } detailsEl.append(rootWrap); } /** * @param {Editor} editor */ function setupElementFilters(editor) { editor.parser.addNodeFilter('details', elms => { for (const el of elms) { ensureDetailsWrappedInEditable(el); } }); editor.serializer.addNodeFilter('details', elms => { for (const el of elms) { unwrapDetailsEditable(el); el.attr('open', null); } }); editor.serializer.addNodeFilter('doc-root', elms => { for (const el of elms) { el.unwrap(); } }); } /** * @param {Editor} editor */ function register(editor) { editor.ui.registry.addIcon('details', ''); editor.ui.registry.addIcon('togglefold', ''); editor.ui.registry.addIcon('togglelabel', ''); 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', onAction() { unwrapDetailsInSelection(editor); }, }); editor.ui.registry.addButton('editdetials', { icon: 'togglelabel', tooltip: 'Edit label', onAction() { 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', onAction() { const details = getSelectedDetailsBlock(editor); details.toggleAttribute('open'); editor.focus(); }, }); editor.addCommand('InsertDetailsBlock', () => { 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); if (!content) { content = '


'; } 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(node) { return node.nodeName.toLowerCase() === 'details'; }, items: 'editdetials toggledetails removedetails', position: 'node', scope: 'node', }); editor.on('PreInit', () => { setupElementFilters(editor); }); } /** * @return {register} */ export function getPlugin() { return register; }