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

package/dist/index.js

@@ -2,19 +2,22 @@
 
 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 floatingComposer = require('./comments/floating-composer.js');
-var commentPluginProvider = require('./comments/comment-plugin-provider.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.liveblocksLexicalConfig = liveblocksConfig.liveblocksLexicalConfig;
-exports.LiveblocksPluginProvider = liveblocksPluginProvider.LiveblocksPluginProvider;
+exports.liveblocksConfig = liveblocksConfig.liveblocksConfig;
+exports.LiveblocksPlugin = liveblocksPluginProvider.LiveblocksPlugin;
 exports.Mention = mentionComponent.Mention;
-exports.FloatingComposer = floatingComposer.FloatingComposer;
-exports.useCreateThread = commentPluginProvider.useCreateThread;
+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 { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksLexicalConfig } from \"./liveblocks-config\";\nexport { LiveblocksPluginProvider } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\nexport { FloatingComposer } from \"./comments/floating-composer\";\nexport { useCreateThread } from \"./comments/comment-plugin-provider\";\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 { 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;;;;;;;;;;;"}

package/dist/index.mjs

@@ -1,11 +1,12 @@
 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 { liveblocksLexicalConfig } from './liveblocks-config.mjs';
-export { LiveblocksPluginProvider } from './liveblocks-plugin-provider.mjs';
+export { liveblocksConfig } from './liveblocks-config.mjs';
+export { LiveblocksPlugin } from './liveblocks-plugin-provider.mjs';
 export { Mention } from './mentions/mention-component.mjs';
-export { FloatingComposer } from './comments/floating-composer.mjs';
-export { useCreateThread } from './comments/comment-plugin-provider.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 { ThreadPanel } from \"./comments/ThreadPanel\";\nexport { liveblocksLexicalConfig } from \"./liveblocks-config\";\nexport { LiveblocksPluginProvider } from \"./liveblocks-plugin-provider\";\nexport { Mention } from \"./mentions/mention-component\";\nexport { FloatingComposer } from \"./comments/floating-composer\";\nexport { useCreateThread } from \"./comments/comment-plugin-provider\";\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 { 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"}

package/dist/liveblocks-config.js

@@ -1,89 +1,17 @@
 'use strict';
 
-var React = require('react');
 var threadMarkNode = require('./comments/thread-mark-node.js');
-var avatar = require('./mentions/avatar.js');
-var mentionComponent = require('./mentions/mention-component.js');
 var mentionNode = require('./mentions/mention-node.js');
-var suggestions = require('./mentions/suggestions.js');
-var user = require('./mentions/user.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-let liveblocksConfig = null;
-const MENTION_CHARACTER = "@";
-const defaultComponents = {
-  Mention: ({ userId }) => {
-    return /* @__PURE__ */ React__namespace.createElement(mentionComponent.Mention, {
-      className: "lb-lexical-mention"
-    }, MENTION_CHARACTER, /* @__PURE__ */ React__namespace.createElement(user.User, {
-      userId
-    }));
-  },
-  MentionSuggestions: ({ userIds }) => {
-    return /* @__PURE__ */ React__namespace.createElement(suggestions.List, {
-      className: "lb-lexical-suggestions-list"
-    }, userIds.map((userId) => /* @__PURE__ */ React__namespace.createElement(suggestions.Item, {
-      key: userId,
-      value: userId,
-      className: "lb-lexical-suggestions-list-item"
-    }, /* @__PURE__ */ React__namespace.createElement(avatar.Avatar, {
-      userId,
-      className: "lb-lexical-mention-suggestion-avatar"
-    }), /* @__PURE__ */ React__namespace.createElement(user.User, {
-      userId,
-      className: "lb-lexical-mention-suggestion-user"
-    }))));
-  }
-};
-function liveblocksLexicalConfig(editorConfig, config = {}) {
-  const { comments = true, components = {} } = config;
+function liveblocksConfig(editorConfig) {
   const nodes = [...editorConfig.nodes ?? []];
-  const Mention2 = components.Mention ?? defaultComponents.Mention;
-  const MentionSuggestions = components.MentionSuggestions ?? defaultComponents.MentionSuggestions;
-  const mentionFactory = mentionNode.createMentionNodeFactory(Mention2);
-  nodes.push(threadMarkNode.ThreadMarkNode, mentionFactory.MentionNode);
-  liveblocksConfig = {
-    comments,
-    mentions: {
-      factory: mentionFactory,
-      components: {
-        MentionSuggestions
-      }
-    }
-  };
+  nodes.push(threadMarkNode.ThreadMarkNode, mentionNode.MentionNode);
   return {
     ...editorConfig,
     nodes,
     editorState: null
   };
 }
-function getLiveblocksLexicalConfig() {
-  if (liveblocksConfig === null) {
-    throw new Error("Liveblocks config is not initialized.");
-  }
-  return {
-    ...liveblocksConfig
-  };
-}
 
-exports.getLiveblocksLexicalConfig = getLiveblocksLexicalConfig;
-exports.liveblocksLexicalConfig = liveblocksLexicalConfig;
+exports.liveblocksConfig = liveblocksConfig;
 //# sourceMappingURL=liveblocks-config.js.map

package/dist/liveblocks-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"liveblocks-config.js","sources":["../src/liveblocks-config.tsx"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\nimport type { ComponentType } from \"react\";\nimport * as React from \"react\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport type { LiveblocksLexicalInternalConfig } from \"./liveblocks-plugin-provider\";\nimport { Avatar } from \"./mentions/avatar\";\nimport { Mention } from \"./mentions/mention-component\";\nimport { createMentionNodeFactory } from \"./mentions/mention-node\";\nimport * as Suggestions from \"./mentions/suggestions\";\nimport { User } from \"./mentions/user\";\n\nlet liveblocksConfig: LiveblocksLexicalInternalConfig | null = null;\n\nexport interface MentionProps {\n  /**\n   * The mention's user ID.\n   */\n  userId: string;\n}\n\nexport interface MentionSuggestionsProps {\n  /**\n   * The list of suggested user IDs.\n   */\n  userIds: string[];\n}\n\ninterface EditorComponents {\n  Mention: ComponentType<MentionProps>;\n  MentionSuggestions: ComponentType<MentionSuggestionsProps>;\n}\n\nexport interface LiveblocksConfig {\n  /**\n   * Whether comments are enabled. Defaults to true.\n   */\n  comments?: boolean;\n  /**\n   * The components displayed within the editor.\n   */\n  components?: Partial<EditorComponents>;\n}\n\nconst MENTION_CHARACTER = \"@\";\nconst defaultComponents: EditorComponents = {\n  Mention: ({ userId }) => {\n    return (\n      <Mention className=\"lb-lexical-mention\">\n        {MENTION_CHARACTER}\n        <User userId={userId} />\n      </Mention>\n    );\n  },\n  MentionSuggestions: ({ userIds }) => {\n    return (\n      <Suggestions.List className=\"lb-lexical-suggestions-list\">\n        {userIds.map((userId) => (\n          <Suggestions.Item\n            key={userId}\n            value={userId}\n            className=\"lb-lexical-suggestions-list-item\"\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-lexical-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-lexical-mention-suggestion-user\"\n            />\n          </Suggestions.Item>\n        ))}\n      </Suggestions.List>\n    );\n  },\n};\n\nexport function liveblocksLexicalConfig(\n  editorConfig: InitialConfigType,\n  config: LiveblocksConfig = {}\n) {\n  const { comments = true, components = {} } = config;\n\n  const nodes = [...(editorConfig.nodes ?? [])];\n\n  const Mention = components.Mention ?? defaultComponents.Mention;\n  const MentionSuggestions =\n    components.MentionSuggestions ?? defaultComponents.MentionSuggestions;\n\n  const mentionFactory = createMentionNodeFactory(Mention);\n\n  nodes.push(ThreadMarkNode, mentionFactory.MentionNode);\n\n  liveblocksConfig = {\n    comments,\n    mentions: {\n      factory: mentionFactory,\n      components: {\n        MentionSuggestions,\n      },\n    },\n  };\n\n  return {\n    ...editorConfig,\n    nodes,\n    editorState: null, // explicitly null because CollabProvider requires it\n  };\n}\n\nexport function getLiveblocksLexicalConfig(): LiveblocksLexicalInternalConfig {\n  if (liveblocksConfig === null) {\n    throw new Error(\"Liveblocks config is not initialized.\");\n  }\n  return {\n    ...liveblocksConfig,\n  };\n}\n"],"names":["React","Mention","User","Suggestions.List","Suggestions.Item","Avatar","createMentionNodeFactory","ThreadMarkNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAI,gBAA2D,GAAA,IAAA,CAAA;AAgC/D,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAC1B,MAAM,iBAAsC,GAAA;AAAA,EAC1C,OAAS,EAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AACvB,IAAA,uBACGA,gBAAA,CAAA,aAAA,CAAAC,wBAAA,EAAA;AAAA,MAAQ,SAAU,EAAA,oBAAA;AAAA,KAAA,EAChB,mCACAD,gBAAA,CAAA,aAAA,CAAAE,SAAA,EAAA;AAAA,MAAK,MAAA;AAAA,KAAgB,CACxB,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,kBAAoB,EAAA,CAAC,EAAE,OAAA,EAAc,KAAA;AACnC,IACE,uBAAAF,gBAAA,CAAA,aAAA,CAACG,gBAAA,EAAA;AAAA,MAAiB,SAAU,EAAA,6BAAA;AAAA,KAAA,EACzB,QAAQ,GAAI,CAAA,CAAC,MACZ,qBAAAH,gBAAA,CAAA,aAAA,CAACI,gBAAA,EAAA;AAAA,MACC,GAAK,EAAA,MAAA;AAAA,MACL,KAAO,EAAA,MAAA;AAAA,MACP,SAAU,EAAA,kCAAA;AAAA,KAAA,kBAETJ,gBAAA,CAAA,aAAA,CAAAK,aAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,sCAAA;AAAA,KACZ,mBACCL,gBAAA,CAAA,aAAA,CAAAE,SAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,oCAAA;AAAA,KACZ,CACF,CACD,CACH,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA,CAAA;AAEO,SAAS,uBACd,CAAA,YAAA,EACA,MAA2B,GAAA,EAC3B,EAAA;AACA,EAAA,MAAM,EAAE,QAAW,GAAA,IAAA,EAAM,UAAa,GAAA,IAAO,GAAA,MAAA,CAAA;AAE7C,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAMD,MAAAA,QAAAA,GAAU,UAAW,CAAA,OAAA,IAAW,iBAAkB,CAAA,OAAA,CAAA;AACxD,EAAM,MAAA,kBAAA,GACJ,UAAW,CAAA,kBAAA,IAAsB,iBAAkB,CAAA,kBAAA,CAAA;AAErD,EAAM,MAAA,cAAA,GAAiBK,qCAAyBL,QAAO,CAAA,CAAA;AAEvD,EAAM,KAAA,CAAA,IAAA,CAAKM,6BAAgB,EAAA,cAAA,CAAe,WAAW,CAAA,CAAA;AAErD,EAAmB,gBAAA,GAAA;AAAA,IACjB,QAAA;AAAA,IACA,QAAU,EAAA;AAAA,MACR,OAAS,EAAA,cAAA;AAAA,MACT,UAAY,EAAA;AAAA,QACV,kBAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF,CAAA;AAEO,SAAS,0BAA8D,GAAA;AAC5E,EAAA,IAAI,qBAAqB,IAAM,EAAA;AAC7B,IAAM,MAAA,IAAI,MAAM,uCAAuC,CAAA,CAAA;AAAA,GACzD;AACA,EAAO,OAAA;AAAA,IACL,GAAG,gBAAA;AAAA,GACL,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\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;;;;"}

package/dist/liveblocks-config.mjs

@@ -1,67 +1,15 @@
-import * as React from 'react';
 import { ThreadMarkNode } from './comments/thread-mark-node.mjs';
-import { Avatar } from './mentions/avatar.mjs';
-import { Mention } from './mentions/mention-component.mjs';
-import { createMentionNodeFactory } from './mentions/mention-node.mjs';
-import { List, Item } from './mentions/suggestions.mjs';
-import { User } from './mentions/user.mjs';
+import { MentionNode } from './mentions/mention-node.mjs';
 
-let liveblocksConfig = null;
-const MENTION_CHARACTER = "@";
-const defaultComponents = {
-  Mention: ({ userId }) => {
-    return /* @__PURE__ */ React.createElement(Mention, {
-      className: "lb-lexical-mention"
-    }, MENTION_CHARACTER, /* @__PURE__ */ React.createElement(User, {
-      userId
-    }));
-  },
-  MentionSuggestions: ({ userIds }) => {
-    return /* @__PURE__ */ React.createElement(List, {
-      className: "lb-lexical-suggestions-list"
-    }, userIds.map((userId) => /* @__PURE__ */ React.createElement(Item, {
-      key: userId,
-      value: userId,
-      className: "lb-lexical-suggestions-list-item"
-    }, /* @__PURE__ */ React.createElement(Avatar, {
-      userId,
-      className: "lb-lexical-mention-suggestion-avatar"
-    }), /* @__PURE__ */ React.createElement(User, {
-      userId,
-      className: "lb-lexical-mention-suggestion-user"
-    }))));
-  }
-};
-function liveblocksLexicalConfig(editorConfig, config = {}) {
-  const { comments = true, components = {} } = config;
+function liveblocksConfig(editorConfig) {
   const nodes = [...editorConfig.nodes ?? []];
-  const Mention2 = components.Mention ?? defaultComponents.Mention;
-  const MentionSuggestions = components.MentionSuggestions ?? defaultComponents.MentionSuggestions;
-  const mentionFactory = createMentionNodeFactory(Mention2);
-  nodes.push(ThreadMarkNode, mentionFactory.MentionNode);
-  liveblocksConfig = {
-    comments,
-    mentions: {
-      factory: mentionFactory,
-      components: {
-        MentionSuggestions
-      }
-    }
-  };
+  nodes.push(ThreadMarkNode, MentionNode);
   return {
     ...editorConfig,
     nodes,
     editorState: null
   };
 }
-function getLiveblocksLexicalConfig() {
-  if (liveblocksConfig === null) {
-    throw new Error("Liveblocks config is not initialized.");
-  }
-  return {
-    ...liveblocksConfig
-  };
-}
 
-export { getLiveblocksLexicalConfig, liveblocksLexicalConfig };
+export { liveblocksConfig };
 //# sourceMappingURL=liveblocks-config.mjs.map

package/dist/liveblocks-config.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"liveblocks-config.mjs","sources":["../src/liveblocks-config.tsx"],"sourcesContent":["import type { InitialConfigType } from \"@lexical/react/LexicalComposer\";\nimport type { ComponentType } from \"react\";\nimport * as React from \"react\";\n\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport type { LiveblocksLexicalInternalConfig } from \"./liveblocks-plugin-provider\";\nimport { Avatar } from \"./mentions/avatar\";\nimport { Mention } from \"./mentions/mention-component\";\nimport { createMentionNodeFactory } from \"./mentions/mention-node\";\nimport * as Suggestions from \"./mentions/suggestions\";\nimport { User } from \"./mentions/user\";\n\nlet liveblocksConfig: LiveblocksLexicalInternalConfig | null = null;\n\nexport interface MentionProps {\n  /**\n   * The mention's user ID.\n   */\n  userId: string;\n}\n\nexport interface MentionSuggestionsProps {\n  /**\n   * The list of suggested user IDs.\n   */\n  userIds: string[];\n}\n\ninterface EditorComponents {\n  Mention: ComponentType<MentionProps>;\n  MentionSuggestions: ComponentType<MentionSuggestionsProps>;\n}\n\nexport interface LiveblocksConfig {\n  /**\n   * Whether comments are enabled. Defaults to true.\n   */\n  comments?: boolean;\n  /**\n   * The components displayed within the editor.\n   */\n  components?: Partial<EditorComponents>;\n}\n\nconst MENTION_CHARACTER = \"@\";\nconst defaultComponents: EditorComponents = {\n  Mention: ({ userId }) => {\n    return (\n      <Mention className=\"lb-lexical-mention\">\n        {MENTION_CHARACTER}\n        <User userId={userId} />\n      </Mention>\n    );\n  },\n  MentionSuggestions: ({ userIds }) => {\n    return (\n      <Suggestions.List className=\"lb-lexical-suggestions-list\">\n        {userIds.map((userId) => (\n          <Suggestions.Item\n            key={userId}\n            value={userId}\n            className=\"lb-lexical-suggestions-list-item\"\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-lexical-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-lexical-mention-suggestion-user\"\n            />\n          </Suggestions.Item>\n        ))}\n      </Suggestions.List>\n    );\n  },\n};\n\nexport function liveblocksLexicalConfig(\n  editorConfig: InitialConfigType,\n  config: LiveblocksConfig = {}\n) {\n  const { comments = true, components = {} } = config;\n\n  const nodes = [...(editorConfig.nodes ?? [])];\n\n  const Mention = components.Mention ?? defaultComponents.Mention;\n  const MentionSuggestions =\n    components.MentionSuggestions ?? defaultComponents.MentionSuggestions;\n\n  const mentionFactory = createMentionNodeFactory(Mention);\n\n  nodes.push(ThreadMarkNode, mentionFactory.MentionNode);\n\n  liveblocksConfig = {\n    comments,\n    mentions: {\n      factory: mentionFactory,\n      components: {\n        MentionSuggestions,\n      },\n    },\n  };\n\n  return {\n    ...editorConfig,\n    nodes,\n    editorState: null, // explicitly null because CollabProvider requires it\n  };\n}\n\nexport function getLiveblocksLexicalConfig(): LiveblocksLexicalInternalConfig {\n  if (liveblocksConfig === null) {\n    throw new Error(\"Liveblocks config is not initialized.\");\n  }\n  return {\n    ...liveblocksConfig,\n  };\n}\n"],"names":["Suggestions.List","Suggestions.Item","Mention"],"mappings":";;;;;;;;AAYA,IAAI,gBAA2D,GAAA,IAAA,CAAA;AAgC/D,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAC1B,MAAM,iBAAsC,GAAA;AAAA,EAC1C,OAAS,EAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AACvB,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,MAAQ,SAAU,EAAA,oBAAA;AAAA,KAAA,EAChB,mCACA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MAAK,MAAA;AAAA,KAAgB,CACxB,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,kBAAoB,EAAA,CAAC,EAAE,OAAA,EAAc,KAAA;AACnC,IACE,uBAAA,KAAA,CAAA,aAAA,CAACA,IAAA,EAAA;AAAA,MAAiB,SAAU,EAAA,6BAAA;AAAA,KAAA,EACzB,QAAQ,GAAI,CAAA,CAAC,MACZ,qBAAA,KAAA,CAAA,aAAA,CAACC,IAAA,EAAA;AAAA,MACC,GAAK,EAAA,MAAA;AAAA,MACL,KAAO,EAAA,MAAA;AAAA,MACP,SAAU,EAAA,kCAAA;AAAA,KAAA,kBAET,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,sCAAA;AAAA,KACZ,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAU,EAAA,oCAAA;AAAA,KACZ,CACF,CACD,CACH,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA,CAAA;AAEO,SAAS,uBACd,CAAA,YAAA,EACA,MAA2B,GAAA,EAC3B,EAAA;AACA,EAAA,MAAM,EAAE,QAAW,GAAA,IAAA,EAAM,UAAa,GAAA,IAAO,GAAA,MAAA,CAAA;AAE7C,EAAA,MAAM,QAAQ,CAAC,GAAI,YAAa,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA;AAE5C,EAAMC,MAAAA,QAAAA,GAAU,UAAW,CAAA,OAAA,IAAW,iBAAkB,CAAA,OAAA,CAAA;AACxD,EAAM,MAAA,kBAAA,GACJ,UAAW,CAAA,kBAAA,IAAsB,iBAAkB,CAAA,kBAAA,CAAA;AAErD,EAAM,MAAA,cAAA,GAAiB,yBAAyBA,QAAO,CAAA,CAAA;AAEvD,EAAM,KAAA,CAAA,IAAA,CAAK,cAAgB,EAAA,cAAA,CAAe,WAAW,CAAA,CAAA;AAErD,EAAmB,gBAAA,GAAA;AAAA,IACjB,QAAA;AAAA,IACA,QAAU,EAAA;AAAA,MACR,OAAS,EAAA,cAAA;AAAA,MACT,UAAY,EAAA;AAAA,QACV,kBAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,GAAG,YAAA;AAAA,IACH,KAAA;AAAA,IACA,WAAa,EAAA,IAAA;AAAA,GACf,CAAA;AACF,CAAA;AAEO,SAAS,0BAA8D,GAAA;AAC5E,EAAA,IAAI,qBAAqB,IAAM,EAAA;AAC7B,IAAM,MAAA,IAAI,MAAM,uCAAuC,CAAA,CAAA;AAAA,GACzD;AACA,EAAO,OAAA;AAAA,IACL,GAAG,gBAAA;AAAA,GACL,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\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;;;;"}

package/dist/liveblocks-plugin-provider.js

@@ -4,26 +4,23 @@ var LexicalCollaborationPlugin = require('@lexical/react/LexicalCollaborationPlu
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var core = require('@liveblocks/core');
 var react = require('@liveblocks/react');
-var LiveblocksProvider = require('@liveblocks/yjs');
+var yjs$1 = require('@liveblocks/yjs');
 var React = require('react');
 var yjs = require('yjs');
 var commentPluginProvider = require('./comments/comment-plugin-provider.js');
-var liveblocksConfig = require('./liveblocks-config.js');
 var mentionPlugin = require('./mentions/mention-plugin.js');
 
-const LiveblocksLexicalConfigContext = React.createContext(null);
-const LiveblocksPluginProvider = ({
+const LiveblocksPlugin = ({
   children
 }) => {
   const client = react.useClient();
   const hasResolveMentionSuggestions = client[core.kInternal].resolveMentionSuggestions !== void 0;
-  const { useSelf, useRoom } = react.useRoomContextBundle();
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const room = useRoom();
+  const room = react.useRoom();
   const [provider, setProvider] = React.useState();
   const doc = React.useMemo(() => new yjs.Doc(), []);
   React.useEffect(() => {
-    const _provider = new LiveblocksProvider(room, doc);
+    const _provider = new yjs$1.LiveblocksYjsProvider(room, doc);
     setProvider(_provider);
     return () => {
       _provider.destroy();
@@ -34,13 +31,15 @@ const LiveblocksPluginProvider = ({
     if (process.env.NODE_ENV !== "production") {
       if (!editor.getEditorState().isEmpty()) {
         console.warn(
-          "Warning: LiveblocksPluginProvider: editorState in initialConfig detected, but must be null."
+          "Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null."
         );
       }
     }
-    room[core.kInternal].reportTextEditor("lexical", "root");
   }, []);
-  const info = useSelf((me) => me.info);
+  React.useEffect(() => {
+    room[core.kInternal].reportTextEditor("lexical", "root");
+  }, [room]);
+  const info = react.useSelf((me) => me.info);
   const username = info?.name;
   const cursorcolor = info?.color;
   const providerFactory = React.useCallback(
@@ -50,30 +49,14 @@ const LiveblocksPluginProvider = ({
     },
     [provider, doc]
   );
-  const configRef = React.useRef(null);
-  if (configRef.current === null) {
-    configRef.current = liveblocksConfig.getLiveblocksLexicalConfig();
-  }
-  return /* @__PURE__ */ React.createElement(LiveblocksLexicalConfigContext.Provider, {
-    value: configRef.current
-  }, provider && /* @__PURE__ */ React.createElement(LexicalCollaborationPlugin.CollaborationPlugin, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, provider && /* @__PURE__ */ React.createElement(LexicalCollaborationPlugin.CollaborationPlugin, {
     providerFactory,
     id: "liveblocks-document",
     username,
     cursorColor: cursorcolor,
     shouldBootstrap: true
-  }), hasResolveMentionSuggestions && /* @__PURE__ */ React.createElement(mentionPlugin.default, null), configRef.current.comments && /* @__PURE__ */ React.createElement(commentPluginProvider.CommentPluginProvider, null, children));
+  }), hasResolveMentionSuggestions && /* @__PURE__ */ React.createElement(mentionPlugin.MentionPlugin, null), /* @__PURE__ */ React.createElement(commentPluginProvider.CommentPluginProvider, null, children));
 };
-function useLiveblocksLexicalConfigContext() {
-  const config = React.useContext(LiveblocksLexicalConfigContext);
-  if (config === null) {
-    throw new Error(
-      "useLiveblocksLexicalConfigContext must be used within a LiveblocksPluginProviderProvider"
-    );
-  }
-  return config;
-}
 
-exports.LiveblocksPluginProvider = LiveblocksPluginProvider;
-exports.useLiveblocksLexicalConfigContext = useLiveblocksLexicalConfigContext;
+exports.LiveblocksPlugin = LiveblocksPlugin;
 //# 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 { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport type {\n  BaseUserMeta,\n  Json,\n  JsonObject,\n  LsonObject,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport { useClient, useRoomContextBundle } from \"@liveblocks/react\";\nimport LiveblocksProvider from \"@liveblocks/yjs\";\nimport type { ComponentType } from \"react\";\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport type { MentionSuggestionsProps } from \"./liveblocks-config\";\nimport { getLiveblocksLexicalConfig } from \"./liveblocks-config\";\nimport type { createMentionNodeFactory } from \"./mentions/mention-node\";\nimport MentionPlugin from \"./mentions/mention-plugin\";\n\nexport type LiveblocksPluginProviderProps = {\n  // TODO: Move these configuration options (if applicable and necessary) to the `liveblocksLexicalConfig` function to have all configuration in one place\n  // /**\n  //  * Optionally override user information. If not, user[\"info\"] from auth will be used.\n  //  */\n  // userInfo?: {\n  //   name: string;\n  //   color?: string;\n  // };\n  // /**\n  //  * Whether or not the user can edit the document before it has been synced\n  //  * default: true\n  //  */\n  // allowEditsBeforeSync?: boolean;\n\n  // /**\n  //  * Modify the state with this function to set the initial state.\n  //  * Ex. $createTextNode('initial text content');\n  //  *\n  //  * @param editor\n  //  * @returns void\n  //  */\n  // initialEditorState?: (editor: LexicalEditor) => void;\n\n  children?: React.ReactNode;\n};\n\nexport interface LiveblocksLexicalInternalConfig {\n  comments: boolean;\n  mentions: {\n    factory: ReturnType<typeof createMentionNodeFactory>;\n    components: {\n      MentionSuggestions: ComponentType<MentionSuggestionsProps>;\n    };\n  };\n}\n\nconst LiveblocksLexicalConfigContext =\n  createContext<LiveblocksLexicalInternalConfig | null>(null);\n\nexport const LiveblocksPluginProvider = ({\n  // userInfo = undefined,\n  // allowEditsBeforeSync = true,\n  // initialEditorState = undefined,\n  children,\n}: LiveblocksPluginProviderProps): JSX.Element => {\n  const client = useClient();\n  const hasResolveMentionSuggestions =\n    client[kInternal].resolveMentionSuggestions !== undefined;\n  const { useSelf, useRoom } = useRoomContextBundle();\n  const [editor] = useLexicalComposerContext();\n  const room = useRoom();\n\n  const [provider, setProvider] = useState<\n    LiveblocksProvider<JsonObject, LsonObject, BaseUserMeta, Json> | undefined\n  >();\n\n  const doc = useMemo(() => new Doc(), []);\n\n  useEffect(() => {\n    const _provider = new LiveblocksProvider(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: LiveblocksPluginProvider: editorState in initialConfig detected, but must be null.\"\n        );\n      }\n    }\n\n    // Report that this is lexical and root is the rootKey\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    room[kInternal].reportTextEditor(\"lexical\", \"root\");\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  // 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  // const [synced, setSynced] = useState(false);\n\n  // useEffect(() => {\n  //   if (!provider) {\n  //     return;\n  //   }\n  //   provider.on(\"sync\", setSynced);\n  //   return () => {\n  //     provider.off(\"sync\", setSynced);\n  //   };\n  // }, [provider]);\n\n  // // Disable the editor before sync\n  // useEffect(() => {\n  //   if (!allowEditsBeforeSync) {\n  //     editor.setEditable(synced);\n  //   }\n  // }, [synced, editor, allowEditsBeforeSync]);\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  const configRef = useRef<LiveblocksLexicalInternalConfig | null>(null);\n  if (configRef.current === null) {\n    configRef.current = getLiveblocksLexicalConfig();\n  }\n\n  return (\n    <LiveblocksLexicalConfigContext.Provider value={configRef.current}>\n      {provider && (\n        <CollaborationPlugin\n          providerFactory={providerFactory}\n          // initialEditorState={initialEditorState}\n          id={\"liveblocks-document\"}\n          username={username}\n          cursorColor={cursorcolor}\n          shouldBootstrap={true}\n        />\n      )}\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      {configRef.current.comments && (\n        <CommentPluginProvider>{children}</CommentPluginProvider>\n      )}\n    </LiveblocksLexicalConfigContext.Provider>\n  );\n};\n\nexport function useLiveblocksLexicalConfigContext(): LiveblocksLexicalInternalConfig {\n  const config = useContext(LiveblocksLexicalConfigContext);\n  if (config === null) {\n    throw new Error(\n      \"useLiveblocksLexicalConfigContext must be used within a LiveblocksPluginProviderProvider\"\n    );\n  }\n  return config;\n}\n"],"names":["createContext","useClient","kInternal","useRoomContextBundle","useLexicalComposerContext","useState","useMemo","Doc","useEffect","useCallback","useRef","getLiveblocksLexicalConfig","CollaborationPlugin","MentionPlugin","CommentPluginProvider","useContext"],"mappings":"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"}
+{"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;;;;"}

package/dist/liveblocks-plugin-provider.mjs

@@ -1,27 +1,24 @@
 import { CollaborationPlugin } from '@lexical/react/LexicalCollaborationPlugin';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { kInternal } from '@liveblocks/core';
-import { useClient, useRoomContextBundle } from '@liveblocks/react';
-import LiveblocksProvider from '@liveblocks/yjs';
-import React__default, { createContext, useState, useMemo, useEffect, useCallback, useRef, useContext } from 'react';
+import { useClient, useRoom, useSelf } from '@liveblocks/react';
+import { LiveblocksYjsProvider } from '@liveblocks/yjs';
+import React__default, { useState, useMemo, useEffect, useCallback } from 'react';
 import { Doc } from 'yjs';
 import { CommentPluginProvider } from './comments/comment-plugin-provider.mjs';
-import { getLiveblocksLexicalConfig } from './liveblocks-config.mjs';
-import MentionPlugin from './mentions/mention-plugin.mjs';
+import { MentionPlugin } from './mentions/mention-plugin.mjs';
 
-const LiveblocksLexicalConfigContext = createContext(null);
-const LiveblocksPluginProvider = ({
+const LiveblocksPlugin = ({
   children
 }) => {
   const client = useClient();
   const hasResolveMentionSuggestions = client[kInternal].resolveMentionSuggestions !== void 0;
-  const { useSelf, useRoom } = useRoomContextBundle();
   const [editor] = useLexicalComposerContext();
   const room = useRoom();
   const [provider, setProvider] = useState();
   const doc = useMemo(() => new Doc(), []);
   useEffect(() => {
-    const _provider = new LiveblocksProvider(room, doc);
+    const _provider = new LiveblocksYjsProvider(room, doc);
     setProvider(_provider);
     return () => {
       _provider.destroy();
@@ -32,12 +29,14 @@ const LiveblocksPluginProvider = ({
     if (process.env.NODE_ENV !== "production") {
       if (!editor.getEditorState().isEmpty()) {
         console.warn(
-          "Warning: LiveblocksPluginProvider: editorState in initialConfig detected, but must be null."
+          "Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null."
         );
       }
     }
-    room[kInternal].reportTextEditor("lexical", "root");
   }, []);
+  useEffect(() => {
+    room[kInternal].reportTextEditor("lexical", "root");
+  }, [room]);
   const info = useSelf((me) => me.info);
   const username = info?.name;
   const cursorcolor = info?.color;
@@ -48,29 +47,14 @@ const LiveblocksPluginProvider = ({
     },
     [provider, doc]
   );
-  const configRef = useRef(null);
-  if (configRef.current === null) {
-    configRef.current = getLiveblocksLexicalConfig();
-  }
-  return /* @__PURE__ */ React__default.createElement(LiveblocksLexicalConfigContext.Provider, {
-    value: configRef.current
-  }, provider && /* @__PURE__ */ React__default.createElement(CollaborationPlugin, {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, provider && /* @__PURE__ */ React__default.createElement(CollaborationPlugin, {
     providerFactory,
     id: "liveblocks-document",
     username,
     cursorColor: cursorcolor,
     shouldBootstrap: true
-  }), hasResolveMentionSuggestions && /* @__PURE__ */ React__default.createElement(MentionPlugin, null), configRef.current.comments && /* @__PURE__ */ React__default.createElement(CommentPluginProvider, null, children));
+  }), hasResolveMentionSuggestions && /* @__PURE__ */ React__default.createElement(MentionPlugin, null), /* @__PURE__ */ React__default.createElement(CommentPluginProvider, null, children));
 };
-function useLiveblocksLexicalConfigContext() {
-  const config = useContext(LiveblocksLexicalConfigContext);
-  if (config === null) {
-    throw new Error(
-      "useLiveblocksLexicalConfigContext must be used within a LiveblocksPluginProviderProvider"
-    );
-  }
-  return config;
-}
 
-export { LiveblocksPluginProvider, useLiveblocksLexicalConfigContext };
+export { LiveblocksPlugin };
 //# sourceMappingURL=liveblocks-plugin-provider.mjs.map

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  BaseUserMeta,\n  Json,\n  JsonObject,\n  LsonObject,\n} from \"@liveblocks/core\";\nimport { kInternal } from \"@liveblocks/core\";\nimport { useClient, useRoomContextBundle } from \"@liveblocks/react\";\nimport LiveblocksProvider from \"@liveblocks/yjs\";\nimport type { ComponentType } from \"react\";\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport type { MentionSuggestionsProps } from \"./liveblocks-config\";\nimport { getLiveblocksLexicalConfig } from \"./liveblocks-config\";\nimport type { createMentionNodeFactory } from \"./mentions/mention-node\";\nimport MentionPlugin from \"./mentions/mention-plugin\";\n\nexport type LiveblocksPluginProviderProps = {\n  // TODO: Move these configuration options (if applicable and necessary) to the `liveblocksLexicalConfig` function to have all configuration in one place\n  // /**\n  //  * Optionally override user information. If not, user[\"info\"] from auth will be used.\n  //  */\n  // userInfo?: {\n  //   name: string;\n  //   color?: string;\n  // };\n  // /**\n  //  * Whether or not the user can edit the document before it has been synced\n  //  * default: true\n  //  */\n  // allowEditsBeforeSync?: boolean;\n\n  // /**\n  //  * Modify the state with this function to set the initial state.\n  //  * Ex. $createTextNode('initial text content');\n  //  *\n  //  * @param editor\n  //  * @returns void\n  //  */\n  // initialEditorState?: (editor: LexicalEditor) => void;\n\n  children?: React.ReactNode;\n};\n\nexport interface LiveblocksLexicalInternalConfig {\n  comments: boolean;\n  mentions: {\n    factory: ReturnType<typeof createMentionNodeFactory>;\n    components: {\n      MentionSuggestions: ComponentType<MentionSuggestionsProps>;\n    };\n  };\n}\n\nconst LiveblocksLexicalConfigContext =\n  createContext<LiveblocksLexicalInternalConfig | null>(null);\n\nexport const LiveblocksPluginProvider = ({\n  // userInfo = undefined,\n  // allowEditsBeforeSync = true,\n  // initialEditorState = undefined,\n  children,\n}: LiveblocksPluginProviderProps): JSX.Element => {\n  const client = useClient();\n  const hasResolveMentionSuggestions =\n    client[kInternal].resolveMentionSuggestions !== undefined;\n  const { useSelf, useRoom } = useRoomContextBundle();\n  const [editor] = useLexicalComposerContext();\n  const room = useRoom();\n\n  const [provider, setProvider] = useState<\n    LiveblocksProvider<JsonObject, LsonObject, BaseUserMeta, Json> | undefined\n  >();\n\n  const doc = useMemo(() => new Doc(), []);\n\n  useEffect(() => {\n    const _provider = new LiveblocksProvider(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: LiveblocksPluginProvider: editorState in initialConfig detected, but must be null.\"\n        );\n      }\n    }\n\n    // Report that this is lexical and root is the rootKey\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    room[kInternal].reportTextEditor(\"lexical\", \"root\");\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  // 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  // const [synced, setSynced] = useState(false);\n\n  // useEffect(() => {\n  //   if (!provider) {\n  //     return;\n  //   }\n  //   provider.on(\"sync\", setSynced);\n  //   return () => {\n  //     provider.off(\"sync\", setSynced);\n  //   };\n  // }, [provider]);\n\n  // // Disable the editor before sync\n  // useEffect(() => {\n  //   if (!allowEditsBeforeSync) {\n  //     editor.setEditable(synced);\n  //   }\n  // }, [synced, editor, allowEditsBeforeSync]);\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  const configRef = useRef<LiveblocksLexicalInternalConfig | null>(null);\n  if (configRef.current === null) {\n    configRef.current = getLiveblocksLexicalConfig();\n  }\n\n  return (\n    <LiveblocksLexicalConfigContext.Provider value={configRef.current}>\n      {provider && (\n        <CollaborationPlugin\n          providerFactory={providerFactory}\n          // initialEditorState={initialEditorState}\n          id={\"liveblocks-document\"}\n          username={username}\n          cursorColor={cursorcolor}\n          shouldBootstrap={true}\n        />\n      )}\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      {configRef.current.comments && (\n        <CommentPluginProvider>{children}</CommentPluginProvider>\n      )}\n    </LiveblocksLexicalConfigContext.Provider>\n  );\n};\n\nexport function useLiveblocksLexicalConfigContext(): LiveblocksLexicalInternalConfig {\n  const config = useContext(LiveblocksLexicalConfigContext);\n  if (config === null) {\n    throw new Error(\n      \"useLiveblocksLexicalConfigContext must be used within a LiveblocksPluginProviderProvider\"\n    );\n  }\n  return config;\n}\n"],"names":["React"],"mappings":"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"}
+{"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;;;;"}

package/dist/mentions/avatar.js

@@ -2,19 +2,20 @@
 
 var react = require('@liveblocks/react');
 var React = require('react');
+var classnames = require('../classnames.js');
 
 const Avatar = React.forwardRef(
   function Avatar2(props, forwardedRef) {
-    const { userId, ...spanProps } = props;
-    const { useUser } = react.useSharedContextBundle();
-    const { user, isLoading } = useUser(userId);
+    const { userId, className, ...spanProps } = props;
+    const { user, isLoading } = react.useUser(userId);
     const avatar = user ? user.avatar : void 0;
     const name = user ? user.name : void 0;
     function Initials() {
       const initials = name ? getInitials(name) : void 0;
       if (initials) {
         return /* @__PURE__ */ React.createElement("span", {
-          "aria-hidden": true
+          "aria-hidden": true,
+          className: "lb-avatar-fallback"
         }, initials);
       }
       if (isLoading)
@@ -23,16 +24,19 @@ const Avatar = React.forwardRef(
         return null;
       return /* @__PURE__ */ React.createElement("span", {
         "aria-label": userId,
-        title: userId
+        title: userId,
+        className: "lb-avatar-fallback"
       }, getInitials(userId));
     }
     return /* @__PURE__ */ React.createElement("span", {
       "data-loading": isLoading ? "" : void 0,
       ...spanProps,
+      className: classnames.classNames("lb-avatar", className),
       ref: forwardedRef
     }, avatar && /* @__PURE__ */ React.createElement("img", {
       src: avatar,
-      alt: name
+      alt: name,
+      className: "lb-avatar-image"
     }), /* @__PURE__ */ React.createElement(Initials, null));
   }
 );

package/dist/mentions/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../src/mentions/avatar.tsx"],"sourcesContent":["import { useSharedContextBundle } from \"@liveblocks/react\";\nimport type { HTMLAttributes } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  userId: string;\n}\n\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, forwardedRef) {\n    const { userId, ...spanProps } = props;\n    const { useUser } = useSharedContextBundle();\n\n    const { user, isLoading } = useUser(userId);\n\n    const avatar = user ? user.avatar : undefined;\n\n    const name = user ? user.name : undefined;\n\n    function Initials() {\n      const initials = name ? getInitials(name) : undefined;\n      if (initials) {\n        return <span aria-hidden>{initials}</span>;\n      }\n\n      if (isLoading) return null;\n\n      if (user === undefined) return null;\n\n      return (\n        <span aria-label={userId} title={userId}>\n          {getInitials(userId)}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        data-loading={isLoading ? \"\" : undefined}\n        {...spanProps}\n        ref={forwardedRef}\n      >\n        {avatar && <img src={avatar} alt={name} />}\n\n        <Initials />\n      </span>\n    );\n  }\n);\n\nfunction getInitials(name: string) {\n  return name\n    .trim()\n    .split(\" \")\n    .reduce((initials, name, index, array) => {\n      if (index === 0 || index === array.length - 1) {\n        initials += name.charAt(0).toLocaleUpperCase();\n      }\n\n      return initials;\n    }, \"\");\n}\n"],"names":["forwardRef","Avatar","useSharedContextBundle","name"],"mappings":";;;;;AASO,MAAM,MAAS,GAAAA,gBAAA;AAAA,EACpB,SAASC,OAAO,CAAA,KAAA,EAAO,YAAc,EAAA;AACnC,IAAM,MAAA,EAAE,MAAW,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACjC,IAAM,MAAA,EAAE,OAAQ,EAAA,GAAIC,4BAAuB,EAAA,CAAA;AAE3C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAI,QAAQ,MAAM,CAAA,CAAA;AAE1C,IAAM,MAAA,MAAA,GAAS,IAAO,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAA,CAAA;AAEpC,IAAM,MAAA,IAAA,GAAO,IAAO,GAAA,IAAA,CAAK,IAAO,GAAA,KAAA,CAAA,CAAA;AAEhC,IAAA,SAAS,QAAW,GAAA;AAClB,MAAA,MAAM,QAAW,GAAA,IAAA,GAAO,WAAY,CAAA,IAAI,CAAI,GAAA,KAAA,CAAA,CAAA;AAC5C,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,UAAK,aAAW,EAAA,IAAA;AAAA,SAAA,EAAE,QAAS,CAAA,CAAA;AAAA,OACrC;AAEA,MAAI,IAAA,SAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,IAAI,IAAS,KAAA,KAAA,CAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAE/B,MAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,QAAK,YAAY,EAAA,MAAA;AAAA,QAAQ,KAAO,EAAA,MAAA;AAAA,OAC9B,EAAA,WAAA,CAAY,MAAM,CACrB,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,KAAA,EAEJ,0BAAW,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,MAAA;AAAA,MAAQ,GAAK,EAAA,IAAA;AAAA,KAAM,CAAA,kBAEvC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAS,CACZ,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,SAAS,YAAY,IAAc,EAAA;AACjC,EAAO,OAAA,IAAA,CACJ,IAAK,EAAA,CACL,KAAM,CAAA,GAAG,CACT,CAAA,MAAA,CAAO,CAAC,QAAA,EAAUC,KAAM,EAAA,KAAA,EAAO,KAAU,KAAA;AACxC,IAAA,IAAI,KAAU,KAAA,CAAA,IAAK,KAAU,KAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AAC7C,MAAA,QAAA,IAAYA,KAAK,CAAA,MAAA,CAAO,CAAC,CAAA,CAAE,iBAAkB,EAAA,CAAA;AAAA,KAC/C;AAEA,IAAO,OAAA,QAAA,CAAA;AAAA,KACN,EAAE,CAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"avatar.js","sources":["../../src/mentions/avatar.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport type { HTMLAttributes } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\n\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  userId: string;\n}\n\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n\n    const avatar = user ? user.avatar : undefined;\n\n    const name = user ? user.name : undefined;\n\n    function Initials() {\n      const initials = name ? getInitials(name) : undefined;\n      if (initials) {\n        return (\n          <span aria-hidden className=\"lb-avatar-fallback\">\n            {initials}\n          </span>\n        );\n      }\n\n      if (isLoading) return null;\n\n      if (user === undefined) return null;\n\n      return (\n        <span aria-label={userId} title={userId} className=\"lb-avatar-fallback\">\n          {getInitials(userId)}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        data-loading={isLoading ? \"\" : undefined}\n        {...spanProps}\n        className={classNames(\"lb-avatar\", className)}\n        ref={forwardedRef}\n      >\n        {avatar && <img src={avatar} alt={name} className=\"lb-avatar-image\" />}\n\n        <Initials />\n      </span>\n    );\n  }\n);\n\nfunction getInitials(name: string) {\n  return name\n    .trim()\n    .split(\" \")\n    .reduce((initials, name, index, array) => {\n      if (index === 0 || index === array.length - 1) {\n        initials += name.charAt(0).toLocaleUpperCase();\n      }\n\n      return initials;\n    }, \"\");\n}\n"],"names":["forwardRef","Avatar","useUser","classNames","name"],"mappings":";;;;;;AAWO,MAAM,MAAS,GAAAA,gBAAA;AAAA,EACpB,SAASC,OAAO,CAAA,KAAA,EAAO,YAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAIC,cAAQ,MAAM,CAAA,CAAA;AAE1C,IAAM,MAAA,MAAA,GAAS,IAAO,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAA,CAAA;AAEpC,IAAM,MAAA,IAAA,GAAO,IAAO,GAAA,IAAA,CAAK,IAAO,GAAA,KAAA,CAAA,CAAA;AAEhC,IAAA,SAAS,QAAW,GAAA;AAClB,MAAA,MAAM,QAAW,GAAA,IAAA,GAAO,WAAY,CAAA,IAAI,CAAI,GAAA,KAAA,CAAA,CAAA;AAC5C,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,UAAK,aAAW,EAAA,IAAA;AAAA,UAAC,SAAU,EAAA,oBAAA;AAAA,SAAA,EACzB,QACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAI,IAAA,SAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,IAAI,IAAS,KAAA,KAAA,CAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAE/B,MAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,QAAK,YAAY,EAAA,MAAA;AAAA,QAAQ,KAAO,EAAA,MAAA;AAAA,QAAQ,SAAU,EAAA,oBAAA;AAAA,OAChD,EAAA,WAAA,CAAY,MAAM,CACrB,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,SAAA,EAAWC,qBAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,MAC5C,GAAK,EAAA,YAAA;AAAA,KAAA,EAEJ,0BAAW,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,MAAA;AAAA,MAAQ,GAAK,EAAA,IAAA;AAAA,MAAM,SAAU,EAAA,iBAAA;AAAA,KAAkB,CAAA,kBAEnE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAS,CACZ,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,SAAS,YAAY,IAAc,EAAA;AACjC,EAAO,OAAA,IAAA,CACJ,IAAK,EAAA,CACL,KAAM,CAAA,GAAG,CACT,CAAA,MAAA,CAAO,CAAC,QAAA,EAAUC,KAAM,EAAA,KAAA,EAAO,KAAU,KAAA;AACxC,IAAA,IAAI,KAAU,KAAA,CAAA,IAAK,KAAU,KAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AAC7C,MAAA,QAAA,IAAYA,KAAK,CAAA,MAAA,CAAO,CAAC,CAAA,CAAE,iBAAkB,EAAA,CAAA;AAAA,KAC/C;AAEA,IAAO,OAAA,QAAA,CAAA;AAAA,KACN,EAAE,CAAA,CAAA;AACT;;;;"}