/** * @param {Editor} editor */ function register(editor) { editor.ui.registry.addIcon('tableclearformatting', ''); const tableFirstRowContextSpec = { items: ' | tablerowheader', predicate(elem) { const isTable = elem.nodeName.toLowerCase() === 'table'; const selectionNode = editor.selection.getNode(); const parentTable = selectionNode.closest('table'); if (!isTable || !parentTable) { return false; } const firstRow = parentTable.querySelector('tr'); return firstRow.contains(selectionNode); }, position: 'node', scope: 'node', }; editor.ui.registry.addContextToolbar('customtabletoolbarfirstrow', tableFirstRowContextSpec); editor.addCommand('tableclearformatting', () => { const table = editor.dom.getParent(editor.selection.getStart(), 'table'); if (!table) { return; } const attrsToRemove = ['class', 'style', 'width', 'height']; const styled = [table, ...table.querySelectorAll(attrsToRemove.map(a => `[${a}]`).join(','))]; for (const elem of styled) { for (const attr of attrsToRemove) { elem.removeAttribute(attr); } } }); editor.addCommand('tableclearsizes', () => { const table = editor.dom.getParent(editor.selection.getStart(), 'table'); if (!table) { return; } const targets = [table, ...table.querySelectorAll('tr,td,th,tbody,thead,tfoot,th>*,td>*')]; for (const elem of targets) { elem.removeAttribute('width'); elem.removeAttribute('height'); elem.style.height = null; elem.style.width = null; } }); const onPreInit = () => { const exitingButtons = editor.ui.registry.getAll().buttons; editor.ui.registry.addMenuButton('customtable', { ...exitingButtons.table, fetch: callback => callback('inserttable | cell row column | advtablesort | tableprops tableclearformatting tableclearsizes deletetable'), }); editor.ui.registry.addMenuItem('tableclearformatting', { icon: 'tableclearformatting', text: 'Clear table formatting', onSetup: exitingButtons.tableprops.onSetup, onAction() { editor.execCommand('tableclearformatting'); }, }); editor.ui.registry.addMenuItem('tableclearsizes', { icon: 'resize', text: 'Resize to contents', onSetup: exitingButtons.tableprops.onSetup, onAction() { editor.execCommand('tableclearsizes'); }, }); editor.off('PreInit', onPreInit); }; editor.on('PreInit', onPreInit); } /** * @return {register} */ export function getPlugin() { return register; }