Tables: Added dynamic table header toggle

[bookstack] / resources / js / wysiwyg / fixes.js

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);
+            }
+        }
+    });
+}