X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/ec965f28c09bf18cab2b615716d902d31ff49cfd..refs/pull/5293/head:/resources/js/wysiwyg/nodes/custom-heading.ts

diff --git a/resources/js/wysiwyg/nodes/custom-heading.ts b/resources/js/wysiwyg/nodes/custom-heading.ts
index dba49898c..5df6245f5 100644
--- a/resources/js/wysiwyg/nodes/custom-heading.ts
+++ b/resources/js/wysiwyg/nodes/custom-heading.ts
@@ -1,19 +1,25 @@
 import {
     DOMConversionMap,
-    DOMConversionOutput, ElementFormatType,
+    DOMConversionOutput,
     LexicalNode,
     Spread
 } from "lexical";
 import {EditorConfig} from "lexical/LexicalEditor";
 import {HeadingNode, HeadingTagType, SerializedHeadingNode} from "@lexical/rich-text";
+import {
+    CommonBlockAlignment, commonPropertiesDifferent, deserializeCommonBlockNode,
+    SerializedCommonBlockNode,
+    setCommonBlockPropsFromElement,
+    updateElementWithCommonBlockProps
+} from "./_common";
 
 
-export type SerializedCustomHeadingNode = Spread<{
-    id: string;
-}, SerializedHeadingNode>
+export type SerializedCustomHeadingNode = Spread<SerializedCommonBlockNode, SerializedHeadingNode>
 
 export class CustomHeadingNode extends HeadingNode {
     __id: string = '';
+    __alignment: CommonBlockAlignment = '';
+    __inset: number = 0;
 
     static getType() {
         return 'custom-heading';
@@ -29,33 +35,58 @@ export class CustomHeadingNode extends HeadingNode {
         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;
+    }
+
     static clone(node: CustomHeadingNode) {
         const newNode = new CustomHeadingNode(node.__tag, node.__key);
-        newNode.__id = node.__id;
+        newNode.__alignment = node.__alignment;
+        newNode.__inset = node.__inset;
         return newNode;
     }
 
     createDOM(config: EditorConfig): HTMLElement {
         const dom = super.createDOM(config);
-        if (this.__id) {
-            dom.setAttribute('id', this.__id);
-        }
-
+        updateElementWithCommonBlockProps(dom, this);
         return dom;
     }
 
+    updateDOM(prevNode: CustomHeadingNode, dom: HTMLElement): boolean {
+        return super.updateDOM(prevNode, dom)
+            || commonPropertiesDifferent(prevNode, this);
+    }
+
     exportJSON(): SerializedCustomHeadingNode {
         return {
             ...super.exportJSON(),
             type: 'custom-heading',
             version: 1,
             id: this.__id,
+            alignment: this.__alignment,
+            inset: this.__inset,
         };
     }
 
     static importJSON(serializedNode: SerializedCustomHeadingNode): CustomHeadingNode {
         const node = $createCustomHeadingNode(serializedNode.tag);
-        node.setId(serializedNode.id);
+        deserializeCommonBlockNode(serializedNode, node);
         return node;
     }
 
@@ -101,12 +132,7 @@ function $convertHeadingElement(element: HTMLElement): DOMConversionOutput {
         nodeName === 'h6'
     ) {
         node = $createCustomHeadingNode(nodeName);
-        if (element.style !== null) {
-            node.setFormat(element.style.textAlign as ElementFormatType);
-        }
-        if (element.id) {
-            node.setId(element.id);
-        }
+        setCommonBlockPropsFromElement(element, node);
     }
     return {node};
 }