Lexical: Added code block selection & edit features

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

diff --git a/resources/js/wysiwyg/ui/index.ts b/resources/js/wysiwyg/ui/index.ts
index 50307fa611353f78a661b8788e231b7d48c552f8..748370959620b3bbdb9b20dc145be9ea0514ac14 100644 (file)
--- a/resources/js/wysiwyg/ui/index.ts
+++ b/resources/js/wysiwyg/ui/index.ts
@@ -1,5 +1,10 @@
 import {LexicalEditor} from "lexical";
-import {getImageToolbarContent, getLinkToolbarContent, getMainEditorFullToolbar} from "./toolbars";
+import {
+    getCodeToolbarContent,
+    getImageToolbarContent,
+    getLinkToolbarContent,
+    getMainEditorFullToolbar
+} from "./toolbars";
 import {EditorUIManager} from "./framework/manager";
 import {image as imageFormDefinition, link as linkFormDefinition, source as sourceFormDefinition} from "./defaults/form-definitions";
 import {ImageDecorator} from "./decorators/image";
@@ -7,7 +12,7 @@ import {EditorUiContext} from "./framework/core";
 import {CodeBlockDecorator} from "./decorators/code-block";
 import {DiagramDecorator} from "./decorators/diagram";
 
-export function buildEditorUI(container: HTMLElement, element: HTMLElement, editor: LexicalEditor) {
+export function buildEditorUI(container: HTMLElement, element: HTMLElement, editor: LexicalEditor): EditorUiContext {
     const manager = new EditorUIManager();
     const context: EditorUiContext = {
         editor,
@@ -48,9 +53,15 @@ export function buildEditorUI(container: HTMLElement, element: HTMLElement, edit
         selector: 'a',
         content: getLinkToolbarContent(),
     });
+    manager.registerContextToolbar('code', {
+        selector: '.editor-code-block-wrap',
+        content: getCodeToolbarContent(),
+    });
 
     // Register image decorator listener
     manager.registerDecoratorType('image', ImageDecorator);
     manager.registerDecoratorType('code', CodeBlockDecorator);
     manager.registerDecoratorType('diagram', DiagramDecorator);
+
+    return context;
 }
\ No newline at end of file