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

package/dist/index.d.mts

@@ -1,32 +1,84 @@
 import { BaseMetadata } from '@liveblocks/core';
-import { ComposerProps, GlobalOverrides, ThreadPanelOverrides, ThreadOverrides, CommentOverrides, ComposerOverrides, ThreadProps } from '@liveblocks/react-ui';
+import { ComposerProps } from '@liveblocks/react-ui';
 import * as lexical from 'lexical';
-import { LexicalCommand, NodeKey } from 'lexical';
-import React, { ComponentProps, ComponentType, ReactNode } from 'react';
+import { LexicalCommand } from 'lexical';
+import React from 'react';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 
+/**
+ * Returns whether the associated thread annotation for the given thread id is selected or not in the editor.
+ * @param threadId The id of the thread to check if the associated annotation is selected or not.
+ * @returns true if the associated annotation for the thread is selected, false otherwise.
+ */
+declare function useIsThreadActive(threadId: string): boolean;
+
+/**
+ * Dispatching OPEN_FLOATING_COMPOSER_COMMAND will display the FloatingComposer
+ *
+ * @example
+ * import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+ * import { OPEN_FLOATING_COMPOSER_COMMAND } from "@liveblocks/react-lexical";
+ *
+ * function Toolbar() {
+ *   const [editor] = useLexicalComposerContext();
+ *
+ *   return (
+ *     <button
+ *       onClick={() => {
+ *         editor.dispatchCommand(OPEN_FLOATING_COMPOSER_COMMAND);
+ *       }}
+ *     >
+ *       💬 New comment
+ *     </button>
+ *   );
+ * }
+ */
 declare const OPEN_FLOATING_COMPOSER_COMMAND: LexicalCommand<void>;
 declare type ThreadMetadata = {
     resolved?: boolean;
 };
 declare type FloatingComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<ComposerProps<M>, "threadId" | "commentId">;
+/**
+ * Displays a `Composer` near the current lexical selection.
+ *
+ * To open it, dispatch `OPEN_FLOATING_COMPOSER_COMMAND`.
+ *
+ * Submitting a comment will attach an annotation thread at the current selection.
+ * Should be nested inside `LiveblocksPlugin`.
+ */
 declare const FloatingComposer: React.ForwardRefExoticComponent<FloatingComposerProps<ThreadMetadata> & React.RefAttributes<HTMLFormElement>>;
 
-declare type ThreadPanelComponents = {
-    Thread: ComponentType<ThreadProps>;
-};
-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>>;
-
+/**
+ * Function that takes a Lexical editor config and modifies it to add the necessary
+ * `nodes` and `theme` to make `LiveblocksPlugin` works correctly.
+ *
+ * @example
+ * import { LexicalComposer } from "@lexical/react/LexicalComposer";
+ * import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+ * import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+ * import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+ * import { liveblocksConfig, LiveblocksPlugin } from "@liveblocks/react-lexical";
+ *
+ * const initialConfig = liveblocksConfig({
+ *   namespace: "MyEditor",
+ *   theme: {},
+ *   nodes: [],
+ *   onError: (err) => console.error(err),
+ * });
+ *
+ * function Editor() {
+ *   return (
+ *     <LexicalComposer initialConfig={initialConfig}>
+ *       <LiveblocksPlugin />
+ *       <RichTextPlugin
+ *         contentEditable={<ContentEditable />}
+ *         placeholder={<div>Enter some text...</div>}
+ *         ErrorBoundary={LexicalErrorBoundary}
+ *       />
+ *     </LexicalComposer>
+ *   );
+ * }
+ */
 declare function liveblocksConfig(editorConfig: Omit<InitialConfigType, "editorState">): {
     nodes: (lexical.KlassConstructor<typeof lexical.LexicalNode> | lexical.LexicalNodeReplacement)[];
     editorState: null;
@@ -38,14 +90,57 @@ declare function liveblocksConfig(editorConfig: Omit<InitialConfigType, "editorS
     theme?: lexical.EditorThemeClasses | undefined;
 };
 
+declare type EditorStatus = "not-loaded" | "loading"
+/**
+ * Not working yet! Will be available in a future release.
+ * Some editor state modifications has not been acknowledged yet by the server
+ */
+ | "synchronizing" | "synchronized";
+/**
+ * Get the storage status.
+ *
+ * - `not-loaded`: Initial state when entering the room.
+ * - `loading`: Once the editor state has been requested by LiveblocksPlugin.
+ * - `synchronizing`: Not working yet! Will be available in a future release.
+ * - `synchronized`:  The editor state is sync with Liveblocks servers.
+ */
+declare function useEditorStatus(): EditorStatus;
 declare type LiveblocksPluginProps = {
     children?: React.ReactNode;
 };
+/**
+ * Liveblocks plugin for Lexical that adds collaboration to your editor.
+ *
+ * `LiveblocksPlugin` should always be nested inside `LexicalComposer`.
+ *
+ * @example
+ *
+ * import { LexicalComposer } from "@lexical/react/LexicalComposer";
+ * import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+ * import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+ * import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+ * import { liveblocksConfig, LiveblocksPlugin } from "@liveblocks/react-lexical";
+ *
+ * const initialConfig = liveblocksConfig({
+ *   namespace: "MyEditor",
+ *   theme: {},
+ *   nodes: [],
+ *   onError: (err) => console.error(err),
+ * });
+ *
+ * function Editor() {
+ *   return (
+ *     <LexicalComposer initialConfig={initialConfig}>
+ *       <LiveblocksPlugin />
+ *       <RichTextPlugin
+ *         contentEditable={<ContentEditable />}
+ *         placeholder={<div>Enter some text...</div>}
+ *         ErrorBoundary={LexicalErrorBoundary}
+ *       />
+ *     </LexicalComposer>
+ *   );
+ * }
+ */
 declare const LiveblocksPlugin: ({ children, }: LiveblocksPluginProps) => JSX.Element;
 
-declare function Mention({ nodeKey, children, }: {
-    nodeKey: NodeKey;
-    children: ReactNode;
-}): React.JSX.Element;
-
-export { FloatingComposer, LiveblocksPlugin, Mention, OPEN_FLOATING_COMPOSER_COMMAND, ThreadPanel, ThreadPanelProps, liveblocksConfig };
+export { FloatingComposer, LiveblocksPlugin, OPEN_FLOATING_COMPOSER_COMMAND, liveblocksConfig, useEditorStatus, useIsThreadActive };

package/dist/index.d.ts

@@ -1,32 +1,84 @@
 import { BaseMetadata } from '@liveblocks/core';
-import { ComposerProps, GlobalOverrides, ThreadPanelOverrides, ThreadOverrides, CommentOverrides, ComposerOverrides, ThreadProps } from '@liveblocks/react-ui';
+import { ComposerProps } from '@liveblocks/react-ui';
 import * as lexical from 'lexical';
-import { LexicalCommand, NodeKey } from 'lexical';
-import React, { ComponentProps, ComponentType, ReactNode } from 'react';
+import { LexicalCommand } from 'lexical';
+import React from 'react';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 
+/**
+ * Returns whether the associated thread annotation for the given thread id is selected or not in the editor.
+ * @param threadId The id of the thread to check if the associated annotation is selected or not.
+ * @returns true if the associated annotation for the thread is selected, false otherwise.
+ */
+declare function useIsThreadActive(threadId: string): boolean;
+
+/**
+ * Dispatching OPEN_FLOATING_COMPOSER_COMMAND will display the FloatingComposer
+ *
+ * @example
+ * import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+ * import { OPEN_FLOATING_COMPOSER_COMMAND } from "@liveblocks/react-lexical";
+ *
+ * function Toolbar() {
+ *   const [editor] = useLexicalComposerContext();
+ *
+ *   return (
+ *     <button
+ *       onClick={() => {
+ *         editor.dispatchCommand(OPEN_FLOATING_COMPOSER_COMMAND);
+ *       }}
+ *     >
+ *       💬 New comment
+ *     </button>
+ *   );
+ * }
+ */
 declare const OPEN_FLOATING_COMPOSER_COMMAND: LexicalCommand<void>;
 declare type ThreadMetadata = {
     resolved?: boolean;
 };
 declare type FloatingComposerProps<M extends BaseMetadata = ThreadMetadata> = Omit<ComposerProps<M>, "threadId" | "commentId">;
+/**
+ * Displays a `Composer` near the current lexical selection.
+ *
+ * To open it, dispatch `OPEN_FLOATING_COMPOSER_COMMAND`.
+ *
+ * Submitting a comment will attach an annotation thread at the current selection.
+ * Should be nested inside `LiveblocksPlugin`.
+ */
 declare const FloatingComposer: React.ForwardRefExoticComponent<FloatingComposerProps<ThreadMetadata> & React.RefAttributes<HTMLFormElement>>;
 
-declare type ThreadPanelComponents = {
-    Thread: ComponentType<ThreadProps>;
-};
-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>>;
-
+/**
+ * Function that takes a Lexical editor config and modifies it to add the necessary
+ * `nodes` and `theme` to make `LiveblocksPlugin` works correctly.
+ *
+ * @example
+ * import { LexicalComposer } from "@lexical/react/LexicalComposer";
+ * import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+ * import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+ * import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+ * import { liveblocksConfig, LiveblocksPlugin } from "@liveblocks/react-lexical";
+ *
+ * const initialConfig = liveblocksConfig({
+ *   namespace: "MyEditor",
+ *   theme: {},
+ *   nodes: [],
+ *   onError: (err) => console.error(err),
+ * });
+ *
+ * function Editor() {
+ *   return (
+ *     <LexicalComposer initialConfig={initialConfig}>
+ *       <LiveblocksPlugin />
+ *       <RichTextPlugin
+ *         contentEditable={<ContentEditable />}
+ *         placeholder={<div>Enter some text...</div>}
+ *         ErrorBoundary={LexicalErrorBoundary}
+ *       />
+ *     </LexicalComposer>
+ *   );
+ * }
+ */
 declare function liveblocksConfig(editorConfig: Omit<InitialConfigType, "editorState">): {
     nodes: (lexical.KlassConstructor<typeof lexical.LexicalNode> | lexical.LexicalNodeReplacement)[];
     editorState: null;
@@ -38,14 +90,57 @@ declare function liveblocksConfig(editorConfig: Omit<InitialConfigType, "editorS
     theme?: lexical.EditorThemeClasses | undefined;
 };
 
+declare type EditorStatus = "not-loaded" | "loading"
+/**
+ * Not working yet! Will be available in a future release.
+ * Some editor state modifications has not been acknowledged yet by the server
+ */
+ | "synchronizing" | "synchronized";
+/**
+ * Get the storage status.
+ *
+ * - `not-loaded`: Initial state when entering the room.
+ * - `loading`: Once the editor state has been requested by LiveblocksPlugin.
+ * - `synchronizing`: Not working yet! Will be available in a future release.
+ * - `synchronized`:  The editor state is sync with Liveblocks servers.
+ */
+declare function useEditorStatus(): EditorStatus;
 declare type LiveblocksPluginProps = {
     children?: React.ReactNode;
 };
+/**
+ * Liveblocks plugin for Lexical that adds collaboration to your editor.
+ *
+ * `LiveblocksPlugin` should always be nested inside `LexicalComposer`.
+ *
+ * @example
+ *
+ * import { LexicalComposer } from "@lexical/react/LexicalComposer";
+ * import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+ * import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+ * import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+ * import { liveblocksConfig, LiveblocksPlugin } from "@liveblocks/react-lexical";
+ *
+ * const initialConfig = liveblocksConfig({
+ *   namespace: "MyEditor",
+ *   theme: {},
+ *   nodes: [],
+ *   onError: (err) => console.error(err),
+ * });
+ *
+ * function Editor() {
+ *   return (
+ *     <LexicalComposer initialConfig={initialConfig}>
+ *       <LiveblocksPlugin />
+ *       <RichTextPlugin
+ *         contentEditable={<ContentEditable />}
+ *         placeholder={<div>Enter some text...</div>}
+ *         ErrorBoundary={LexicalErrorBoundary}
+ *       />
+ *     </LexicalComposer>
+ *   );
+ * }
+ */
 declare const LiveblocksPlugin: ({ children, }: LiveblocksPluginProps) => JSX.Element;
 
-declare function Mention({ nodeKey, children, }: {
-    nodeKey: NodeKey;
-    children: ReactNode;
-}): React.JSX.Element;
-
-export { FloatingComposer, LiveblocksPlugin, Mention, OPEN_FLOATING_COMPOSER_COMMAND, ThreadPanel, ThreadPanelProps, liveblocksConfig };
+export { FloatingComposer, LiveblocksPlugin, OPEN_FLOATING_COMPOSER_COMMAND, liveblocksConfig, useEditorStatus, useIsThreadActive };

package/dist/index.js

@@ -2,18 +2,17 @@
 
 var core = require('@liveblocks/core');
 var version = require('./version.js');
+var commentPluginProvider = require('./comments/comment-plugin-provider.js');
 var floatingComposer = require('./comments/floating-composer.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');
 
 core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
 
+exports.useIsThreadActive = commentPluginProvider.useIsThreadActive;
 exports.FloatingComposer = floatingComposer.FloatingComposer;
 exports.OPEN_FLOATING_COMPOSER_COMMAND = floatingComposer.OPEN_FLOATING_COMPOSER_COMMAND;
-exports.ThreadPanel = ThreadPanel.ThreadPanel;
 exports.liveblocksConfig = liveblocksConfig.liveblocksConfig;
 exports.LiveblocksPlugin = liveblocksPluginProvider.LiveblocksPlugin;
-exports.Mention = mentionComponent.Mention;
+exports.useEditorStatus = liveblocksPluginProvider.useEditorStatus;
 //# 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 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;;;;;;;;;"}
+{"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 { useIsThreadActive } from \"./comments/comment-plugin-provider\";\nexport {\n  FloatingComposer,\n  OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport {\n  LiveblocksPlugin,\n  useEditorStatus,\n} from \"./liveblocks-plugin-provider\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;"}

package/dist/index.mjs

@@ -1,10 +1,9 @@
 import { detectDupes } from '@liveblocks/core';
 import { PKG_NAME, PKG_VERSION, PKG_FORMAT } from './version.mjs';
+export { useIsThreadActive } from './comments/comment-plugin-provider.mjs';
 export { FloatingComposer, OPEN_FLOATING_COMPOSER_COMMAND } from './comments/floating-composer.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 { LiveblocksPlugin, useEditorStatus } from './liveblocks-plugin-provider.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 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"}
+{"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 { useIsThreadActive } from \"./comments/comment-plugin-provider\";\nexport {\n  FloatingComposer,\n  OPEN_FLOATING_COMPOSER_COMMAND,\n} from \"./comments/floating-composer\";\nexport { liveblocksConfig } from \"./liveblocks-config\";\nexport {\n  LiveblocksPlugin,\n  useEditorStatus,\n} from \"./liveblocks-plugin-provider\";\n"],"names":[],"mappings":";;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/liveblocks-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"liveblocks-config.js","sources":["../src/liveblocks-config.ts"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\n\nexport function liveblocksConfig(\n  editorConfig: Omit<InitialConfigType, \"editorState\">\n) {\n  const nodes = [...(editorConfig.nodes ?? [])];\n\n  nodes.push(ThreadMarkNode, MentionNode);\n\n  return {\n    ...editorConfig,\n    nodes,\n    editorState: null, // explicitly null because CollabProvider requires it\n  };\n}\n"],"names":["ThreadMarkNode","MentionNode"],"mappings":";;;;;AAKO,SAAS,iBACd,YACA,EAAA;AACA,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAM,KAAA,CAAA,IAAA,CAAKA,+BAAgBC,uBAAW,CAAA,CAAA;AAEtC,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF;;;;"}
+{"version":3,"file":"liveblocks-config.js","sources":["../src/liveblocks-config.ts"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\n\n/**\n * Function that takes a Lexical editor config and modifies it to add the necessary\n * `nodes` and `theme` to make `LiveblocksPlugin` works correctly.\n *\n * @example\n * import { LexicalComposer } from \"@lexical/react/LexicalComposer\";\n * import { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\n * import { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\n * import { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\n * import { liveblocksConfig, LiveblocksPlugin } from \"@liveblocks/react-lexical\";\n *\n * const initialConfig = liveblocksConfig({\n *   namespace: \"MyEditor\",\n *   theme: {},\n *   nodes: [],\n *   onError: (err) => console.error(err),\n * });\n *\n * function Editor() {\n *   return (\n *     <LexicalComposer initialConfig={initialConfig}>\n *       <LiveblocksPlugin />\n *       <RichTextPlugin\n *         contentEditable={<ContentEditable />}\n *         placeholder={<div>Enter some text...</div>}\n *         ErrorBoundary={LexicalErrorBoundary}\n *       />\n *     </LexicalComposer>\n *   );\n * }\n */\nexport function liveblocksConfig(\n  editorConfig: Omit<InitialConfigType, \"editorState\">\n) {\n  const nodes = [...(editorConfig.nodes ?? [])];\n\n  nodes.push(ThreadMarkNode, MentionNode);\n\n  return {\n    ...editorConfig,\n    nodes,\n    editorState: null, // explicitly null because CollabProvider requires it\n  };\n}\n"],"names":["ThreadMarkNode","MentionNode"],"mappings":";;;;;AAoCO,SAAS,iBACd,YACA,EAAA;AACA,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAM,KAAA,CAAA,IAAA,CAAKA,+BAAgBC,uBAAW,CAAA,CAAA;AAEtC,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF;;;;"}

package/dist/liveblocks-config.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"liveblocks-config.mjs","sources":["../src/liveblocks-config.ts"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\n\nexport function liveblocksConfig(\n  editorConfig: Omit<InitialConfigType, \"editorState\">\n) {\n  const nodes = [...(editorConfig.nodes ?? [])];\n\n  nodes.push(ThreadMarkNode, MentionNode);\n\n  return {\n    ...editorConfig,\n    nodes,\n    editorState: null, // explicitly null because CollabProvider requires it\n  };\n}\n"],"names":[],"mappings":";;;AAKO,SAAS,iBACd,YACA,EAAA;AACA,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAM,KAAA,CAAA,IAAA,CAAK,gBAAgB,WAAW,CAAA,CAAA;AAEtC,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF;;;;"}
+{"version":3,"file":"liveblocks-config.mjs","sources":["../src/liveblocks-config.ts"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\n\n/**\n * Function that takes a Lexical editor config and modifies it to add the necessary\n * `nodes` and `theme` to make `LiveblocksPlugin` works correctly.\n *\n * @example\n * import { LexicalComposer } from \"@lexical/react/LexicalComposer\";\n * import { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\n * import { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\n * import { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\n * import { liveblocksConfig, LiveblocksPlugin } from \"@liveblocks/react-lexical\";\n *\n * const initialConfig = liveblocksConfig({\n *   namespace: \"MyEditor\",\n *   theme: {},\n *   nodes: [],\n *   onError: (err) => console.error(err),\n * });\n *\n * function Editor() {\n *   return (\n *     <LexicalComposer initialConfig={initialConfig}>\n *       <LiveblocksPlugin />\n *       <RichTextPlugin\n *         contentEditable={<ContentEditable />}\n *         placeholder={<div>Enter some text...</div>}\n *         ErrorBoundary={LexicalErrorBoundary}\n *       />\n *     </LexicalComposer>\n *   );\n * }\n */\nexport function liveblocksConfig(\n  editorConfig: Omit<InitialConfigType, \"editorState\">\n) {\n  const nodes = [...(editorConfig.nodes ?? [])];\n\n  nodes.push(ThreadMarkNode, MentionNode);\n\n  return {\n    ...editorConfig,\n    nodes,\n    editorState: null, // explicitly null because CollabProvider requires it\n  };\n}\n"],"names":[],"mappings":";;;AAoCO,SAAS,iBACd,YACA,EAAA;AACA,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAM,KAAA,CAAA,IAAA,CAAK,gBAAgB,WAAW,CAAA,CAAA;AAEtC,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF;;;;"}

package/dist/liveblocks-plugin-provider.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var reactDom = require('@floating-ui/react-dom');
 var LexicalCollaborationContext = require('@lexical/react/LexicalCollaborationContext');
 var LexicalCollaborationPlugin = require('@lexical/react/LexicalCollaborationPlugin');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
@@ -7,11 +8,36 @@ var core = require('@liveblocks/core');
 var react = require('@liveblocks/react');
 var yjs$1 = require('@liveblocks/yjs');
 var React = require('react');
+var index_js = require('use-sync-external-store/shim/index.js');
 var yjs = require('yjs');
 var commentPluginProvider = require('./comments/comment-plugin-provider.js');
+var threadMarkNode = require('./comments/thread-mark-node.js');
+var mentionNode = require('./mentions/mention-node.js');
 var mentionPlugin = require('./mentions/mention-plugin.js');
 
 const providersMap = /* @__PURE__ */ new Map();
+function getEditorStatus(provider) {
+  if (provider === void 0) {
+    return "not-loaded";
+  }
+  return provider.synced ? "synchronized" : "loading";
+}
+function useEditorStatus() {
+  const room = react.useRoom();
+  const provider = providersMap.get(room.id);
+  const [status, setStatus] = React.useState(getEditorStatus(provider));
+  React.useEffect(() => {
+    const provider2 = providersMap.get(room.id);
+    setStatus(getEditorStatus(provider2));
+    if (provider2 === void 0) {
+      return;
+    }
+    const cb = () => setStatus(getEditorStatus(provider2));
+    provider2.on("sync", cb);
+    return () => provider2.off("sync", cb);
+  }, [room]);
+  return status;
+}
 const LiveblocksPlugin = ({
   children
 }) => {
@@ -21,6 +47,26 @@ const LiveblocksPlugin = ({
   const room = react.useRoom();
   const collabContext = React.useContext(LexicalCollaborationContext.CollaborationContext);
   const previousRoomIdRef = React.useRef(null);
+  if (!editor.hasNodes([threadMarkNode.ThreadMarkNode, mentionNode.MentionNode])) {
+    throw new Error(
+      "LiveblocksPlugin requires Lexical configuration to be wrapped in the `liveblocksConfig(options)` function. For more information: https://liveblocks.io/docs/api-reference/liveblocks-react-lexical#liveblocksConfig"
+    );
+  }
+  const [containerRef, setContainerRef] = React.useState(void 0);
+  const {
+    refs: { setReference, setFloating },
+    strategy,
+    x,
+    y
+  } = reactDom.useFloating({
+    strategy: "fixed",
+    placement: "bottom",
+    whileElementsMounted: (...args) => {
+      return reactDom.autoUpdate(...args, {
+        animationFrame: true
+      });
+    }
+  });
   React.useEffect(() => {
     if (process.env.NODE_ENV !== "production") {
       if (!editor.getEditorState().isEmpty()) {
@@ -61,15 +107,54 @@ const LiveblocksPlugin = ({
   React.useEffect(() => {
     collabContext.name = username || "";
   }, [collabContext, username]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(LexicalCollaborationPlugin.CollaborationPlugin, {
+  const root = useRootElement();
+  React.useLayoutEffect(() => {
+    if (root === null)
+      return;
+    setReference({
+      getBoundingClientRect: () => root.getBoundingClientRect()
+    });
+  }, [setReference, root]);
+  const handleFloatingRef = React.useCallback(
+    (node) => {
+      setFloating(node);
+      setContainerRef({ current: node });
+    },
+    [setFloating, setContainerRef]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    ref: handleFloatingRef,
+    style: {
+      position: strategy,
+      top: 0,
+      left: 0,
+      transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
+      minWidth: "max-content"
+    }
+  }), /* @__PURE__ */ React.createElement(LexicalCollaborationPlugin.CollaborationPlugin, {
     key: room.id,
     id: room.id,
     providerFactory,
     username,
     cursorColor: cursorcolor,
+    cursorsContainerRef: containerRef,
     shouldBootstrap: true
   }), hasResolveMentionSuggestions && /* @__PURE__ */ React.createElement(mentionPlugin.MentionPlugin, null), /* @__PURE__ */ React.createElement(commentPluginProvider.CommentPluginProvider, null, children));
 };
+function useRootElement() {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const subscribe = React.useCallback(
+    (onStoreChange) => {
+      return editor.registerRootListener(onStoreChange);
+    },
+    [editor]
+  );
+  const getSnapshot = React.useCallback(() => {
+    return editor.getRootElement();
+  }, [editor]);
+  return index_js.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
 
 exports.LiveblocksPlugin = LiveblocksPlugin;
+exports.useEditorStatus = useEditorStatus;
 //# sourceMappingURL=liveblocks-plugin-provider.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"liveblocks-plugin-provider.js","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { autoUpdate, useFloating } from \"@floating-ui/react-dom\";\nimport { 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 type { MutableRefObject } from \"react\";\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\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 EditorStatus =\n  /* The editor state is not loaded and has not been requested. */\n  | \"not-loaded\"\n  /* The editor state is loading from Liveblocks servers */\n  | \"loading\"\n  /**\n   * Not working yet! Will be available in a future release.\n   * Some editor state modifications has not been acknowledged yet by the server\n   */\n  | \"synchronizing\"\n  /* The editor state is sync with Liveblocks servers */\n  | \"synchronized\";\n\nfunction getEditorStatus(\n  provider?: LiveblocksYjsProvider<never, never, never, never, never>\n) {\n  if (provider === undefined) {\n    return \"not-loaded\";\n  }\n\n  return provider.synced ? \"synchronized\" : \"loading\";\n}\n\n/**\n * Get the storage status.\n *\n * - `not-loaded`: Initial state when entering the room.\n * - `loading`: Once the editor state has been requested by LiveblocksPlugin.\n * - `synchronizing`: Not working yet! Will be available in a future release.\n * - `synchronized`:  The editor state is sync with Liveblocks servers.\n */\nexport function useEditorStatus(): EditorStatus {\n  const room = useRoom();\n  const provider = providersMap.get(room.id);\n\n  const [status, setStatus] = useState<EditorStatus>(getEditorStatus(provider));\n\n  useEffect(() => {\n    const provider = providersMap.get(room.id);\n\n    setStatus(getEditorStatus(provider));\n\n    if (provider === undefined) {\n      return;\n    }\n\n    const cb = () => setStatus(getEditorStatus(provider));\n\n    provider.on(\"sync\", cb);\n\n    return () => provider.off(\"sync\", cb);\n  }, [room]);\n\n  return status;\n}\n\nexport type LiveblocksPluginProps = {\n  children?: React.ReactNode;\n};\n\n/**\n * Liveblocks plugin for Lexical that adds collaboration to your editor.\n *\n * `LiveblocksPlugin` should always be nested inside `LexicalComposer`.\n *\n * @example\n *\n * import { LexicalComposer } from \"@lexical/react/LexicalComposer\";\n * import { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\n * import { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\n * import { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\n * import { liveblocksConfig, LiveblocksPlugin } from \"@liveblocks/react-lexical\";\n *\n * const initialConfig = liveblocksConfig({\n *   namespace: \"MyEditor\",\n *   theme: {},\n *   nodes: [],\n *   onError: (err) => console.error(err),\n * });\n *\n * function Editor() {\n *   return (\n *     <LexicalComposer initialConfig={initialConfig}>\n *       <LiveblocksPlugin />\n *       <RichTextPlugin\n *         contentEditable={<ContentEditable />}\n *         placeholder={<div>Enter some text...</div>}\n *         ErrorBoundary={LexicalErrorBoundary}\n *       />\n *     </LexicalComposer>\n *   );\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  if (!editor.hasNodes([ThreadMarkNode, MentionNode])) {\n    throw new Error(\n      \"LiveblocksPlugin requires Lexical configuration to be wrapped in the `liveblocksConfig(options)` function. For more information: https://liveblocks.io/docs/api-reference/liveblocks-react-lexical#liveblocksConfig\"\n    );\n  }\n\n  const [containerRef, setContainerRef] = useState<\n    MutableRefObject<HTMLDivElement | null> | undefined\n  >(undefined);\n\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\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  const root = useRootElement();\n\n  useLayoutEffect(() => {\n    if (root === null) return;\n    setReference({\n      getBoundingClientRect: () => root.getBoundingClientRect(),\n    });\n  }, [setReference, root]);\n\n  const handleFloatingRef = useCallback(\n    (node: HTMLDivElement) => {\n      setFloating(node);\n      setContainerRef({ current: node });\n    },\n    [setFloating, setContainerRef]\n  );\n\n  return (\n    <>\n      <div\n        ref={handleFloatingRef}\n        style={{\n          position: strategy,\n          top: 0,\n          left: 0,\n          transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n          minWidth: \"max-content\",\n        }}\n      />\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        cursorsContainerRef={containerRef}\n        shouldBootstrap={true}\n      />\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      <CommentPluginProvider>{children}</CommentPluginProvider>\n    </>\n  );\n};\n\nfunction useRootElement(): HTMLElement | null {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerRootListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getRootElement();\n  }, [editor]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["useRoom","useState","useEffect","provider","useClient","kInternal","useLexicalComposerContext","useContext","CollaborationContext","useRef","ThreadMarkNode","MentionNode","useFloating","autoUpdate","useSelf","useCallback","Doc","LiveblocksYjsProvider","nn","useLayoutEffect","CollaborationPlugin","MentionPlugin","CommentPluginProvider","useSyncExternalStore"],"mappings":"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"}