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

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