BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/plugins-details.js

   1 /**
   2  * @param {Editor} editor
   3  * @param {String} url
   4  */
   5
   6 function register(editor, url) {
   7
   8     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>');
   9     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>');
  10     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>');
  11
  12     editor.ui.registry.addButton('details', {
  13         icon: 'details',
  14         tooltip: 'Insert collapsible block',
  15         onAction() {
  16             editor.execCommand('InsertDetailsBlock');
  17         }
  18     });
  19
  20     editor.ui.registry.addButton('removedetails', {
  21         icon: 'table-delete-table',
  22         tooltip: 'Unwrap',
  23         onAction() {
  24             unwrapDetailsInSelection(editor)
  25         }
  26     });
  27
  28     editor.ui.registry.addButton('editdetials', {
  29         icon: 'togglelabel',
  30         tooltip: 'Edit label',
  31         onAction() {
  32             showDetailLabelEditWindow(editor);
  33         }
  34     });
  35
  36     editor.on('dblclick', event => {
  37         if (!getSelectedDetailsBlock(editor) || event.target.closest('doc-root')) return;
  38         showDetailLabelEditWindow(editor);
  39     });
  40
  41     editor.ui.registry.addButton('toggledetails', {
  42         icon: 'togglefold',
  43         tooltip: 'Toggle open/closed',
  44         onAction() {
  45             const details = getSelectedDetailsBlock(editor);
  46             details.toggleAttribute('open');
  47             editor.focus();
  48         }
  49     });
  50
  51     editor.addCommand('InsertDetailsBlock', function () {
  52         let content = editor.selection.getContent({format: 'html'});
  53         const details = document.createElement('details');
  54         const summary = document.createElement('summary');
  55         const id = 'details-' + Date.now();
  56         details.setAttribute('data-id', id)
  57         details.appendChild(summary);
  58
  59         if (!content) {
  60             content = '<p><br></p>';
  61         }
  62
  63         details.innerHTML += content;
  64         editor.insertContent(details.outerHTML);
  65         editor.focus();
  66
  67         const domDetails = editor.dom.select(`[data-id="${id}"]`);
  68         if (!domDetails.length) {
  69             const firstChild = domDetails.find('doc-root > *');
  70             if (firstChild) {
  71                 firstChild[0].focus();
  72             }
  73             domDetails.removeAttr('data-id');
  74         }
  75     });
  76
  77     editor.ui.registry.addContextToolbar('details', {
  78         predicate: function (node) {
  79             return node.nodeName.toLowerCase() === 'details';
  80         },
  81         items: 'editdetials toggledetails removedetails',
  82         position: 'node',
  83         scope: 'node'
  84     });
  85
  86     editor.on('PreInit', () => {
  87         setupElementFilters(editor);
  88     });
  89 }
  90
  91 /**
  92  * @param {Editor} editor
  93  */
  94 function showDetailLabelEditWindow(editor) {
  95     const details = getSelectedDetailsBlock(editor);
  96     const dialog = editor.windowManager.open(detailsDialog(editor));
  97     dialog.setData({summary: getSummaryTextFromDetails(details)});
  98 }
  99
 100 /**
 101  * @param {Editor} editor
 102  */
 103 function getSelectedDetailsBlock(editor) {
 104     return editor.selection.getNode().closest('details');
 105 }
 106
 107 /**
 108  * @param {Element} element
 109  */
 110 function getSummaryTextFromDetails(element) {
 111     const summary = element.querySelector('summary');
 112     if (!summary) {
 113         return '';
 114     }
 115     return summary.textContent;
 116 }
 117
 118 /**
 119  * @param {Editor} editor
 120  */
 121 function detailsDialog(editor) {
 122     return {
 123         title: 'Edit collapsible block',
 124         body: {
 125             type: 'panel',
 126             items: [
 127                 {
 128                     type: 'input',
 129                     name: 'summary',
 130                     label: 'Toggle label',
 131                 },
 132             ],
 133         },
 134         buttons: [
 135             {
 136                 type: 'cancel',
 137                 text: 'Cancel'
 138             },
 139             {
 140                 type: 'submit',
 141                 text: 'Save',
 142                 primary: true,
 143             }
 144         ],
 145         onSubmit(api) {
 146             const {summary} = api.getData();
 147             setSummary(editor, summary);
 148             api.close();
 149         }
 150     }
 151 }
 152
 153 function setSummary(editor, summaryContent) {
 154     const details = getSelectedDetailsBlock(editor);
 155     if (!details) return;
 156
 157     editor.undoManager.transact(() => {
 158         let summary = details.querySelector('summary');
 159         if (!summary) {
 160             summary = document.createElement('summary');
 161             details.prepend(summary);
 162         }
 163         summary.textContent = summaryContent;
 164     });
 165 }
 166
 167 /**
 168  * @param {Editor} editor
 169  */
 170 function unwrapDetailsInSelection(editor) {
 171     const details = editor.selection.getNode().closest('details');
 172     const selectionBm = editor.selection.getBookmark();
 173
 174     if (details) {
 175         const elements = details.querySelectorAll('details > *:not(summary, doc-root), doc-root > *');
 176
 177         editor.undoManager.transact(() => {
 178             for (const element of elements) {
 179                 details.parentNode.insertBefore(element, details);
 180             }
 181             details.remove();
 182         });
 183     }
 184
 185     editor.focus();
 186     editor.selection.moveToBookmark(selectionBm);
 187 }
 188
 189 /**
 190  * @param {Editor} editor
 191  */
 192 function setupElementFilters(editor) {
 193     editor.parser.addNodeFilter('details', function(elms) {
 194         for (const el of elms) {
 195             ensureDetailsWrappedInEditable(el);
 196         }
 197     });
 198
 199     editor.serializer.addNodeFilter('details', function(elms) {
 200         for (const el of elms) {
 201             unwrapDetailsEditable(el);
 202             el.attr('open', null);
 203         }
 204     });
 205
 206     editor.serializer.addNodeFilter('doc-root', function(elms) {
 207         for (const el of elms) {
 208             el.unwrap();
 209         }
 210     });
 211 }
 212
 213 /**
 214  * @param {tinymce.html.Node} detailsEl
 215  */
 216 function ensureDetailsWrappedInEditable(detailsEl) {
 217     unwrapDetailsEditable(detailsEl);
 218
 219     detailsEl.attr('contenteditable', 'false');
 220     const wrap = tinymce.html.Node.create('doc-root', {contenteditable: 'true'});
 221     for (const child of detailsEl.children()) {
 222         if (child.name !== 'summary') {
 223             wrap.append(child);
 224         }
 225     }
 226
 227     detailsEl.append(wrap);
 228 }
 229
 230 /**
 231  * @param {tinymce.html.Node} detailsEl
 232  */
 233 function unwrapDetailsEditable(detailsEl) {
 234     detailsEl.attr('contenteditable', null);
 235     let madeUnwrap = false;
 236     for (const child of detailsEl.children()) {
 237         if (child.name === 'doc-root') {
 238             child.unwrap();
 239             madeUnwrap = true;
 240         }
 241     }
 242
 243     if (madeUnwrap) {
 244         unwrapDetailsEditable(detailsEl);
 245     }
 246 }
 247
 248
 249 /**
 250  * @param {WysiwygConfigOptions} options
 251  * @return {register}
 252  */
 253 export function getPlugin(options) {
 254     return register;
 255 }