Lexical: Started converting drawio to TS

Converted events service to TS as part of this.

resources/js/wysiwyg/todo.md

@@ -1,11 +1,16 @@
 # Lexical based editor todo
 
+## In progress
+
+- Add Type: Drawings
+  - Continue converting drawio to typescript
+  - Next step to convert http service to ts.
+
 ## Main Todo
 
 - Alignments: Use existing classes for blocks
 - Alignments: Handle inline block content (image, video)
 - Add Type: Video/media/embed
-- Add Type: Drawings
 - Handle toolbars on scroll
 - Table features
 - Image paste upload
@@ -20,6 +25,7 @@
 - Link heading-based ID reference menu
 - Image gallery integration for insert
 - Image gallery integration for form
+- Drawing gallery integration
 
 ## Bugs
 

resources/js/wysiwyg/ui/decorators/code-block.ts

@@ -2,7 +2,6 @@ import {EditorDecorator} from "../framework/decorator";
 import {EditorUiContext} from "../framework/core";
 import {$openCodeEditorForNode, CodeBlockNode} from "../../nodes/code-block";
 import {$selectionContainsNode, $selectSingleNode} from "../../helpers";
-import {context} from "esbuild";
 import {BaseSelection} from "lexical";
 
 

resources/js/wysiwyg/ui/decorators/diagram.ts

@@ -1,12 +1,35 @@
 import {EditorDecorator} from "../framework/decorator";
 import {EditorUiContext} from "../framework/core";
+import {$selectionContainsNode, $selectSingleNode} from "../../helpers";
+import {$openCodeEditorForNode, CodeBlockNode} from "../../nodes/code-block";
+import {BaseSelection} from "lexical";
+import {$openDrawingEditorForNode, DiagramNode} from "../../nodes/diagram";
 
 
 export class DiagramDecorator extends EditorDecorator {
     protected completedSetup: boolean = false;
 
     setup(context: EditorUiContext, element: HTMLElement) {
-        //
+        const diagramNode = this.getNode();
+        element.addEventListener('click', event => {
+            context.editor.update(() => {
+                $selectSingleNode(this.getNode());
+            })
+        });
+
+        element.addEventListener('dblclick', event => {
+            context.editor.getEditorState().read(() => {
+                $openDrawingEditorForNode(context.editor, (this.getNode() as DiagramNode));
+            });
+        });
+
+        const selectionChange = (selection: BaseSelection|null): void => {
+            element.classList.toggle('selected', $selectionContainsNode(selection, diagramNode));
+        };
+        context.manager.onSelectionChange(selectionChange);
+        this.onDestroy(() => {
+            context.manager.offSelectionChange(selectionChange);
+        });
 
         this.completedSetup = true;
     }