Lexical: Added code block selection & edit features

[bookstack] / resources / js / wysiwyg / nodes / index.ts

diff --git a/resources/js/wysiwyg/nodes/index.ts b/resources/js/wysiwyg/nodes/index.ts
index e2c6902d3380c4c4c9e60f8bab72819771cec299..a2c739576871fb2dbcf370928859fb936e362957 100644 (file)
--- a/resources/js/wysiwyg/nodes/index.ts
+++ b/resources/js/wysiwyg/nodes/index.ts
@@ -1,6 +1,14 @@
 import {HeadingNode, QuoteNode} from '@lexical/rich-text';
 import {CalloutNode} from './callout';
-import {ElementNode, KlassConstructor, LexicalNode, LexicalNodeReplacement, ParagraphNode} from "lexical";
+import {
+    $getNodeByKey,
+    ElementNode,
+    KlassConstructor,
+    LexicalEditor,
+    LexicalNode,
+    LexicalNodeReplacement, NodeMutation,
+    ParagraphNode
+} from "lexical";
 import {CustomParagraphNode} from "./custom-paragraph";
 import {LinkNode} from "@lexical/link";
 import {ImageNode} from "./image";
@@ -11,6 +19,8 @@ import {CustomTableNode} from "./custom-table";
 import {HorizontalRuleNode} from "./horizontal-rule";
 import {CodeBlockNode} from "./code-block";
 import {DiagramNode} from "./diagram";
+import {EditorUIManager} from "../ui/framework/manager";
+import {EditorUiContext} from "../ui/framework/core";
 
 /**
  * Load the nodes for lexical.
@@ -47,5 +57,25 @@ export function getNodesForPageEditor(): (KlassConstructor<typeof LexicalNode> |
     ];
 }
 
+export function registerCommonNodeMutationListeners(context: EditorUiContext): void {
+    const decorated = [ImageNode, CodeBlockNode, DiagramNode];
+
+    const decorationDestroyListener = (mutations: Map<string, NodeMutation>): void => {
+        for (let [nodeKey, mutation] of mutations) {
+            if (mutation === "destroyed") {
+                const decorator = context.manager.getDecoratorByNodeKey(nodeKey);
+                if (decorator) {
+                    decorator.destroy(context);
+                }
+            }
+        }
+    };
+
+    for (let decoratedNode of decorated) {
+        // Have to pass a unique function here since they are stored by lexical keyed on listener function.
+        context.editor.registerMutationListener(decoratedNode, (mutations) => decorationDestroyListener(mutations));
+    }
+}
+
 export type LexicalNodeMatcher = (node: LexicalNode|null|undefined) => boolean;
 export type LexicalElementNodeCreator = () => ElementNode;
\ No newline at end of file