@lobehub/editor/es/editor-kernel/react/useLexicalNodeSelection.js

A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { $createNodeSelection, $getNodeByKey, $getSelection, $isNodeSelection, $setSelection } from 'lexical';
import { useCallback, useEffect, useState } from 'react';
import { useLexicalComposerContext } from "./react-context";

/**
 * 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, key) {
  if (!editor) return false;
  return editor.getEditorState().read(function () {
    var 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) {
  var _useLexicalComposerCo = useLexicalComposerContext(),
    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
    editor = _useLexicalComposerCo2[0];
  var lexicalEditor = editor.getLexicalEditor();

  // State to track whether the node is currently selected.
  var _useState = useState(function () {
      return isNodeSelected(lexicalEditor, key);
    }),
    _useState2 = _slicedToArray(_useState, 2),
    isSelected = _useState2[0],
    setIsSelected = _useState2[1];
  useEffect(function () {
    var isMounted = true;
    if (!lexicalEditor) return;
    var unregister = lexicalEditor.registerUpdateListener(function () {
      if (isMounted) {
        setIsSelected(isNodeSelected(lexicalEditor, key));
      }
    });
    return function () {
      isMounted = false; // Prevent updates after component unmount.
      unregister();
    };
  }, [lexicalEditor, key]);
  var setSelected = useCallback(function (selected) {
    if (!lexicalEditor) return;
    lexicalEditor.update(function () {
      var selection = $getSelection();
      if (!$isNodeSelection(selection)) {
        selection = $createNodeSelection();
        $setSelection(selection);
      }
      if ($isNodeSelection(selection)) {
        if (selected) {
          selection.add(key);
        } else {
          selection.delete(key);
        }
      }
    });
  }, [lexicalEditor, key]);
  var clearSelected = useCallback(function () {
    if (!lexicalEditor) return;
    lexicalEditor.update(function () {
      var selection = $getSelection();
      if ($isNodeSelection(selection)) {
        selection.clear();
      }
    });
  }, [lexicalEditor]);
  return [isSelected, setSelected, clearSelected];
}