BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg-tinymce/plugins-table-additions.js

   1 /**
   2  * @param {Editor} editor
   3  */
   4 function register(editor) {
   5     editor.ui.registry.addIcon('tableclearformatting', '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24"><path d="M15.53088 4.64727v-.82364c0-.453-.37063-.82363-.82363-.82363H4.82363C4.37063 3 4 3.37064 4 3.82363v3.29454c0 .453.37064.82364.82363.82364h9.88362c.453 0 .82363-.37064.82363-.82364v-.82363h.82364v3.29454H8.11817v7.4127c0 .453.37064.82364.82364.82364h1.64727c.453 0 .82363-.37064.82363-.82364v-5.76544h6.58907V4.64727Z"/><path d="m18.42672 19.51563-1.54687-1.54688-1.54688 1.54688c-.26751.2675-.70124.2675-.96875 0-.26751-.26752-.26751-.70124 0-.96876L15.9111 17l-1.54688-1.54688c-.26751-.2675-.26751-.70123 0-.96875.26751-.2675.70124-.2675.96875 0l1.54688 1.54688 1.54687-1.54688c.26751-.2675.70124-.2675.96875 0 .26751.26752.26751.70124 0 .96875L17.8486 17l1.54687 1.54688c.26751.2675.26751.70123 0 .96874-.26751.26752-.70124.26752-.96875 0z"/></svg>');
   6
   7     const tableFirstRowContextSpec = {
   8         items: ' | tablerowheader',
   9         predicate(elem) {
  10             const isTable = elem.nodeName.toLowerCase() === 'table';
  11             const selectionNode = editor.selection.getNode();
  12             const parentTable = selectionNode.closest('table');
  13             if (!isTable || !parentTable) {
  14                 return false;
  15             }
  16
  17             const firstRow = parentTable.querySelector('tr');
  18             return firstRow.contains(selectionNode);
  19         },
  20         position: 'node',
  21         scope: 'node',
  22     };
  23     editor.ui.registry.addContextToolbar('customtabletoolbarfirstrow', tableFirstRowContextSpec);
  24
  25     editor.addCommand('tableclearformatting', () => {
  26         const table = editor.dom.getParent(editor.selection.getStart(), 'table');
  27         if (!table) {
  28             return;
  29         }
  30
  31         const attrsToRemove = ['class', 'style', 'width', 'height'];
  32         const styled = [table, ...table.querySelectorAll(attrsToRemove.map(a => `[${a}]`).join(','))];
  33         for (const elem of styled) {
  34             for (const attr of attrsToRemove) {
  35                 elem.removeAttribute(attr);
  36             }
  37         }
  38     });
  39
  40     editor.addCommand('tableclearsizes', () => {
  41         const table = editor.dom.getParent(editor.selection.getStart(), 'table');
  42         if (!table) {
  43             return;
  44         }
  45
  46         const targets = [table, ...table.querySelectorAll('tr,td,th,tbody,thead,tfoot,th>*,td>*')];
  47         for (const elem of targets) {
  48             elem.removeAttribute('width');
  49             elem.removeAttribute('height');
  50             elem.style.height = null;
  51             elem.style.width = null;
  52         }
  53     });
  54
  55     const onPreInit = () => {
  56         const exitingButtons = editor.ui.registry.getAll().buttons;
  57
  58         editor.ui.registry.addMenuButton('customtable', {
  59             ...exitingButtons.table,
  60             fetch: callback => callback('inserttable | cell row column | advtablesort | tableprops tableclearformatting tableclearsizes deletetable'),
  61         });
  62
  63         editor.ui.registry.addMenuItem('tableclearformatting', {
  64             icon: 'tableclearformatting',
  65             text: 'Clear table formatting',
  66             onSetup: exitingButtons.tableprops.onSetup,
  67             onAction() {
  68                 editor.execCommand('tableclearformatting');
  69             },
  70         });
  71
  72         editor.ui.registry.addMenuItem('tableclearsizes', {
  73             icon: 'resize',
  74             text: 'Resize to contents',
  75             onSetup: exitingButtons.tableprops.onSetup,
  76             onAction() {
  77                 editor.execCommand('tableclearsizes');
  78             },
  79         });
  80
  81         editor.off('PreInit', onPreInit);
  82     };
  83
  84     editor.on('PreInit', onPreInit);
  85 }
  86
  87 /**
  88  * @return {register}
  89  */
  90 export function getPlugin() {
  91     return register;
  92 }