diff --git a/lang/en/editor.php b/lang/en/editor.php index 670c1c5e1..bf0ea4656 100644 --- a/lang/en/editor.php +++ b/lang/en/editor.php @@ -81,6 +81,8 @@ return [ 'table_properties' => 'Table properties', 'table_properties_title' => 'Table Properties', 'delete_table' => 'Delete table', + 'table_clear_formatting' => 'Clear table formatting', + 'resize_to_contents' => 'Resize to contents', 'insert_row_before' => 'Insert row before', 'insert_row_after' => 'Insert row after', 'delete_row' => 'Delete row', diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js index 1c770f26f..30dc6969d 100644 --- a/resources/js/wysiwyg/config.js +++ b/resources/js/wysiwyg/config.js @@ -12,6 +12,7 @@ import {getPlugin as getCustomhrPlugin} from './plugins-customhr'; import {getPlugin as getImagemanagerPlugin} from './plugins-imagemanager'; import {getPlugin as getAboutPlugin} from './plugins-about'; import {getPlugin as getDetailsPlugin} from './plugins-details'; +import {getPlugin as getTableAdditionsPlugin} from './plugins-table-additions'; import {getPlugin as getTasklistPlugin} from './plugins-tasklist'; import {handleClearFormattingOnTableCells, handleEmbedAlignmentChanges} from './fixes'; @@ -124,6 +125,7 @@ function gatherPlugins(options) { 'about', 'details', 'tasklist', + 'tableadditions', options.textDirection === 'rtl' ? 'directionality' : '', ]; @@ -133,6 +135,7 @@ function gatherPlugins(options) { window.tinymce.PluginManager.add('about', getAboutPlugin()); window.tinymce.PluginManager.add('details', getDetailsPlugin()); window.tinymce.PluginManager.add('tasklist', getTasklistPlugin()); + window.tinymce.PluginManager.add('tableadditions', getTableAdditionsPlugin()); if (options.drawioUrl) { window.tinymce.PluginManager.add('drawio', getDrawioPlugin(options)); diff --git a/resources/js/wysiwyg/plugins-table-additions.js b/resources/js/wysiwyg/plugins-table-additions.js new file mode 100644 index 000000000..fcb774af1 --- /dev/null +++ b/resources/js/wysiwyg/plugins-table-additions.js @@ -0,0 +1,73 @@ +/** + * @param {Editor} editor + */ +function register(editor) { + editor.ui.registry.addIcon('tableclearformatting', ''); + 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; +} diff --git a/resources/js/wysiwyg/toolbars.js b/resources/js/wysiwyg/toolbars.js index 4663ad132..bd1ff1b6d 100644 --- a/resources/js/wysiwyg/toolbars.js +++ b/resources/js/wysiwyg/toolbars.js @@ -12,7 +12,7 @@ export function getPrimaryToolbar(options) { 'alignleft aligncenter alignright alignjustify', 'bullist numlist listoverflow', textDirPlugins, - 'link table imagemanager-insert insertoverflow', + 'link customtable imagemanager-insert insertoverflow', 'code about fullscreen', ];