Lexical: Source code input changes

[bookstack] / resources / js / wysiwyg / lexical / table / LexicalTableNode.ts

diff --git a/resources/js/wysiwyg/lexical/table/LexicalTableNode.ts b/resources/js/wysiwyg/lexical/table/LexicalTableNode.ts
index ab163005370a4f246701511e5d21c8f646870f64..460223bc9ce9dc54d4b56d7c64b8e916ad94e24a 100644 (file)
--- a/resources/js/wysiwyg/lexical/table/LexicalTableNode.ts
+++ b/resources/js/wysiwyg/lexical/table/LexicalTableNode.ts
@@ -15,27 +15,28 @@ import {
   LexicalEditor,
   LexicalNode,
   NodeKey,
-  SerializedElementNode, Spread,
+  Spread,
 } from 'lexical';
 
 import {addClassNamesToElement, isHTMLElement} from '@lexical/utils';
 import {
   $applyNodeReplacement,
   $getNearestNodeFromDOMNode,
-  ElementNode,
+
 } from 'lexical';
 
 import {$isTableCellNode} from './LexicalTableCellNode';
 import {TableDOMCell, TableDOMTable} from './LexicalTableObserver';
 import {getTable} from './LexicalTableSelectionHelpers';
-import {CommonBlockNode, copyCommonBlockProperties} from "lexical/nodes/CommonBlockNode";
+import {CommonBlockNode, copyCommonBlockProperties, SerializedCommonBlockNode} from "lexical/nodes/CommonBlockNode";
 import {
+  applyCommonPropertyChanges,
   commonPropertiesDifferent, deserializeCommonBlockNode,
-  SerializedCommonBlockNode, setCommonBlockPropsFromElement,
+  setCommonBlockPropsFromElement,
   updateElementWithCommonBlockProps
-} from "../../nodes/_common";
+} from "lexical/nodes/common";
 import {el, extractStyleMapFromElement, StyleMap} from "../../utils/dom";
-import {getTableColumnWidths} from "../../utils/tables";
+import {buildColgroupFromTableWidths, getTableColumnWidths} from "../../utils/tables";
 
 export type SerializedTableNode = Spread<{
   colWidths: string[];
@@ -54,7 +55,7 @@ export class TableNode extends CommonBlockNode {
   static clone(node: TableNode): TableNode {
     const newNode = new TableNode(node.__key);
     copyCommonBlockProperties(node, newNode);
-    newNode.__colWidths = node.__colWidths;
+    newNode.__colWidths = [...node.__colWidths];
     newNode.__styles = new Map(node.__styles);
     return newNode;
   }
@@ -98,15 +99,8 @@ export class TableNode extends CommonBlockNode {
     updateElementWithCommonBlockProps(tableElement, this);
 
     const colWidths = this.getColWidths();
-    if (colWidths.length > 0) {
-      const colgroup = el('colgroup');
-      for (const width of colWidths) {
-        const col = el('col');
-        if (width) {
-          col.style.width = width;
-        }
-        colgroup.append(col);
-      }
+    const colgroup = buildColgroupFromTableWidths(colWidths);
+    if (colgroup) {
       tableElement.append(colgroup);
     }
 
@@ -117,11 +111,29 @@ export class TableNode extends CommonBlockNode {
     return tableElement;
   }
 
-  updateDOM(_prevNode: TableNode): boolean {
-    return commonPropertiesDifferent(_prevNode, this)
-      || this.__colWidths.join(':') !== _prevNode.__colWidths.join(':')
-      || this.__styles.size !== _prevNode.__styles.size
-      || (Array.from(this.__styles.values()).join(':') !== (Array.from(_prevNode.__styles.values()).join(':')));
+  updateDOM(_prevNode: TableNode, dom: HTMLElement): boolean {
+    applyCommonPropertyChanges(_prevNode, this, dom);
+
+    if (this.__colWidths.join(':') !== _prevNode.__colWidths.join(':')) {
+      const existingColGroup = Array.from(dom.children).find(child => child.nodeName === 'COLGROUP');
+      const newColGroup = buildColgroupFromTableWidths(this.__colWidths);
+      if (existingColGroup) {
+        existingColGroup.remove();
+      }
+
+      if (newColGroup) {
+        dom.prepend(newColGroup);
+      }
+    }
+
+    if (Array.from(this.__styles.values()).join(':') !== Array.from(_prevNode.__styles.values()).join(':')) {
+      dom.style.cssText = '';
+      for (const [name, value] of this.__styles.entries()) {
+        dom.style.setProperty(name, value);
+      }
+    }
+
+    return false;
   }
 
   exportDOM(editor: LexicalEditor): DOMExportOutput {
@@ -139,6 +151,8 @@ export class TableNode extends CommonBlockNode {
           for (const child of Array.from(tableElement.children)) {
             if (child.nodeName === 'TR') {
               tBody.append(child);
+            } else if (child.nodeName === 'CAPTION') {
+              newElement.insertBefore(child, newElement.firstChild);
             } else {
               newElement.append(child);
             }
@@ -167,7 +181,7 @@ export class TableNode extends CommonBlockNode {
 
   getColWidths(): string[] {
     const self = this.getLatest();
-    return self.__colWidths;
+    return [...self.__colWidths];
   }
 
   getStyles(): StyleMap {