Tables: Added fix to ensure proper clear formatting on cell selections

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index fa2df9c11721277bab2ed7770d1d6a0787b3fada..1c770f26fb4dff07cc37129eb5cc7f8739966c43 100644 (file)
--- 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 46984b45e3d63c2965b035eb717d177b5105250f..e51c373d94f3306c5b477e618053a68d2568bf1f 100644 (file)
--- 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);
+            }
+        }
+    });
+}