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

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