X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/b3d3b14f79552299ce558083383cf05c2f1a7d90..refs/pull/5313/head:/resources/js/wysiwyg/nodes/custom-table.ts

diff --git a/resources/js/wysiwyg/nodes/custom-table.ts b/resources/js/wysiwyg/nodes/custom-table.ts
index 99351d852..c25c06c65 100644
--- a/resources/js/wysiwyg/nodes/custom-table.ts
+++ b/resources/js/wysiwyg/nodes/custom-table.ts
@@ -2,17 +2,26 @@ import {SerializedTableNode, TableNode} from "@lexical/table";
 import {DOMConversion, DOMConversionMap, DOMConversionOutput, LexicalNode, Spread} from "lexical";
 import {EditorConfig} from "lexical/LexicalEditor";
 
-import {el} from "../utils/dom";
+import {el, extractStyleMapFromElement, StyleMap} from "../utils/dom";
 import {getTableColumnWidths} from "../utils/tables";
-
-export type SerializedCustomTableNode = Spread<{
-    id: string;
+import {
+    CommonBlockAlignment, deserializeCommonBlockNode,
+    SerializedCommonBlockNode,
+    setCommonBlockPropsFromElement,
+    updateElementWithCommonBlockProps
+} from "./_common";
+
+export type SerializedCustomTableNode = Spread<Spread<{
     colWidths: string[];
-}, SerializedTableNode>
+    styles: Record<string, string>,
+}, SerializedTableNode>, SerializedCommonBlockNode>
 
 export class CustomTableNode extends TableNode {
     __id: string = '';
     __colWidths: string[] = [];
+    __styles: StyleMap = new Map;
+    __alignment: CommonBlockAlignment = '';
+    __inset: number = 0;
 
     static getType() {
         return 'custom-table';
@@ -28,6 +37,26 @@ export class CustomTableNode extends TableNode {
         return self.__id;
     }
 
+    setAlignment(alignment: CommonBlockAlignment) {
+        const self = this.getWritable();
+        self.__alignment = alignment;
+    }
+
+    getAlignment(): CommonBlockAlignment {
+        const self = this.getLatest();
+        return self.__alignment;
+    }
+
+    setInset(size: number) {
+        const self = this.getWritable();
+        self.__inset = size;
+    }
+
+    getInset(): number {
+        const self = this.getLatest();
+        return self.__inset;
+    }
+
     setColWidths(widths: string[]) {
         const self = this.getWritable();
         self.__colWidths = widths;
@@ -38,19 +67,29 @@ export class CustomTableNode extends TableNode {
         return self.__colWidths;
     }
 
+    getStyles(): StyleMap {
+        const self = this.getLatest();
+        return new Map(self.__styles);
+    }
+
+    setStyles(styles: StyleMap): void {
+        const self = this.getWritable();
+        self.__styles = new Map(styles);
+    }
+
     static clone(node: CustomTableNode) {
         const newNode = new CustomTableNode(node.__key);
         newNode.__id = node.__id;
         newNode.__colWidths = node.__colWidths;
+        newNode.__styles = new Map(node.__styles);
+        newNode.__alignment = node.__alignment;
+        newNode.__inset = node.__inset;
         return newNode;
     }
 
     createDOM(config: EditorConfig): HTMLElement {
         const dom = super.createDOM(config);
-        const id = this.getId();
-        if (id) {
-            dom.setAttribute('id', id);
-        }
+        updateElementWithCommonBlockProps(dom, this);
 
         const colWidths = this.getColWidths();
         if (colWidths.length > 0) {
@@ -65,6 +104,10 @@ export class CustomTableNode extends TableNode {
             dom.append(colgroup);
         }
 
+        for (const [name, value] of this.__styles.entries()) {
+            dom.style.setProperty(name, value);
+        }
+
         return dom;
     }
 
@@ -79,13 +122,17 @@ export class CustomTableNode extends TableNode {
             version: 1,
             id: this.__id,
             colWidths: this.__colWidths,
+            styles: Object.fromEntries(this.__styles),
+            alignment: this.__alignment,
+            inset: this.__inset,
         };
     }
 
     static importJSON(serializedNode: SerializedCustomTableNode): CustomTableNode {
         const node = $createCustomTableNode();
-        node.setId(serializedNode.id);
+        deserializeCommonBlockNode(serializedNode, node);
         node.setColWidths(serializedNode.colWidths);
+        node.setStyles(new Map(Object.entries(serializedNode.styles)));
         return node;
     }
 
@@ -95,13 +142,11 @@ export class CustomTableNode extends TableNode {
                 return {
                     conversion: (element: HTMLElement): DOMConversionOutput|null => {
                         const node = $createCustomTableNode();
-
-                        if (element.id) {
-                            node.setId(element.id);
-                        }
+                        setCommonBlockPropsFromElement(element, node);
 
                         const colWidths = getTableColumnWidths(element as HTMLTableElement);
                         node.setColWidths(colWidths);
+                        node.setStyles(extractStyleMapFromElement(element));
 
                         return {node};
                     },