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.$(`[data-id="${id}"]`);
  68         if (domDetails) {
  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
 173     if (details) {
 174         const elements = details.querySelectorAll('details > *:not(summary, doc-root), doc-root > *');
 175
 176         editor.undoManager.transact(() => {
 177             for (const element of elements) {
 178                 details.parentNode.insertBefore(element, details);
 179             }
 180             details.remove();
 181         });
 182     }
 183     editor.focus();
 184 }
 185
 186 /**
 187  * @param {Editor} editor
 188  */
 189 function setupElementFilters(editor) {
 190     editor.parser.addNodeFilter('details', function(elms) {
 191         for (const el of elms) {
 192             ensureDetailsWrappedInEditable(el);
 193         }
 194     });
 195
 196     editor.serializer.addNodeFilter('details', function(elms) {
 197         for (const el of elms) {
 198             unwrapDetailsEditable(el);
 199             el.attr('open', null);
 200         }
 201     });
 202
 203     editor.serializer.addNodeFilter('doc-root', function(elms) {
 204         for (const el of elms) {
 205             el.unwrap();
 206         }
 207     });
 208 }
 209
 210 /**
 211  * @param {tinymce.html.Node} detailsEl
 212  */
 213 function ensureDetailsWrappedInEditable(detailsEl) {
 214     unwrapDetailsEditable(detailsEl);
 215
 216     detailsEl.attr('contenteditable', 'false');
 217     const wrap = tinymce.html.Node.create('doc-root', {contenteditable: 'true'});
 218     for (const child of detailsEl.children()) {
 219         if (child.name !== 'summary') {
 220             wrap.append(child);
 221         }
 222     }
 223
 224     detailsEl.append(wrap);
 225 }
 226
 227 /**
 228  * @param {tinymce.html.Node} detailsEl
 229  */
 230 function unwrapDetailsEditable(detailsEl) {
 231     detailsEl.attr('contenteditable', null);
 232     let madeUnwrap = false;
 233     for (const child of detailsEl.children()) {
 234         if (child.name === 'doc-root') {
 235             child.unwrap();
 236             madeUnwrap = true;
 237         }
 238     }
 239
 240     if (madeUnwrap) {
 241         unwrapDetailsEditable(detailsEl);
 242     }
 243 }
 244
 245
 246 /**
 247  * @param {WysiwygConfigOptions} options
 248  * @return {register}
 249  */
 250 export function getPlugin(options) {
 251     return register;
 252 }