* @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',
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'
});
});
}
+/**
+ * @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
*/
{
type: 'input',
name: 'summary',
- label: 'Toggle label text',
+ label: 'Toggle label',
},
],
},
let summary = details.querySelector('summary');
if (!summary) {
summary = document.createElement('summary');
- details.appendChild(summary);
+ details.prepend(summary);
}
summary.textContent = 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);
}
/**
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);
+ }
}
projects / bookstack / blobdiff