@liveblocks/react-lexical 1.12.0-lexical6 → 2.0.0-alpha3

package/dist/comments/floating-composer.mjs

@@ -1,32 +1,241 @@
-import { Composer } from '@liveblocks/react-comments';
-import React__default, { forwardRef } from 'react';
-import { FloatingSelectionContainer } from '../floating-selection-container.mjs';
-import { useShowFloatingComposer, useHideFloatingComposer } from './comment-plugin-provider.mjs';
+import { useFloating, offset, autoUpdate, flip, hide, shift, limitShift, size } from '@floating-ui/react-dom';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useCreateThread } from '@liveblocks/react';
+import { Composer } from '@liveblocks/react-ui';
+import { createCommand, $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, $setSelection } from 'lexical';
+import React__default, { forwardRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { createDOMRange } from '../create-dom-range.mjs';
+import { createRectsFromDOMRange } from '../create-rects-from-dom-range.mjs';
+import $wrapSelectionInThreadMarkNode from './wrap-selection-in-thread-mark-node.mjs';
 
+const OPEN_FLOATING_COMPOSER_COMMAND = createCommand("OPEN_FLOATING_COMPOSER_COMMAND");
 const FloatingComposer = forwardRef(function FloatingComposer2(props, forwardedRef) {
-  const shouldShowFloatingComposer = useShowFloatingComposer();
-  const hideFloatingComposer = useHideFloatingComposer();
+  const [range, setRange] = useState(null);
   const [editor] = useLexicalComposerContext();
-  if (!shouldShowFloatingComposer)
+  useEffect(() => {
+    return editor.registerCommand(
+      OPEN_FLOATING_COMPOSER_COMMAND,
+      () => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection))
+          return false;
+        if (selection.isCollapsed())
+          return false;
+        const { anchor, focus } = selection;
+        const range2 = createDOMRange(
+          editor,
+          anchor.getNode(),
+          anchor.offset,
+          focus.getNode(),
+          focus.offset
+        );
+        setRange(range2);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor]);
+  if (range === null)
     return null;
+  return /* @__PURE__ */ React__default.createElement(FloatingComposerImpl, {
+    ref: forwardedRef,
+    ...props,
+    range,
+    onRangeChange: setRange
+  });
+});
+const FloatingComposerImpl = forwardRef(function FloatingComposer3(props, forwardedRef) {
+  const {
+    range,
+    onRangeChange,
+    onKeyDown,
+    onComposerSubmit,
+    ...composerProps
+  } = props;
+  const [editor] = useLexicalComposerContext();
+  const createThread = useCreateThread();
+  const $onStateRead = useCallback(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || selection.isCollapsed()) {
+      return null;
+    }
+    const { anchor, focus } = selection;
+    const range2 = createDOMRange(
+      editor,
+      anchor.getNode(),
+      anchor.offset,
+      focus.getNode(),
+      focus.offset
+    );
+    return range2;
+  }, [editor]);
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState: state, tags }) => {
+      if (!tags.has("collaboration")) {
+        onRangeChange(null);
+        return;
+      }
+      const range2 = state.read(() => $onStateRead());
+      onRangeChange(range2);
+    });
+  }, [editor, range, onRangeChange, $onStateRead]);
+  const onThreadCreate = useCallback(
+    (threadId) => {
+      editor.update(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection))
+          return;
+        if (selection.isCollapsed())
+          return;
+        const isBackward = selection.isBackward();
+        $wrapSelectionInThreadMarkNode(selection, isBackward, threadId);
+        $setSelection(null);
+      });
+    },
+    [editor]
+  );
+  const handleComposerSubmit = useCallback(
+    (comment, event) => {
+      onComposerSubmit?.(comment, event);
+      if (event.defaultPrevented)
+        return;
+      event.preventDefault();
+      const thread = createThread({
+        body: comment.body,
+        metadata: props.metadata ?? {}
+      });
+      onThreadCreate(thread.id);
+    },
+    [onThreadCreate, onComposerSubmit, props.metadata, createThread]
+  );
   function handleKeyDown(event) {
     if (event.key === "Escape") {
-      hideFloatingComposer();
+      onRangeChange(null);
       editor.focus();
     }
+    onKeyDown?.(event);
   }
-  return /* @__PURE__ */ React__default.createElement(FloatingSelectionContainer, {
-    sideOffset: 5,
-    alignOffset: 0,
-    collisionPadding: 5
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ActiveSelectionPortal, {
+    range,
+    container: document.body
+  }), /* @__PURE__ */ React__default.createElement(FloatingComposerPortal, {
+    range,
+    container: document.body
   }, /* @__PURE__ */ React__default.createElement(Composer, {
     autoFocus: true,
+    ...composerProps,
     onKeyDown: handleKeyDown,
-    ...props,
+    onComposerSubmit: handleComposerSubmit,
     ref: forwardedRef
-  }));
+  })));
 });
+function ActiveSelectionPortal({
+  range,
+  container
+}) {
+  const {
+    refs: { setReference, setFloating },
+    strategy,
+    x,
+    y
+  } = useFloating({
+    strategy: "fixed",
+    placement: "bottom",
+    middleware: [offset(-range.getBoundingClientRect().height)],
+    whileElementsMounted: (...args) => {
+      return autoUpdate(...args, {
+        animationFrame: true
+      });
+    }
+  });
+  useLayoutEffect(() => {
+    setReference({
+      getBoundingClientRect: () => range.getBoundingClientRect()
+    });
+  }, [setReference, range]);
+  const [editor] = useLexicalComposerContext();
+  const rects = createRectsFromDOMRange(editor, range);
+  return createPortal(
+    /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", {
+      ref: setFloating,
+      style: {
+        position: strategy,
+        top: 0,
+        left: 0,
+        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
+        minWidth: "max-content",
+        width: range.getBoundingClientRect().width,
+        height: range.getBoundingClientRect().height,
+        pointerEvents: "none"
+      },
+      className: "lb-root lb-portal"
+    }, rects.map((rect) => /* @__PURE__ */ React__default.createElement("span", {
+      key: JSON.stringify(rect),
+      style: {
+        position: "absolute",
+        top: rect.top - range.getBoundingClientRect().top,
+        left: rect.left - range.getBoundingClientRect().left,
+        width: rect.width,
+        height: rect.height,
+        backgroundColor: "rgba(0, 0, 255, 0.2)",
+        pointerEvents: "none"
+      },
+      className: "lb-lexical-active-selection"
+    })))),
+    container
+  );
+}
+const FLOATING_COMPOSER_COLLISION_PADDING = 10;
+function FloatingComposerPortal({
+  container,
+  range,
+  children
+}) {
+  const {
+    refs: { setReference, setFloating },
+    strategy,
+    x,
+    y
+  } = useFloating({
+    strategy: "fixed",
+    placement: "bottom",
+    middleware: [
+      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),
+      offset(10),
+      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),
+      shift({
+        padding: FLOATING_COMPOSER_COLLISION_PADDING,
+        limiter: limitShift()
+      }),
+      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING })
+    ],
+    whileElementsMounted: (...args) => {
+      return autoUpdate(...args, {
+        animationFrame: true
+      });
+    }
+  });
+  useLayoutEffect(() => {
+    setReference({
+      getBoundingClientRect: () => range.getBoundingClientRect()
+    });
+  }, [range, setReference]);
+  return createPortal(
+    /* @__PURE__ */ React__default.createElement("div", {
+      ref: setFloating,
+      style: {
+        position: strategy,
+        top: 0,
+        left: 0,
+        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
+        minWidth: "max-content"
+      },
+      className: "lb-root lb-portal lb-elevation lb-lexical-floating-composer"
+    }, children),
+    container
+  );
+}
 
-export { FloatingComposer };
+export { FLOATING_COMPOSER_COLLISION_PADDING, FloatingComposer, OPEN_FLOATING_COMPOSER_COMMAND };
 //# sourceMappingURL=floating-composer.mjs.map

package/dist/comments/floating-composer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"floating-composer.mjs","sources":["../../src/comments/floating-composer.tsx"],"sourcesContent":["import { Composer, ComposerProps } from \"@liveblocks/react-comments\";\nimport React, { ComponentRef, forwardRef, KeyboardEvent } from \"react\";\nimport { FloatingSelectionContainer } from \"../floating-selection-container\";\nimport type { BaseMetadata } from \"@liveblocks/core\";\nimport {\n  useHideFloatingComposer,\n  useShowFloatingComposer,\n} from \"./comment-plugin-provider\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\ntype ThreadMetadata = {\n  resolved?: boolean;\n};\n\ntype FloatingComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n>;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const shouldShowFloatingComposer = useShowFloatingComposer();\n  const hideFloatingComposer = useHideFloatingComposer();\n  const [editor] = useLexicalComposerContext();\n\n  if (!shouldShowFloatingComposer) return null;\n\n  function handleKeyDown(event: KeyboardEvent<HTMLFormElement>) {\n    if (event.key === \"Escape\") {\n      hideFloatingComposer();\n      editor.focus();\n    }\n  }\n\n  return (\n    <FloatingSelectionContainer\n      sideOffset={5}\n      alignOffset={0}\n      collisionPadding={5}\n    >\n      <Composer\n        autoFocus\n        onKeyDown={handleKeyDown}\n        {...props}\n        ref={forwardedRef}\n      />\n    </FloatingSelectionContainer>\n  );\n});\n"],"names":["FloatingComposer","React"],"mappings":";;;;;;AAqBO,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,YAAc,EAAA;AAC/C,EAAA,MAAM,6BAA6B,uBAAwB,EAAA,CAAA;AAC3D,EAAA,MAAM,uBAAuB,uBAAwB,EAAA,CAAA;AACrD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA,CAAA;AAE3C,EAAA,IAAI,CAAC,0BAAA;AAA4B,IAAO,OAAA,IAAA,CAAA;AAExC,EAAA,SAAS,cAAc,KAAuC,EAAA;AAC5D,IAAI,IAAA,KAAA,CAAM,QAAQ,QAAU,EAAA;AAC1B,MAAqB,oBAAA,EAAA,CAAA;AACrB,MAAA,MAAA,CAAO,KAAM,EAAA,CAAA;AAAA,KACf;AAAA,GACF;AAEA,EAAA,uBACGC,cAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAA,IACC,UAAY,EAAA,CAAA;AAAA,IACZ,WAAa,EAAA,CAAA;AAAA,IACb,gBAAkB,EAAA,CAAA;AAAA,GAAA,kBAEjBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACC,SAAS,EAAA,IAAA;AAAA,IACT,SAAW,EAAA,aAAA;AAAA,IACV,GAAG,KAAA;AAAA,IACJ,GAAK,EAAA,YAAA;AAAA,GACP,CACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"floating-composer.mjs","sources":["../../src/comments/floating-composer.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { BaseMetadata } from \"@liveblocks/core\";\nimport { useCreateThread } from \"@liveblocks/react\";\nimport type {\n  ComposerProps,\n  ComposerSubmitComment,\n} from \"@liveblocks/react-ui\";\nimport { Composer } from \"@liveblocks/react-ui\";\nimport type { LexicalCommand } from \"lexical\";\nimport {\n  $getSelection,\n  $isRangeSelection,\n  $setSelection,\n  COMMAND_PRIORITY_EDITOR,\n  createCommand,\n} from \"lexical\";\nimport type { ComponentRef, FormEvent, KeyboardEvent, ReactNode } from \"react\";\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { createDOMRange } from \"../create-dom-range\";\nimport { createRectsFromDOMRange } from \"../create-rects-from-dom-range\";\nimport $wrapSelectionInThreadMarkNode from \"./wrap-selection-in-thread-mark-node\";\n\nexport const OPEN_FLOATING_COMPOSER_COMMAND: LexicalCommand<void> =\n  createCommand(\"OPEN_FLOATING_COMPOSER_COMMAND\");\n\ntype ComposerElement = ComponentRef<typeof Composer>;\n\ntype ThreadMetadata = {\n  resolved?: boolean;\n};\n\ntype FloatingComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<\n  ComposerProps<M>,\n  \"threadId\" | \"commentId\"\n>;\n\nexport const FloatingComposer = forwardRef<\n  ComposerElement,\n  FloatingComposerProps\n>(function FloatingComposer(props, forwardedRef) {\n  const [range, setRange] = useState<Range | null>(null);\n  const [editor] = useLexicalComposerContext();\n\n  useEffect(() => {\n    return editor.registerCommand(\n      OPEN_FLOATING_COMPOSER_COMMAND,\n      () => {\n        const selection = $getSelection();\n        if (!$isRangeSelection(selection)) return false;\n\n        if (selection.isCollapsed()) return false;\n\n        const { anchor, focus } = selection;\n\n        const range = createDOMRange(\n          editor,\n          anchor.getNode(),\n          anchor.offset,\n          focus.getNode(),\n          focus.offset\n        );\n\n        setRange(range);\n\n        return true;\n      },\n      COMMAND_PRIORITY_EDITOR\n    );\n  }, [editor]);\n\n  if (range === null) return null;\n\n  return (\n    <FloatingComposerImpl\n      ref={forwardedRef}\n      {...props}\n      range={range}\n      onRangeChange={setRange}\n    />\n  );\n});\n\ninterface FloatingComposerImplProps extends FloatingComposerProps {\n  range: Range;\n  onRangeChange: (range: Range | null) => void;\n}\n\nconst FloatingComposerImpl = forwardRef<\n  ComposerElement,\n  FloatingComposerImplProps\n>(function FloatingComposer(props, forwardedRef) {\n  const {\n    range,\n    onRangeChange,\n    onKeyDown,\n    onComposerSubmit,\n    ...composerProps\n  } = props;\n\n  const [editor] = useLexicalComposerContext();\n  const createThread = useCreateThread();\n\n  const $onStateRead = useCallback((): Range | null => {\n    const selection = $getSelection();\n\n    // If the selection is not a range selection or is collapsed, clear the range so the composer is no longer displayed.\n    if (!$isRangeSelection(selection) || selection.isCollapsed()) {\n      return null;\n    }\n\n    const { anchor, focus } = selection;\n    const range = createDOMRange(\n      editor,\n      anchor.getNode(),\n      anchor.offset,\n      focus.getNode(),\n      focus.offset\n    );\n\n    return range;\n  }, [editor]);\n\n  useEffect(() => {\n    return editor.registerUpdateListener(({ editorState: state, tags }) => {\n      // If the update is not related to collaboration, clear the range so the composer is no longer displayed.\n      if (!tags.has(\"collaboration\")) {\n        onRangeChange(null);\n        return;\n      }\n\n      const range = state.read(() => $onStateRead());\n      onRangeChange(range);\n    });\n  }, [editor, range, onRangeChange, $onStateRead]);\n\n  /**\n   * Create a new ThreadMarkNode and wrap the selected content in it.\n   * @param threadId The id of the thread to associate with the selected content\n   */\n  const onThreadCreate = useCallback(\n    (threadId: string) => {\n      editor.update(() => {\n        const selection = $getSelection();\n        if (!$isRangeSelection(selection)) return;\n\n        // If the selection is collapsed, we do not create a new thread node in the editor.\n        if (selection.isCollapsed()) return;\n\n        const isBackward = selection.isBackward();\n        // Wrap content in a ThreadMarkNode\n        $wrapSelectionInThreadMarkNode(selection, isBackward, threadId);\n\n        // Clear the selection after wrapping\n        $setSelection(null);\n      });\n    },\n    [editor]\n  );\n\n  const handleComposerSubmit = useCallback(\n    (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n      onComposerSubmit?.(comment, event);\n      if (event.defaultPrevented) return;\n\n      event.preventDefault();\n\n      const thread = createThread({\n        body: comment.body,\n        metadata: props.metadata ?? {},\n      });\n\n      onThreadCreate(thread.id);\n    },\n    [onThreadCreate, onComposerSubmit, props.metadata, createThread]\n  );\n\n  function handleKeyDown(event: KeyboardEvent<HTMLFormElement>) {\n    if (event.key === \"Escape\") {\n      onRangeChange(null);\n      editor.focus();\n    }\n    onKeyDown?.(event);\n  }\n\n  return (\n    <>\n      <ActiveSelectionPortal range={range} container={document.body} />\n\n      <FloatingComposerPortal range={range} container={document.body}>\n        <Composer\n          autoFocus\n          {...composerProps}\n          onKeyDown={handleKeyDown}\n          onComposerSubmit={handleComposerSubmit}\n          ref={forwardedRef}\n        />\n      </FloatingComposerPortal>\n    </>\n  );\n});\n\nfunction ActiveSelectionPortal({\n  range,\n  container,\n}: {\n  range: Range;\n  container: HTMLElement;\n}) {\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [offset(-range.getBoundingClientRect().height)],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    setReference({\n      getBoundingClientRect: () => range.getBoundingClientRect(),\n    });\n  }, [setReference, range]);\n\n  const [editor] = useLexicalComposerContext();\n  const rects = createRectsFromDOMRange(editor, range);\n\n  return createPortal(\n    <>\n      <span\n        ref={setFloating}\n        style={{\n          position: strategy,\n          top: 0,\n          left: 0,\n          transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n          minWidth: \"max-content\",\n          width: range.getBoundingClientRect().width,\n          height: range.getBoundingClientRect().height,\n          pointerEvents: \"none\",\n        }}\n        className=\"lb-root lb-portal\"\n      >\n        {rects.map((rect) => (\n          <span\n            key={JSON.stringify(rect)}\n            style={{\n              position: \"absolute\",\n              top: rect.top - range.getBoundingClientRect().top,\n              left: rect.left - range.getBoundingClientRect().left,\n              width: rect.width,\n              height: rect.height,\n              backgroundColor: \"rgba(0, 0, 255, 0.2)\",\n              pointerEvents: \"none\",\n            }}\n            className=\"lb-lexical-active-selection\"\n          />\n        ))}\n      </span>\n    </>,\n    container\n  );\n}\n\nexport const FLOATING_COMPOSER_COLLISION_PADDING = 10;\n\nfunction FloatingComposerPortal({\n  container,\n  range,\n  children,\n}: {\n  container: HTMLElement;\n  range: Range;\n  children: ReactNode;\n}) {\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_COMPOSER_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    setReference({\n      getBoundingClientRect: () => range.getBoundingClientRect(),\n    });\n  }, [range, setReference]);\n\n  return createPortal(\n    <div\n      ref={setFloating}\n      style={{\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}\n      className=\"lb-root lb-portal lb-elevation lb-lexical-floating-composer\"\n    >\n      {children}\n    </div>,\n    container\n  );\n}\n"],"names":["FloatingComposer","range","React"],"mappings":"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"}

package/dist/create-dom-range.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var lexical = require('lexical');
+
+function getDOMTextNode(element) {
+  let node = element;
+  while (node !== null) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node;
+    }
+    node = node.firstChild;
+  }
+  return null;
+}
+function getDOMIndexWithinParent(node) {
+  const parent = node.parentNode;
+  if (parent === null) {
+    throw new Error("Should never happen");
+  }
+  return [parent, Array.from(parent.childNodes).indexOf(node)];
+}
+function createDOMRange(editor, anchorNode, _anchorOffset, focusNode, _focusOffset) {
+  const anchorKey = anchorNode.getKey();
+  const focusKey = focusNode.getKey();
+  const range = document.createRange();
+  let anchorDOM = editor.getElementByKey(anchorKey);
+  let focusDOM = editor.getElementByKey(focusKey);
+  let anchorOffset = _anchorOffset;
+  let focusOffset = _focusOffset;
+  if (lexical.$isTextNode(anchorNode)) {
+    anchorDOM = getDOMTextNode(anchorDOM);
+  }
+  if (lexical.$isTextNode(focusNode)) {
+    focusDOM = getDOMTextNode(focusDOM);
+  }
+  if (anchorNode === void 0 || focusNode === void 0 || anchorDOM === null || focusDOM === null) {
+    return null;
+  }
+  if (anchorDOM.nodeName === "BR") {
+    [anchorDOM, anchorOffset] = getDOMIndexWithinParent(anchorDOM);
+  }
+  if (focusDOM.nodeName === "BR") {
+    [focusDOM, focusOffset] = getDOMIndexWithinParent(focusDOM);
+  }
+  const firstChild = anchorDOM.firstChild;
+  if (anchorDOM === focusDOM && firstChild !== null && firstChild.nodeName === "BR" && anchorOffset === 0 && focusOffset === 0) {
+    focusOffset = 1;
+  }
+  try {
+    range.setStart(anchorDOM, anchorOffset);
+    range.setEnd(focusDOM, focusOffset);
+  } catch (e) {
+    return null;
+  }
+  if (range.collapsed && (anchorOffset !== focusOffset || anchorKey !== focusKey)) {
+    range.setStart(focusDOM, focusOffset);
+    range.setEnd(anchorDOM, anchorOffset);
+  }
+  return range;
+}
+
+exports.createDOMRange = createDOMRange;
+//# sourceMappingURL=create-dom-range.js.map

package/dist/create-dom-range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-dom-range.js","sources":["../src/create-dom-range.ts"],"sourcesContent":["/**\n * MIT License\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport type { LexicalEditor, LexicalNode } from \"lexical\";\nimport { $isTextNode } from \"lexical\";\n\nfunction getDOMTextNode(element: Node | null): Text | null {\n  let node = element;\n\n  while (node !== null) {\n    if (node.nodeType === Node.TEXT_NODE) {\n      return node as Text;\n    }\n\n    node = node.firstChild;\n  }\n\n  return null;\n}\n\nfunction getDOMIndexWithinParent(node: ChildNode): [ParentNode, number] {\n  const parent = node.parentNode;\n\n  if (parent === null) {\n    throw new Error(\"Should never happen\");\n  }\n\n  return [parent, Array.from(parent.childNodes).indexOf(node)];\n}\n\n/**\n * Creates a selection range for the DOM.\n * @param editor - The lexical editor.\n * @param anchorNode - The anchor node of a selection.\n * @param _anchorOffset - The amount of space offset from the anchor to the focus.\n * @param focusNode - The current focus.\n * @param _focusOffset - The amount of space offset from the focus to the anchor.\n * @returns The range of selection for the DOM that was created.\n */\nexport function createDOMRange(\n  editor: LexicalEditor,\n  anchorNode: LexicalNode,\n  _anchorOffset: number,\n  focusNode: LexicalNode,\n  _focusOffset: number\n): Range | null {\n  const anchorKey = anchorNode.getKey();\n  const focusKey = focusNode.getKey();\n  const range = document.createRange();\n  let anchorDOM: Node | Text | null = editor.getElementByKey(anchorKey);\n  let focusDOM: Node | Text | null = editor.getElementByKey(focusKey);\n  let anchorOffset = _anchorOffset;\n  let focusOffset = _focusOffset;\n\n  if ($isTextNode(anchorNode)) {\n    anchorDOM = getDOMTextNode(anchorDOM);\n  }\n\n  if ($isTextNode(focusNode)) {\n    focusDOM = getDOMTextNode(focusDOM);\n  }\n\n  if (\n    anchorNode === undefined ||\n    focusNode === undefined ||\n    anchorDOM === null ||\n    focusDOM === null\n  ) {\n    return null;\n  }\n\n  if (anchorDOM.nodeName === \"BR\") {\n    [anchorDOM, anchorOffset] = getDOMIndexWithinParent(anchorDOM as ChildNode);\n  }\n\n  if (focusDOM.nodeName === \"BR\") {\n    [focusDOM, focusOffset] = getDOMIndexWithinParent(focusDOM as ChildNode);\n  }\n\n  const firstChild = anchorDOM.firstChild;\n\n  if (\n    anchorDOM === focusDOM &&\n    firstChild !== null &&\n    firstChild.nodeName === \"BR\" &&\n    anchorOffset === 0 &&\n    focusOffset === 0\n  ) {\n    focusOffset = 1;\n  }\n\n  try {\n    range.setStart(anchorDOM, anchorOffset);\n    range.setEnd(focusDOM, focusOffset);\n  } catch (e) {\n    return null;\n  }\n\n  if (\n    range.collapsed &&\n    (anchorOffset !== focusOffset || anchorKey !== focusKey)\n  ) {\n    // Range is backwards, we need to reverse it\n    range.setStart(focusDOM, focusOffset);\n    range.setEnd(anchorDOM, anchorOffset);\n  }\n\n  return range;\n}\n"],"names":["$isTextNode"],"mappings":"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"}

package/dist/create-dom-range.mjs

@@ -0,0 +1,61 @@
+import { $isTextNode } from 'lexical';
+
+function getDOMTextNode(element) {
+  let node = element;
+  while (node !== null) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node;
+    }
+    node = node.firstChild;
+  }
+  return null;
+}
+function getDOMIndexWithinParent(node) {
+  const parent = node.parentNode;
+  if (parent === null) {
+    throw new Error("Should never happen");
+  }
+  return [parent, Array.from(parent.childNodes).indexOf(node)];
+}
+function createDOMRange(editor, anchorNode, _anchorOffset, focusNode, _focusOffset) {
+  const anchorKey = anchorNode.getKey();
+  const focusKey = focusNode.getKey();
+  const range = document.createRange();
+  let anchorDOM = editor.getElementByKey(anchorKey);
+  let focusDOM = editor.getElementByKey(focusKey);
+  let anchorOffset = _anchorOffset;
+  let focusOffset = _focusOffset;
+  if ($isTextNode(anchorNode)) {
+    anchorDOM = getDOMTextNode(anchorDOM);
+  }
+  if ($isTextNode(focusNode)) {
+    focusDOM = getDOMTextNode(focusDOM);
+  }
+  if (anchorNode === void 0 || focusNode === void 0 || anchorDOM === null || focusDOM === null) {
+    return null;
+  }
+  if (anchorDOM.nodeName === "BR") {
+    [anchorDOM, anchorOffset] = getDOMIndexWithinParent(anchorDOM);
+  }
+  if (focusDOM.nodeName === "BR") {
+    [focusDOM, focusOffset] = getDOMIndexWithinParent(focusDOM);
+  }
+  const firstChild = anchorDOM.firstChild;
+  if (anchorDOM === focusDOM && firstChild !== null && firstChild.nodeName === "BR" && anchorOffset === 0 && focusOffset === 0) {
+    focusOffset = 1;
+  }
+  try {
+    range.setStart(anchorDOM, anchorOffset);
+    range.setEnd(focusDOM, focusOffset);
+  } catch (e) {
+    return null;
+  }
+  if (range.collapsed && (anchorOffset !== focusOffset || anchorKey !== focusKey)) {
+    range.setStart(focusDOM, focusOffset);
+    range.setEnd(anchorDOM, anchorOffset);
+  }
+  return range;
+}
+
+export { createDOMRange };
+//# sourceMappingURL=create-dom-range.mjs.map

package/dist/create-dom-range.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-dom-range.mjs","sources":["../src/create-dom-range.ts"],"sourcesContent":["/**\n * MIT License\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport type { LexicalEditor, LexicalNode } from \"lexical\";\nimport { $isTextNode } from \"lexical\";\n\nfunction getDOMTextNode(element: Node | null): Text | null {\n  let node = element;\n\n  while (node !== null) {\n    if (node.nodeType === Node.TEXT_NODE) {\n      return node as Text;\n    }\n\n    node = node.firstChild;\n  }\n\n  return null;\n}\n\nfunction getDOMIndexWithinParent(node: ChildNode): [ParentNode, number] {\n  const parent = node.parentNode;\n\n  if (parent === null) {\n    throw new Error(\"Should never happen\");\n  }\n\n  return [parent, Array.from(parent.childNodes).indexOf(node)];\n}\n\n/**\n * Creates a selection range for the DOM.\n * @param editor - The lexical editor.\n * @param anchorNode - The anchor node of a selection.\n * @param _anchorOffset - The amount of space offset from the anchor to the focus.\n * @param focusNode - The current focus.\n * @param _focusOffset - The amount of space offset from the focus to the anchor.\n * @returns The range of selection for the DOM that was created.\n */\nexport function createDOMRange(\n  editor: LexicalEditor,\n  anchorNode: LexicalNode,\n  _anchorOffset: number,\n  focusNode: LexicalNode,\n  _focusOffset: number\n): Range | null {\n  const anchorKey = anchorNode.getKey();\n  const focusKey = focusNode.getKey();\n  const range = document.createRange();\n  let anchorDOM: Node | Text | null = editor.getElementByKey(anchorKey);\n  let focusDOM: Node | Text | null = editor.getElementByKey(focusKey);\n  let anchorOffset = _anchorOffset;\n  let focusOffset = _focusOffset;\n\n  if ($isTextNode(anchorNode)) {\n    anchorDOM = getDOMTextNode(anchorDOM);\n  }\n\n  if ($isTextNode(focusNode)) {\n    focusDOM = getDOMTextNode(focusDOM);\n  }\n\n  if (\n    anchorNode === undefined ||\n    focusNode === undefined ||\n    anchorDOM === null ||\n    focusDOM === null\n  ) {\n    return null;\n  }\n\n  if (anchorDOM.nodeName === \"BR\") {\n    [anchorDOM, anchorOffset] = getDOMIndexWithinParent(anchorDOM as ChildNode);\n  }\n\n  if (focusDOM.nodeName === \"BR\") {\n    [focusDOM, focusOffset] = getDOMIndexWithinParent(focusDOM as ChildNode);\n  }\n\n  const firstChild = anchorDOM.firstChild;\n\n  if (\n    anchorDOM === focusDOM &&\n    firstChild !== null &&\n    firstChild.nodeName === \"BR\" &&\n    anchorOffset === 0 &&\n    focusOffset === 0\n  ) {\n    focusOffset = 1;\n  }\n\n  try {\n    range.setStart(anchorDOM, anchorOffset);\n    range.setEnd(focusDOM, focusOffset);\n  } catch (e) {\n    return null;\n  }\n\n  if (\n    range.collapsed &&\n    (anchorOffset !== focusOffset || anchorKey !== focusKey)\n  ) {\n    // Range is backwards, we need to reverse it\n    range.setStart(focusDOM, focusOffset);\n    range.setEnd(anchorDOM, anchorOffset);\n  }\n\n  return range;\n}\n"],"names":[],"mappings":"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"}

package/dist/create-rects-from-dom-range.js

@@ -0,0 +1,36 @@
+'use strict';
+
+function createRectsFromDOMRange(editor, range) {
+  const rootElement = editor.getRootElement();
+  if (rootElement === null) {
+    return [];
+  }
+  const rootRect = rootElement.getBoundingClientRect();
+  const computedStyle = getComputedStyle(rootElement);
+  const rootPadding = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
+  const selectionRects = Array.from(range.getClientRects());
+  let selectionRectsLength = selectionRects.length;
+  selectionRects.sort((a, b) => {
+    const top = a.top - b.top;
+    if (Math.abs(top) <= 3) {
+      return a.left - b.left;
+    }
+    return top;
+  });
+  let prevRect;
+  for (let i = 0; i < selectionRectsLength; i++) {
+    const selectionRect = selectionRects[i];
+    const isOverlappingRect = prevRect && prevRect.top <= selectionRect.top && prevRect.top + prevRect.height > selectionRect.top && prevRect.left + prevRect.width > selectionRect.left;
+    const selectionSpansElement = selectionRect.width + rootPadding === rootRect.width;
+    if (isOverlappingRect || selectionSpansElement) {
+      selectionRects.splice(i--, 1);
+      selectionRectsLength--;
+      continue;
+    }
+    prevRect = selectionRect;
+  }
+  return selectionRects;
+}
+
+exports.createRectsFromDOMRange = createRectsFromDOMRange;
+//# sourceMappingURL=create-rects-from-dom-range.js.map

package/dist/create-rects-from-dom-range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-rects-from-dom-range.js","sources":["../src/create-rects-from-dom-range.ts"],"sourcesContent":["/**\n * MIT License\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport type { LexicalEditor } from \"lexical\";\n\n/**\n * Creates DOMRects, generally used to help the editor find a specific location on the screen.\n * @param editor - The lexical editor\n * @param range - A fragment of a document that can contain nodes and parts of text nodes.\n * @returns The selectionRects as an array.\n */\nexport function createRectsFromDOMRange(\n  editor: LexicalEditor,\n  range: Range\n): Array<ClientRect> {\n  const rootElement = editor.getRootElement();\n\n  if (rootElement === null) {\n    return [];\n  }\n  const rootRect = rootElement.getBoundingClientRect();\n  const computedStyle = getComputedStyle(rootElement);\n  const rootPadding =\n    parseFloat(computedStyle.paddingLeft) +\n    parseFloat(computedStyle.paddingRight);\n  const selectionRects = Array.from(range.getClientRects());\n  let selectionRectsLength = selectionRects.length;\n  //sort rects from top left to bottom right.\n  selectionRects.sort((a, b) => {\n    const top = a.top - b.top;\n    // Some rects match position closely, but not perfectly,\n    // so we give a 3px tolerance.\n    if (Math.abs(top) <= 3) {\n      return a.left - b.left;\n    }\n    return top;\n  });\n  let prevRect;\n  for (let i = 0; i < selectionRectsLength; i++) {\n    const selectionRect = selectionRects[i];\n    // Exclude rects that overlap preceding Rects in the sorted list.\n    const isOverlappingRect =\n      prevRect &&\n      prevRect.top <= selectionRect.top &&\n      prevRect.top + prevRect.height > selectionRect.top &&\n      prevRect.left + prevRect.width > selectionRect.left;\n    // Exclude selections that span the entire element\n    const selectionSpansElement =\n      selectionRect.width + rootPadding === rootRect.width;\n    if (isOverlappingRect || selectionSpansElement) {\n      selectionRects.splice(i--, 1);\n      selectionRectsLength--;\n      continue;\n    }\n    prevRect = selectionRect;\n  }\n  return selectionRects;\n}\n"],"names":[],"mappings":";;AA+BgB,SAAA,uBAAA,CACd,QACA,KACmB,EAAA;AACnB,EAAM,MAAA,WAAA,GAAc,OAAO,cAAe,EAAA,CAAA;AAE1C,EAAA,IAAI,gBAAgB,IAAM,EAAA;AACxB,IAAA,OAAO,EAAC,CAAA;AAAA,GACV;AACA,EAAM,MAAA,QAAA,GAAW,YAAY,qBAAsB,EAAA,CAAA;AACnD,EAAM,MAAA,aAAA,GAAgB,iBAAiB,WAAW,CAAA,CAAA;AAClD,EAAA,MAAM,cACJ,UAAW,CAAA,aAAA,CAAc,WAAW,CACpC,GAAA,UAAA,CAAW,cAAc,YAAY,CAAA,CAAA;AACvC,EAAA,MAAM,cAAiB,GAAA,KAAA,CAAM,IAAK,CAAA,KAAA,CAAM,gBAAgB,CAAA,CAAA;AACxD,EAAA,IAAI,uBAAuB,cAAe,CAAA,MAAA,CAAA;AAE1C,EAAe,cAAA,CAAA,IAAA,CAAK,CAAC,CAAA,EAAG,CAAM,KAAA;AAC5B,IAAM,MAAA,GAAA,GAAM,CAAE,CAAA,GAAA,GAAM,CAAE,CAAA,GAAA,CAAA;AAGtB,IAAA,IAAI,IAAK,CAAA,GAAA,CAAI,GAAG,CAAA,IAAK,CAAG,EAAA;AACtB,MAAO,OAAA,CAAA,CAAE,OAAO,CAAE,CAAA,IAAA,CAAA;AAAA,KACpB;AACA,IAAO,OAAA,GAAA,CAAA;AAAA,GACR,CAAA,CAAA;AACD,EAAI,IAAA,QAAA,CAAA;AACJ,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,oBAAA,EAAsB,CAAK,EAAA,EAAA;AAC7C,IAAA,MAAM,gBAAgB,cAAe,CAAA,CAAA,CAAA,CAAA;AAErC,IAAA,MAAM,oBACJ,QACA,IAAA,QAAA,CAAS,GAAO,IAAA,aAAA,CAAc,OAC9B,QAAS,CAAA,GAAA,GAAM,QAAS,CAAA,MAAA,GAAS,cAAc,GAC/C,IAAA,QAAA,CAAS,IAAO,GAAA,QAAA,CAAS,QAAQ,aAAc,CAAA,IAAA,CAAA;AAEjD,IAAA,MAAM,qBACJ,GAAA,aAAA,CAAc,KAAQ,GAAA,WAAA,KAAgB,QAAS,CAAA,KAAA,CAAA;AACjD,IAAA,IAAI,qBAAqB,qBAAuB,EAAA;AAC9C,MAAe,cAAA,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA,CAAA;AAC5B,MAAA,oBAAA,EAAA,CAAA;AACA,MAAA,SAAA;AAAA,KACF;AACA,IAAW,QAAA,GAAA,aAAA,CAAA;AAAA,GACb;AACA,EAAO,OAAA,cAAA,CAAA;AACT;;;;"}

package/dist/create-rects-from-dom-range.mjs

@@ -0,0 +1,34 @@
+function createRectsFromDOMRange(editor, range) {
+  const rootElement = editor.getRootElement();
+  if (rootElement === null) {
+    return [];
+  }
+  const rootRect = rootElement.getBoundingClientRect();
+  const computedStyle = getComputedStyle(rootElement);
+  const rootPadding = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
+  const selectionRects = Array.from(range.getClientRects());
+  let selectionRectsLength = selectionRects.length;
+  selectionRects.sort((a, b) => {
+    const top = a.top - b.top;
+    if (Math.abs(top) <= 3) {
+      return a.left - b.left;
+    }
+    return top;
+  });
+  let prevRect;
+  for (let i = 0; i < selectionRectsLength; i++) {
+    const selectionRect = selectionRects[i];
+    const isOverlappingRect = prevRect && prevRect.top <= selectionRect.top && prevRect.top + prevRect.height > selectionRect.top && prevRect.left + prevRect.width > selectionRect.left;
+    const selectionSpansElement = selectionRect.width + rootPadding === rootRect.width;
+    if (isOverlappingRect || selectionSpansElement) {
+      selectionRects.splice(i--, 1);
+      selectionRectsLength--;
+      continue;
+    }
+    prevRect = selectionRect;
+  }
+  return selectionRects;
+}
+
+export { createRectsFromDOMRange };
+//# sourceMappingURL=create-rects-from-dom-range.mjs.map

package/dist/create-rects-from-dom-range.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-rects-from-dom-range.mjs","sources":["../src/create-rects-from-dom-range.ts"],"sourcesContent":["/**\n * MIT License\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport type { LexicalEditor } from \"lexical\";\n\n/**\n * Creates DOMRects, generally used to help the editor find a specific location on the screen.\n * @param editor - The lexical editor\n * @param range - A fragment of a document that can contain nodes and parts of text nodes.\n * @returns The selectionRects as an array.\n */\nexport function createRectsFromDOMRange(\n  editor: LexicalEditor,\n  range: Range\n): Array<ClientRect> {\n  const rootElement = editor.getRootElement();\n\n  if (rootElement === null) {\n    return [];\n  }\n  const rootRect = rootElement.getBoundingClientRect();\n  const computedStyle = getComputedStyle(rootElement);\n  const rootPadding =\n    parseFloat(computedStyle.paddingLeft) +\n    parseFloat(computedStyle.paddingRight);\n  const selectionRects = Array.from(range.getClientRects());\n  let selectionRectsLength = selectionRects.length;\n  //sort rects from top left to bottom right.\n  selectionRects.sort((a, b) => {\n    const top = a.top - b.top;\n    // Some rects match position closely, but not perfectly,\n    // so we give a 3px tolerance.\n    if (Math.abs(top) <= 3) {\n      return a.left - b.left;\n    }\n    return top;\n  });\n  let prevRect;\n  for (let i = 0; i < selectionRectsLength; i++) {\n    const selectionRect = selectionRects[i];\n    // Exclude rects that overlap preceding Rects in the sorted list.\n    const isOverlappingRect =\n      prevRect &&\n      prevRect.top <= selectionRect.top &&\n      prevRect.top + prevRect.height > selectionRect.top &&\n      prevRect.left + prevRect.width > selectionRect.left;\n    // Exclude selections that span the entire element\n    const selectionSpansElement =\n      selectionRect.width + rootPadding === rootRect.width;\n    if (isOverlappingRect || selectionSpansElement) {\n      selectionRects.splice(i--, 1);\n      selectionRectsLength--;\n      continue;\n    }\n    prevRect = selectionRect;\n  }\n  return selectionRects;\n}\n"],"names":[],"mappings":"AA+BgB,SAAA,uBAAA,CACd,QACA,KACmB,EAAA;AACnB,EAAM,MAAA,WAAA,GAAc,OAAO,cAAe,EAAA,CAAA;AAE1C,EAAA,IAAI,gBAAgB,IAAM,EAAA;AACxB,IAAA,OAAO,EAAC,CAAA;AAAA,GACV;AACA,EAAM,MAAA,QAAA,GAAW,YAAY,qBAAsB,EAAA,CAAA;AACnD,EAAM,MAAA,aAAA,GAAgB,iBAAiB,WAAW,CAAA,CAAA;AAClD,EAAA,MAAM,cACJ,UAAW,CAAA,aAAA,CAAc,WAAW,CACpC,GAAA,UAAA,CAAW,cAAc,YAAY,CAAA,CAAA;AACvC,EAAA,MAAM,cAAiB,GAAA,KAAA,CAAM,IAAK,CAAA,KAAA,CAAM,gBAAgB,CAAA,CAAA;AACxD,EAAA,IAAI,uBAAuB,cAAe,CAAA,MAAA,CAAA;AAE1C,EAAe,cAAA,CAAA,IAAA,CAAK,CAAC,CAAA,EAAG,CAAM,KAAA;AAC5B,IAAM,MAAA,GAAA,GAAM,CAAE,CAAA,GAAA,GAAM,CAAE,CAAA,GAAA,CAAA;AAGtB,IAAA,IAAI,IAAK,CAAA,GAAA,CAAI,GAAG,CAAA,IAAK,CAAG,EAAA;AACtB,MAAO,OAAA,CAAA,CAAE,OAAO,CAAE,CAAA,IAAA,CAAA;AAAA,KACpB;AACA,IAAO,OAAA,GAAA,CAAA;AAAA,GACR,CAAA,CAAA;AACD,EAAI,IAAA,QAAA,CAAA;AACJ,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,oBAAA,EAAsB,CAAK,EAAA,EAAA;AAC7C,IAAA,MAAM,gBAAgB,cAAe,CAAA,CAAA,CAAA,CAAA;AAErC,IAAA,MAAM,oBACJ,QACA,IAAA,QAAA,CAAS,GAAO,IAAA,aAAA,CAAc,OAC9B,QAAS,CAAA,GAAA,GAAM,QAAS,CAAA,MAAA,GAAS,cAAc,GAC/C,IAAA,QAAA,CAAS,IAAO,GAAA,QAAA,CAAS,QAAQ,aAAc,CAAA,IAAA,CAAA;AAEjD,IAAA,MAAM,qBACJ,GAAA,aAAA,CAAc,KAAQ,GAAA,WAAA,KAAgB,QAAS,CAAA,KAAA,CAAA;AACjD,IAAA,IAAI,qBAAqB,qBAAuB,EAAA;AAC9C,MAAe,cAAA,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA,CAAA;AAC5B,MAAA,oBAAA,EAAA,CAAA;AACA,MAAA,SAAA;AAAA,KACF;AACA,IAAW,QAAA,GAAA,aAAA,CAAA;AAAA,GACb;AACA,EAAO,OAAA,cAAA,CAAA;AACT;;;;"}

package/dist/index.d.mts

@@ -1,61 +1,51 @@
-import React, { ComponentType, HTMLAttributes } from 'react';
+import { BaseMetadata } from '@liveblocks/core';
+import { ComposerProps, GlobalOverrides, ThreadPanelOverrides, ThreadOverrides, CommentOverrides, ComposerOverrides, ThreadProps } from '@liveblocks/react-ui';
 import * as lexical from 'lexical';
+import { LexicalCommand, NodeKey } from 'lexical';
+import React, { ComponentProps, ComponentType, ReactNode } from 'react';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
-import { ComposerProps } from '@liveblocks/react-comments';
-import { BaseMetadata } from '@liveblocks/core';
 
-declare const ThreadPanel: () => React.JSX.Element;
-
-declare type LiveblocksPluginProviderProps = {
-    children?: React.ReactNode;
+declare const OPEN_FLOATING_COMPOSER_COMMAND: LexicalCommand<void>;
+declare type ThreadMetadata = {
+    resolved?: boolean;
 };
-declare const LiveblocksPluginProvider: ({ children, }: LiveblocksPluginProviderProps) => JSX.Element;
+declare type FloatingComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<ComposerProps<M>, "threadId" | "commentId">;
+declare const FloatingComposer: React.ForwardRefExoticComponent<FloatingComposerProps<ThreadMetadata> & React.RefAttributes<HTMLFormElement>>;
 
-interface MentionProps {
-    /**
-     * The mention's user ID.
-     */
-    userId: string;
-}
-interface MentionSuggestionsProps {
-    /**
-     * The list of suggested user IDs.
-     */
-    userIds: string[];
-}
-interface EditorComponents {
-    Mention: ComponentType<MentionProps>;
-    MentionSuggestions: ComponentType<MentionSuggestionsProps>;
-}
-interface LiveblocksConfig {
+declare type ThreadPanelComponents = {
+    Thread: ComponentType<ThreadProps>;
+};
+interface ThreadPanelProps extends ComponentProps<"div"> {
     /**
-     * Whether comments are enabled. Defaults to true.
+     * Override the component's components.
      */
-    comments?: boolean;
+    components?: Partial<ThreadPanelComponents>;
     /**
-     * The components displayed within the editor.
+     * Override the component's strings.
      */
-    components?: Partial<EditorComponents>;
+    overrides?: Partial<GlobalOverrides & ThreadPanelOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
 }
-declare function liveblocksLexicalConfig(editorConfig: InitialConfigType, config?: LiveblocksConfig): {
+declare const ThreadPanel: React.ForwardRefExoticComponent<Omit<ThreadPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+declare function liveblocksConfig(editorConfig: Omit<InitialConfigType, "editorState">): {
     nodes: (lexical.KlassConstructor<typeof lexical.LexicalNode> | lexical.LexicalNodeReplacement)[];
     editorState: null;
+    html?: lexical.HTMLConfig | undefined;
+    onError: (error: Error, editor: lexical.LexicalEditor) => void;
     editor__DEPRECATED?: lexical.LexicalEditor | null | undefined;
     namespace: string;
-    onError: (error: Error, editor: lexical.LexicalEditor) => void;
     editable?: boolean | undefined;
     theme?: lexical.EditorThemeClasses | undefined;
-    html?: lexical.HTMLConfig | undefined;
 };
 
-declare const Mention: React.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
-
-declare type ThreadMetadata = {
-    resolved?: boolean;
+declare type LiveblocksPluginProps = {
+    children?: React.ReactNode;
 };
-declare type FloatingComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<ComposerProps<M>, "threadId" | "commentId">;
-declare const FloatingComposer: React.ForwardRefExoticComponent<FloatingComposerProps<ThreadMetadata> & React.RefAttributes<HTMLFormElement>>;
+declare const LiveblocksPlugin: ({ children, }: LiveblocksPluginProps) => JSX.Element;
 
-declare function useCreateThread(): () => void;
+declare function Mention({ nodeKey, children, }: {
+    nodeKey: NodeKey;
+    children: ReactNode;
+}): React.JSX.Element;
 
-export { FloatingComposer, LiveblocksPluginProvider, Mention, ThreadPanel, liveblocksLexicalConfig, useCreateThread };
+export { FloatingComposer, LiveblocksPlugin, Mention, OPEN_FLOATING_COMPOSER_COMMAND, ThreadPanel, ThreadPanelProps, liveblocksConfig };