Move settings category layouts into their own view folder

[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 934fe7eddd695cf686b6e9953f1c702d89f9708e..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) {
@@ -118,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 {
@@ -130,10 +139,13 @@ export class CodeBlockNode extends DecoratorNode<EditorDecoratorAdapter> {
                                         || '';
 
                         const code = codeEl ? (codeEl.textContent || '').trim() : (element.textContent || '').trim();
+                        const node = $createCodeBlockNode(language, code);
+
+                        if (element.id) {
+                            node.setId(element.id);
+                        }
 
-                        return {
-                            node: $createCodeBlockNode(language, code),
-                        };
+                        return { node };
                     },
                     priority: 3,
                 };
@@ -171,7 +183,7 @@ export function $openCodeEditorForNode(editor: LexicalEditor, node: CodeBlockNod
     const language = node.getLanguage();
 
     // @ts-ignore
-    const codeEditor = window.$components.first('code-editor');
+    const codeEditor = window.$components.first('code-editor') as CodeEditor;
     // TODO - Handle direction
     codeEditor.open(code, language, 'ltr', (newCode: string, newLang: string) => {
         editor.update(() => {