X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/f4dd38ea9409193aee6daafc8fe509fd95cd0421..refs/pull/4467/head:/resources/js/wysiwyg/plugins-details.js
diff --git a/resources/js/wysiwyg/plugins-details.js b/resources/js/wysiwyg/plugins-details.js
index 44a0a35ab..c4a6d927d 100644
--- a/resources/js/wysiwyg/plugins-details.js
+++ b/resources/js/wysiwyg/plugins-details.js
@@ -1,102 +1,4 @@
-/**
- * @param {Editor} editor
- * @param {String} url
- */
-import {blockElementTypes} from "./util";
-
-function register(editor, url) {
-
- 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', function () {
- 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: function (node) {
- return node.nodeName.toLowerCase() === 'details';
- },
- items: 'editdetials toggledetails removedetails',
- position: 'node',
- scope: 'node'
- });
-
- editor.on('PreInit', () => {
- setupElementFilters(editor);
- });
-}
-
-/**
- * @param {Editor} editor
- */
-function showDetailLabelEditWindow(editor) {
- const details = getSelectedDetailsBlock(editor);
- const dialog = editor.windowManager.open(detailsDialog(editor));
- dialog.setData({summary: getSummaryTextFromDetails(details)});
-}
+import {blockElementTypes} from './util';
/**
* @param {Editor} editor
@@ -105,15 +7,18 @@ 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;
+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;
+ });
}
/**
@@ -135,34 +40,40 @@ function detailsDialog(editor) {
buttons: [
{
type: 'cancel',
- text: '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;
}
-function setSummary(editor, summaryContent) {
+/**
+ * @param {Editor} editor
+ */
+function showDetailLabelEditWindow(editor) {
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;
- });
+ const dialog = editor.windowManager.open(detailsDialog(editor));
+ dialog.setData({summary: getSummaryTextFromDetails(details)});
}
/**
@@ -188,27 +99,21 @@ function unwrapDetailsInSelection(editor) {
}
/**
- * @param {Editor} editor
+ * @param {tinymce.html.Node} detailsEl
*/
-function setupElementFilters(editor) {
- editor.parser.addNodeFilter('details', function(elms) {
- for (const el of elms) {
- ensureDetailsWrappedInEditable(el);
- }
- });
-
- editor.serializer.addNodeFilter('details', function(elms) {
- for (const el of elms) {
- unwrapDetailsEditable(el);
- el.attr('open', null);
+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;
}
- });
+ }
- editor.serializer.addNodeFilter('doc-root', function(elms) {
- for (const el of elms) {
- el.unwrap();
- }
- });
+ if (madeUnwrap) {
+ unwrapDetailsEditable(detailsEl);
+ }
}
/**
@@ -218,7 +123,7 @@ function ensureDetailsWrappedInEditable(detailsEl) {
unwrapDetailsEditable(detailsEl);
detailsEl.attr('contenteditable', 'false');
- const rootWrap = tinymce.html.Node.create('doc-root', {contenteditable: 'true'});
+ const rootWrap = window.tinymce.html.Node.create('doc-root', {contenteditable: 'true'});
let previousBlockWrap = null;
for (const child of detailsEl.children()) {
@@ -227,7 +132,7 @@ function ensureDetailsWrappedInEditable(detailsEl) {
if (!isBlock) {
if (!previousBlockWrap) {
- previousBlockWrap = tinymce.html.Node.create('p');
+ previousBlockWrap = window.tinymce.html.Node.create('p');
rootWrap.append(previousBlockWrap);
}
previousBlockWrap.append(child);
@@ -241,28 +146,119 @@ function ensureDetailsWrappedInEditable(detailsEl) {
}
/**
- * @param {tinymce.html.Node} detailsEl
+ * @param {Editor} editor
*/
-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;
+function setupElementFilters(editor) {
+ editor.parser.addNodeFilter('details', elms => {
+ for (const el of elms) {
+ ensureDetailsWrappedInEditable(el);
}
- }
+ });
- if (madeUnwrap) {
- unwrapDetailsEditable(detailsEl);
- }
+ 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);
+ });
+}
/**
- * @param {WysiwygConfigOptions} options
* @return {register}
*/
-export function getPlugin(options) {
+export function getPlugin() {
return register;
-}
\ No newline at end of file
+}