@liveblocks/react-lexical 2.0.0-alpha2 → 2.0.0-alpha3

package/dist/comments/ThreadPanel.js

@@ -3,44 +3,49 @@
 var react = require('@liveblocks/react');
 var reactUi = require('@liveblocks/react-ui');
 var React = require('react');
+var classnames = require('../classnames.js');
 var commentPluginProvider = require('./comment-plugin-provider.js');
 
-const DefaultThread = ({ thread, isActive }) => {
+const ThreadWrapper = ({ Thread, isActive, ...props }) => {
   const onDeleteThread = React.useContext(commentPluginProvider.OnDeleteThreadCallback);
   if (onDeleteThread === null) {
     throw new Error("OnDeleteThreadCallback not provided");
   }
   const handleThreadDelete = React.useCallback(
-    (thread2) => {
-      onDeleteThread(thread2.id);
+    (thread) => {
+      onDeleteThread(thread.id);
     },
     [onDeleteThread]
   );
-  return /* @__PURE__ */ React.createElement(reactUi.Thread, {
-    thread,
+  return /* @__PURE__ */ React.createElement(Thread, {
+    onThreadDelete: handleThreadDelete,
     "data-state": isActive ? "active" : null,
-    onThreadDelete: handleThreadDelete
+    ...props
   });
 };
-const ThreadPanel = ({ renderThread }) => {
-  const { threads } = react.useThreads();
-  const isThreadActive = React.useContext(commentPluginProvider.IsActiveThreadContext);
-  const ThreadComponent = renderThread ?? DefaultThread;
-  if (!threads || threads.length === 0) {
+const ThreadPanel = React.forwardRef(
+  ({ components, overrides, className, ...props }, forwardedRef) => {
+    const $ = reactUi.useOverrides(overrides);
+    const { threads } = react.useThreads();
+    const isThreadActive = React.useContext(commentPluginProvider.IsActiveThreadContext);
+    const Thread = components?.Thread ?? reactUi.Thread;
     return /* @__PURE__ */ React.createElement("div", {
-      className: "lb-root lb-lexical-threads-empty"
-    }, "No threads yet");
+      className: classnames.classNames(className, "lb-root lb-lexical-thread-panel"),
+      ref: forwardedRef,
+      ...props
+    }, threads && threads.length > 0 ? threads.map((thread) => {
+      return /* @__PURE__ */ React.createElement(ThreadWrapper, {
+        Thread,
+        isActive: isThreadActive(thread.id),
+        key: thread.id,
+        thread,
+        className: "lb-lexical-thread-panel-thread"
+      });
+    }) : /* @__PURE__ */ React.createElement("div", {
+      className: "lb-lexical-thread-panel-empty"
+    }, $.THREAD_PANEL_EMPTY));
   }
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "lb-lexical-threads lb-root"
-  }, threads.map((thread) => {
-    return /* @__PURE__ */ React.createElement(ThreadComponent, {
-      isActive: isThreadActive(thread.id),
-      key: thread.id,
-      thread
-    });
-  }));
-};
+);
 
 exports.ThreadPanel = ThreadPanel;
 //# sourceMappingURL=ThreadPanel.js.map

package/dist/comments/ThreadPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadPanel.js","sources":["../../src/comments/ThreadPanel.tsx"],"sourcesContent":["import type { BaseMetadata, ThreadData } from \"@liveblocks/core\";\nimport { useThreads } from \"@liveblocks/react\";\nimport { Thread } from \"@liveblocks/react-ui\";\nimport type { ComponentType } from \"react\";\nimport React, { useCallback, useContext } from \"react\";\n\nimport {\n  IsActiveThreadContext,\n  OnDeleteThreadCallback,\n} from \"./comment-plugin-provider\";\n\ntype ThreadProps = {\n  thread: ThreadData<BaseMetadata>;\n  isActive: boolean;\n};\n\ntype ThreadPanelProps = {\n  renderThread?: ComponentType<ThreadProps>;\n};\n\nconst DefaultThread = ({ thread, isActive }: ThreadProps) => {\n  const onDeleteThread = useContext(OnDeleteThreadCallback);\n  if (onDeleteThread === null) {\n    throw new Error(\"OnDeleteThreadCallback not provided\");\n  }\n  const handleThreadDelete = useCallback(\n    (thread: ThreadData<BaseMetadata>) => {\n      onDeleteThread(thread.id);\n    },\n    [onDeleteThread]\n  );\n\n  return (\n    <Thread\n      thread={thread}\n      data-state={isActive ? \"active\" : null}\n      onThreadDelete={handleThreadDelete}\n    />\n  );\n};\n\nconst ThreadPanel = ({ renderThread }: ThreadPanelProps) => {\n  const { threads } = useThreads();\n  const isThreadActive = useContext(IsActiveThreadContext);\n  const ThreadComponent = renderThread ?? DefaultThread;\n\n  if (!threads || threads.length === 0) {\n    return (\n      <div className=\"lb-root lb-lexical-threads-empty\">No threads yet</div>\n    );\n  }\n\n  return (\n    <div className=\"lb-lexical-threads lb-root\">\n      {threads.map((thread) => {\n        return (\n          <ThreadComponent\n            isActive={isThreadActive(thread.id)}\n            key={thread.id}\n            thread={thread}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport { ThreadPanel };\n"],"names":["useContext","OnDeleteThreadCallback","useCallback","thread","Thread","useThreads","IsActiveThreadContext"],"mappings":";;;;;;;AAoBA,MAAM,aAAgB,GAAA,CAAC,EAAE,MAAA,EAAQ,UAA4B,KAAA;AAC3D,EAAM,MAAA,cAAA,GAAiBA,iBAAWC,4CAAsB,CAAA,CAAA;AACxD,EAAA,IAAI,mBAAmB,IAAM,EAAA;AAC3B,IAAM,MAAA,IAAI,MAAM,qCAAqC,CAAA,CAAA;AAAA,GACvD;AACA,EAAA,MAAM,kBAAqB,GAAAC,iBAAA;AAAA,IACzB,CAACC,OAAqC,KAAA;AACpC,MAAA,cAAA,CAAeA,QAAO,EAAE,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,cAAc,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAC,cAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,YAAA,EAAY,WAAW,QAAW,GAAA,IAAA;AAAA,IAClC,cAAgB,EAAA,kBAAA;AAAA,GAClB,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,MAAM,WAAc,GAAA,CAAC,EAAE,YAAA,EAAqC,KAAA;AAC1D,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAIC,gBAAW,EAAA,CAAA;AAC/B,EAAM,MAAA,cAAA,GAAiBL,iBAAWM,2CAAqB,CAAA,CAAA;AACvD,EAAA,MAAM,kBAAkB,YAAgB,IAAA,aAAA,CAAA;AAExC,EAAA,IAAI,CAAC,OAAA,IAAW,OAAQ,CAAA,MAAA,KAAW,CAAG,EAAA;AACpC,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,kCAAA;AAAA,KAAA,EAAmC,gBAAc,CAAA,CAAA;AAAA,GAEpE;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4BAAA;AAAA,GACZ,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,MAAW,KAAA;AACvB,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MACC,QAAA,EAAU,cAAe,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,MAClC,KAAK,MAAO,CAAA,EAAA;AAAA,MACZ,MAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEH,CACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ThreadPanel.js","sources":["../../src/comments/ThreadPanel.tsx"],"sourcesContent":["import type { BaseMetadata, ThreadData } from \"@liveblocks/core\";\nimport { useThreads } from \"@liveblocks/react\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n  ThreadPanelOverrides,\n  ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { Thread as DefaultThread, useOverrides } from \"@liveblocks/react-ui\";\nimport type { ComponentProps, ComponentType } from \"react\";\nimport React, { forwardRef, useCallback, useContext } from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport {\n  IsActiveThreadContext,\n  OnDeleteThreadCallback,\n} from \"./comment-plugin-provider\";\n\ntype ThreadPanelComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface ThreadPanelProps extends ComponentProps<\"div\"> {\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<ThreadPanelComponents>;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      ThreadPanelOverrides &\n      ThreadOverrides &\n      CommentOverrides &\n      ComposerOverrides\n  >;\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  Thread: ComponentType<ThreadProps>;\n  isActive: boolean;\n}\n\nconst ThreadWrapper = ({ Thread, isActive, ...props }: ThreadWrapperProps) => {\n  const onDeleteThread = useContext(OnDeleteThreadCallback);\n\n  if (onDeleteThread === null) {\n    throw new Error(\"OnDeleteThreadCallback not provided\");\n  }\n\n  const handleThreadDelete = useCallback(\n    (thread: ThreadData<BaseMetadata>) => {\n      onDeleteThread(thread.id);\n    },\n    [onDeleteThread]\n  );\n\n  return (\n    <Thread\n      onThreadDelete={handleThreadDelete}\n      data-state={isActive ? \"active\" : null}\n      {...props}\n    />\n  );\n};\n\nexport const ThreadPanel = forwardRef<HTMLDivElement, ThreadPanelProps>(\n  ({ components, overrides, className, ...props }, forwardedRef) => {\n    const $ = useOverrides(overrides);\n    const { threads } = useThreads();\n    const isThreadActive = useContext(IsActiveThreadContext);\n    const Thread = components?.Thread ?? DefaultThread;\n\n    return (\n      <div\n        className={classNames(className, \"lb-root lb-lexical-thread-panel\")}\n        ref={forwardedRef}\n        {...props}\n      >\n        {threads && threads.length > 0 ? (\n          threads.map((thread) => {\n            return (\n              <ThreadWrapper\n                Thread={Thread}\n                isActive={isThreadActive(thread.id)}\n                key={thread.id}\n                thread={thread}\n                className=\"lb-lexical-thread-panel-thread\"\n              />\n            );\n          })\n        ) : (\n          <div className=\"lb-lexical-thread-panel-empty\">\n            {$.THREAD_PANEL_EMPTY}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["useContext","OnDeleteThreadCallback","useCallback","forwardRef","useOverrides","useThreads","IsActiveThreadContext","DefaultThread","classNames"],"mappings":";;;;;;;;AA+CA,MAAM,gBAAgB,CAAC,EAAE,MAAQ,EAAA,QAAA,EAAA,GAAa,OAAgC,KAAA;AAC5E,EAAM,MAAA,cAAA,GAAiBA,iBAAWC,4CAAsB,CAAA,CAAA;AAExD,EAAA,IAAI,mBAAmB,IAAM,EAAA;AAC3B,IAAM,MAAA,IAAI,MAAM,qCAAqC,CAAA,CAAA;AAAA,GACvD;AAEA,EAAA,MAAM,kBAAqB,GAAAC,iBAAA;AAAA,IACzB,CAAC,MAAqC,KAAA;AACpC,MAAA,cAAA,CAAe,OAAO,EAAE,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,cAAc,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,cAAgB,EAAA,kBAAA;AAAA,IAChB,YAAA,EAAY,WAAW,QAAW,GAAA,IAAA;AAAA,IACjC,GAAG,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,CAAC,EAAE,UAAA,EAAY,WAAW,SAAc,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AAChE,IAAM,MAAA,CAAA,GAAIC,qBAAa,SAAS,CAAA,CAAA;AAChC,IAAM,MAAA,EAAE,OAAQ,EAAA,GAAIC,gBAAW,EAAA,CAAA;AAC/B,IAAM,MAAA,cAAA,GAAiBL,iBAAWM,2CAAqB,CAAA,CAAA;AACvD,IAAM,MAAA,MAAA,GAAS,YAAY,MAAU,IAAAC,cAAA,CAAA;AAErC,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAWC,qBAAW,CAAA,SAAA,EAAW,iCAAiC,CAAA;AAAA,MAClE,GAAK,EAAA,YAAA;AAAA,MACJ,GAAG,KAAA;AAAA,KAAA,EAEH,WAAW,OAAQ,CAAA,MAAA,GAAS,IAC3B,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAW,KAAA;AACtB,MAAA,uBACG,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,QACC,MAAA;AAAA,QACA,QAAA,EAAU,cAAe,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,QAClC,KAAK,MAAO,CAAA,EAAA;AAAA,QACZ,MAAA;AAAA,QACA,SAAU,EAAA,gCAAA;AAAA,OACZ,CAAA,CAAA;AAAA,KAEH,oBAEA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,+BAAA;AAAA,KACZ,EAAA,CAAA,CAAE,kBACL,CAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/comments/ThreadPanel.mjs

@@ -1,44 +1,49 @@
 import { useThreads } from '@liveblocks/react';
-import { Thread } from '@liveblocks/react-ui';
-import React__default, { useContext, useCallback } from 'react';
+import { useOverrides, Thread } from '@liveblocks/react-ui';
+import React__default, { useContext, useCallback, forwardRef } from 'react';
+import { classNames } from '../classnames.mjs';
 import { OnDeleteThreadCallback, IsActiveThreadContext } from './comment-plugin-provider.mjs';
 
-const DefaultThread = ({ thread, isActive }) => {
+const ThreadWrapper = ({ Thread, isActive, ...props }) => {
   const onDeleteThread = useContext(OnDeleteThreadCallback);
   if (onDeleteThread === null) {
     throw new Error("OnDeleteThreadCallback not provided");
   }
   const handleThreadDelete = useCallback(
-    (thread2) => {
-      onDeleteThread(thread2.id);
+    (thread) => {
+      onDeleteThread(thread.id);
     },
     [onDeleteThread]
   );
   return /* @__PURE__ */ React__default.createElement(Thread, {
-    thread,
+    onThreadDelete: handleThreadDelete,
     "data-state": isActive ? "active" : null,
-    onThreadDelete: handleThreadDelete
+    ...props
   });
 };
-const ThreadPanel = ({ renderThread }) => {
-  const { threads } = useThreads();
-  const isThreadActive = useContext(IsActiveThreadContext);
-  const ThreadComponent = renderThread ?? DefaultThread;
-  if (!threads || threads.length === 0) {
+const ThreadPanel = forwardRef(
+  ({ components, overrides, className, ...props }, forwardedRef) => {
+    const $ = useOverrides(overrides);
+    const { threads } = useThreads();
+    const isThreadActive = useContext(IsActiveThreadContext);
+    const Thread$1 = components?.Thread ?? Thread;
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: "lb-root lb-lexical-threads-empty"
-    }, "No threads yet");
+      className: classNames(className, "lb-root lb-lexical-thread-panel"),
+      ref: forwardedRef,
+      ...props
+    }, threads && threads.length > 0 ? threads.map((thread) => {
+      return /* @__PURE__ */ React__default.createElement(ThreadWrapper, {
+        Thread: Thread$1,
+        isActive: isThreadActive(thread.id),
+        key: thread.id,
+        thread,
+        className: "lb-lexical-thread-panel-thread"
+      });
+    }) : /* @__PURE__ */ React__default.createElement("div", {
+      className: "lb-lexical-thread-panel-empty"
+    }, $.THREAD_PANEL_EMPTY));
   }
-  return /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-lexical-threads lb-root"
-  }, threads.map((thread) => {
-    return /* @__PURE__ */ React__default.createElement(ThreadComponent, {
-      isActive: isThreadActive(thread.id),
-      key: thread.id,
-      thread
-    });
-  }));
-};
+);
 
 export { ThreadPanel };
 //# sourceMappingURL=ThreadPanel.mjs.map

package/dist/comments/ThreadPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadPanel.mjs","sources":["../../src/comments/ThreadPanel.tsx"],"sourcesContent":["import type { BaseMetadata, ThreadData } from \"@liveblocks/core\";\nimport { useThreads } from \"@liveblocks/react\";\nimport { Thread } from \"@liveblocks/react-ui\";\nimport type { ComponentType } from \"react\";\nimport React, { useCallback, useContext } from \"react\";\n\nimport {\n  IsActiveThreadContext,\n  OnDeleteThreadCallback,\n} from \"./comment-plugin-provider\";\n\ntype ThreadProps = {\n  thread: ThreadData<BaseMetadata>;\n  isActive: boolean;\n};\n\ntype ThreadPanelProps = {\n  renderThread?: ComponentType<ThreadProps>;\n};\n\nconst DefaultThread = ({ thread, isActive }: ThreadProps) => {\n  const onDeleteThread = useContext(OnDeleteThreadCallback);\n  if (onDeleteThread === null) {\n    throw new Error(\"OnDeleteThreadCallback not provided\");\n  }\n  const handleThreadDelete = useCallback(\n    (thread: ThreadData<BaseMetadata>) => {\n      onDeleteThread(thread.id);\n    },\n    [onDeleteThread]\n  );\n\n  return (\n    <Thread\n      thread={thread}\n      data-state={isActive ? \"active\" : null}\n      onThreadDelete={handleThreadDelete}\n    />\n  );\n};\n\nconst ThreadPanel = ({ renderThread }: ThreadPanelProps) => {\n  const { threads } = useThreads();\n  const isThreadActive = useContext(IsActiveThreadContext);\n  const ThreadComponent = renderThread ?? DefaultThread;\n\n  if (!threads || threads.length === 0) {\n    return (\n      <div className=\"lb-root lb-lexical-threads-empty\">No threads yet</div>\n    );\n  }\n\n  return (\n    <div className=\"lb-lexical-threads lb-root\">\n      {threads.map((thread) => {\n        return (\n          <ThreadComponent\n            isActive={isThreadActive(thread.id)}\n            key={thread.id}\n            thread={thread}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport { ThreadPanel };\n"],"names":["thread","React"],"mappings":";;;;;AAoBA,MAAM,aAAgB,GAAA,CAAC,EAAE,MAAA,EAAQ,UAA4B,KAAA;AAC3D,EAAM,MAAA,cAAA,GAAiB,WAAW,sBAAsB,CAAA,CAAA;AACxD,EAAA,IAAI,mBAAmB,IAAM,EAAA;AAC3B,IAAM,MAAA,IAAI,MAAM,qCAAqC,CAAA,CAAA;AAAA,GACvD;AACA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAACA,OAAqC,KAAA;AACpC,MAAA,cAAA,CAAeA,QAAO,EAAE,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,cAAc,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,YAAA,EAAY,WAAW,QAAW,GAAA,IAAA;AAAA,IAClC,cAAgB,EAAA,kBAAA;AAAA,GAClB,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,MAAM,WAAc,GAAA,CAAC,EAAE,YAAA,EAAqC,KAAA;AAC1D,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,UAAW,EAAA,CAAA;AAC/B,EAAM,MAAA,cAAA,GAAiB,WAAW,qBAAqB,CAAA,CAAA;AACvD,EAAA,MAAM,kBAAkB,YAAgB,IAAA,aAAA,CAAA;AAExC,EAAA,IAAI,CAAC,OAAA,IAAW,OAAQ,CAAA,MAAA,KAAW,CAAG,EAAA;AACpC,IAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,kCAAA;AAAA,KAAA,EAAmC,gBAAc,CAAA,CAAA;AAAA,GAEpE;AAEA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4BAAA;AAAA,GACZ,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,MAAW,KAAA;AACvB,IAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MACC,QAAA,EAAU,cAAe,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,MAClC,KAAK,MAAO,CAAA,EAAA;AAAA,MACZ,MAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEH,CACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ThreadPanel.mjs","sources":["../../src/comments/ThreadPanel.tsx"],"sourcesContent":["import type { BaseMetadata, ThreadData } from \"@liveblocks/core\";\nimport { useThreads } from \"@liveblocks/react\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n  ThreadPanelOverrides,\n  ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { Thread as DefaultThread, useOverrides } from \"@liveblocks/react-ui\";\nimport type { ComponentProps, ComponentType } from \"react\";\nimport React, { forwardRef, useCallback, useContext } from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport {\n  IsActiveThreadContext,\n  OnDeleteThreadCallback,\n} from \"./comment-plugin-provider\";\n\ntype ThreadPanelComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface ThreadPanelProps extends ComponentProps<\"div\"> {\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<ThreadPanelComponents>;\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides &\n      ThreadPanelOverrides &\n      ThreadOverrides &\n      CommentOverrides &\n      ComposerOverrides\n  >;\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  Thread: ComponentType<ThreadProps>;\n  isActive: boolean;\n}\n\nconst ThreadWrapper = ({ Thread, isActive, ...props }: ThreadWrapperProps) => {\n  const onDeleteThread = useContext(OnDeleteThreadCallback);\n\n  if (onDeleteThread === null) {\n    throw new Error(\"OnDeleteThreadCallback not provided\");\n  }\n\n  const handleThreadDelete = useCallback(\n    (thread: ThreadData<BaseMetadata>) => {\n      onDeleteThread(thread.id);\n    },\n    [onDeleteThread]\n  );\n\n  return (\n    <Thread\n      onThreadDelete={handleThreadDelete}\n      data-state={isActive ? \"active\" : null}\n      {...props}\n    />\n  );\n};\n\nexport const ThreadPanel = forwardRef<HTMLDivElement, ThreadPanelProps>(\n  ({ components, overrides, className, ...props }, forwardedRef) => {\n    const $ = useOverrides(overrides);\n    const { threads } = useThreads();\n    const isThreadActive = useContext(IsActiveThreadContext);\n    const Thread = components?.Thread ?? DefaultThread;\n\n    return (\n      <div\n        className={classNames(className, \"lb-root lb-lexical-thread-panel\")}\n        ref={forwardedRef}\n        {...props}\n      >\n        {threads && threads.length > 0 ? (\n          threads.map((thread) => {\n            return (\n              <ThreadWrapper\n                Thread={Thread}\n                isActive={isThreadActive(thread.id)}\n                key={thread.id}\n                thread={thread}\n                className=\"lb-lexical-thread-panel-thread\"\n              />\n            );\n          })\n        ) : (\n          <div className=\"lb-lexical-thread-panel-empty\">\n            {$.THREAD_PANEL_EMPTY}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["React","Thread","DefaultThread"],"mappings":";;;;;;AA+CA,MAAM,gBAAgB,CAAC,EAAE,MAAQ,EAAA,QAAA,EAAA,GAAa,OAAgC,KAAA;AAC5E,EAAM,MAAA,cAAA,GAAiB,WAAW,sBAAsB,CAAA,CAAA;AAExD,EAAA,IAAI,mBAAmB,IAAM,EAAA;AAC3B,IAAM,MAAA,IAAI,MAAM,qCAAqC,CAAA,CAAA;AAAA,GACvD;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,MAAqC,KAAA;AACpC,MAAA,cAAA,CAAe,OAAO,EAAE,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,cAAc,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,cAAgB,EAAA,kBAAA;AAAA,IAChB,YAAA,EAAY,WAAW,QAAW,GAAA,IAAA;AAAA,IACjC,GAAG,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,CAAC,EAAE,UAAA,EAAY,WAAW,SAAc,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AAChE,IAAM,MAAA,CAAA,GAAI,aAAa,SAAS,CAAA,CAAA;AAChC,IAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,UAAW,EAAA,CAAA;AAC/B,IAAM,MAAA,cAAA,GAAiB,WAAW,qBAAqB,CAAA,CAAA;AACvD,IAAM,MAAAC,QAAA,GAAS,YAAY,MAAU,IAAAC,MAAA,CAAA;AAErC,IAAA,uBACGF,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,UAAW,CAAA,SAAA,EAAW,iCAAiC,CAAA;AAAA,MAClE,GAAK,EAAA,YAAA;AAAA,MACJ,GAAG,KAAA;AAAA,KAAA,EAEH,WAAW,OAAQ,CAAA,MAAA,GAAS,IAC3B,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAW,KAAA;AACtB,MAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,gBACCC,QAAA;AAAA,QACA,QAAA,EAAU,cAAe,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,QAClC,KAAK,MAAO,CAAA,EAAA;AAAA,QACZ,MAAA;AAAA,QACA,SAAU,EAAA,gCAAA;AAAA,OACZ,CAAA,CAAA;AAAA,KAEH,oBAEAD,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,+BAAA;AAAA,KACZ,EAAA,CAAA,CAAE,kBACL,CAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/index.d.mts

@@ -1,8 +1,8 @@
-import { BaseMetadata, ThreadData } from '@liveblocks/core';
-import { ComposerProps } from '@liveblocks/react-ui';
+import { BaseMetadata } from '@liveblocks/core';
+import { ComposerProps, GlobalOverrides, ThreadPanelOverrides, ThreadOverrides, CommentOverrides, ComposerOverrides, ThreadProps } from '@liveblocks/react-ui';
 import * as lexical from 'lexical';
-import { LexicalCommand, ElementNode, NodeKey, RangeSelection, LexicalNode, BaseSelection, Spread, SerializedElementNode, DecoratorNode, DOMConversionMap, DOMExportOutput, SerializedLexicalNode } from 'lexical';
-import React, { ComponentType, ReactNode, JSX as JSX$1 } from 'react';
+import { LexicalCommand, NodeKey } from 'lexical';
+import React, { ComponentProps, ComponentType, ReactNode } from 'react';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 
 declare const OPEN_FLOATING_COMPOSER_COMMAND: LexicalCommand<void>;
@@ -12,62 +12,20 @@ declare type ThreadMetadata = {
 declare type FloatingComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<ComposerProps<M>, "threadId" | "commentId">;
 declare const FloatingComposer: React.ForwardRefExoticComponent<FloatingComposerProps<ThreadMetadata> & React.RefAttributes<HTMLFormElement>>;
 
-/**
- * MIT License
- * Copyright (c) Meta Platforms, Inc. and affiliates.
-
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-declare type SerializedThreadMarkNode = Spread<{
-    ids: Array<string>;
-}, SerializedElementNode>;
-declare class ThreadMarkNode extends ElementNode {
-    static getType(): string;
-    static clone(node: ThreadMarkNode): ThreadMarkNode;
-    static importDOM(): null;
-    static importJSON(serializedNode: SerializedThreadMarkNode): ThreadMarkNode;
-    exportJSON(): SerializedThreadMarkNode;
-    constructor(ids: Array<string>, key?: NodeKey);
-    createDOM(): HTMLElement;
-    updateDOM(): boolean;
-    hasID(id: string): boolean;
-    getIDs(): Array<string>;
-    addID(id: string): void;
-    deleteID(id: string): void;
-    insertNewAfter(_: RangeSelection, restoreSelection?: boolean): null | ElementNode;
-    canInsertTextBefore(): false;
-    canInsertTextAfter(): false;
-    canBeEmpty(): false;
-    isInline(): true;
-    extractWithChild(_: LexicalNode, selection: BaseSelection, destination: "clone" | "html"): boolean;
-    excludeFromCopy(destination: "clone" | "html"): boolean;
-}
-
-declare type ThreadProps = {
-    thread: ThreadData<BaseMetadata>;
-    isActive: boolean;
+declare type ThreadPanelComponents = {
+    Thread: ComponentType<ThreadProps>;
 };
-declare type ThreadPanelProps = {
-    renderThread?: ComponentType<ThreadProps>;
-};
-declare const ThreadPanel: ({ renderThread }: ThreadPanelProps) => React.JSX.Element;
+interface ThreadPanelProps extends ComponentProps<"div"> {
+    /**
+     * Override the component's components.
+     */
+    components?: Partial<ThreadPanelComponents>;
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides & ThreadPanelOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
+}
+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)[];
@@ -90,24 +48,4 @@ declare function Mention({ nodeKey, children, }: {
     children: ReactNode;
 }): React.JSX.Element;
 
-declare type SerializedMentionNode = Spread<{
-    userId: string;
-}, SerializedLexicalNode>;
-declare class MentionNode extends DecoratorNode<JSX$1.Element> {
-    __id: string;
-    __userId: string;
-    constructor(id: string, userId: string, key?: NodeKey);
-    static getType(): string;
-    static clone(node: MentionNode): MentionNode;
-    createDOM(): HTMLElement;
-    updateDOM(): boolean;
-    static importDom(): DOMConversionMap<HTMLElement> | null;
-    exportDOM(): DOMExportOutput;
-    static importJSON(serializedNode: SerializedMentionNode): MentionNode;
-    exportJSON(): SerializedMentionNode;
-    getUserId(): string;
-    getId(): string;
-    decorate(): JSX$1.Element;
-}
-
-export { FloatingComposer, LiveblocksPlugin, Mention, MentionNode, OPEN_FLOATING_COMPOSER_COMMAND, ThreadMarkNode, ThreadPanel, liveblocksConfig };
+export { FloatingComposer, LiveblocksPlugin, Mention, OPEN_FLOATING_COMPOSER_COMMAND, ThreadPanel, ThreadPanelProps, liveblocksConfig };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import { BaseMetadata, ThreadData } from '@liveblocks/core';
-import { ComposerProps } from '@liveblocks/react-ui';
+import { BaseMetadata } from '@liveblocks/core';
+import { ComposerProps, GlobalOverrides, ThreadPanelOverrides, ThreadOverrides, CommentOverrides, ComposerOverrides, ThreadProps } from '@liveblocks/react-ui';
 import * as lexical from 'lexical';
-import { LexicalCommand, ElementNode, NodeKey, RangeSelection, LexicalNode, BaseSelection, Spread, SerializedElementNode, DecoratorNode, DOMConversionMap, DOMExportOutput, SerializedLexicalNode } from 'lexical';
-import React, { ComponentType, ReactNode, JSX as JSX$1 } from 'react';
+import { LexicalCommand, NodeKey } from 'lexical';
+import React, { ComponentProps, ComponentType, ReactNode } from 'react';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 
 declare const OPEN_FLOATING_COMPOSER_COMMAND: LexicalCommand<void>;
@@ -12,62 +12,20 @@ declare type ThreadMetadata = {
 declare type FloatingComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<ComposerProps<M>, "threadId" | "commentId">;
 declare const FloatingComposer: React.ForwardRefExoticComponent<FloatingComposerProps<ThreadMetadata> & React.RefAttributes<HTMLFormElement>>;
 
-/**
- * MIT License
- * Copyright (c) Meta Platforms, Inc. and affiliates.
-
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-declare type SerializedThreadMarkNode = Spread<{
-    ids: Array<string>;
-}, SerializedElementNode>;
-declare class ThreadMarkNode extends ElementNode {
-    static getType(): string;
-    static clone(node: ThreadMarkNode): ThreadMarkNode;
-    static importDOM(): null;
-    static importJSON(serializedNode: SerializedThreadMarkNode): ThreadMarkNode;
-    exportJSON(): SerializedThreadMarkNode;
-    constructor(ids: Array<string>, key?: NodeKey);
-    createDOM(): HTMLElement;
-    updateDOM(): boolean;
-    hasID(id: string): boolean;
-    getIDs(): Array<string>;
-    addID(id: string): void;
-    deleteID(id: string): void;
-    insertNewAfter(_: RangeSelection, restoreSelection?: boolean): null | ElementNode;
-    canInsertTextBefore(): false;
-    canInsertTextAfter(): false;
-    canBeEmpty(): false;
-    isInline(): true;
-    extractWithChild(_: LexicalNode, selection: BaseSelection, destination: "clone" | "html"): boolean;
-    excludeFromCopy(destination: "clone" | "html"): boolean;
-}
-
-declare type ThreadProps = {
-    thread: ThreadData<BaseMetadata>;
-    isActive: boolean;
+declare type ThreadPanelComponents = {
+    Thread: ComponentType<ThreadProps>;
 };
-declare type ThreadPanelProps = {
-    renderThread?: ComponentType<ThreadProps>;
-};
-declare const ThreadPanel: ({ renderThread }: ThreadPanelProps) => React.JSX.Element;
+interface ThreadPanelProps extends ComponentProps<"div"> {
+    /**
+     * Override the component's components.
+     */
+    components?: Partial<ThreadPanelComponents>;
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides & ThreadPanelOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
+}
+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)[];
@@ -90,24 +48,4 @@ declare function Mention({ nodeKey, children, }: {
     children: ReactNode;
 }): React.JSX.Element;
 
-declare type SerializedMentionNode = Spread<{
-    userId: string;
-}, SerializedLexicalNode>;
-declare class MentionNode extends DecoratorNode<JSX$1.Element> {
-    __id: string;
-    __userId: string;
-    constructor(id: string, userId: string, key?: NodeKey);
-    static getType(): string;
-    static clone(node: MentionNode): MentionNode;
-    createDOM(): HTMLElement;
-    updateDOM(): boolean;
-    static importDom(): DOMConversionMap<HTMLElement> | null;
-    exportDOM(): DOMExportOutput;
-    static importJSON(serializedNode: SerializedMentionNode): MentionNode;
-    exportJSON(): SerializedMentionNode;
-    getUserId(): string;
-    getId(): string;
-    decorate(): JSX$1.Element;
-}
-
-export { FloatingComposer, LiveblocksPlugin, Mention, MentionNode, OPEN_FLOATING_COMPOSER_COMMAND, ThreadMarkNode, ThreadPanel, liveblocksConfig };
+export { FloatingComposer, LiveblocksPlugin, Mention, OPEN_FLOATING_COMPOSER_COMMAND, ThreadPanel, ThreadPanelProps, liveblocksConfig };

package/dist/index.js

@@ -3,21 +3,17 @@
 var core = require('@liveblocks/core');
 var version = require('./version.js');
 var floatingComposer = require('./comments/floating-composer.js');
-var threadMarkNode = require('./comments/thread-mark-node.js');
 var ThreadPanel = require('./comments/ThreadPanel.js');
 var liveblocksConfig = require('./liveblocks-config.js');
 var liveblocksPluginProvider = require('./liveblocks-plugin-provider.js');
 var mentionComponent = require('./mentions/mention-component.js');
-var mentionNode = require('./mentions/mention-node.js');
 
 core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
 
 exports.FloatingComposer = floatingComposer.FloatingComposer;
 exports.OPEN_FLOATING_COMPOSER_COMMAND = floatingComposer.OPEN_FLOATING_COMPOSER_COMMAND;
-exports.ThreadMarkNode = threadMarkNode.ThreadMarkNode;
 exports.ThreadPanel = ThreadPanel.ThreadPanel;
 exports.liveblocksConfig = liveblocksConfig.liveblocksConfig;
 exports.LiveblocksPlugin = liveblocksPluginProvider.LiveblocksPlugin;
 exports.Mention = mentionComponent.Mention;
-exports.MentionNode = mentionNode.MentionNode;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport {\n  FloatingComposer,\n  OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nexport { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport { LiveblocksPlugin } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\nexport { MentionNode } from \"./mentions/mention-node\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport {\n  FloatingComposer,\n  OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport type { ThreadPanelProps } from \"./comments/ThreadPanel\";\nexport { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport { LiveblocksPlugin } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;"}

package/dist/index.mjs

@@ -1,12 +1,10 @@
 import { detectDupes } from '@liveblocks/core';
 import { PKG_NAME, PKG_VERSION, PKG_FORMAT } from './version.mjs';
 export { FloatingComposer, OPEN_FLOATING_COMPOSER_COMMAND } from './comments/floating-composer.mjs';
-export { ThreadMarkNode } from './comments/thread-mark-node.mjs';
 export { ThreadPanel } from './comments/ThreadPanel.mjs';
 export { liveblocksConfig } from './liveblocks-config.mjs';
 export { LiveblocksPlugin } from './liveblocks-plugin-provider.mjs';
 export { Mention } from './mentions/mention-component.mjs';
-export { MentionNode } from './mentions/mention-node.mjs';
 
 detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport {\n  FloatingComposer,\n  OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nexport { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport { LiveblocksPlugin } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\nexport { MentionNode } from \"./mentions/mention-node\";\n"],"names":[],"mappings":";;;;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport {\n  FloatingComposer,\n  OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport type { ThreadPanelProps } from \"./comments/ThreadPanel\";\nexport { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport { LiveblocksPlugin } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\n"],"names":[],"mappings":";;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/liveblocks-plugin-provider.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var LexicalCollaborationContext = require('@lexical/react/LexicalCollaborationContext');
 var LexicalCollaborationPlugin = require('@lexical/react/LexicalCollaborationPlugin');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var core = require('@liveblocks/core');
@@ -10,6 +11,7 @@ var yjs = require('yjs');
 var commentPluginProvider = require('./comments/comment-plugin-provider.js');
 var mentionPlugin = require('./mentions/mention-plugin.js');
 
+const providersMap = /* @__PURE__ */ new Map();
 const LiveblocksPlugin = ({
   children
 }) => {
@@ -17,16 +19,8 @@ const LiveblocksPlugin = ({
   const hasResolveMentionSuggestions = client[core.kInternal].resolveMentionSuggestions !== void 0;
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const room = react.useRoom();
-  const [provider, setProvider] = React.useState();
-  const doc = React.useMemo(() => new yjs.Doc(), []);
-  React.useEffect(() => {
-    const _provider = new yjs$1.LiveblocksYjsProvider(room, doc);
-    setProvider(_provider);
-    return () => {
-      _provider.destroy();
-      setProvider(void 0);
-    };
-  }, [room, doc]);
+  const collabContext = React.useContext(LexicalCollaborationContext.CollaborationContext);
+  const previousRoomIdRef = React.useRef(null);
   React.useEffect(() => {
     if (process.env.NODE_ENV !== "production") {
       if (!editor.getEditorState().isEmpty()) {
@@ -40,18 +34,37 @@ const LiveblocksPlugin = ({
     room[core.kInternal].reportTextEditor("lexical", "root");
   }, [room]);
   const info = react.useSelf((me) => me.info);
-  const username = info?.name;
+  const username = info?.name || "";
   const cursorcolor = info?.color;
   const providerFactory = React.useCallback(
     (id, yjsDocMap) => {
-      yjsDocMap.set(id, doc);
-      return provider;
+      if (previousRoomIdRef.current !== null && previousRoomIdRef.current !== id) {
+        const previousProvider = providersMap.get(id);
+        if (previousProvider !== void 0) {
+          previousProvider.destroy();
+        }
+      }
+      let doc = yjsDocMap.get(id);
+      if (doc === void 0) {
+        doc = new yjs.Doc();
+        const provider = new yjs$1.LiveblocksYjsProvider(room, doc);
+        yjsDocMap.set(id, doc);
+        providersMap.set(id, provider);
+      }
+      return core.nn(
+        providersMap.get(id),
+        "Internal error. Should never happen"
+      );
     },
-    [provider, doc]
+    [room]
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, provider && /* @__PURE__ */ React.createElement(LexicalCollaborationPlugin.CollaborationPlugin, {
+  React.useEffect(() => {
+    collabContext.name = username || "";
+  }, [collabContext, username]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(LexicalCollaborationPlugin.CollaborationPlugin, {
+    key: room.id,
+    id: room.id,
     providerFactory,
-    id: "liveblocks-document",
     username,
     cursorColor: cursorcolor,
     shouldBootstrap: true

package/dist/liveblocks-plugin-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"liveblocks-plugin-provider.js","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport type {\n  BaseMetadata,\n  BaseUserMeta,\n  Json,\n  JsonObject,\n  LsonObject,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport { useClient, useRoom, useSelf } from \"@liveblocks/react\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { MentionPlugin } from \"./mentions/mention-plugin\";\n\nexport type LiveblocksPluginProps = {\n  children?: React.ReactNode;\n};\n\nexport const LiveblocksPlugin = ({\n  children,\n}: LiveblocksPluginProps): JSX.Element => {\n  const client = useClient();\n  const hasResolveMentionSuggestions =\n    client[kInternal].resolveMentionSuggestions !== undefined;\n  const [editor] = useLexicalComposerContext();\n  const room = useRoom();\n\n  const [provider, setProvider] = useState<\n    | LiveblocksYjsProvider<\n        JsonObject,\n        LsonObject,\n        BaseUserMeta,\n        Json,\n        BaseMetadata\n      >\n    | undefined\n  >();\n\n  const doc = useMemo(() => new Doc(), []);\n\n  useEffect(() => {\n    const _provider = new LiveblocksYjsProvider(room, doc);\n    setProvider(_provider);\n    return () => {\n      _provider.destroy();\n      setProvider(undefined);\n    };\n  }, [room, doc]);\n\n  // Warn users if initialConfig.editorState, set on the composer, is not null\n  useEffect(() => {\n    // only in dev mode\n    if (process.env.NODE_ENV !== \"production\") {\n      // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n      if (!editor.getEditorState().isEmpty()) {\n        console.warn(\n          \"Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null.\"\n        );\n      }\n    }\n\n    // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    // Report that this is lexical and root is the rootKey\n    room[kInternal].reportTextEditor(\"lexical\", \"root\");\n  }, [room]);\n\n  // Get user info or allow override from props\n  const info = useSelf((me) => me.info);\n  const username = info?.name;\n  const cursorcolor = info?.color as string | undefined;\n\n  // Create the provider factory\n  const providerFactory = useCallback(\n    (id: string, yjsDocMap: Map<string, Doc>) => {\n      yjsDocMap.set(id, doc);\n      return provider as Provider;\n    },\n    [provider, doc]\n  );\n\n  return (\n    <>\n      {provider && (\n        <CollaborationPlugin\n          providerFactory={providerFactory}\n          id={\"liveblocks-document\"}\n          username={username}\n          cursorColor={cursorcolor}\n          shouldBootstrap={true}\n        />\n      )}\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      <CommentPluginProvider>{children}</CommentPluginProvider>\n    </>\n  );\n};\n"],"names":["useClient","kInternal","useLexicalComposerContext","useRoom","useState","useMemo","Doc","useEffect","LiveblocksYjsProvider","useSelf","useCallback","CollaborationPlugin","MentionPlugin","CommentPluginProvider"],"mappings":";;;;;;;;;;;;AAuBO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AACF,CAA0C,KAAA;AACxC,EAAA,MAAM,SAASA,eAAU,EAAA,CAAA;AACzB,EAAM,MAAA,4BAAA,GACJ,MAAO,CAAAC,cAAA,CAAA,CAAW,yBAA8B,KAAA,KAAA,CAAA,CAAA;AAClD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIC,gDAA0B,EAAA,CAAA;AAC3C,EAAA,MAAM,OAAOC,aAAQ,EAAA,CAAA;AAErB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,cAS9B,EAAA,CAAA;AAEF,EAAA,MAAM,MAAMC,aAAQ,CAAA,MAAM,IAAIC,OAAI,EAAA,EAAG,EAAE,CAAA,CAAA;AAEvC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,SAAY,GAAA,IAAIC,2BAAsB,CAAA,IAAA,EAAM,GAAG,CAAA,CAAA;AACrD,IAAA,WAAA,CAAY,SAAS,CAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAQ,EAAA,CAAA;AAClB,MAAA,WAAA,CAAY,KAAS,CAAA,CAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,GAAG,CAAC,CAAA,CAAA;AAGd,EAAAD,eAAA,CAAU,MAAM;AAEd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AAEzC,MAAA,IAAI,CAAC,MAAA,CAAO,cAAe,EAAA,CAAE,SAAW,EAAA;AACtC,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN,qFAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GAIF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAAA,eAAA,CAAU,MAAM;AAEd,IAAK,IAAA,CAAAN,cAAA,CAAA,CAAW,gBAAiB,CAAA,SAAA,EAAW,MAAM,CAAA,CAAA;AAAA,GACpD,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAGT,EAAA,MAAM,IAAO,GAAAQ,aAAA,CAAQ,CAAC,EAAA,KAAO,GAAG,IAAI,CAAA,CAAA;AACpC,EAAA,MAAM,WAAW,IAAM,EAAA,IAAA,CAAA;AACvB,EAAA,MAAM,cAAc,IAAM,EAAA,KAAA,CAAA;AAG1B,EAAA,MAAM,eAAkB,GAAAC,iBAAA;AAAA,IACtB,CAAC,IAAY,SAAgC,KAAA;AAC3C,MAAU,SAAA,CAAA,GAAA,CAAI,IAAI,GAAG,CAAA,CAAA;AACrB,MAAO,OAAA,QAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,UAAU,GAAG,CAAA;AAAA,GAChB,CAAA;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,4BACE,KAAA,CAAA,aAAA,CAAAC,8CAAA,EAAA;AAAA,IACC,eAAA;AAAA,IACA,EAAI,EAAA,qBAAA;AAAA,IACJ,QAAA;AAAA,IACA,WAAa,EAAA,WAAA;AAAA,IACb,eAAiB,EAAA,IAAA;AAAA,GACnB,CAAA,EAGD,gDAAiC,KAAA,CAAA,aAAA,CAAAC,2BAAA,EAAA,IAAc,mBAE/C,KAAA,CAAA,aAAA,CAAAC,2CAAA,EAAA,IAAA,EAAuB,QAAS,CACnC,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"liveblocks-plugin-provider.js","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { CollaborationContext } from \"@lexical/react/LexicalCollaborationContext\";\nimport { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport { kInternal, nn } from \"@liveblocks/core\";\nimport { useClient, useRoom, useSelf } from \"@liveblocks/react\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport React, { useCallback, useContext, useEffect, useRef } from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { MentionPlugin } from \"./mentions/mention-plugin\";\n\n// TODO: Replace by ref once I understand why useRef is not stable (?!)\nconst providersMap = new Map<\n  string,\n  LiveblocksYjsProvider<never, never, never, never, never>\n>();\n\nexport type LiveblocksPluginProps = {\n  children?: React.ReactNode;\n};\n\nexport const LiveblocksPlugin = ({\n  children,\n}: LiveblocksPluginProps): JSX.Element => {\n  const client = useClient();\n  const hasResolveMentionSuggestions =\n    client[kInternal].resolveMentionSuggestions !== undefined;\n  const [editor] = useLexicalComposerContext();\n  const room = useRoom();\n  const collabContext = useContext(CollaborationContext);\n  const previousRoomIdRef = useRef<string | null>(null);\n\n  // Warn users if initialConfig.editorState, set on the composer, is not null\n  useEffect(() => {\n    // only in dev mode\n    if (process.env.NODE_ENV !== \"production\") {\n      // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n      if (!editor.getEditorState().isEmpty()) {\n        console.warn(\n          \"Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null.\"\n        );\n      }\n    }\n\n    // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    // Report that this is lexical and root is the rootKey\n    room[kInternal].reportTextEditor(\"lexical\", \"root\");\n  }, [room]);\n\n  // Get user info or allow override from props\n  const info = useSelf((me) => me.info);\n  const username = info?.name || \"\"; // use empty string to prevent random name\n  const cursorcolor = info?.color as string | undefined;\n\n  const providerFactory = useCallback(\n    (id: string, yjsDocMap: Map<string, Doc>): Provider => {\n      // Destroy previously used provider to avoid memory leaks\n      // TODO: Find a way to destroy the last used provider on unmount (while working with StrictMode)\n      if (\n        previousRoomIdRef.current !== null &&\n        previousRoomIdRef.current !== id\n      ) {\n        const previousProvider = providersMap.get(id);\n        if (previousProvider !== undefined) {\n          previousProvider.destroy();\n        }\n      }\n\n      let doc = yjsDocMap.get(id);\n\n      if (doc === undefined) {\n        doc = new Doc();\n        const provider = new LiveblocksYjsProvider(room, doc);\n        yjsDocMap.set(id, doc);\n        providersMap.set(id, provider);\n      }\n\n      return nn(\n        providersMap.get(id),\n        \"Internal error. Should never happen\"\n      ) as Provider;\n    },\n    [room]\n  );\n\n  useEffect(() => {\n    collabContext.name = username || \"\";\n  }, [collabContext, username]);\n\n  return (\n    <>\n      <CollaborationPlugin\n        // Setting the key allows us to reset the internal Y.doc used by useYjsCollaboration\n        // without implementing `reload` event\n        key={room.id}\n        id={room.id}\n        providerFactory={providerFactory}\n        username={username}\n        cursorColor={cursorcolor}\n        shouldBootstrap={true}\n      />\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      <CommentPluginProvider>{children}</CommentPluginProvider>\n    </>\n  );\n};\n"],"names":["useClient","kInternal","useLexicalComposerContext","useRoom","useContext","CollaborationContext","useRef","useEffect","useSelf","useCallback","Doc","LiveblocksYjsProvider","nn","CollaborationPlugin","MentionPlugin","CommentPluginProvider"],"mappings":"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"}

package/dist/liveblocks-plugin-provider.mjs

@@ -1,13 +1,15 @@
+import { CollaborationContext } from '@lexical/react/LexicalCollaborationContext';
 import { CollaborationPlugin } from '@lexical/react/LexicalCollaborationPlugin';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { kInternal } from '@liveblocks/core';
+import { kInternal, nn } from '@liveblocks/core';
 import { useClient, useRoom, useSelf } from '@liveblocks/react';
 import { LiveblocksYjsProvider } from '@liveblocks/yjs';
-import React__default, { useState, useMemo, useEffect, useCallback } from 'react';
+import React__default, { useContext, useRef, useEffect, useCallback } from 'react';
 import { Doc } from 'yjs';
 import { CommentPluginProvider } from './comments/comment-plugin-provider.mjs';
 import { MentionPlugin } from './mentions/mention-plugin.mjs';
 
+const providersMap = /* @__PURE__ */ new Map();
 const LiveblocksPlugin = ({
   children
 }) => {
@@ -15,16 +17,8 @@ const LiveblocksPlugin = ({
   const hasResolveMentionSuggestions = client[kInternal].resolveMentionSuggestions !== void 0;
   const [editor] = useLexicalComposerContext();
   const room = useRoom();
-  const [provider, setProvider] = useState();
-  const doc = useMemo(() => new Doc(), []);
-  useEffect(() => {
-    const _provider = new LiveblocksYjsProvider(room, doc);
-    setProvider(_provider);
-    return () => {
-      _provider.destroy();
-      setProvider(void 0);
-    };
-  }, [room, doc]);
+  const collabContext = useContext(CollaborationContext);
+  const previousRoomIdRef = useRef(null);
   useEffect(() => {
     if (process.env.NODE_ENV !== "production") {
       if (!editor.getEditorState().isEmpty()) {
@@ -38,18 +32,37 @@ const LiveblocksPlugin = ({
     room[kInternal].reportTextEditor("lexical", "root");
   }, [room]);
   const info = useSelf((me) => me.info);
-  const username = info?.name;
+  const username = info?.name || "";
   const cursorcolor = info?.color;
   const providerFactory = useCallback(
     (id, yjsDocMap) => {
-      yjsDocMap.set(id, doc);
-      return provider;
+      if (previousRoomIdRef.current !== null && previousRoomIdRef.current !== id) {
+        const previousProvider = providersMap.get(id);
+        if (previousProvider !== void 0) {
+          previousProvider.destroy();
+        }
+      }
+      let doc = yjsDocMap.get(id);
+      if (doc === void 0) {
+        doc = new Doc();
+        const provider = new LiveblocksYjsProvider(room, doc);
+        yjsDocMap.set(id, doc);
+        providersMap.set(id, provider);
+      }
+      return nn(
+        providersMap.get(id),
+        "Internal error. Should never happen"
+      );
     },
-    [provider, doc]
+    [room]
   );
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, provider && /* @__PURE__ */ React__default.createElement(CollaborationPlugin, {
+  useEffect(() => {
+    collabContext.name = username || "";
+  }, [collabContext, username]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(CollaborationPlugin, {
+    key: room.id,
+    id: room.id,
     providerFactory,
-    id: "liveblocks-document",
     username,
     cursorColor: cursorcolor,
     shouldBootstrap: true

package/dist/liveblocks-plugin-provider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"liveblocks-plugin-provider.mjs","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport type {\n  BaseMetadata,\n  BaseUserMeta,\n  Json,\n  JsonObject,\n  LsonObject,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport { useClient, useRoom, useSelf } from \"@liveblocks/react\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { MentionPlugin } from \"./mentions/mention-plugin\";\n\nexport type LiveblocksPluginProps = {\n  children?: React.ReactNode;\n};\n\nexport const LiveblocksPlugin = ({\n  children,\n}: LiveblocksPluginProps): JSX.Element => {\n  const client = useClient();\n  const hasResolveMentionSuggestions =\n    client[kInternal].resolveMentionSuggestions !== undefined;\n  const [editor] = useLexicalComposerContext();\n  const room = useRoom();\n\n  const [provider, setProvider] = useState<\n    | LiveblocksYjsProvider<\n        JsonObject,\n        LsonObject,\n        BaseUserMeta,\n        Json,\n        BaseMetadata\n      >\n    | undefined\n  >();\n\n  const doc = useMemo(() => new Doc(), []);\n\n  useEffect(() => {\n    const _provider = new LiveblocksYjsProvider(room, doc);\n    setProvider(_provider);\n    return () => {\n      _provider.destroy();\n      setProvider(undefined);\n    };\n  }, [room, doc]);\n\n  // Warn users if initialConfig.editorState, set on the composer, is not null\n  useEffect(() => {\n    // only in dev mode\n    if (process.env.NODE_ENV !== \"production\") {\n      // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n      if (!editor.getEditorState().isEmpty()) {\n        console.warn(\n          \"Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null.\"\n        );\n      }\n    }\n\n    // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    // Report that this is lexical and root is the rootKey\n    room[kInternal].reportTextEditor(\"lexical\", \"root\");\n  }, [room]);\n\n  // Get user info or allow override from props\n  const info = useSelf((me) => me.info);\n  const username = info?.name;\n  const cursorcolor = info?.color as string | undefined;\n\n  // Create the provider factory\n  const providerFactory = useCallback(\n    (id: string, yjsDocMap: Map<string, Doc>) => {\n      yjsDocMap.set(id, doc);\n      return provider as Provider;\n    },\n    [provider, doc]\n  );\n\n  return (\n    <>\n      {provider && (\n        <CollaborationPlugin\n          providerFactory={providerFactory}\n          id={\"liveblocks-document\"}\n          username={username}\n          cursorColor={cursorcolor}\n          shouldBootstrap={true}\n        />\n      )}\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      <CommentPluginProvider>{children}</CommentPluginProvider>\n    </>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAuBO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AACF,CAA0C,KAAA;AACxC,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,4BAAA,GACJ,MAAO,CAAA,SAAA,CAAA,CAAW,yBAA8B,KAAA,KAAA,CAAA,CAAA;AAClD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA,CAAA;AAC3C,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AAErB,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAS9B,EAAA,CAAA;AAEF,EAAA,MAAM,MAAM,OAAQ,CAAA,MAAM,IAAI,GAAI,EAAA,EAAG,EAAE,CAAA,CAAA;AAEvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SAAY,GAAA,IAAI,qBAAsB,CAAA,IAAA,EAAM,GAAG,CAAA,CAAA;AACrD,IAAA,WAAA,CAAY,SAAS,CAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAQ,EAAA,CAAA;AAClB,MAAA,WAAA,CAAY,KAAS,CAAA,CAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,GAAG,CAAC,CAAA,CAAA;AAGd,EAAA,SAAA,CAAU,MAAM;AAEd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AAEzC,MAAA,IAAI,CAAC,MAAA,CAAO,cAAe,EAAA,CAAE,SAAW,EAAA;AACtC,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN,qFAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GAIF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AAEd,IAAK,IAAA,CAAA,SAAA,CAAA,CAAW,gBAAiB,CAAA,SAAA,EAAW,MAAM,CAAA,CAAA;AAAA,GACpD,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAGT,EAAA,MAAM,IAAO,GAAA,OAAA,CAAQ,CAAC,EAAA,KAAO,GAAG,IAAI,CAAA,CAAA;AACpC,EAAA,MAAM,WAAW,IAAM,EAAA,IAAA,CAAA;AACvB,EAAA,MAAM,cAAc,IAAM,EAAA,KAAA,CAAA;AAG1B,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,IAAY,SAAgC,KAAA;AAC3C,MAAU,SAAA,CAAA,GAAA,CAAI,IAAI,GAAG,CAAA,CAAA;AACrB,MAAO,OAAA,QAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,UAAU,GAAG,CAAA;AAAA,GAChB,CAAA;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EACG,4BACEA,cAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAA,IACC,eAAA;AAAA,IACA,EAAI,EAAA,qBAAA;AAAA,IACJ,QAAA;AAAA,IACA,WAAa,EAAA,WAAA;AAAA,IACb,eAAiB,EAAA,IAAA;AAAA,GACnB,CAAA,EAGD,gDAAiCA,cAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAc,mBAE/CA,cAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EAAuB,QAAS,CACnC,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"liveblocks-plugin-provider.mjs","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { CollaborationContext } from \"@lexical/react/LexicalCollaborationContext\";\nimport { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport { kInternal, nn } from \"@liveblocks/core\";\nimport { useClient, useRoom, useSelf } from \"@liveblocks/react\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport React, { useCallback, useContext, useEffect, useRef } from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { MentionPlugin } from \"./mentions/mention-plugin\";\n\n// TODO: Replace by ref once I understand why useRef is not stable (?!)\nconst providersMap = new Map<\n  string,\n  LiveblocksYjsProvider<never, never, never, never, never>\n>();\n\nexport type LiveblocksPluginProps = {\n  children?: React.ReactNode;\n};\n\nexport const LiveblocksPlugin = ({\n  children,\n}: LiveblocksPluginProps): JSX.Element => {\n  const client = useClient();\n  const hasResolveMentionSuggestions =\n    client[kInternal].resolveMentionSuggestions !== undefined;\n  const [editor] = useLexicalComposerContext();\n  const room = useRoom();\n  const collabContext = useContext(CollaborationContext);\n  const previousRoomIdRef = useRef<string | null>(null);\n\n  // Warn users if initialConfig.editorState, set on the composer, is not null\n  useEffect(() => {\n    // only in dev mode\n    if (process.env.NODE_ENV !== \"production\") {\n      // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n      if (!editor.getEditorState().isEmpty()) {\n        console.warn(\n          \"Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null.\"\n        );\n      }\n    }\n\n    // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    // Report that this is lexical and root is the rootKey\n    room[kInternal].reportTextEditor(\"lexical\", \"root\");\n  }, [room]);\n\n  // Get user info or allow override from props\n  const info = useSelf((me) => me.info);\n  const username = info?.name || \"\"; // use empty string to prevent random name\n  const cursorcolor = info?.color as string | undefined;\n\n  const providerFactory = useCallback(\n    (id: string, yjsDocMap: Map<string, Doc>): Provider => {\n      // Destroy previously used provider to avoid memory leaks\n      // TODO: Find a way to destroy the last used provider on unmount (while working with StrictMode)\n      if (\n        previousRoomIdRef.current !== null &&\n        previousRoomIdRef.current !== id\n      ) {\n        const previousProvider = providersMap.get(id);\n        if (previousProvider !== undefined) {\n          previousProvider.destroy();\n        }\n      }\n\n      let doc = yjsDocMap.get(id);\n\n      if (doc === undefined) {\n        doc = new Doc();\n        const provider = new LiveblocksYjsProvider(room, doc);\n        yjsDocMap.set(id, doc);\n        providersMap.set(id, provider);\n      }\n\n      return nn(\n        providersMap.get(id),\n        \"Internal error. Should never happen\"\n      ) as Provider;\n    },\n    [room]\n  );\n\n  useEffect(() => {\n    collabContext.name = username || \"\";\n  }, [collabContext, username]);\n\n  return (\n    <>\n      <CollaborationPlugin\n        // Setting the key allows us to reset the internal Y.doc used by useYjsCollaboration\n        // without implementing `reload` event\n        key={room.id}\n        id={room.id}\n        providerFactory={providerFactory}\n        username={username}\n        cursorColor={cursorcolor}\n        shouldBootstrap={true}\n      />\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      <CommentPluginProvider>{children}</CommentPluginProvider>\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/version.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-lexical";
-const PKG_VERSION = typeof "2.0.0-alpha2" === "string" && "2.0.0-alpha2";
+const PKG_VERSION = typeof "2.0.0-alpha3" === "string" && "2.0.0-alpha3";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.mjs

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-lexical";
-const PKG_VERSION = typeof "2.0.0-alpha2" === "string" && "2.0.0-alpha2";
+const PKG_VERSION = typeof "2.0.0-alpha3" === "string" && "2.0.0-alpha3";
 const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-lexical",
-  "version": "2.0.0-alpha2",
+  "version": "2.0.0-alpha3",
   "description": "A lexical react plugin to enable collaboration, comments, live cursors, and more.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -42,11 +42,11 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.0",
-    "@liveblocks/client": "2.0.0-alpha2",
-    "@liveblocks/core": "2.0.0-alpha2",
-    "@liveblocks/react": "2.0.0-alpha2",
-    "@liveblocks/react-ui": "2.0.0-alpha2",
-    "@liveblocks/yjs": "2.0.0-alpha2",
+    "@liveblocks/client": "2.0.0-alpha3",
+    "@liveblocks/core": "2.0.0-alpha3",
+    "@liveblocks/react": "2.0.0-alpha3",
+    "@liveblocks/react-ui": "2.0.0-alpha3",
+    "@liveblocks/yjs": "2.0.0-alpha3",
     "nanoid": "^3",
     "use-sync-external-store": "^1.2.2",
     "yjs": "^13.6.14"

package/src/styles/index.css

@@ -1,17 +1,28 @@
 @import "./utils";
 @import "./constants";
 
-.lb-lexical-threads-empty {
+.lb-lexical-thread-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.lb-lexical-thread-panel-empty {
+  position: absolute;
+  inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  block-size: max-content;
-  color: rgb(55 53 47 / 50%);
+  padding: var(--lb-spacing);
+  color: var(--lb-foreground-tertiary);
+  font-size: 0.875em;
+  text-align: center;
+  text-wrap: balance;
 }
 
-.lb-lexical-threads {
-  display: flex;
-  flex-direction: column;
+.lb-lexical-thread-panel-thread {
+  &:where(:not(:last-of-type)) {
+    border-block-end: 1px solid var(--lb-foreground-subtle);
+  }
 }
 
 /*************************************

package/styles.css

@@ -1 +1 @@
-.lb-lexical-threads-empty{color:#37352f80;justify-content:center;align-items:center;block-size:max-content;display:flex}.lb-lexical-threads{flex-direction:column;display:flex}.lb-lexical-suggestions-list{margin:0;padding:0;list-style:none}.lb-lexical-mention-suggestions{--lb-lexical-mention-suggestion-avatar-size:1.25rem}.lb-lexical-mention-suggestion{padding:calc(.375*var(--lb-spacing))calc(.625*var(--lb-spacing))}.lb-lexical-mention-suggestion-avatar{inline-size:var(--lb-lexical-mention-suggestion-avatar-size);margin-inline-start:calc(-.125*var(--lb-spacing));margin-inline-end:calc(.5*var(--lb-spacing));margin-block:calc(.125*var(--lb-spacing));background:var(--lb-foreground-subtle);color:var(--lb-foreground-moderate)}.lb-lexical-suggestions{animation-duration:var(--lb-transition-duration);animation-timing-function:var(--lb-transition-easing);will-change:transform,opacity;padding:4px}.lb-lexical-suggestions-list-item{padding:calc(.25*var(--lb-spacing))calc(.5*var(--lb-spacing));border-radius:calc(var(--lb-radius) - .75*4px);color:var(--lb-foreground-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;scroll-margin-block:4px;font-size:.875rem;transition-property:background,color,opacity;display:flex}.lb-lexical-suggestions-list-item:where([data-highlighted],[data-selected]){background:var(--lb-foreground-subtle);transition-duration:calc(var(--lb-transition-duration)/2)}.lb-lexical-suggestions-list-item:where(:disabled,[data-disabled]){opacity:.5;cursor:not-allowed}.lb-lexical-suggestions:where([data-side=top]){animation-name:lb-animation-slide-up}.lb-lexical-suggestions:where([data-side=bottom]){animation-name:lb-animation-slide-down}.lb-lexical-suggestions:where([data-state=closed]){animation-name:lb-animation-disappear}.lb-lexical-mention{border-radius:calc(.675*var(--lb-radius));background:var(--lb-accent-subtle);color:var(--lb-accent);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.1em .3em;font-weight:500}.lb-lexical-mention::selection{background:0 0}.lb-lexical-mention ::selection{background:0 0}.lb-lexical-mention:where([data-selected]){background:var(--lb-accent);color:var(--lb-accent-foreground)}.lb-lexical-active-selection{background-color:var(--lb-selection)}.lb-thread-mark{color:var(--lb-foreground);text-decoration-line:underline;-webkit-text-decoration-color:var(--lb-foreground-moderate);text-decoration-color:var(--lb-foreground-moderate);text-underline-offset:2px;outline:none;font-weight:500;transition-property:color,text-decoration-color}.lb-thread-mark:where([data-state=active]){color:var(--lb-accent);-webkit-text-decoration-color:var(--lb-accent-moderate);text-decoration-color:var(--lb-accent-moderate)}@media (prefers-reduced-motion){.lb-lexical-suggestions:where(:not([data-state=closed])){animation-name:lb-animation-appear}}
+.lb-lexical-thread-panel{flex-direction:column;display:flex}.lb-lexical-thread-panel-empty{padding:var(--lb-spacing);color:var(--lb-foreground-tertiary);text-align:center;text-wrap:balance;justify-content:center;align-items:center;font-size:.875em;display:flex;position:absolute;inset:0}.lb-lexical-thread-panel-thread:where(:not(:last-of-type)){border-block-end:1px solid var(--lb-foreground-subtle)}.lb-lexical-suggestions-list{margin:0;padding:0;list-style:none}.lb-lexical-mention-suggestions{--lb-lexical-mention-suggestion-avatar-size:1.25rem}.lb-lexical-mention-suggestion{padding:calc(.375*var(--lb-spacing))calc(.625*var(--lb-spacing))}.lb-lexical-mention-suggestion-avatar{inline-size:var(--lb-lexical-mention-suggestion-avatar-size);margin-inline-start:calc(-.125*var(--lb-spacing));margin-inline-end:calc(.5*var(--lb-spacing));margin-block:calc(.125*var(--lb-spacing));background:var(--lb-foreground-subtle);color:var(--lb-foreground-moderate)}.lb-lexical-suggestions{animation-duration:var(--lb-transition-duration);animation-timing-function:var(--lb-transition-easing);will-change:transform,opacity;padding:4px}.lb-lexical-suggestions-list-item{padding:calc(.25*var(--lb-spacing))calc(.5*var(--lb-spacing));border-radius:calc(var(--lb-radius) - .75*4px);color:var(--lb-foreground-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;scroll-margin-block:4px;font-size:.875rem;transition-property:background,color,opacity;display:flex}.lb-lexical-suggestions-list-item:where([data-highlighted],[data-selected]){background:var(--lb-foreground-subtle);transition-duration:calc(var(--lb-transition-duration)/2)}.lb-lexical-suggestions-list-item:where(:disabled,[data-disabled]){opacity:.5;cursor:not-allowed}.lb-lexical-suggestions:where([data-side=top]){animation-name:lb-animation-slide-up}.lb-lexical-suggestions:where([data-side=bottom]){animation-name:lb-animation-slide-down}.lb-lexical-suggestions:where([data-state=closed]){animation-name:lb-animation-disappear}.lb-lexical-mention{border-radius:calc(.675*var(--lb-radius));background:var(--lb-accent-subtle);color:var(--lb-accent);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.1em .3em;font-weight:500}.lb-lexical-mention::selection{background:0 0}.lb-lexical-mention ::selection{background:0 0}.lb-lexical-mention:where([data-selected]){background:var(--lb-accent);color:var(--lb-accent-foreground)}.lb-lexical-active-selection{background-color:var(--lb-selection)}.lb-thread-mark{color:var(--lb-foreground);text-decoration-line:underline;-webkit-text-decoration-color:var(--lb-foreground-moderate);text-decoration-color:var(--lb-foreground-moderate);text-underline-offset:2px;outline:none;font-weight:500;transition-property:color,text-decoration-color}.lb-thread-mark:where([data-state=active]){color:var(--lb-accent);-webkit-text-decoration-color:var(--lb-accent-moderate);text-decoration-color:var(--lb-accent-moderate)}@media (prefers-reduced-motion){.lb-lexical-suggestions:where(:not([data-state=closed])){animation-name:lb-animation-appear}}

package/styles.css.map

@@ -1 +1 @@
-{"version":3,"sources":["src/styles/src/styles/index.css","src/styles/src/styles/utils.css"],"names":[],"mappings":"AAGA,0BAAA,eAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,sBAAA,CAAA,YAAA,CAQA,oBAAA,qBAAA,CAAA,YAAA,CASA,6BAAA,QAAA,CAAA,SAAA,CAAA,eAAA,CAUA,gCAAA,mDAAA,CAIA,+BAAA,gEAAA,CAIA,sCAAA,4DAAA,CAAA,iDAAA,CAAA,4CAAA,CAAA,yCAAA,CAAA,sCAAA,CAAA,mCAAA,CAaA,wBAAA,gDAAA,CAAA,qDAAA,CAAA,6BAAA,CAAA,WAAA,CAOA,kCAAA,6DAAA,CAAA,8CAAA,CAAA,oCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iBAAA,CAAA,4CAAA,CAAA,YAAA,CAeE,4EAAA,sCAAA,CAAA,yDAAA,CAKA,mEAAA,UAAA,CAAA,kBAAA,CAWA,+CAAA,oCAAA,CAIA,kDAAA,sCAAA,CAIA,mDAAA,qCAAA,CAeF,oBAAA,yCAAA,CAAA,kCAAA,CAAA,sBAAA,CAAA,kCAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,eAAA,CC/GE,+BAAA,cAAA,CAAA,gCAAA,cAAA,CDyHA,2CAAA,2BAAA,CAAA,iCAAA,CAUF,6BAAA,oCAAA,CAQA,gBAAA,0BAAA,CAAA,8BAAA,CAAA,2DAAA,CAAA,mDAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,eAAA,CAAA,+CAAA,CASE,2CAAA,sBAAA,CAAA,uDAAA,CAAA,+CAAA,CA/CF,gCACE,yDAAA,kCAAA,CAAA","file":"styles.css","sourcesContent":["@import \"./utils\";\n@import \"./constants\";\n\n.lb-lexical-threads-empty {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  block-size: max-content;\n  color: rgb(55 53 47 / 50%);\n}\n\n.lb-lexical-threads {\n  display: flex;\n  flex-direction: column;\n}\n\n/*************************************\n *       Suggestions                 *\n *************************************/\n\n.lb-lexical-suggestions-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/*************************************\n *   Mention suggestions             *\n *************************************/\n\n.lb-lexical-mention-suggestions {\n  --lb-lexical-mention-suggestion-avatar-size: 1.25rem;\n}\n\n.lb-lexical-mention-suggestion {\n  padding: calc(0.375 * var(--lb-spacing)) calc(0.625 * var(--lb-spacing));\n}\n\n.lb-lexical-mention-suggestion-avatar {\n  inline-size: var(--lb-lexical-mention-suggestion-avatar-size);\n  margin-inline-start: calc(-0.125 * var(--lb-spacing));\n  margin-inline-end: calc(0.5 * var(--lb-spacing));\n  margin-block: calc(0.125 * var(--lb-spacing));\n  background: var(--lb-foreground-subtle);\n  color: var(--lb-foreground-moderate);\n}\n\n/*************************************\n *          Elevation lists          *\n *************************************/\n\n.lb-lexical-suggestions {\n  padding: $lb-elevation-list-padding;\n  animation-duration: var(--lb-transition-duration);\n  animation-timing-function: var(--lb-transition-easing);\n  will-change: transform, opacity;\n}\n\n.lb-lexical-suggestions-list-item {\n  display: flex;\n  align-items: center;\n  padding: calc(0.25 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));\n  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-list-padding);\n  color: var(--lb-foreground-secondary);\n  outline: none;\n  font-size: 0.875rem;\n  cursor: pointer;\n  user-select: none;\n  transition-property: background, color, opacity;\n  scroll-margin-block: $lb-elevation-list-padding;\n}\n\n:is(.lb-lexical-suggestions-list-item) {\n  &:where([data-highlighted], [data-selected]) {\n    background: var(--lb-foreground-subtle);\n    transition-duration: calc(var(--lb-transition-duration) / 2);\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}\n\n/*************************************\n *        Floating animations        *\n *************************************/\n\n:is(.lb-lexical-suggestions) {\n  &:where([data-side=\"top\"]) {\n    animation-name: lb-animation-slide-up;\n  }\n\n  &:where([data-side=\"bottom\"]) {\n    animation-name: lb-animation-slide-down;\n  }\n\n  &:where([data-state=\"closed\"]) {\n    animation-name: lb-animation-disappear;\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .lb-lexical-suggestions:where(:not([data-state=\"closed\"])) {\n    animation-name: lb-animation-appear;\n  }\n}\n\n/*************************************\n *       Mention                     *\n *************************************/\n\n.lb-lexical-mention {\n  padding: 0.1em 0.3em;\n  border-radius: calc(0.675 * var(--lb-radius));\n  background: var(--lb-accent-subtle);\n  color: var(--lb-accent);\n  box-decoration-break: clone;\n  font-weight: 500;\n\n  @include invisible-selection;\n\n  &:where([data-selected]) {\n    background: var(--lb-accent);\n    color: var(--lb-accent-foreground);\n  }\n}\n\n/*************************************\n *       Active selection            *\n *************************************/\n\n.lb-lexical-active-selection {\n  background-color: var(--lb-selection);\n}\n\n/*************************************\n *              Thread Mark          *\n *************************************/\n\n.lb-thread-mark {\n  color: var(--lb-foreground);\n  outline: none;\n  font-weight: 500;\n  transition-property: color, text-decoration-color;\n  text-decoration-line: underline;\n  text-decoration-color: var(--lb-foreground-moderate);\n  text-underline-offset: 2px;\n\n  &:where([data-state=\"active\"]) {\n    color: var(--lb-accent);\n    text-decoration-color: var(--lb-accent-moderate);\n  }\n}\n","@mixin invisible-selection {\n  &::selection,\n  *::selection {\n    background: transparent;\n  }\n}\n"]}
+{"version":3,"sources":["src/styles/src/styles/index.css","src/styles/src/styles/utils.css"],"names":[],"mappings":"AAGA,yBAAA,qBAAA,CAAA,YAAA,CAKA,+BAAA,yBAAA,CAAA,mCAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,OAAA,CAcE,2DAAA,sDAAA,CASF,6BAAA,QAAA,CAAA,SAAA,CAAA,eAAA,CAUA,gCAAA,mDAAA,CAIA,+BAAA,gEAAA,CAIA,sCAAA,4DAAA,CAAA,iDAAA,CAAA,4CAAA,CAAA,yCAAA,CAAA,sCAAA,CAAA,mCAAA,CAaA,wBAAA,gDAAA,CAAA,qDAAA,CAAA,6BAAA,CAAA,WAAA,CAOA,kCAAA,6DAAA,CAAA,8CAAA,CAAA,oCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iBAAA,CAAA,4CAAA,CAAA,YAAA,CAeE,4EAAA,sCAAA,CAAA,yDAAA,CAKA,mEAAA,UAAA,CAAA,kBAAA,CAWA,+CAAA,oCAAA,CAIA,kDAAA,sCAAA,CAIA,mDAAA,qCAAA,CAeF,oBAAA,yCAAA,CAAA,kCAAA,CAAA,sBAAA,CAAA,kCAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,eAAA,CC1HE,+BAAA,cAAA,CAAA,gCAAA,cAAA,CDoIA,2CAAA,2BAAA,CAAA,iCAAA,CAUF,6BAAA,oCAAA,CAQA,gBAAA,0BAAA,CAAA,8BAAA,CAAA,2DAAA,CAAA,mDAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,eAAA,CAAA,+CAAA,CASE,2CAAA,sBAAA,CAAA,uDAAA,CAAA,+CAAA,CA/CF,gCACE,yDAAA,kCAAA,CAAA","file":"styles.css","sourcesContent":["@import \"./utils\";\n@import \"./constants\";\n\n.lb-lexical-thread-panel {\n  display: flex;\n  flex-direction: column;\n}\n\n.lb-lexical-thread-panel-empty {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: var(--lb-spacing);\n  color: var(--lb-foreground-tertiary);\n  font-size: 0.875em;\n  text-align: center;\n  text-wrap: balance;\n}\n\n.lb-lexical-thread-panel-thread {\n  &:where(:not(:last-of-type)) {\n    border-block-end: 1px solid var(--lb-foreground-subtle);\n  }\n}\n\n/*************************************\n *       Suggestions                 *\n *************************************/\n\n.lb-lexical-suggestions-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/*************************************\n *   Mention suggestions             *\n *************************************/\n\n.lb-lexical-mention-suggestions {\n  --lb-lexical-mention-suggestion-avatar-size: 1.25rem;\n}\n\n.lb-lexical-mention-suggestion {\n  padding: calc(0.375 * var(--lb-spacing)) calc(0.625 * var(--lb-spacing));\n}\n\n.lb-lexical-mention-suggestion-avatar {\n  inline-size: var(--lb-lexical-mention-suggestion-avatar-size);\n  margin-inline-start: calc(-0.125 * var(--lb-spacing));\n  margin-inline-end: calc(0.5 * var(--lb-spacing));\n  margin-block: calc(0.125 * var(--lb-spacing));\n  background: var(--lb-foreground-subtle);\n  color: var(--lb-foreground-moderate);\n}\n\n/*************************************\n *          Elevation lists          *\n *************************************/\n\n.lb-lexical-suggestions {\n  padding: $lb-elevation-list-padding;\n  animation-duration: var(--lb-transition-duration);\n  animation-timing-function: var(--lb-transition-easing);\n  will-change: transform, opacity;\n}\n\n.lb-lexical-suggestions-list-item {\n  display: flex;\n  align-items: center;\n  padding: calc(0.25 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));\n  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-list-padding);\n  color: var(--lb-foreground-secondary);\n  outline: none;\n  font-size: 0.875rem;\n  cursor: pointer;\n  user-select: none;\n  transition-property: background, color, opacity;\n  scroll-margin-block: $lb-elevation-list-padding;\n}\n\n:is(.lb-lexical-suggestions-list-item) {\n  &:where([data-highlighted], [data-selected]) {\n    background: var(--lb-foreground-subtle);\n    transition-duration: calc(var(--lb-transition-duration) / 2);\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}\n\n/*************************************\n *        Floating animations        *\n *************************************/\n\n:is(.lb-lexical-suggestions) {\n  &:where([data-side=\"top\"]) {\n    animation-name: lb-animation-slide-up;\n  }\n\n  &:where([data-side=\"bottom\"]) {\n    animation-name: lb-animation-slide-down;\n  }\n\n  &:where([data-state=\"closed\"]) {\n    animation-name: lb-animation-disappear;\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .lb-lexical-suggestions:where(:not([data-state=\"closed\"])) {\n    animation-name: lb-animation-appear;\n  }\n}\n\n/*************************************\n *       Mention                     *\n *************************************/\n\n.lb-lexical-mention {\n  padding: 0.1em 0.3em;\n  border-radius: calc(0.675 * var(--lb-radius));\n  background: var(--lb-accent-subtle);\n  color: var(--lb-accent);\n  box-decoration-break: clone;\n  font-weight: 500;\n\n  @include invisible-selection;\n\n  &:where([data-selected]) {\n    background: var(--lb-accent);\n    color: var(--lb-accent-foreground);\n  }\n}\n\n/*************************************\n *       Active selection            *\n *************************************/\n\n.lb-lexical-active-selection {\n  background-color: var(--lb-selection);\n}\n\n/*************************************\n *              Thread Mark          *\n *************************************/\n\n.lb-thread-mark {\n  color: var(--lb-foreground);\n  outline: none;\n  font-weight: 500;\n  transition-property: color, text-decoration-color;\n  text-decoration-line: underline;\n  text-decoration-color: var(--lb-foreground-moderate);\n  text-underline-offset: 2px;\n\n  &:where([data-state=\"active\"]) {\n    color: var(--lb-accent);\n    text-decoration-color: var(--lb-accent-moderate);\n  }\n}\n","@mixin invisible-selection {\n  &::selection,\n  *::selection {\n    background: transparent;\n  }\n}\n"]}