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

diff --git a/resources/js/wysiwyg/nodes/custom-table-cell.ts b/resources/js/wysiwyg/nodes/custom-table-cell.ts
index b73a21807..793302cfe 100644
--- a/resources/js/wysiwyg/nodes/custom-table-cell.ts
+++ b/resources/js/wysiwyg/nodes/custom-table-cell.ts
@@ -20,14 +20,17 @@ import {
     TableCellNode
 } from "@lexical/table";
 import {TableCellHeaderState} from "@lexical/table/LexicalTableCellNode";
-import {createStyleMapFromDomStyles, StyleMap} from "../utils/styles";
+import {extractStyleMapFromElement, StyleMap} from "../utils/dom";
+import {CommonBlockAlignment, extractAlignmentFromElement} from "./_common";
 
 export type SerializedCustomTableCellNode = Spread<{
-    styles: Record<string, string>,
+    styles: Record<string, string>;
+    alignment: CommonBlockAlignment;
 }, SerializedTableCellNode>
 
 export class CustomTableCellNode extends TableCellNode {
     __styles: StyleMap = new Map;
+    __alignment: CommonBlockAlignment = '';
 
     static getType(): string {
         return 'custom-table-cell';
@@ -42,9 +45,15 @@ export class CustomTableCellNode extends TableCellNode {
         );
         cellNode.__rowSpan = node.__rowSpan;
         cellNode.__styles = new Map(node.__styles);
+        cellNode.__alignment = node.__alignment;
         return cellNode;
     }
 
+    clearWidth(): void {
+        const self = this.getWritable();
+        self.__width = undefined;
+    }
+
     getStyles(): StyleMap {
         const self = this.getLatest();
         return new Map(self.__styles);
@@ -55,6 +64,16 @@ export class CustomTableCellNode extends TableCellNode {
         self.__styles = new Map(styles);
     }
 
+    setAlignment(alignment: CommonBlockAlignment) {
+        const self = this.getWritable();
+        self.__alignment = alignment;
+    }
+
+    getAlignment(): CommonBlockAlignment {
+        const self = this.getLatest();
+        return self.__alignment;
+    }
+
     updateTag(tag: string): void {
         const isHeader = tag.toLowerCase() === 'th';
         const state = isHeader ? TableCellHeaderStates.ROW : TableCellHeaderStates.NO_STATUS;
@@ -69,12 +88,17 @@ export class CustomTableCellNode extends TableCellNode {
             element.style.setProperty(name, value);
         }
 
+        if (this.__alignment) {
+            element.classList.add('align-' + this.__alignment);
+        }
+
         return element;
     }
 
     updateDOM(prevNode: CustomTableCellNode): boolean {
         return super.updateDOM(prevNode)
-            || this.__styles !== prevNode.__styles;
+            || this.__styles !== prevNode.__styles
+            || this.__alignment !== prevNode.__alignment;
     }
 
     static importDOM(): DOMConversionMap | null {
@@ -105,6 +129,7 @@ export class CustomTableCellNode extends TableCellNode {
         );
 
         node.setStyles(new Map(Object.entries(serializedNode.styles)));
+        node.setAlignment(serializedNode.alignment);
 
         return node;
     }
@@ -114,6 +139,7 @@ export class CustomTableCellNode extends TableCellNode {
             ...super.exportJSON(),
             type: 'custom-table-cell',
             styles: Object.fromEntries(this.__styles),
+            alignment: this.__alignment,
         };
     }
 }
@@ -122,7 +148,8 @@ function $convertCustomTableCellNodeElement(domNode: Node): DOMConversionOutput
     const output =  $convertTableCellNodeElement(domNode);
 
     if (domNode instanceof HTMLElement && output.node instanceof CustomTableCellNode) {
-        output.node.setStyles(createStyleMapFromDomStyles(domNode.style));
+        output.node.setStyles(extractStyleMapFromElement(domNode));
+        output.node.setAlignment(extractAlignmentFromElement(domNode));
     }
 
     return output;
@@ -208,7 +235,7 @@ export function $convertTableCellNodeElement(
 
 
 export function $createCustomTableCellNode(
-    headerState: TableCellHeaderState,
+    headerState: TableCellHeaderState = TableCellHeaderStates.NO_STATUS,
     colSpan = 1,
     width?: number,
 ): CustomTableCellNode {