respective book and chapter structure added.

[bookstack] / resources / js / wysiwyg / nodes / code-block.ts

diff --git a/resources/js/wysiwyg/nodes/code-block.ts b/resources/js/wysiwyg/nodes/code-block.ts
index 7184334a0d2c03ccdf50bf2cf94ca770b9c05c97..76c17197111643defb014eb1dbdf128dba2d848a 100644 (file)
--- a/resources/js/wysiwyg/nodes/code-block.ts
+++ b/resources/js/wysiwyg/nodes/code-block.ts
@@ -2,15 +2,15 @@ import {
     DecoratorNode,
     DOMConversion,
     DOMConversionMap,
-    DOMConversionOutput,
+    DOMConversionOutput, DOMExportOutput,
     LexicalEditor, LexicalNode,
     SerializedLexicalNode,
     Spread
 } from "lexical";
 import type {EditorConfig} from "lexical/LexicalEditor";
-import {el} from "../helpers";
 import {EditorDecoratorAdapter} from "../ui/framework/decorator";
-import {code} from "../ui/defaults/button-definitions";
+import {CodeEditor} from "../../components";
+import {el} from "../utils/dom";
 
 export type SerializedCodeBlockNode = Spread<{
     language: string;
@@ -33,7 +33,9 @@ export class CodeBlockNode extends DecoratorNode<EditorDecoratorAdapter> {
     }
 
     static clone(node: CodeBlockNode): CodeBlockNode {
-        return new CodeBlockNode(node.__language, node.__code);
+        const newNode = new CodeBlockNode(node.__language, node.__code, node.__key);
+        newNode.__id = node.__id;
+        return newNode;
     }
 
     constructor(language: string = '', code: string = '', key?: string) {
@@ -73,7 +75,6 @@ export class CodeBlockNode extends DecoratorNode<EditorDecoratorAdapter> {
     }
 
     decorate(editor: LexicalEditor, config: EditorConfig): EditorDecoratorAdapter {
-        // TODO
         return {
             type: 'code',
             getNode: () => this,
@@ -119,6 +120,13 @@ export class CodeBlockNode extends DecoratorNode<EditorDecoratorAdapter> {
         return false;
     }
 
+    exportDOM(editor: LexicalEditor): DOMExportOutput {
+        const dom = this.createDOM(editor._config, editor);
+        return {
+            element: dom.querySelector('pre') as HTMLElement,
+        };
+    }
+
     static importDOM(): DOMConversionMap|null {
         return {
             pre(node: HTMLElement): DOMConversion|null {
@@ -131,10 +139,13 @@ export class CodeBlockNode extends DecoratorNode<EditorDecoratorAdapter> {
                                         || '';
 
                         const code = codeEl ? (codeEl.textContent || '').trim() : (element.textContent || '').trim();
+                        const node = $createCodeBlockNode(language, code);
 
-                        return {
-                            node: $createCodeBlockNode(language, code),
-                        };
+                        if (element.id) {
+                            node.setId(element.id);
+                        }
+
+                        return { node };
                     },
                     priority: 3,
                 };
@@ -165,4 +176,22 @@ export function $createCodeBlockNode(language: string = '', code: string = ''):
 
 export function $isCodeBlockNode(node: LexicalNode | null | undefined) {
     return node instanceof CodeBlockNode;
+}
+
+export function $openCodeEditorForNode(editor: LexicalEditor, node: CodeBlockNode): void {
+    const code = node.getCode();
+    const language = node.getLanguage();
+
+    // @ts-ignore
+    const codeEditor = window.$components.first('code-editor') as CodeEditor;
+    // TODO - Handle direction
+    codeEditor.open(code, language, 'ltr', (newCode: string, newLang: string) => {
+        editor.update(() => {
+            node.setCode(newCode);
+            node.setLanguage(newLang);
+        });
+        // TODO - Re-focus
+    }, () => {
+        // TODO - Re-focus
+    });
 }
\ No newline at end of file