@liveblocks/react-lexical 1.12.0-lexical3

package/dist/active-selection.js

@@ -0,0 +1,143 @@
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var selection = require('@lexical/selection');
+var lexical = require('lexical');
+var React = require('react');
+var reactDom = require('react-dom');
+var index_js = require('use-sync-external-store/shim/index.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function ActiveSelection({ styles }) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const selection = useSelection();
+  if (selection === null)
+    return null;
+  const info = editor.getEditorState().read(() => {
+    return {
+      anchor: {
+        node: selection.anchor.getNode(),
+        offset: selection.anchor.offset
+      },
+      focus: {
+        node: selection.focus.getNode(),
+        offset: selection.focus.offset
+      }
+    };
+  });
+  const root = editor.getRootElement();
+  if (root === null)
+    return null;
+  const rootContainer = root.parentElement;
+  if (rootContainer === null)
+    return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ React__namespace.createElement(SelectionRects, {
+      selection: info,
+      styles
+    }),
+    rootContainer
+  );
+}
+function SelectionRects({
+  selection: selection$1,
+  styles = {}
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const divRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const container = divRef.current;
+    if (container === null)
+      return;
+    function drawSelectionRects() {
+      if (container === null)
+        return;
+      while (container.firstChild) {
+        container.removeChild(container.firstChild);
+      }
+      const range = selection.createDOMRange(
+        editor,
+        selection$1.anchor.node,
+        selection$1.anchor.offset,
+        selection$1.focus.node,
+        selection$1.focus.offset
+      );
+      if (range === null)
+        return;
+      const rects = selection.createRectsFromDOMRange(editor, range);
+      for (const rect of rects) {
+        const div = document.createElement("div");
+        Object.assign(div.style, {
+          backgroundColor: "rgba(255, 212, 0, 0.14)",
+          ...styles,
+          position: "absolute",
+          top: `${rect.top - container.getBoundingClientRect().top}px`,
+          left: `${rect.left - container.getBoundingClientRect().left}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+          pointerEvents: "none"
+        });
+        container.appendChild(div);
+      }
+    }
+    const observer = new ResizeObserver(drawSelectionRects);
+    observer.observe(container);
+    const unsubscribeFromUpdates = editor.registerUpdateListener(drawSelectionRects);
+    return () => {
+      observer.disconnect();
+      unsubscribeFromUpdates();
+    };
+  }, [selection$1, editor, styles]);
+  return /* @__PURE__ */ React__namespace.createElement("div", {
+    ref: divRef,
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none"
+    }
+  });
+}
+function useSelection() {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const subscribe = React.useCallback(
+    (onStoreChange) => {
+      return editor.registerUpdateListener(onStoreChange);
+    },
+    [editor]
+  );
+  const getSnapshot = React.useCallback(() => {
+    return editor.getEditorState().read(() => {
+      const selection = lexical.$getSelection();
+      if (!lexical.$isRangeSelection(selection))
+        return null;
+      if (selection.isCollapsed())
+        return null;
+      return selection;
+    });
+  }, [editor]);
+  return index_js.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+exports.ActiveSelection = ActiveSelection;
+//# sourceMappingURL=active-selection.js.map

package/dist/active-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-selection.js","sources":["../src/active-selection.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { createDOMRange, createRectsFromDOMRange } from \"@lexical/selection\";\nimport type { LexicalNode, RangeSelection } from \"lexical\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport * as React from \"react\";\nimport { useCallback, useLayoutEffect, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\n\ninterface ActiveSelectionProps {\n  styles?: Partial<CSSStyleDeclaration>;\n}\n\nexport function ActiveSelection({ styles }: ActiveSelectionProps) {\n  const [editor] = useLexicalComposerContext();\n  const selection = useSelection();\n  if (selection === null) return null;\n\n  const info = editor.getEditorState().read(() => {\n    return {\n      anchor: {\n        node: selection.anchor.getNode(),\n        offset: selection.anchor.offset,\n      },\n      focus: {\n        node: selection.focus.getNode(),\n        offset: selection.focus.offset,\n      },\n    };\n  });\n\n  const root = editor.getRootElement();\n  if (root === null) return null;\n\n  const rootContainer = root.parentElement;\n  if (rootContainer === null) return null;\n\n  return createPortal(\n    <SelectionRects selection={info} styles={styles} />,\n    rootContainer\n  );\n}\n\nfunction SelectionRects({\n  selection,\n  styles = {},\n}: {\n  selection: SelectionInfo;\n  styles?: Partial<CSSStyleDeclaration>;\n}) {\n  const [editor] = useLexicalComposerContext();\n\n  const divRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const container = divRef.current;\n    if (container === null) return;\n\n    function drawSelectionRects() {\n      if (container === null) return;\n\n      // Remove all existing children of the container\n      while (container.firstChild) {\n        container.removeChild(container.firstChild);\n      }\n\n      const range = createDOMRange(\n        editor,\n        selection.anchor.node,\n        selection.anchor.offset,\n        selection.focus.node,\n        selection.focus.offset\n      );\n\n      if (range === null) return;\n      const rects = createRectsFromDOMRange(editor, range);\n\n      for (const rect of rects) {\n        const div = document.createElement(\"div\");\n\n        Object.assign(div.style, {\n          backgroundColor: \"rgba(255, 212, 0, 0.14)\",\n          ...styles,\n          position: \"absolute\",\n          top: `${rect.top - container.getBoundingClientRect().top}px`,\n          left: `${rect.left - container.getBoundingClientRect().left}px`,\n          width: `${rect.width}px`,\n          height: `${rect.height}px`,\n          pointerEvents: \"none\",\n        });\n\n        container.appendChild(div);\n      }\n    }\n\n    // Observe resizes of the container element to redraw the selection\n    const observer = new ResizeObserver(drawSelectionRects);\n\n    observer.observe(container);\n\n    // Listen to updates in the editor to redraw the selection\n    const unsubscribeFromUpdates =\n      editor.registerUpdateListener(drawSelectionRects);\n\n    return () => {\n      observer.disconnect();\n      unsubscribeFromUpdates();\n    };\n  }, [selection, editor, styles]);\n\n  return (\n    <div\n      ref={divRef}\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        pointerEvents: \"none\",\n      }}\n    />\n  );\n}\n\ntype SelectionInfo = {\n  anchor: {\n    node: LexicalNode;\n    offset: number;\n  };\n  focus: {\n    node: LexicalNode;\n    offset: number;\n  };\n};\n\nfunction useSelection(): RangeSelection | null {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerUpdateListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getEditorState().read(() => {\n      const selection = $getSelection();\n      if (!$isRangeSelection(selection)) return null;\n\n      if (selection.isCollapsed()) return null;\n\n      return selection;\n    });\n  }, [editor]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["useLexicalComposerContext","createPortal","React","selection","useRef","useLayoutEffect","createDOMRange","createRectsFromDOMRange","useCallback","$getSelection","$isRangeSelection","useSyncExternalStore"],"mappings":"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"}

package/dist/active-selection.mjs

@@ -0,0 +1,123 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { createDOMRange, createRectsFromDOMRange } from '@lexical/selection';
+import { $getSelection, $isRangeSelection } from 'lexical';
+import * as React from 'react';
+import { useRef, useLayoutEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
+
+function ActiveSelection({ styles }) {
+  const [editor] = useLexicalComposerContext();
+  const selection = useSelection();
+  if (selection === null)
+    return null;
+  const info = editor.getEditorState().read(() => {
+    return {
+      anchor: {
+        node: selection.anchor.getNode(),
+        offset: selection.anchor.offset
+      },
+      focus: {
+        node: selection.focus.getNode(),
+        offset: selection.focus.offset
+      }
+    };
+  });
+  const root = editor.getRootElement();
+  if (root === null)
+    return null;
+  const rootContainer = root.parentElement;
+  if (rootContainer === null)
+    return null;
+  return createPortal(
+    /* @__PURE__ */ React.createElement(SelectionRects, {
+      selection: info,
+      styles
+    }),
+    rootContainer
+  );
+}
+function SelectionRects({
+  selection,
+  styles = {}
+}) {
+  const [editor] = useLexicalComposerContext();
+  const divRef = useRef(null);
+  useLayoutEffect(() => {
+    const container = divRef.current;
+    if (container === null)
+      return;
+    function drawSelectionRects() {
+      if (container === null)
+        return;
+      while (container.firstChild) {
+        container.removeChild(container.firstChild);
+      }
+      const range = createDOMRange(
+        editor,
+        selection.anchor.node,
+        selection.anchor.offset,
+        selection.focus.node,
+        selection.focus.offset
+      );
+      if (range === null)
+        return;
+      const rects = createRectsFromDOMRange(editor, range);
+      for (const rect of rects) {
+        const div = document.createElement("div");
+        Object.assign(div.style, {
+          backgroundColor: "rgba(255, 212, 0, 0.14)",
+          ...styles,
+          position: "absolute",
+          top: `${rect.top - container.getBoundingClientRect().top}px`,
+          left: `${rect.left - container.getBoundingClientRect().left}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+          pointerEvents: "none"
+        });
+        container.appendChild(div);
+      }
+    }
+    const observer = new ResizeObserver(drawSelectionRects);
+    observer.observe(container);
+    const unsubscribeFromUpdates = editor.registerUpdateListener(drawSelectionRects);
+    return () => {
+      observer.disconnect();
+      unsubscribeFromUpdates();
+    };
+  }, [selection, editor, styles]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: divRef,
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none"
+    }
+  });
+}
+function useSelection() {
+  const [editor] = useLexicalComposerContext();
+  const subscribe = useCallback(
+    (onStoreChange) => {
+      return editor.registerUpdateListener(onStoreChange);
+    },
+    [editor]
+  );
+  const getSnapshot = useCallback(() => {
+    return editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection))
+        return null;
+      if (selection.isCollapsed())
+        return null;
+      return selection;
+    });
+  }, [editor]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+export { ActiveSelection };
+//# sourceMappingURL=active-selection.mjs.map

package/dist/active-selection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-selection.mjs","sources":["../src/active-selection.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { createDOMRange, createRectsFromDOMRange } from \"@lexical/selection\";\nimport type { LexicalNode, RangeSelection } from \"lexical\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport * as React from \"react\";\nimport { useCallback, useLayoutEffect, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\n\ninterface ActiveSelectionProps {\n  styles?: Partial<CSSStyleDeclaration>;\n}\n\nexport function ActiveSelection({ styles }: ActiveSelectionProps) {\n  const [editor] = useLexicalComposerContext();\n  const selection = useSelection();\n  if (selection === null) return null;\n\n  const info = editor.getEditorState().read(() => {\n    return {\n      anchor: {\n        node: selection.anchor.getNode(),\n        offset: selection.anchor.offset,\n      },\n      focus: {\n        node: selection.focus.getNode(),\n        offset: selection.focus.offset,\n      },\n    };\n  });\n\n  const root = editor.getRootElement();\n  if (root === null) return null;\n\n  const rootContainer = root.parentElement;\n  if (rootContainer === null) return null;\n\n  return createPortal(\n    <SelectionRects selection={info} styles={styles} />,\n    rootContainer\n  );\n}\n\nfunction SelectionRects({\n  selection,\n  styles = {},\n}: {\n  selection: SelectionInfo;\n  styles?: Partial<CSSStyleDeclaration>;\n}) {\n  const [editor] = useLexicalComposerContext();\n\n  const divRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const container = divRef.current;\n    if (container === null) return;\n\n    function drawSelectionRects() {\n      if (container === null) return;\n\n      // Remove all existing children of the container\n      while (container.firstChild) {\n        container.removeChild(container.firstChild);\n      }\n\n      const range = createDOMRange(\n        editor,\n        selection.anchor.node,\n        selection.anchor.offset,\n        selection.focus.node,\n        selection.focus.offset\n      );\n\n      if (range === null) return;\n      const rects = createRectsFromDOMRange(editor, range);\n\n      for (const rect of rects) {\n        const div = document.createElement(\"div\");\n\n        Object.assign(div.style, {\n          backgroundColor: \"rgba(255, 212, 0, 0.14)\",\n          ...styles,\n          position: \"absolute\",\n          top: `${rect.top - container.getBoundingClientRect().top}px`,\n          left: `${rect.left - container.getBoundingClientRect().left}px`,\n          width: `${rect.width}px`,\n          height: `${rect.height}px`,\n          pointerEvents: \"none\",\n        });\n\n        container.appendChild(div);\n      }\n    }\n\n    // Observe resizes of the container element to redraw the selection\n    const observer = new ResizeObserver(drawSelectionRects);\n\n    observer.observe(container);\n\n    // Listen to updates in the editor to redraw the selection\n    const unsubscribeFromUpdates =\n      editor.registerUpdateListener(drawSelectionRects);\n\n    return () => {\n      observer.disconnect();\n      unsubscribeFromUpdates();\n    };\n  }, [selection, editor, styles]);\n\n  return (\n    <div\n      ref={divRef}\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        pointerEvents: \"none\",\n      }}\n    />\n  );\n}\n\ntype SelectionInfo = {\n  anchor: {\n    node: LexicalNode;\n    offset: number;\n  };\n  focus: {\n    node: LexicalNode;\n    offset: number;\n  };\n};\n\nfunction useSelection(): RangeSelection | null {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerUpdateListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getEditorState().read(() => {\n      const selection = $getSelection();\n      if (!$isRangeSelection(selection)) return null;\n\n      if (selection.isCollapsed()) return null;\n\n      return selection;\n    });\n  }, [editor]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":[],"mappings":"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"}

package/dist/comments/ThreadPanel.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var react = require('@liveblocks/react');
+var reactComments = require('@liveblocks/react-comments');
+var React = require('react');
+
+const ThreadPanel = () => {
+  const { useThreads } = react.useRoomContextBundle();
+  const { threads } = useThreads();
+  if (!threads || threads.length === 0) {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "lb-lexical-threads-empty"
+    }, "No threads yet");
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "lb-lexical-threads"
+  }, threads.map((thread) => {
+    return /* @__PURE__ */ React.createElement(reactComments.Thread, {
+      key: thread.id,
+      thread
+    });
+  }));
+};
+
+exports.ThreadPanel = ThreadPanel;
+//# sourceMappingURL=ThreadPanel.js.map

package/dist/comments/ThreadPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadPanel.js","sources":["../../src/comments/ThreadPanel.tsx"],"sourcesContent":["\nimport { useRoomContextBundle } from \"@liveblocks/react\";\nimport { Thread } from \"@liveblocks/react-comments\";\nimport React from \"react\";\n\nconst ThreadPanel = () => {\n  const { useThreads } = useRoomContextBundle();\n  const { threads } = useThreads();\n\n  if (!threads || threads.length === 0) {\n    return <div className=\"lb-lexical-threads-empty\">No threads yet</div>;\n  }\n\n  return (\n    <div className=\"lb-lexical-threads\">\n      {threads.map((thread) => {\n        return <Thread key={thread.id} thread={thread} />;\n      })}\n    </div>\n  );\n}\n\nexport { ThreadPanel }"],"names":["useRoomContextBundle","Thread"],"mappings":";;;;;;AAKA,MAAM,cAAc,MAAM;AACxB,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,0BAAqB,EAAA,CAAA;AAC5C,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,UAAW,EAAA,CAAA;AAE/B,EAAA,IAAI,CAAC,OAAA,IAAW,OAAQ,CAAA,MAAA,KAAW,CAAG,EAAA;AACpC,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,0BAAA;AAAA,KAAA,EAA2B,gBAAc,CAAA,CAAA;AAAA,GACjE;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oBAAA;AAAA,GACZ,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,MAAW,KAAA;AACvB,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAAC,oBAAA,EAAA;AAAA,MAAO,KAAK,MAAO,CAAA,EAAA;AAAA,MAAI,MAAA;AAAA,KAAgB,CAAA,CAAA;AAAA,GAChD,CACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/comments/ThreadPanel.mjs

@@ -0,0 +1,24 @@
+import { useRoomContextBundle } from '@liveblocks/react';
+import { Thread } from '@liveblocks/react-comments';
+import React__default from 'react';
+
+const ThreadPanel = () => {
+  const { useThreads } = useRoomContextBundle();
+  const { threads } = useThreads();
+  if (!threads || threads.length === 0) {
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: "lb-lexical-threads-empty"
+    }, "No threads yet");
+  }
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: "lb-lexical-threads"
+  }, threads.map((thread) => {
+    return /* @__PURE__ */ React__default.createElement(Thread, {
+      key: thread.id,
+      thread
+    });
+  }));
+};
+
+export { ThreadPanel };
+//# sourceMappingURL=ThreadPanel.mjs.map

package/dist/comments/ThreadPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadPanel.mjs","sources":["../../src/comments/ThreadPanel.tsx"],"sourcesContent":["\nimport { useRoomContextBundle } from \"@liveblocks/react\";\nimport { Thread } from \"@liveblocks/react-comments\";\nimport React from \"react\";\n\nconst ThreadPanel = () => {\n  const { useThreads } = useRoomContextBundle();\n  const { threads } = useThreads();\n\n  if (!threads || threads.length === 0) {\n    return <div className=\"lb-lexical-threads-empty\">No threads yet</div>;\n  }\n\n  return (\n    <div className=\"lb-lexical-threads\">\n      {threads.map((thread) => {\n        return <Thread key={thread.id} thread={thread} />;\n      })}\n    </div>\n  );\n}\n\nexport { ThreadPanel }"],"names":["React"],"mappings":";;;;AAKA,MAAM,cAAc,MAAM;AACxB,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAC5C,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,UAAW,EAAA,CAAA;AAE/B,EAAA,IAAI,CAAC,OAAA,IAAW,OAAQ,CAAA,MAAA,KAAW,CAAG,EAAA;AACpC,IAAA,uBAAQA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,0BAAA;AAAA,KAAA,EAA2B,gBAAc,CAAA,CAAA;AAAA,GACjE;AAEA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oBAAA;AAAA,GACZ,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,MAAW,KAAA;AACvB,IAAA,uBAAQA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MAAO,KAAK,MAAO,CAAA,EAAA;AAAA,MAAI,MAAA;AAAA,KAAgB,CAAA,CAAA;AAAA,GAChD,CACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/comments/comment-plugin-provider.js

@@ -0,0 +1,322 @@
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var utils = require('@lexical/utils');
+var core = require('@liveblocks/core');
+var react = require('@liveblocks/react');
+var lexical = require('lexical');
+var React = require('react');
+var withSelector_js = require('use-sync-external-store/shim/with-selector.js');
+var activeSelection = require('../active-selection.js');
+var getThreadMarkIds = require('./get-thread-mark-ids.js');
+var threadMarkNode = require('./thread-mark-node.js');
+var unwrapThreadMarkNode = require('./unwrap-thread-mark-node.js');
+var wrapSelectionInThreadMarkNode = require('./wrap-selection-in-thread-mark-node.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ShowFloatingComposerContext = React__namespace.createContext(null);
+const ShowFloatingComposerProvider = ({ children }) => {
+  const [showFloatingComposer, setShowFloatingComposer] = React.useState(false);
+  return /* @__PURE__ */ React__namespace.createElement(ShowFloatingComposerContext.Provider, {
+    value: {
+      setShowFloatingComposer,
+      showFloatingComposer
+    }
+  }, children);
+};
+function useCreateThread() {
+  const context = React__namespace.useContext(ShowFloatingComposerContext);
+  if (context === null) {
+    throw new Error(
+      "useCreateThread must be used within a LiveblocksPluginProvider with comments enabled"
+    );
+  }
+  return () => {
+    context.setShowFloatingComposer(true);
+  };
+}
+function useShowFloatingComposer() {
+  const context = React__namespace.useContext(ShowFloatingComposerContext);
+  if (context === null) {
+    throw new Error(
+      "useShowFloatingComposer must be used within a LiveblocksPluginProvider with comments enabled"
+    );
+  }
+  return context.showFloatingComposer;
+}
+function useHideFloatingComposer() {
+  const context = React__namespace.useContext(ShowFloatingComposerContext);
+  if (context === null) {
+    throw new Error(
+      "useHideFloatingComposer must be used within a LiveblocksPluginProvider with comments enabled"
+    );
+  }
+  return () => {
+    context.setShowFloatingComposer(false);
+  };
+}
+function CommentPluginProvider({ children }) {
+  const [editor, context] = LexicalComposerContext.useLexicalComposerContext();
+  const [threadToNodes, setThreadToNodes] = React.useState(
+    /* @__PURE__ */ new Map()
+  );
+  const [activeThreads, setActiveThreads] = React.useState([]);
+  const [showActiveSelection, setShowActiveSelection] = React.useState(false);
+  const client = react.useClient();
+  const {
+    useRoom,
+    [core.kInternal]: {
+      useCommentsErrorListener,
+      ThreadCreateCallbackProvider,
+      ThreadDeleteCallbackProvider,
+      ComposerFocusCallbackProvider,
+      IsThreadActiveCallbackProvider
+    }
+  } = react.useRoomContextBundle();
+  const room = useRoom();
+  React.useEffect(() => {
+    if (!editor.hasNodes([threadMarkNode.ThreadMarkNode])) {
+      throw new Error(
+        "CommentPluginProvider: ThreadMarkNode not registered on editor"
+      );
+    }
+  }, [editor]);
+  const isThreadActive = React.useCallback(
+    (threadId) => {
+      return activeThreads.includes(threadId);
+    },
+    [activeThreads]
+  );
+  const handleThreadCreate = React.useCallback(
+    (threadId) => {
+      editor.update(() => {
+        const selection = lexical.$getSelection();
+        if (!lexical.$isRangeSelection(selection))
+          return;
+        if (selection.isCollapsed())
+          return;
+        const isBackward = selection.isBackward();
+        wrapSelectionInThreadMarkNode(selection, isBackward, threadId);
+        lexical.$setSelection(null);
+      });
+    },
+    [editor]
+  );
+  const handleThreadDelete = React.useCallback(
+    (threadId) => {
+      editor.update(() => {
+        const keys = threadToNodes.get(threadId);
+        if (keys === void 0)
+          return;
+        for (const key of keys) {
+          const node = lexical.$getNodeByKey(key);
+          if (!threadMarkNode.$isThreadMarkNode(node))
+            continue;
+          node.deleteID(threadId);
+          if (node.getIDs().length === 0) {
+            unwrapThreadMarkNode(node);
+          }
+        }
+      });
+    },
+    [editor, threadToNodes]
+  );
+  useCommentsErrorListener((error) => {
+    if (error instanceof react.CreateThreadError) {
+      handleThreadDelete(error.context.threadId);
+    }
+  });
+  const store = client[core.kInternal].cacheStore;
+  const threads = withSelector_js.useSyncExternalStoreWithSelector(
+    store.subscribe,
+    store.get,
+    store.get,
+    React.useCallback(
+      () => client[core.kInternal].comments.selectedThreads(room.id, store.get(), {}),
+      [client, room.id, store]
+    )
+  );
+  React.useEffect(() => {
+    function getThreadMarkElements() {
+      const activeElements = /* @__PURE__ */ new Set();
+      for (const thread of threads) {
+        const keys = threadToNodes.get(thread.id);
+        if (keys === void 0)
+          continue;
+        for (const key of keys) {
+          const element = editor.getElementByKey(key);
+          if (element === null)
+            continue;
+          activeElements.add(element);
+        }
+      }
+      return activeElements;
+    }
+    const elements = getThreadMarkElements();
+    const theme = context.getTheme();
+    if (theme === null || theme === void 0)
+      return;
+    elements.forEach((element) => {
+      utils.addClassNamesToElement(element, theme.threadMark);
+    });
+    return () => {
+      elements.forEach((element) => {
+        utils.removeClassNamesFromElement(element, theme.threadMark);
+      });
+    };
+  }, [context, editor, threadToNodes, threads]);
+  React.useEffect(() => {
+    function onMutation(mutations) {
+      const state = editor.getEditorState();
+      setThreadToNodes((prev) => {
+        const updatedMap = new Map(prev);
+        state.read(() => {
+          for (const [key, mutation] of mutations) {
+            if (mutation === "destroyed") {
+              for (const [, nodes] of updatedMap) {
+                nodes.delete(key);
+              }
+            } else if (mutation === "created" || mutation === "updated") {
+              const node = lexical.$getNodeByKey(key);
+              if (!threadMarkNode.$isThreadMarkNode(node))
+                continue;
+              const threadIds = node.getIDs();
+              for (const id of threadIds) {
+                const keys = updatedMap.get(id) ?? /* @__PURE__ */ new Set();
+                keys.add(key);
+                updatedMap.set(id, keys);
+              }
+            }
+          }
+        });
+        return updatedMap;
+      });
+    }
+    return editor.registerMutationListener(threadMarkNode.ThreadMarkNode, onMutation);
+  }, [editor]);
+  React.useEffect(() => {
+    const selectedThreads = client[core.kInternal].comments.selectedThreads;
+    function $getThreadIds(selection) {
+      if (selection === null)
+        return [];
+      if (!lexical.$isRangeSelection(selection))
+        return [];
+      const anchor = selection.anchor.getNode();
+      if (!lexical.$isTextNode(anchor))
+        return [];
+      return getThreadMarkIds(anchor, selection.anchor.offset) ?? [];
+    }
+    function $onStateRead() {
+      const selection = lexical.$getSelection();
+      const threadIds = $getThreadIds(selection).filter((id) => {
+        return selectedThreads(room.id, store.get(), {}).some(
+          (thread) => thread.id === id
+        );
+      });
+      setActiveThreads(threadIds);
+    }
+    const unsubscribeCache = store.subscribe(() => {
+      editor.getEditorState().read($onStateRead);
+    });
+    const unregisterUpdateListener = editor.registerUpdateListener(
+      ({ editorState: state }) => {
+        state.read($onStateRead);
+      }
+    );
+    return () => {
+      unregisterUpdateListener();
+      unsubscribeCache();
+    };
+  }, [editor, client, room.id, store]);
+  React.useEffect(() => {
+    function getActiveElements() {
+      const activeElements2 = /* @__PURE__ */ new Set();
+      for (const thread of activeThreads) {
+        const keys = threadToNodes.get(thread);
+        if (keys === void 0)
+          continue;
+        for (const key of keys) {
+          const element = editor.getElementByKey(key);
+          if (element === null)
+            continue;
+          activeElements2.add(element);
+        }
+      }
+      return activeElements2;
+    }
+    const activeElements = getActiveElements();
+    activeElements.forEach((element) => {
+      element.setAttribute("data-state", "active");
+    });
+    return () => {
+      activeElements.forEach((element) => {
+        element.removeAttribute("data-state");
+      });
+    };
+  }, [activeThreads, editor, threadToNodes]);
+  React.useEffect(() => {
+    return utils.registerNestedElementResolver(
+      editor,
+      threadMarkNode.ThreadMarkNode,
+      (from) => {
+        return threadMarkNode.$createThreadMarkNode(from.getIDs());
+      },
+      (from, to) => {
+        const ids = from.getIDs();
+        ids.forEach((id) => {
+          to.addID(id);
+        });
+      }
+    );
+  }, [editor]);
+  const handleComposerFocus = React.useCallback(
+    (commentId, threadId) => {
+      if (commentId === void 0 && threadId === void 0) {
+        setShowActiveSelection(true);
+      } else {
+        setShowActiveSelection(false);
+      }
+    },
+    []
+  );
+  React.useEffect(() => {
+    return editor.registerUpdateListener(({ editorState: state, tags }) => {
+      if (tags.has("collaboration"))
+        return;
+      state.read(() => setShowActiveSelection(false));
+    });
+  }, [editor]);
+  return /* @__PURE__ */ React__namespace.createElement(ShowFloatingComposerProvider, null, /* @__PURE__ */ React__namespace.createElement(ThreadCreateCallbackProvider, {
+    value: handleThreadCreate
+  }, /* @__PURE__ */ React__namespace.createElement(ThreadDeleteCallbackProvider, {
+    value: handleThreadDelete
+  }, /* @__PURE__ */ React__namespace.createElement(ComposerFocusCallbackProvider, {
+    value: handleComposerFocus
+  }, /* @__PURE__ */ React__namespace.createElement(IsThreadActiveCallbackProvider, {
+    value: isThreadActive
+  }, showActiveSelection && /* @__PURE__ */ React__namespace.createElement(activeSelection.ActiveSelection, null), children)))));
+}
+
+exports.CommentPluginProvider = CommentPluginProvider;
+exports.useCreateThread = useCreateThread;
+exports.useHideFloatingComposer = useHideFloatingComposer;
+exports.useShowFloatingComposer = useShowFloatingComposer;
+//# sourceMappingURL=comment-plugin-provider.js.map