diff --git a/packages/lexical-react/src/useLexicalNodeSelection.ts b/packages/lexical-react/src/useLexicalNodeSelection.ts index 2b6c0621d4c..1ee2a9adf89 100644 --- a/packages/lexical-react/src/useLexicalNodeSelection.ts +++ b/packages/lexical-react/src/useLexicalNodeSelection.ts @@ -18,23 +18,48 @@ import { } from 'lexical'; import {useCallback, useEffect, useState} from 'react'; +/** + * A helper function to determine if a specific node is selected in a Lexical editor. + * + * @param {LexicalEditor} editor - The LexicalEditor instance. + * @param {NodeKey} key - The key of the node to check. + * @returns {boolean} Whether the node is selected. + */ + function isNodeSelected(editor: LexicalEditor, key: NodeKey): boolean { return editor.getEditorState().read(() => { const node = $getNodeByKey(key); if (node === null) { - return false; + return false; // Node doesn't exist, so it's not selected. } - return node.isSelected(); + return node.isSelected(); // Check if the node is selected. }); } +/** + * A custom hook to manage the selection state of a specific node in a Lexical editor. + * + * This hook provides utilities to: + * - Check if a node is selected. + * - Update its selection state. + * - Clear the selection. + * + * @param {NodeKey} key - The key of the node to track selection for. + * @returns {[boolean, (selected: boolean) => void, () => void]} A tuple containing: + * - `isSelected` (boolean): Whether the node is currently selected. + * - `setSelected` (function): A function to set the selection state of the node. + * - `clearSelected` (function): A function to clear the selection of the node. + * + */ + export function useLexicalNodeSelection( key: NodeKey, -): [boolean, (arg0: boolean) => void, () => void] { +): [boolean, (selected: boolean) => void, () => void] { const [editor] = useLexicalComposerContext(); + // State to track whether the node is currently selected. const [isSelected, setIsSelected] = useState(() => isNodeSelected(editor, key), ); @@ -48,7 +73,7 @@ export function useLexicalNodeSelection( }); return () => { - isMounted = false; + isMounted = false; // Prevent updates after component unmount. unregister(); }; }, [editor, key]); @@ -62,6 +87,7 @@ export function useLexicalNodeSelection( selection = $createNodeSelection(); $setSelection(selection); } + if ($isNodeSelection(selection)) { if (selected) { selection.add(key);