X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/97f570a4ee1e275951a6a10a50df1351505e1974..refs/pull/5280/head:/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 7184334a0..76c171971 100644 --- 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 { } 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 { } decorate(editor: LexicalEditor, config: EditorConfig): EditorDecoratorAdapter { - // TODO return { type: 'code', getNode: () => this, @@ -119,6 +120,13 @@ export class CodeBlockNode extends DecoratorNode { 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 { || ''; 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