X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/5c343638b67497cc1229aa4acdedff199553a7e4..refs/pull/5312/head:/resources/js/wysiwyg/nodes/details.ts

diff --git a/resources/js/wysiwyg/nodes/details.ts b/resources/js/wysiwyg/nodes/details.ts
index a18c4d858..de87696f3 100644
--- a/resources/js/wysiwyg/nodes/details.ts
+++ b/resources/js/wysiwyg/nodes/details.ts
@@ -4,27 +4,57 @@ import {
     ElementNode,
     LexicalEditor,
     LexicalNode,
-    SerializedElementNode,
+    SerializedElementNode, Spread,
+    EditorConfig,
 } from 'lexical';
-import type {EditorConfig} from "lexical/LexicalEditor";
-import {el} from "../helpers";
+
+import {el} from "../utils/dom";
+import {extractDirectionFromElement} from "./_common";
+
+export type SerializedDetailsNode = Spread<{
+    id: string;
+}, SerializedElementNode>
 
 export class DetailsNode extends ElementNode {
+    __id: string = '';
 
     static getType() {
         return 'details';
     }
 
-    static clone(node: DetailsNode) {
-        return new DetailsNode(node.__key);
+    setId(id: string) {
+        const self = this.getWritable();
+        self.__id = id;
+    }
+
+    getId(): string {
+        const self = this.getLatest();
+        return self.__id;
+    }
+
+    static clone(node: DetailsNode): DetailsNode {
+        const newNode =  new DetailsNode(node.__key);
+        newNode.__id = node.__id;
+        newNode.__dir = node.__dir;
+        return newNode;
     }
 
     createDOM(_config: EditorConfig, _editor: LexicalEditor) {
-        return el('details');
+        const el = document.createElement('details');
+        if (this.__id) {
+            el.setAttribute('id', this.__id);
+        }
+
+        if (this.__dir) {
+            el.setAttribute('dir', this.__dir);
+        }
+
+        return el;
     }
 
     updateDOM(prevNode: DetailsNode, dom: HTMLElement) {
-        return false;
+        return prevNode.__id !== this.__id
+        || prevNode.__dir !== this.__dir;
     }
 
     static importDOM(): DOMConversionMap|null {
@@ -32,9 +62,16 @@ export class DetailsNode extends ElementNode {
             details(node: HTMLElement): DOMConversion|null {
                 return {
                     conversion: (element: HTMLElement): DOMConversionOutput|null => {
-                        return {
-                            node: new DetailsNode(),
-                        };
+                        const node = new DetailsNode();
+                        if (element.id) {
+                            node.setId(element.id);
+                        }
+
+                        if (element.dir) {
+                            node.setDirection(extractDirectionFromElement(element));
+                        }
+
+                        return {node};
                     },
                     priority: 3,
                 };
@@ -42,16 +79,20 @@ export class DetailsNode extends ElementNode {
         };
     }
 
-    exportJSON(): SerializedElementNode {
+    exportJSON(): SerializedDetailsNode {
         return {
             ...super.exportJSON(),
             type: 'details',
             version: 1,
+            id: this.__id,
         };
     }
 
-    static importJSON(serializedNode: SerializedElementNode): DetailsNode {
-        return $createDetailsNode();
+    static importJSON(serializedNode: SerializedDetailsNode): DetailsNode {
+        const node = $createDetailsNode();
+        node.setId(serializedNode.id);
+        node.setDirection(serializedNode.direction);
+        return node;
     }
 
 }
@@ -60,7 +101,7 @@ export function $createDetailsNode() {
     return new DetailsNode();
 }
 
-export function $isDetailsNode(node: LexicalNode | null | undefined) {
+export function $isDetailsNode(node: LexicalNode | null | undefined): node is DetailsNode {
     return node instanceof DetailsNode;
 }
 
@@ -105,16 +146,16 @@ export class SummaryNode extends ElementNode {
         };
     }
 
-    static importJSON(serializedNode: SerializedElementNode): DetailsNode {
+    static importJSON(serializedNode: SerializedElementNode): SummaryNode {
         return $createSummaryNode();
     }
 
 }
 
-export function $createSummaryNode() {
+export function $createSummaryNode(): SummaryNode {
     return new SummaryNode();
 }
 
-export function $isSummaryNode(node: LexicalNode | null | undefined) {
+export function $isSummaryNode(node: LexicalNode | null | undefined): node is SummaryNode {
     return node instanceof SummaryNode;
 }