From 0a2bd75730481c957bea802703ce51d359c870a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Jablo=C3=B1ski?= <43938777+GermanJablo@users.noreply.github.com> Date: Mon, 20 Jan 2025 15:50:07 -0300 Subject: [PATCH 1/3] fix selection in decoratorNodes --- .../ExcalidrawNode/ExcalidrawComponent.tsx | 31 ------------------- .../src/nodes/ImageComponent.tsx | 6 ---- .../InlineImageNode/InlineImageComponent.tsx | 19 ------------ .../src/nodes/PageBreakNode/index.tsx | 18 ----------- .../src/nodes/PollComponent.tsx | 18 ----------- .../src/LexicalBlockWithAlignableContents.tsx | 18 ----------- .../src/LexicalHorizontalRuleNode.tsx | 18 ----------- packages/lexical-rich-text/src/index.ts | 25 +++++++++++---- packages/lexical/src/LexicalEditor.ts | 2 +- 9 files changed, 20 insertions(+), 135 deletions(-) diff --git a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx index ee80664f93e..55b92288760 100644 --- a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx +++ b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx @@ -16,9 +16,7 @@ import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection'; import {mergeRegister} from '@lexical/utils'; import { $getNodeByKey, - CLICK_COMMAND, COMMAND_PRIORITY_LOW, - isDOMNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical'; @@ -75,35 +73,6 @@ export default function ExcalidrawComponent({ return; } return mergeRegister( - editor.registerCommand( - CLICK_COMMAND, - (event: MouseEvent) => { - const buttonElem = buttonRef.current; - const eventTarget = event.target; - - if (isResizing) { - return true; - } - - if ( - buttonElem !== null && - isDOMNode(eventTarget) && - buttonElem.contains(eventTarget) - ) { - if (!event.shiftKey) { - clearSelection(); - } - setSelected(!isSelected); - if (event.detail > 1) { - setModalOpen(true); - } - return true; - } - - return false; - }, - COMMAND_PRIORITY_LOW, - ), editor.registerCommand( KEY_DELETE_COMMAND, $onDelete, diff --git a/packages/lexical-playground/src/nodes/ImageComponent.tsx b/packages/lexical-playground/src/nodes/ImageComponent.tsx index 6eb6a3d7cc8..1a73ccd0d90 100644 --- a/packages/lexical-playground/src/nodes/ImageComponent.tsx +++ b/packages/lexical-playground/src/nodes/ImageComponent.tsx @@ -35,7 +35,6 @@ import { $isNodeSelection, $isRangeSelection, $setSelection, - CLICK_COMMAND, COMMAND_PRIORITY_LOW, createCommand, DRAGSTART_COMMAND, @@ -300,11 +299,6 @@ export default function ImageComponent({ }, COMMAND_PRIORITY_LOW, ), - editor.registerCommand( - CLICK_COMMAND, - onClick, - COMMAND_PRIORITY_LOW, - ), editor.registerCommand( RIGHT_CLICK_IMAGE_COMMAND, onClick, diff --git a/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx b/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx index 6cbd4377861..266a6b00b0a 100644 --- a/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx +++ b/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx @@ -23,7 +23,6 @@ import { $getSelection, $isNodeSelection, $setSelection, - CLICK_COMMAND, COMMAND_PRIORITY_LOW, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, @@ -288,24 +287,6 @@ export default function InlineImageComponent({ }, COMMAND_PRIORITY_LOW, ), - editor.registerCommand( - CLICK_COMMAND, - (payload) => { - const event = payload; - if (event.target === imageRef.current) { - if (event.shiftKey) { - setSelected(!isSelected); - } else { - clearSelection(); - setSelected(true); - } - return true; - } - - return false; - }, - COMMAND_PRIORITY_LOW, - ), editor.registerCommand( DRAGSTART_COMMAND, (event) => { diff --git a/packages/lexical-playground/src/nodes/PageBreakNode/index.tsx b/packages/lexical-playground/src/nodes/PageBreakNode/index.tsx index 0b4911c4383..ebb02896ca4 100644 --- a/packages/lexical-playground/src/nodes/PageBreakNode/index.tsx +++ b/packages/lexical-playground/src/nodes/PageBreakNode/index.tsx @@ -13,7 +13,6 @@ import {mergeRegister} from '@lexical/utils'; import { $getSelection, $isNodeSelection, - CLICK_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DecoratorNode, @@ -53,23 +52,6 @@ function PageBreakComponent({nodeKey}: {nodeKey: NodeKey}) { useEffect(() => { return mergeRegister( - editor.registerCommand( - CLICK_COMMAND, - (event: MouseEvent) => { - const pbElem = editor.getElementByKey(nodeKey); - - if (event.target === pbElem) { - if (!event.shiftKey) { - clearSelection(); - } - setSelected(!isSelected); - return true; - } - - return false; - }, - COMMAND_PRIORITY_LOW, - ), editor.registerCommand( KEY_DELETE_COMMAND, $onDelete, diff --git a/packages/lexical-playground/src/nodes/PollComponent.tsx b/packages/lexical-playground/src/nodes/PollComponent.tsx index 52119d350cd..3e917c81a82 100644 --- a/packages/lexical-playground/src/nodes/PollComponent.tsx +++ b/packages/lexical-playground/src/nodes/PollComponent.tsx @@ -19,7 +19,6 @@ import { $getSelection, $isNodeSelection, BaseSelection, - CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, @@ -166,23 +165,6 @@ export default function PollComponent({ editor.registerUpdateListener(({editorState}) => { setSelection(editorState.read(() => $getSelection())); }), - editor.registerCommand( - CLICK_COMMAND, - (payload) => { - const event = payload; - - if (event.target === ref.current) { - if (!event.shiftKey) { - clearSelection(); - } - setSelected(!isSelected); - return true; - } - - return false; - }, - COMMAND_PRIORITY_LOW, - ), editor.registerCommand( KEY_DELETE_COMMAND, $onDelete, diff --git a/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx b/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx index c2b68ff747a..299e25a3283 100644 --- a/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx +++ b/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx @@ -21,7 +21,6 @@ import { $isDecoratorNode, $isNodeSelection, $isRangeSelection, - CLICK_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_ELEMENT_COMMAND, KEY_BACKSPACE_COMMAND, @@ -102,23 +101,6 @@ export function BlockWithAlignableContents({ }, COMMAND_PRIORITY_LOW, ), - editor.registerCommand( - CLICK_COMMAND, - (event) => { - if (event.target === ref.current) { - event.preventDefault(); - if (!event.shiftKey) { - clearSelection(); - } - - setSelected(!isSelected); - return true; - } - - return false; - }, - COMMAND_PRIORITY_LOW, - ), editor.registerCommand( KEY_DELETE_COMMAND, $onDelete, diff --git a/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx b/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx index 41339c51c7d..16940006cd9 100644 --- a/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx +++ b/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx @@ -28,7 +28,6 @@ import { $applyNodeReplacement, $getSelection, $isNodeSelection, - CLICK_COMMAND, COMMAND_PRIORITY_LOW, createCommand, DecoratorNode, @@ -66,23 +65,6 @@ function HorizontalRuleComponent({nodeKey}: {nodeKey: NodeKey}) { useEffect(() => { return mergeRegister( - editor.registerCommand( - CLICK_COMMAND, - (event: MouseEvent) => { - const hrElem = editor.getElementByKey(nodeKey); - - if (event.target === hrElem) { - if (!event.shiftKey) { - clearSelection(); - } - setSelected(!isSelected); - return true; - } - - return false; - }, - COMMAND_PRIORITY_LOW, - ), editor.registerCommand( KEY_DELETE_COMMAND, $onDelete, diff --git a/packages/lexical-rich-text/src/index.ts b/packages/lexical-rich-text/src/index.ts index 3bc75ca6580..8b86da6cfc2 100644 --- a/packages/lexical-rich-text/src/index.ts +++ b/packages/lexical-rich-text/src/index.ts @@ -44,6 +44,7 @@ import { } from '@lexical/utils'; import { $applyNodeReplacement, + $createNodeSelection, $createParagraphNode, $createRangeSelection, $createTabNode, @@ -565,13 +566,25 @@ export function registerRichText(editor: LexicalEditor): () => void { const removeListener = mergeRegister( editor.registerCommand( CLICK_COMMAND, - (payload) => { - const selection = $getSelection(); - if ($isNodeSelection(selection)) { - selection.clear(); - return true; + (event) => { + if (!(event.target instanceof Element)) { + return false; } - return false; + const decorator = event.target.closest( + '[data-lexical-decorator="true"]', + ); + if (!decorator) { + return false; + } + editor.update(() => { + const node = $getNearestNodeFromDOMNode(decorator); + if ($isDecoratorNode(node)) { + const selection = $createNodeSelection(); + selection.add(node.getKey()); + $setSelection(selection); + } + }); + return true; }, 0, ), diff --git a/packages/lexical/src/LexicalEditor.ts b/packages/lexical/src/LexicalEditor.ts index f25305691ac..806a9942c15 100644 --- a/packages/lexical/src/LexicalEditor.ts +++ b/packages/lexical/src/LexicalEditor.ts @@ -786,7 +786,7 @@ export class LexicalEditor { * deterministically in the order of registration. * * @param command - the command that will trigger the callback. - * @param listener - the function that will execute when the command is dispatched. + * @param listener - the function that will execute when the command is dispatched. Returns true to stop propagation, false to continue. * @param priority - the relative priority of the listener. 0 | 1 | 2 | 3 | 4 * (or {@link COMMAND_PRIORITY_EDITOR} | * {@link COMMAND_PRIORITY_LOW} | From 0f1690c6403b7d568d34aa4d2ad54a4a43b2a9c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Jablo=C3=B1ski?= <43938777+GermanJablo@users.noreply.github.com> Date: Mon, 20 Jan 2025 17:42:35 -0300 Subject: [PATCH 2/3] improve excalidraw --- .../src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx index 55b92288760..ca9a4c30025 100644 --- a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx +++ b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx @@ -45,7 +45,6 @@ export default function ExcalidrawComponent({ data === '[]' && editor.isEditable(), ); const imageContainerRef = useRef(null); - const buttonRef = useRef(null); const captionButtonRef = useRef(null); const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey); @@ -190,9 +189,7 @@ export default function ExcalidrawComponent({ /> )} {elements.length > 0 && ( - + )} ); From 8ab088db4d7c48bb0a45a4a1c052322af2a5c215 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Jablo=C3=B1ski?= <43938777+GermanJablo@users.noreply.github.com> Date: Mon, 20 Jan 2025 18:34:17 -0300 Subject: [PATCH 3/3] remove unused refs --- packages/lexical-playground/src/nodes/PollComponent.tsx | 5 +---- .../lexical-react/src/LexicalBlockWithAlignableContents.tsx | 4 +--- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/lexical-playground/src/nodes/PollComponent.tsx b/packages/lexical-playground/src/nodes/PollComponent.tsx index 3e917c81a82..8f71430d98b 100644 --- a/packages/lexical-playground/src/nodes/PollComponent.tsx +++ b/packages/lexical-playground/src/nodes/PollComponent.tsx @@ -141,7 +141,6 @@ export default function PollComponent({ const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey); const [selection, setSelection] = useState(null); - const ref = useRef(null); const $onDelete = useCallback( (payload: KeyboardEvent) => { @@ -202,9 +201,7 @@ export default function PollComponent({ const isFocused = $isNodeSelection(selection) && isSelected; return ( -
+

{question}

{options.map((option, index) => { diff --git a/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx b/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx index 299e25a3283..a86a7f2e243 100644 --- a/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx +++ b/packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx @@ -27,7 +27,7 @@ import { KEY_DELETE_COMMAND, } from 'lexical'; import * as React from 'react'; -import {ReactNode, useCallback, useEffect, useRef} from 'react'; +import {ReactNode, useCallback, useEffect} from 'react'; type Props = Readonly<{ children: ReactNode; @@ -49,7 +49,6 @@ export function BlockWithAlignableContents({ const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey); - const ref = useRef(null); const $onDelete = useCallback( (event: KeyboardEvent) => { @@ -119,7 +118,6 @@ export function BlockWithAlignableContents({ className={[className.base, isSelected ? className.focus : null] .filter(Boolean) .join(' ')} - ref={ref} style={{ textAlign: format ? format : undefined, }}>