zurfyx-lexical-react 0.39.1-nightly.20251225.0

package/src/useLexicalEditable.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {LexicalSubscription} from './useLexicalSubscription';
+import type {LexicalEditor} from 'lexical';
+
+import {useLexicalSubscription} from './useLexicalSubscription';
+
+function subscription(editor: LexicalEditor): LexicalSubscription<boolean> {
+  return {
+    initialValueFn: () => editor.isEditable(),
+    subscribe: (callback) => {
+      return editor.registerEditableListener(callback);
+    },
+  };
+}
+
+/**
+ * Get the current value for {@link LexicalEditor.isEditable}
+ * using {@link useLexicalSubscription}.
+ * You should prefer this over manually observing the value with
+ * {@link LexicalEditor.registerEditableListener},
+ * which is a bit tricky to do correctly, particularly when using
+ * React StrictMode (the default for development) or concurrency.
+ */
+export function useLexicalEditable(): boolean {
+  return useLexicalSubscription(subscription);
+}

package/src/useLexicalIsTextContentEmpty.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {LexicalEditor} from 'lexical';
+
+import {$isRootTextContentEmptyCurry} from '@lexical/text';
+import {useState} from 'react';
+import useLayoutEffect from 'shared/useLayoutEffect';
+
+export function useLexicalIsTextContentEmpty(
+  editor: LexicalEditor,
+  trim?: boolean,
+): boolean {
+  const [isEmpty, setIsEmpty] = useState(
+    editor
+      .getEditorState()
+      .read($isRootTextContentEmptyCurry(editor.isComposing(), trim)),
+  );
+
+  useLayoutEffect(() => {
+    return editor.registerUpdateListener(({editorState}) => {
+      const isComposing = editor.isComposing();
+      const currentIsEmpty = editorState.read(
+        $isRootTextContentEmptyCurry(isComposing, trim),
+      );
+      setIsEmpty(currentIsEmpty);
+    });
+  }, [editor, trim]);
+
+  return isEmpty;
+}

package/src/useLexicalNodeSelection.ts

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {LexicalEditor, NodeKey} from 'lexical';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {
+  $createNodeSelection,
+  $getNodeByKey,
+  $getSelection,
+  $isNodeSelection,
+  $setSelection,
+} 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; // Node doesn't exist, so it's not selected.
+    }
+
+    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, (selected: boolean) => void, () => void] {
+  const [editor] = useLexicalComposerContext();
+
+  // State to track whether the node is currently selected.
+  const [isSelected, setIsSelected] = useState(() =>
+    isNodeSelected(editor, key),
+  );
+
+  useEffect(() => {
+    let isMounted = true;
+    const unregister = editor.registerUpdateListener(() => {
+      if (isMounted) {
+        setIsSelected(isNodeSelected(editor, key));
+      }
+    });
+
+    return () => {
+      isMounted = false; // Prevent updates after component unmount.
+      unregister();
+    };
+  }, [editor, key]);
+
+  const setSelected = useCallback(
+    (selected: boolean) => {
+      editor.update(() => {
+        let selection = $getSelection();
+
+        if (!$isNodeSelection(selection)) {
+          selection = $createNodeSelection();
+          $setSelection(selection);
+        }
+
+        if ($isNodeSelection(selection)) {
+          if (selected) {
+            selection.add(key);
+          } else {
+            selection.delete(key);
+          }
+        }
+      });
+    },
+    [editor, key],
+  );
+
+  const clearSelected = useCallback(() => {
+    editor.update(() => {
+      const selection = $getSelection();
+
+      if ($isNodeSelection(selection)) {
+        selection.clear();
+      }
+    });
+  }, [editor]);
+
+  return [isSelected, setSelected, clearSelected];
+}

package/src/useLexicalSubscription.tsx

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {LexicalEditor} from 'lexical';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useMemo, useRef, useState} from 'react';
+import useLayoutEffect from 'shared/useLayoutEffect';
+
+export type LexicalSubscription<T> = {
+  initialValueFn: () => T;
+  subscribe: (callback: (value: T) => void) => () => void;
+};
+
+/**
+ * Shortcut to Lexical subscriptions when values are used for render.
+ * @param subscription - The function to create the {@link LexicalSubscription}. This function's identity must be stable (e.g. defined at module scope or with useCallback).
+ */
+export function useLexicalSubscription<T>(
+  subscription: (editor: LexicalEditor) => LexicalSubscription<T>,
+): T {
+  const [editor] = useLexicalComposerContext();
+  const initializedSubscription = useMemo(
+    () => subscription(editor),
+    [editor, subscription],
+  );
+  const [value, setValue] = useState<T>(() =>
+    initializedSubscription.initialValueFn(),
+  );
+  const valueRef = useRef<T>(value);
+  useLayoutEffect(() => {
+    const {initialValueFn, subscribe} = initializedSubscription;
+    const currentValue = initialValueFn();
+    if (valueRef.current !== currentValue) {
+      valueRef.current = currentValue;
+      setValue(currentValue);
+    }
+
+    return subscribe((newValue: T) => {
+      valueRef.current = newValue;
+      setValue(newValue);
+    });
+  }, [initializedSubscription, subscription]);
+
+  return value;
+}

package/src/useLexicalTextEntity.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {EntityMatch} from '@lexical/text';
+import type {Klass, TextNode} from 'lexical';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {registerLexicalTextEntity} from '@lexical/text';
+import {mergeRegister} from '@lexical/utils';
+import {useEffect} from 'react';
+
+export function useLexicalTextEntity<T extends TextNode>(
+  getMatch: (text: string) => null | EntityMatch,
+  targetNode: Klass<T>,
+  createNode: (textNode: TextNode) => T,
+): void {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return mergeRegister(
+      ...registerLexicalTextEntity(editor, getMatch, targetNode, createNode),
+    );
+  }, [createNode, editor, getMatch, targetNode]);
+}