diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js index fa2df9c11..1c770f26f 100644 --- a/resources/js/wysiwyg/config.js +++ b/resources/js/wysiwyg/config.js @@ -13,7 +13,7 @@ import {getPlugin as getImagemanagerPlugin} from './plugins-imagemanager'; import {getPlugin as getAboutPlugin} from './plugins-about'; import {getPlugin as getDetailsPlugin} from './plugins-details'; import {getPlugin as getTasklistPlugin} from './plugins-tasklist'; -import {handleEmbedAlignmentChanges} from './fixes'; +import {handleClearFormattingOnTableCells, handleEmbedAlignmentChanges} from './fixes'; const styleFormats = [ {title: 'Large Header', format: 'h2', preview: 'color: blue;'}, @@ -191,6 +191,7 @@ function getSetupCallback(options) { }); handleEmbedAlignmentChanges(editor); + handleClearFormattingOnTableCells(editor); // Custom handler hook window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor}); diff --git a/resources/js/wysiwyg/fixes.js b/resources/js/wysiwyg/fixes.js index 46984b45e..e51c373d9 100644 --- a/resources/js/wysiwyg/fixes.js +++ b/resources/js/wysiwyg/fixes.js @@ -53,3 +53,34 @@ export function handleEmbedAlignmentChanges(editor) { } }); } + +/** + * TinyMCE does not seem to do a great job on clearing styles in complex + * scenarios (like copied word content) when a range of table cells + * are selected. This tracks the selected table cells, and watches + * for clear formatting events, so some manual cleanup can be performed. + * + * The events used don't seem to be advertised by TinyMCE. + * Found at https://github.com/tinymce/tinymce/blob/6.8.3/modules/tinymce/src/models/dom/main/ts/table/api/Events.ts + * @param {Editor} editor + */ +export function handleClearFormattingOnTableCells(editor) { + /** @var {HTMLTableCellElement[]} * */ + let selectedCells = []; + + editor.on('TableSelectionChange', event => { + selectedCells = (event.cells || []).map(cell => cell.dom); + }); + editor.on('TableSelectionClear', () => { + selectedCells = []; + }); + + const attrsToRemove = ['class', 'style', 'width', 'height']; + editor.on('FormatRemove', () => { + for (const cell of selectedCells) { + for (const attr of attrsToRemove) { + cell.removeAttribute(attr); + } + } + }); +}