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             const details = getSelectedDetailsBlock(editor);
  33             const dialog = editor.windowManager.open(detailsDialog(editor));
  34             dialog.setData({summary: getSummaryTextFromDetails(details)});
  35         }
  36     });
  37
  38     editor.ui.registry.addButton('toggledetails', {
  39         icon: 'togglefold',
  40         tooltip: 'Toggle open/closed',
  41         onAction() {
  42             const details = getSelectedDetailsBlock(editor);
  43             details.toggleAttribute('open');
  44             editor.focus();
  45         }
  46     });
  47
  48     editor.addCommand('InsertDetailsBlock', function () {
  49         const content = editor.selection.getContent({format: 'html'});
  50         const details = document.createElement('details');
  51         const summary = document.createElement('summary');
  52         details.appendChild(summary);
  53         details.innerHTML += content;
  54
  55         editor.insertContent(details.outerHTML);
  56     });
  57
  58     editor.ui.registry.addContextToolbar('details', {
  59         predicate: function (node) {
  60             return node.nodeName.toLowerCase() === 'details';
  61         },
  62         items: 'editdetials toggledetails removedetails',
  63         position: 'node',
  64         scope: 'node'
  65     });
  66
  67     editor.on('PreInit', () => {
  68         setupElementFilters(editor);
  69     });
  70 }
  71
  72 /**
  73  * @param {Editor} editor
  74  */
  75 function getSelectedDetailsBlock(editor) {
  76     return editor.selection.getNode().closest('details');
  77 }
  78
  79 /**
  80  * @param {Element} element
  81  */
  82 function getSummaryTextFromDetails(element) {
  83     const summary = element.querySelector('summary');
  84     if (!summary) {
  85         return '';
  86     }
  87     return summary.textContent;
  88 }
  89
  90 /**
  91  * @param {Editor} editor
  92  */
  93 function detailsDialog(editor) {
  94     return {
  95         title: 'Edit collapsible block',
  96         body: {
  97             type: 'panel',
  98             items: [
  99                 {
 100                     type: 'input',
 101                     name: 'summary',
 102                     label: 'Toggle label text',
 103                 },
 104             ],
 105         },
 106         buttons: [
 107             {
 108                 type: 'cancel',
 109                 text: 'Cancel'
 110             },
 111             {
 112                 type: 'submit',
 113                 text: 'Save',
 114                 primary: true,
 115             }
 116         ],
 117         onSubmit(api) {
 118             const {summary} = api.getData();
 119             setSummary(editor, summary);
 120             api.close();
 121         }
 122     }
 123 }
 124
 125 function setSummary(editor, summaryContent) {
 126     const details = getSelectedDetailsBlock(editor);
 127     if (!details) return;
 128
 129     editor.undoManager.transact(() => {
 130         let summary = details.querySelector('summary');
 131         if (!summary) {
 132             summary = document.createElement('summary');
 133             details.prepend(summary);
 134         }
 135         summary.textContent = summaryContent;
 136     });
 137 }
 138
 139 /**
 140  * @param {Editor} editor
 141  */
 142 function unwrapDetailsInSelection(editor) {
 143     const details = editor.selection.getNode().closest('details');
 144     if (details) {
 145         const summary = details.querySelector('summary');
 146         editor.undoManager.transact(() => {
 147             if (summary) {
 148                 summary.remove();
 149             }
 150             while (details.firstChild) {
 151                 details.parentNode.insertBefore(details.firstChild, details);
 152             }
 153             details.remove();
 154         });
 155     }
 156     editor.focus();
 157 }
 158
 159 /**
 160  * @param {Editor} editor
 161  */
 162 function setupElementFilters(editor) {
 163     editor.parser.addNodeFilter('details', function(elms) {
 164         for (const el of elms) {
 165             ensureDetailsWrappedInEditable(el);
 166         }
 167     });
 168
 169     editor.serializer.addNodeFilter('details', function(elms) {
 170         for (const el of elms) {
 171             unwrapDetailsEditable(el);
 172             el.attr('open', null);
 173         }
 174     });
 175 }
 176
 177 /**
 178  * @param {tinymce.html.Node} detailsEl
 179  */
 180 function ensureDetailsWrappedInEditable(detailsEl) {
 181     detailsEl.attr('contenteditable', 'false');
 182     const wrap = tinymce.html.Node.create('div', {detailswrap: 'true', contenteditable: 'true'});
 183     for (const child of detailsEl.children()) {
 184         if (child.name !== 'summary') {
 185             wrap.append(child);
 186         }
 187     }
 188     detailsEl.append(wrap);
 189 }
 190
 191 /**
 192  * @param {tinymce.html.Node} detailsEl
 193  */
 194 function unwrapDetailsEditable(detailsEl) {
 195     detailsEl.attr('contenteditable', null);
 196     for (const child of detailsEl.children()) {
 197         if (child.attr('detailswrap')) {
 198             child.unwrap();
 199         }
 200     }
 201 }
 202
 203
 204 /**
 205  * @param {WysiwygConfigOptions} options
 206  * @return {register}
 207  */
 208 export function getPlugin(options) {
 209     return register;
 210 }