Merge branch 'rashadkhan359/development' into development

[bookstack] / resources / js / wysiwyg / nodes / custom-paragraph.ts

diff --git a/resources/js/wysiwyg/nodes/custom-paragraph.ts b/resources/js/wysiwyg/nodes/custom-paragraph.ts
index f13cef56f31b3742f8a21d3203423432a3f4d7f7..3adc10d0e9c2d6cf85afee72596e1474d9261fba 100644 (file)
--- a/resources/js/wysiwyg/nodes/custom-paragraph.ts
+++ b/resources/js/wysiwyg/nodes/custom-paragraph.ts
@@ -1,21 +1,24 @@
 import {
     DOMConversion,
     DOMConversionMap,
-    DOMConversionOutput, ElementFormatType,
+    DOMConversionOutput,
     LexicalNode,
-    ParagraphNode,
-    SerializedParagraphNode,
-    Spread
+    ParagraphNode, SerializedParagraphNode, Spread,
 } from "lexical";
 import {EditorConfig} from "lexical/LexicalEditor";
+import {
+    CommonBlockAlignment, commonPropertiesDifferent, deserializeCommonBlockNode,
+    SerializedCommonBlockNode,
+    setCommonBlockPropsFromElement,
+    updateElementWithCommonBlockProps
+} from "./_common";
 
-
-export type SerializedCustomParagraphNode = Spread<{
-    id: string;
-}, SerializedParagraphNode>
+export type SerializedCustomParagraphNode = Spread<SerializedCommonBlockNode, SerializedParagraphNode>
 
 export class CustomParagraphNode extends ParagraphNode {
     __id: string = '';
+    __alignment: CommonBlockAlignment = '';
+    __inset: number = 0;
 
     static getType() {
         return 'custom-paragraph';
@@ -31,34 +34,59 @@ export class CustomParagraphNode extends ParagraphNode {
         return self.__id;
     }
 
-    static clone(node: CustomParagraphNode) {
+    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: CustomParagraphNode): CustomParagraphNode {
         const newNode = new CustomParagraphNode(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);
-        const id = this.getId();
-        if (id) {
-            dom.setAttribute('id', id);
-        }
-
+        updateElementWithCommonBlockProps(dom, this);
         return dom;
     }
 
+    updateDOM(prevNode: CustomParagraphNode, dom: HTMLElement, config: EditorConfig): boolean {
+        return super.updateDOM(prevNode, dom, config)
+            || commonPropertiesDifferent(prevNode, this);
+    }
+
     exportJSON(): SerializedCustomParagraphNode {
         return {
             ...super.exportJSON(),
             type: 'custom-paragraph',
             version: 1,
             id: this.__id,
+            alignment: this.__alignment,
+            inset: this.__inset,
         };
     }
 
     static importJSON(serializedNode: SerializedCustomParagraphNode): CustomParagraphNode {
         const node = $createCustomParagraphNode();
-        node.setId(serializedNode.id);
+        deserializeCommonBlockNode(serializedNode, node);
         return node;
     }
 
@@ -68,17 +96,14 @@ export class CustomParagraphNode extends ParagraphNode {
                 return {
                     conversion: (element: HTMLElement): DOMConversionOutput|null => {
                         const node = $createCustomParagraphNode();
-                        if (element.style) {
-                            node.setFormat(element.style.textAlign as ElementFormatType);
+                        if (element.style.textIndent) {
                             const indent = parseInt(element.style.textIndent, 10) / 20;
                             if (indent > 0) {
                                 node.setIndent(indent);
                             }
                         }
 
-                        if (element.id) {
-                            node.setId(element.id);
-                        }
+                        setCommonBlockPropsFromElement(element, node);
 
                         return {node};
                     },
@@ -89,10 +114,10 @@ export class CustomParagraphNode extends ParagraphNode {
     }
 }
 
-export function $createCustomParagraphNode() {
+export function $createCustomParagraphNode(): CustomParagraphNode {
     return new CustomParagraphNode();
 }
 
-export function $isCustomParagraphNode(node: LexicalNode | null | undefined) {
+export function $isCustomParagraphNode(node: LexicalNode | null | undefined): node is CustomParagraphNode {
     return node instanceof CustomParagraphNode;
 }
\ No newline at end of file