colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lexical: Improved diagram selection and keyboard usage 

Fixes issues where drawings could not be removed via backspace or
delete.
This commit is contained in:
Dan Brown 2025-05-25 13:21:13 +01:00
parent d149b809b1
commit 3280919370
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/js/wysiwyg/services/keyboard-handling.ts
View File

@ -17,11 +17,12 @@ import {$getNearestNodeBlockParent, $getParentOfType} from "../utils/nodes";
import {$setInsetForSelection} from "../utils/lists"; import {$setInsetForSelection} from "../utils/lists";
import {$isListItemNode} from "@lexical/list"; import {$isListItemNode} from "@lexical/list";
import {$isDetailsNode, DetailsNode} from "@lexical/rich-text/LexicalDetailsNode"; import {$isDetailsNode, DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
import {$isDiagramNode} from "../utils/diagrams";
function isSingleSelectedNode(nodes: LexicalNode[]): boolean { function isSingleSelectedNode(nodes: LexicalNode[]): boolean {
if (nodes.length === 1) { if (nodes.length === 1) {
const node = nodes[0]; const node = nodes[0];
if ($isDecoratorNode(node) || $isImageNode(node) || $isMediaNode(node)) { if ($isDecoratorNode(node) || $isImageNode(node) || $isMediaNode(node) || $isDiagramNode(node)) {
return true; return true;
} }
} }

14
resources/js/wysiwyg/ui/decorators/diagram.ts
View File

@ -1,6 +1,6 @@
import {EditorDecorator} from "../framework/decorator"; import {EditorDecorator} from "../framework/decorator";
import {EditorUiContext} from "../framework/core"; 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 {DiagramNode} from "@lexical/rich-text/LexicalDiagramNode";
import {$selectionContainsNode, $selectSingleNode} from "../../utils/selection"; import {$selectionContainsNode, $selectSingleNode} from "../../utils/selection";
import {$openDrawingEditorForNode} from "../../utils/diagrams"; import {$openDrawingEditorForNode} from "../../utils/diagrams";
@ -12,11 +12,17 @@ export class DiagramDecorator extends EditorDecorator {
setup(context: EditorUiContext, element: HTMLElement) { setup(context: EditorUiContext, element: HTMLElement) {
const diagramNode = this.getNode(); const diagramNode = this.getNode();
element.classList.add('editor-diagram'); 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(() => { context.editor.update(() => {
$selectSingleNode(this.getNode()); $selectSingleNode(this.getNode());
}) });
}); return true;
}, COMMAND_PRIORITY_NORMAL);
element.addEventListener('dblclick', event => { element.addEventListener('dblclick', event => {
context.editor.getEditorState().read(() => { context.editor.getEditorState().read(() => {