Lexical: Improved diagram selection and keyboard usage

Fixes issues where drawings could not be removed via backspace or
delete.

diff --git a/resources/js/wysiwyg/services/keyboard-handling.ts b/resources/js/wysiwyg/services/keyboard-handling.ts
index a7f1ec7f0b08342aaa277321b3afa0f4fbdce12a..41a917ecb343b4bd2703f361d6f44233da945bde 100644 (file)
--- a/resources/js/wysiwyg/services/keyboard-handling.ts
+++ b/resources/js/wysiwyg/services/keyboard-handling.ts
@@ -17,11 +17,12 @@ import {$getNearestNodeBlockParent, $getParentOfType} from "../utils/nodes";
 import {$setInsetForSelection} from "../utils/lists";
 import {$isListItemNode} from "@lexical/list";
 import {$isDetailsNode, DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
+import {$isDiagramNode} from "../utils/diagrams";
 
 function isSingleSelectedNode(nodes: LexicalNode[]): boolean {
     if (nodes.length === 1) {
         const node = nodes[0];
-        if ($isDecoratorNode(node) || $isImageNode(node) || $isMediaNode(node)) {
+        if ($isDecoratorNode(node) || $isImageNode(node) || $isMediaNode(node) || $isDiagramNode(node)) {
             return true;
         }
     }

diff --git a/resources/js/wysiwyg/ui/decorators/diagram.ts b/resources/js/wysiwyg/ui/decorators/diagram.ts
index d53bcb482ec78b5850eb202d8fe4b623a16c51b0..52a73ad7223332d9abe1b971bae69bdae8f6bd9f 100644 (file)
--- a/resources/js/wysiwyg/ui/decorators/diagram.ts
+++ b/resources/js/wysiwyg/ui/decorators/diagram.ts
@@ -1,6 +1,6 @@
 import {EditorDecorator} from "../framework/decorator";
 import {EditorUiContext} from "../framework/core";
-import {BaseSelection} from "lexical";
+import {BaseSelection, CLICK_COMMAND, COMMAND_PRIORITY_NORMAL} from "lexical";
 import {DiagramNode} from "@lexical/rich-text/LexicalDiagramNode";
 import {$selectionContainsNode, $selectSingleNode} from "../../utils/selection";
 import {$openDrawingEditorForNode} from "../../utils/diagrams";
@@ -12,11 +12,17 @@ export class DiagramDecorator extends EditorDecorator {
     setup(context: EditorUiContext, element: HTMLElement) {
         const diagramNode = this.getNode();
         element.classList.add('editor-diagram');
-        element.addEventListener('click', event => {
+
+        context.editor.registerCommand(CLICK_COMMAND, (event: MouseEvent): boolean => {
+            if (!element.contains(event.target as HTMLElement)) {
+                return false;
+            }
+
             context.editor.update(() => {
                 $selectSingleNode(this.getNode());
-            })
-        });
+            });
+            return true;
+        }, COMMAND_PRIORITY_NORMAL);
 
         element.addEventListener('dblclick', event => {
             context.editor.getEditorState().read(() => {