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

package/dist/liveblocks-plugin-provider.mjs

@@ -1,76 +1,73 @@
+import { CollaborationContext } from '@lexical/react/LexicalCollaborationContext';
 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 { kInternal, nn } from '@liveblocks/core';
+import { useClient, useRoom, useSelf } from '@liveblocks/react';
+import { LiveblocksYjsProvider } from '@liveblocks/yjs';
+import React__default, { useContext, useRef, 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 providersMap = /* @__PURE__ */ new Map();
+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);
-    setProvider(_provider);
-    return () => {
-      _provider.destroy();
-      setProvider(void 0);
-    };
-  }, [room, doc]);
+  const collabContext = useContext(CollaborationContext);
+  const previousRoomIdRef = useRef(null);
   useEffect(() => {
     if (process.env.NODE_ENV !== "production") {
       if (!editor.getEditorState().isEmpty()) {
         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 username = info?.name || "";
   const cursorcolor = info?.color;
   const providerFactory = useCallback(
     (id, yjsDocMap) => {
-      yjsDocMap.set(id, doc);
-      return provider;
+      if (previousRoomIdRef.current !== null && previousRoomIdRef.current !== id) {
+        const previousProvider = providersMap.get(id);
+        if (previousProvider !== void 0) {
+          previousProvider.destroy();
+        }
+      }
+      let doc = yjsDocMap.get(id);
+      if (doc === void 0) {
+        doc = new Doc();
+        const provider = new LiveblocksYjsProvider(room, doc);
+        yjsDocMap.set(id, doc);
+        providersMap.set(id, provider);
+      }
+      return nn(
+        providersMap.get(id),
+        "Internal error. Should never happen"
+      );
     },
-    [provider, doc]
+    [room]
   );
-  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, {
+  useEffect(() => {
+    collabContext.name = username || "";
+  }, [collabContext, username]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(CollaborationPlugin, {
+    key: room.id,
+    id: room.id,
     providerFactory,
-    id: "liveblocks-document",
     username,
     cursorColor: cursorcolor,
     shouldBootstrap: true
-  }), 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 { CollaborationContext } from \"@lexical/react/LexicalCollaborationContext\";\nimport { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport { kInternal, nn } from \"@liveblocks/core\";\nimport { useClient, useRoom, useSelf } from \"@liveblocks/react\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport React, { useCallback, useContext, useEffect, useRef } from \"react\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { MentionPlugin } from \"./mentions/mention-plugin\";\n\n// TODO: Replace by ref once I understand why useRef is not stable (?!)\nconst providersMap = new Map<\n  string,\n  LiveblocksYjsProvider<never, never, never, never, never>\n>();\n\nexport type LiveblocksPluginProps = {\n  children?: React.ReactNode;\n};\n\nexport const LiveblocksPlugin = ({\n  children,\n}: LiveblocksPluginProps): JSX.Element => {\n  const client = useClient();\n  const hasResolveMentionSuggestions =\n    client[kInternal].resolveMentionSuggestions !== undefined;\n  const [editor] = useLexicalComposerContext();\n  const room = useRoom();\n  const collabContext = useContext(CollaborationContext);\n  const previousRoomIdRef = useRef<string | null>(null);\n\n  // Warn users if initialConfig.editorState, set on the composer, is not null\n  useEffect(() => {\n    // only in dev mode\n    if (process.env.NODE_ENV !== \"production\") {\n      // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n      if (!editor.getEditorState().isEmpty()) {\n        console.warn(\n          \"Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null.\"\n        );\n      }\n    }\n\n    // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    // Report that this is lexical and root is the rootKey\n    room[kInternal].reportTextEditor(\"lexical\", \"root\");\n  }, [room]);\n\n  // Get user info or allow override from props\n  const info = useSelf((me) => me.info);\n  const username = info?.name || \"\"; // use empty string to prevent random name\n  const cursorcolor = info?.color as string | undefined;\n\n  const providerFactory = useCallback(\n    (id: string, yjsDocMap: Map<string, Doc>): Provider => {\n      // Destroy previously used provider to avoid memory leaks\n      // TODO: Find a way to destroy the last used provider on unmount (while working with StrictMode)\n      if (\n        previousRoomIdRef.current !== null &&\n        previousRoomIdRef.current !== id\n      ) {\n        const previousProvider = providersMap.get(id);\n        if (previousProvider !== undefined) {\n          previousProvider.destroy();\n        }\n      }\n\n      let doc = yjsDocMap.get(id);\n\n      if (doc === undefined) {\n        doc = new Doc();\n        const provider = new LiveblocksYjsProvider(room, doc);\n        yjsDocMap.set(id, doc);\n        providersMap.set(id, provider);\n      }\n\n      return nn(\n        providersMap.get(id),\n        \"Internal error. Should never happen\"\n      ) as Provider;\n    },\n    [room]\n  );\n\n  useEffect(() => {\n    collabContext.name = username || \"\";\n  }, [collabContext, username]);\n\n  return (\n    <>\n      <CollaborationPlugin\n        // Setting the key allows us to reset the internal Y.doc used by useYjsCollaboration\n        // without implementing `reload` event\n        key={room.id}\n        id={room.id}\n        providerFactory={providerFactory}\n        username={username}\n        cursorColor={cursorcolor}\n        shouldBootstrap={true}\n      />\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      <CommentPluginProvider>{children}</CommentPluginProvider>\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/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;;;;"}

package/dist/mentions/avatar.mjs

@@ -1,10 +1,10 @@
-import { useSharedContextBundle } from '@liveblocks/react';
+import { useUser } from '@liveblocks/react';
 import React__default, { forwardRef } from 'react';
+import { classNames } from '../classnames.mjs';
 
 const Avatar = forwardRef(
   function Avatar2(props, forwardedRef) {
-    const { userId, ...spanProps } = props;
-    const { useUser } = useSharedContextBundle();
+    const { userId, className, ...spanProps } = props;
     const { user, isLoading } = useUser(userId);
     const avatar = user ? user.avatar : void 0;
     const name = user ? user.name : void 0;
@@ -12,7 +12,8 @@ const Avatar = forwardRef(
       const initials = name ? getInitials(name) : void 0;
       if (initials) {
         return /* @__PURE__ */ React__default.createElement("span", {
-          "aria-hidden": true
+          "aria-hidden": true,
+          className: "lb-avatar-fallback"
         }, initials);
       }
       if (isLoading)
@@ -21,16 +22,19 @@ const Avatar = forwardRef(
         return null;
       return /* @__PURE__ */ React__default.createElement("span", {
         "aria-label": userId,
-        title: userId
+        title: userId,
+        className: "lb-avatar-fallback"
       }, getInitials(userId));
     }
     return /* @__PURE__ */ React__default.createElement("span", {
       "data-loading": isLoading ? "" : void 0,
       ...spanProps,
+      className: classNames("lb-avatar", className),
       ref: forwardedRef
     }, avatar && /* @__PURE__ */ React__default.createElement("img", {
       src: avatar,
-      alt: name
+      alt: name,
+      className: "lb-avatar-image"
     }), /* @__PURE__ */ React__default.createElement(Initials, null));
   }
 );

package/dist/mentions/avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.mjs","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":["Avatar","React","name"],"mappings":";;;AASO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,OAAO,CAAA,KAAA,EAAO,YAAc,EAAA;AACnC,IAAM,MAAA,EAAE,MAAW,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACjC,IAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,sBAAuB,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,uBAAQC,cAAA,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,uBACGA,cAAA,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,uBACGA,cAAA,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,0BAAWA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,MAAA;AAAA,MAAQ,GAAK,EAAA,IAAA;AAAA,KAAM,CAAA,kBAEvCA,cAAA,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.mjs","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":["Avatar","React","name"],"mappings":";;;;AAWO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,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,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,uBACGC,cAAA,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,uBACGA,cAAA,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,uBACGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,UAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,MAC5C,GAAK,EAAA,YAAA;AAAA,KAAA,EAEJ,0BAAWA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,MAAA;AAAA,MAAQ,GAAK,EAAA,IAAA;AAAA,MAAM,SAAU,EAAA,iBAAA;AAAA,KAAkB,CAAA,kBAEnEA,cAAA,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;;;;"}

package/dist/mentions/mention-component.js

@@ -5,8 +5,7 @@ var lexical = require('lexical');
 var React = require('react');
 var index_js = require('use-sync-external-store/shim/index.js');
 
-const IsSelectedContext = React.createContext(null);
-function MentionWrapper({
+function Mention({
   nodeKey,
   children
 }) {
@@ -21,23 +20,12 @@ function MentionWrapper({
       lexical.$setSelection(selection);
     });
   }
-  return /* @__PURE__ */ React.createElement(IsSelectedContext.Provider, {
-    value: isSelected
-  }, /* @__PURE__ */ React.createElement("span", {
-    onClick: handleClick
-  }, children));
-}
-const Mention = React.forwardRef(function(props, forwardedRef) {
-  const isSelected = React.useContext(IsSelectedContext);
-  if (isSelected === null) {
-    throw new Error("Mention component must be wrapped in MentionWrapper");
-  }
   return /* @__PURE__ */ React.createElement("span", {
+    onClick: handleClick,
     "data-selected": isSelected ? "" : void 0,
-    ...props,
-    ref: forwardedRef
-  }, props.children);
-});
+    className: "lb-lexical-mention"
+  }, children);
+}
 function $isNodeSelected(key) {
   const node = lexical.$getNodeByKey(key);
   if (node === null)
@@ -59,5 +47,4 @@ function useIsNodeSelected(key) {
 }
 
 exports.Mention = Mention;
-exports.MentionWrapper = MentionWrapper;
 //# sourceMappingURL=mention-component.js.map

package/dist/mentions/mention-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"mention-component.js","sources":["../../src/mentions/mention-component.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { NodeKey } from \"lexical\";\nimport { $createNodeSelection, $getNodeByKey, $setSelection } from \"lexical\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\n\nconst IsSelectedContext = createContext<boolean | null>(null);\n\nexport function MentionWrapper({\n  nodeKey,\n  children,\n}: {\n  nodeKey: NodeKey;\n  children: ReactNode;\n}) {\n  const [editor] = useLexicalComposerContext();\n  const isSelected = useIsNodeSelected(nodeKey);\n\n  function handleClick(event: React.MouseEvent) {\n    editor.update(() => {\n      event.stopPropagation();\n      event.preventDefault();\n\n      const selection = $createNodeSelection();\n      selection.add(nodeKey);\n      $setSelection(selection);\n    });\n  }\n\n  return (\n    <IsSelectedContext.Provider value={isSelected}>\n      <span onClick={handleClick}>{children}</span>\n    </IsSelectedContext.Provider>\n  );\n}\n\nexport const Mention = forwardRef<\n  HTMLSpanElement,\n  HTMLAttributes<HTMLSpanElement>\n>(function (props, forwardedRef) {\n  const isSelected = useContext(IsSelectedContext);\n  if (isSelected === null) {\n    throw new Error(\"Mention component must be wrapped in MentionWrapper\");\n  }\n\n  return (\n    <span\n      data-selected={isSelected ? \"\" : undefined}\n      {...props}\n      ref={forwardedRef}\n    >\n      {props.children}\n    </span>\n  );\n});\n\nfunction $isNodeSelected(key: NodeKey): boolean {\n  const node = $getNodeByKey(key);\n  if (node === null) return false;\n  return node.isSelected();\n}\n\nfunction useIsNodeSelected(key: NodeKey) {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerUpdateListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getEditorState().read(() => $isNodeSelected(key));\n  }, [editor, key]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["createContext","useLexicalComposerContext","$createNodeSelection","$setSelection","forwardRef","useContext","$getNodeByKey","useCallback","useSyncExternalStore"],"mappings":";;;;;;;AAYA,MAAM,iBAAA,GAAoBA,oBAA8B,IAAI,CAAA,CAAA;AAErD,SAAS,cAAe,CAAA;AAAA,EAC7B,OAAA;AAAA,EACA,QAAA;AACF,CAGG,EAAA;AACD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIC,gDAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,kBAAkB,OAAO,CAAA,CAAA;AAE5C,EAAA,SAAS,YAAY,KAAyB,EAAA;AAC5C,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,MAAA,MAAM,YAAYC,4BAAqB,EAAA,CAAA;AACvC,MAAA,SAAA,CAAU,IAAI,OAAO,CAAA,CAAA;AACrB,MAAAC,qBAAA,CAAc,SAAS,CAAA,CAAA;AAAA,KACxB,CAAA,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,kBAAkB,QAAlB,EAAA;AAAA,IAA2B,KAAO,EAAA,UAAA;AAAA,GAAA,kBAChC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,OAAS,EAAA,WAAA;AAAA,GAAA,EAAc,QAAS,CACxC,CAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,OAAU,GAAAC,gBAAA,CAGrB,SAAU,KAAA,EAAO,YAAc,EAAA;AAC/B,EAAM,MAAA,UAAA,GAAaC,iBAAW,iBAAiB,CAAA,CAAA;AAC/C,EAAA,IAAI,eAAe,IAAM,EAAA;AACvB,IAAM,MAAA,IAAI,MAAM,qDAAqD,CAAA,CAAA;AAAA,GACvE;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,eAAA,EAAe,aAAa,EAAK,GAAA,KAAA,CAAA;AAAA,IAChC,GAAG,KAAA;AAAA,IACJ,GAAK,EAAA,YAAA;AAAA,GAAA,EAEJ,MAAM,QACT,CAAA,CAAA;AAEJ,CAAC,EAAA;AAED,SAAS,gBAAgB,GAAuB,EAAA;AAC9C,EAAM,MAAA,IAAA,GAAOC,sBAAc,GAAG,CAAA,CAAA;AAC9B,EAAA,IAAI,IAAS,KAAA,IAAA;AAAM,IAAO,OAAA,KAAA,CAAA;AAC1B,EAAA,OAAO,KAAK,UAAW,EAAA,CAAA;AACzB,CAAA;AAEA,SAAS,kBAAkB,GAAc,EAAA;AACvC,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIL,gDAA0B,EAAA,CAAA;AAE3C,EAAA,MAAM,SAAY,GAAAM,iBAAA;AAAA,IAChB,CAAC,aAA8B,KAAA;AAC7B,MAAO,OAAA,MAAA,CAAO,uBAAuB,aAAa,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,WAAA,GAAcA,kBAAY,MAAM;AACpC,IAAA,OAAO,OAAO,cAAe,EAAA,CAAE,KAAK,MAAM,eAAA,CAAgB,GAAG,CAAC,CAAA,CAAA;AAAA,GAC7D,EAAA,CAAC,MAAQ,EAAA,GAAG,CAAC,CAAA,CAAA;AAEhB,EAAO,OAAAC,6BAAA,CAAqB,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AACjE;;;;;"}
+{"version":3,"file":"mention-component.js","sources":["../../src/mentions/mention-component.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { NodeKey } from \"lexical\";\nimport { $createNodeSelection, $getNodeByKey, $setSelection } from \"lexical\";\nimport type { ReactNode } from \"react\";\nimport React, { useCallback } from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\n\nexport function Mention({\n  nodeKey,\n  children,\n}: {\n  nodeKey: NodeKey;\n  children: ReactNode;\n}) {\n  const [editor] = useLexicalComposerContext();\n  const isSelected = useIsNodeSelected(nodeKey);\n\n  function handleClick(event: React.MouseEvent) {\n    editor.update(() => {\n      event.stopPropagation();\n      event.preventDefault();\n\n      const selection = $createNodeSelection();\n      selection.add(nodeKey);\n      $setSelection(selection);\n    });\n  }\n\n  return (\n    <span\n      onClick={handleClick}\n      data-selected={isSelected ? \"\" : undefined}\n      className=\"lb-lexical-mention\"\n    >\n      {children}\n    </span>\n  );\n}\n\nfunction $isNodeSelected(key: NodeKey): boolean {\n  const node = $getNodeByKey(key);\n  if (node === null) return false;\n  return node.isSelected();\n}\n\nfunction useIsNodeSelected(key: NodeKey) {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerUpdateListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getEditorState().read(() => $isNodeSelected(key));\n  }, [editor, key]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["useLexicalComposerContext","$createNodeSelection","$setSelection","$getNodeByKey","useCallback","useSyncExternalStore"],"mappings":";;;;;;;AAOO,SAAS,OAAQ,CAAA;AAAA,EACtB,OAAA;AAAA,EACA,QAAA;AACF,CAGG,EAAA;AACD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIA,gDAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,kBAAkB,OAAO,CAAA,CAAA;AAE5C,EAAA,SAAS,YAAY,KAAyB,EAAA;AAC5C,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,MAAA,MAAM,YAAYC,4BAAqB,EAAA,CAAA;AACvC,MAAA,SAAA,CAAU,IAAI,OAAO,CAAA,CAAA;AACrB,MAAAC,qBAAA,CAAc,SAAS,CAAA,CAAA;AAAA,KACxB,CAAA,CAAA;AAAA,GACH;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,OAAS,EAAA,WAAA;AAAA,IACT,eAAA,EAAe,aAAa,EAAK,GAAA,KAAA,CAAA;AAAA,IACjC,SAAU,EAAA,oBAAA;AAAA,GAAA,EAET,QACH,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,gBAAgB,GAAuB,EAAA;AAC9C,EAAM,MAAA,IAAA,GAAOC,sBAAc,GAAG,CAAA,CAAA;AAC9B,EAAA,IAAI,IAAS,KAAA,IAAA;AAAM,IAAO,OAAA,KAAA,CAAA;AAC1B,EAAA,OAAO,KAAK,UAAW,EAAA,CAAA;AACzB,CAAA;AAEA,SAAS,kBAAkB,GAAc,EAAA;AACvC,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIH,gDAA0B,EAAA,CAAA;AAE3C,EAAA,MAAM,SAAY,GAAAI,iBAAA;AAAA,IAChB,CAAC,aAA8B,KAAA;AAC7B,MAAO,OAAA,MAAA,CAAO,uBAAuB,aAAa,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,WAAA,GAAcA,kBAAY,MAAM;AACpC,IAAA,OAAO,OAAO,cAAe,EAAA,CAAE,KAAK,MAAM,eAAA,CAAgB,GAAG,CAAC,CAAA,CAAA;AAAA,GAC7D,EAAA,CAAC,MAAQ,EAAA,GAAG,CAAC,CAAA,CAAA;AAEhB,EAAO,OAAAC,6BAAA,CAAqB,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AACjE;;;;"}

package/dist/mentions/mention-component.mjs

@@ -1,10 +1,9 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $createNodeSelection, $setSelection, $getNodeByKey } from 'lexical';
-import React__default, { createContext, forwardRef, useContext, useCallback } from 'react';
+import React__default, { useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 
-const IsSelectedContext = createContext(null);
-function MentionWrapper({
+function Mention({
   nodeKey,
   children
 }) {
@@ -19,23 +18,12 @@ function MentionWrapper({
       $setSelection(selection);
     });
   }
-  return /* @__PURE__ */ React__default.createElement(IsSelectedContext.Provider, {
-    value: isSelected
-  }, /* @__PURE__ */ React__default.createElement("span", {
-    onClick: handleClick
-  }, children));
-}
-const Mention = forwardRef(function(props, forwardedRef) {
-  const isSelected = useContext(IsSelectedContext);
-  if (isSelected === null) {
-    throw new Error("Mention component must be wrapped in MentionWrapper");
-  }
   return /* @__PURE__ */ React__default.createElement("span", {
+    onClick: handleClick,
     "data-selected": isSelected ? "" : void 0,
-    ...props,
-    ref: forwardedRef
-  }, props.children);
-});
+    className: "lb-lexical-mention"
+  }, children);
+}
 function $isNodeSelected(key) {
   const node = $getNodeByKey(key);
   if (node === null)
@@ -56,5 +44,5 @@ function useIsNodeSelected(key) {
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 
-export { Mention, MentionWrapper };
+export { Mention };
 //# sourceMappingURL=mention-component.mjs.map

package/dist/mentions/mention-component.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mention-component.mjs","sources":["../../src/mentions/mention-component.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { NodeKey } from \"lexical\";\nimport { $createNodeSelection, $getNodeByKey, $setSelection } from \"lexical\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\n\nconst IsSelectedContext = createContext<boolean | null>(null);\n\nexport function MentionWrapper({\n  nodeKey,\n  children,\n}: {\n  nodeKey: NodeKey;\n  children: ReactNode;\n}) {\n  const [editor] = useLexicalComposerContext();\n  const isSelected = useIsNodeSelected(nodeKey);\n\n  function handleClick(event: React.MouseEvent) {\n    editor.update(() => {\n      event.stopPropagation();\n      event.preventDefault();\n\n      const selection = $createNodeSelection();\n      selection.add(nodeKey);\n      $setSelection(selection);\n    });\n  }\n\n  return (\n    <IsSelectedContext.Provider value={isSelected}>\n      <span onClick={handleClick}>{children}</span>\n    </IsSelectedContext.Provider>\n  );\n}\n\nexport const Mention = forwardRef<\n  HTMLSpanElement,\n  HTMLAttributes<HTMLSpanElement>\n>(function (props, forwardedRef) {\n  const isSelected = useContext(IsSelectedContext);\n  if (isSelected === null) {\n    throw new Error(\"Mention component must be wrapped in MentionWrapper\");\n  }\n\n  return (\n    <span\n      data-selected={isSelected ? \"\" : undefined}\n      {...props}\n      ref={forwardedRef}\n    >\n      {props.children}\n    </span>\n  );\n});\n\nfunction $isNodeSelected(key: NodeKey): boolean {\n  const node = $getNodeByKey(key);\n  if (node === null) return false;\n  return node.isSelected();\n}\n\nfunction useIsNodeSelected(key: NodeKey) {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerUpdateListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getEditorState().read(() => $isNodeSelected(key));\n  }, [editor, key]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["React"],"mappings":";;;;;AAYA,MAAM,iBAAA,GAAoB,cAA8B,IAAI,CAAA,CAAA;AAErD,SAAS,cAAe,CAAA;AAAA,EAC7B,OAAA;AAAA,EACA,QAAA;AACF,CAGG,EAAA;AACD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,kBAAkB,OAAO,CAAA,CAAA;AAE5C,EAAA,SAAS,YAAY,KAAyB,EAAA;AAC5C,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,MAAA,MAAM,YAAY,oBAAqB,EAAA,CAAA;AACvC,MAAA,SAAA,CAAU,IAAI,OAAO,CAAA,CAAA;AACrB,MAAA,aAAA,CAAc,SAAS,CAAA,CAAA;AAAA,KACxB,CAAA,CAAA;AAAA,GACH;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,kBAAkB,QAAlB,EAAA;AAAA,IAA2B,KAAO,EAAA,UAAA;AAAA,GAAA,kBAChCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,OAAS,EAAA,WAAA;AAAA,GAAA,EAAc,QAAS,CACxC,CAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,OAAU,GAAA,UAAA,CAGrB,SAAU,KAAA,EAAO,YAAc,EAAA;AAC/B,EAAM,MAAA,UAAA,GAAa,WAAW,iBAAiB,CAAA,CAAA;AAC/C,EAAA,IAAI,eAAe,IAAM,EAAA;AACvB,IAAM,MAAA,IAAI,MAAM,qDAAqD,CAAA,CAAA;AAAA,GACvE;AAEA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,eAAA,EAAe,aAAa,EAAK,GAAA,KAAA,CAAA;AAAA,IAChC,GAAG,KAAA;AAAA,IACJ,GAAK,EAAA,YAAA;AAAA,GAAA,EAEJ,MAAM,QACT,CAAA,CAAA;AAEJ,CAAC,EAAA;AAED,SAAS,gBAAgB,GAAuB,EAAA;AAC9C,EAAM,MAAA,IAAA,GAAO,cAAc,GAAG,CAAA,CAAA;AAC9B,EAAA,IAAI,IAAS,KAAA,IAAA;AAAM,IAAO,OAAA,KAAA,CAAA;AAC1B,EAAA,OAAO,KAAK,UAAW,EAAA,CAAA;AACzB,CAAA;AAEA,SAAS,kBAAkB,GAAc,EAAA;AACvC,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA,CAAA;AAE3C,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,aAA8B,KAAA;AAC7B,MAAO,OAAA,MAAA,CAAO,uBAAuB,aAAa,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,OAAO,OAAO,cAAe,EAAA,CAAE,KAAK,MAAM,eAAA,CAAgB,GAAG,CAAC,CAAA,CAAA;AAAA,GAC7D,EAAA,CAAC,MAAQ,EAAA,GAAG,CAAC,CAAA,CAAA;AAEhB,EAAO,OAAA,oBAAA,CAAqB,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AACjE;;;;"}
+{"version":3,"file":"mention-component.mjs","sources":["../../src/mentions/mention-component.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { NodeKey } from \"lexical\";\nimport { $createNodeSelection, $getNodeByKey, $setSelection } from \"lexical\";\nimport type { ReactNode } from \"react\";\nimport React, { useCallback } from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\n\nexport function Mention({\n  nodeKey,\n  children,\n}: {\n  nodeKey: NodeKey;\n  children: ReactNode;\n}) {\n  const [editor] = useLexicalComposerContext();\n  const isSelected = useIsNodeSelected(nodeKey);\n\n  function handleClick(event: React.MouseEvent) {\n    editor.update(() => {\n      event.stopPropagation();\n      event.preventDefault();\n\n      const selection = $createNodeSelection();\n      selection.add(nodeKey);\n      $setSelection(selection);\n    });\n  }\n\n  return (\n    <span\n      onClick={handleClick}\n      data-selected={isSelected ? \"\" : undefined}\n      className=\"lb-lexical-mention\"\n    >\n      {children}\n    </span>\n  );\n}\n\nfunction $isNodeSelected(key: NodeKey): boolean {\n  const node = $getNodeByKey(key);\n  if (node === null) return false;\n  return node.isSelected();\n}\n\nfunction useIsNodeSelected(key: NodeKey) {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerUpdateListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getEditorState().read(() => $isNodeSelected(key));\n  }, [editor, key]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["React"],"mappings":";;;;;AAOO,SAAS,OAAQ,CAAA;AAAA,EACtB,OAAA;AAAA,EACA,QAAA;AACF,CAGG,EAAA;AACD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,kBAAkB,OAAO,CAAA,CAAA;AAE5C,EAAA,SAAS,YAAY,KAAyB,EAAA;AAC5C,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,MAAA,MAAM,YAAY,oBAAqB,EAAA,CAAA;AACvC,MAAA,SAAA,CAAU,IAAI,OAAO,CAAA,CAAA;AACrB,MAAA,aAAA,CAAc,SAAS,CAAA,CAAA;AAAA,KACxB,CAAA,CAAA;AAAA,GACH;AAEA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,OAAS,EAAA,WAAA;AAAA,IACT,eAAA,EAAe,aAAa,EAAK,GAAA,KAAA,CAAA;AAAA,IACjC,SAAU,EAAA,oBAAA;AAAA,GAAA,EAET,QACH,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,gBAAgB,GAAuB,EAAA;AAC9C,EAAM,MAAA,IAAA,GAAO,cAAc,GAAG,CAAA,CAAA;AAC9B,EAAA,IAAI,IAAS,KAAA,IAAA;AAAM,IAAO,OAAA,KAAA,CAAA;AAC1B,EAAA,OAAO,KAAK,UAAW,EAAA,CAAA;AACzB,CAAA;AAEA,SAAS,kBAAkB,GAAc,EAAA;AACvC,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA,CAAA;AAE3C,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,aAA8B,KAAA;AAC7B,MAAO,OAAA,MAAA,CAAO,uBAAuB,aAAa,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,OAAO,OAAO,cAAe,EAAA,CAAE,KAAK,MAAM,eAAA,CAAgB,GAAG,CAAC,CAAA,CAAA;AAAA,GAC7D,EAAA,CAAC,MAAQ,EAAA,GAAG,CAAC,CAAA,CAAA;AAEhB,EAAO,OAAA,oBAAA,CAAqB,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AACjE;;;;"}

package/dist/mentions/mention-node.js

@@ -4,6 +4,7 @@ var lexical = require('lexical');
 var nanoid = require('nanoid');
 var React = require('react');
 var mentionComponent = require('./mention-component.js');
+var user = require('./user.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -24,89 +25,84 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-function createMentionNodeFactory(Component) {
-  class MentionNode extends lexical.DecoratorNode {
-    constructor(id, userId, key) {
-      super(key);
-      this.__id = id;
-      this.__userId = userId;
-    }
-    static getType() {
-      return "lb-mention";
-    }
-    static clone(node) {
-      return new MentionNode(node.__id, node.__userId);
-    }
-    createDOM() {
-      const element = document.createElement("span");
-      element.style.display = "inline-block";
-      return element;
-    }
-    updateDOM() {
-      return false;
-    }
-    static importDom() {
-      return {
-        span: () => ({
-          conversion: (element) => {
-            const value = atob(
-              element.getAttribute("data-lexical-lb-mention")
-            );
-            const node = $createMentionNode(value);
-            return { node };
-          },
-          priority: 1
-        })
-      };
-    }
-    exportDOM() {
-      const element = document.createElement("span");
-      const value = this.getTextContent();
-      element.setAttribute("data-lexical-lb-mention", btoa(value));
-      element.textContent = this.getTextContent();
-      return { element };
-    }
-    static importJSON(serializedNode) {
-      const node = $createMentionNode(serializedNode.userId);
-      return node;
-    }
-    exportJSON() {
-      return {
-        userId: this.__userId,
-        type: "lb-mention",
-        version: 1
-      };
-    }
-    getUserId() {
-      const self = this.getLatest();
-      return self.__userId;
-    }
-    getId() {
-      const self = this.getLatest();
-      return self.__id;
-    }
-    decorate() {
-      return /* @__PURE__ */ React__namespace.createElement(mentionComponent.MentionWrapper, {
-        nodeKey: this.getKey()
-      }, /* @__PURE__ */ React__namespace.createElement(Component, {
-        userId: this.__userId
-      }));
-    }
+const MENTION_CHARACTER = "@";
+class MentionNode extends lexical.DecoratorNode {
+  constructor(id, userId, key) {
+    super(key);
+    this.__id = id;
+    this.__userId = userId;
   }
-  function $isMentionNode(node) {
-    return node instanceof MentionNode;
+  static getType() {
+    return "lb-mention";
   }
-  function $createMentionNode(userId) {
-    const id = `in_${nanoid.nanoid()}`;
-    const node = new MentionNode(id, userId);
-    return lexical.$applyNodeReplacement(node);
+  static clone(node) {
+    return new MentionNode(node.__id, node.__userId);
   }
-  return {
-    MentionNode,
-    $isMentionNode,
-    $createMentionNode
-  };
+  createDOM() {
+    const element = document.createElement("span");
+    element.style.display = "inline-block";
+    element.style.userSelect = "none";
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  static importDom() {
+    return {
+      span: () => ({
+        conversion: (element) => {
+          const value = atob(element.getAttribute("data-lexical-lb-mention"));
+          const node = $createMentionNode(value);
+          return { node };
+        },
+        priority: 1
+      })
+    };
+  }
+  exportDOM() {
+    const element = document.createElement("span");
+    const value = this.getTextContent();
+    element.setAttribute("data-lexical-lb-mention", btoa(value));
+    element.textContent = this.getTextContent();
+    return { element };
+  }
+  static importJSON(serializedNode) {
+    const node = $createMentionNode(serializedNode.userId);
+    return node;
+  }
+  exportJSON() {
+    return {
+      userId: this.__userId,
+      type: "lb-mention",
+      version: 1
+    };
+  }
+  getUserId() {
+    const self = this.getLatest();
+    return self.__userId;
+  }
+  getId() {
+    const self = this.getLatest();
+    return self.__id;
+  }
+  decorate() {
+    return /* @__PURE__ */ React__namespace.createElement(mentionComponent.Mention, {
+      nodeKey: this.getKey()
+    }, MENTION_CHARACTER, /* @__PURE__ */ React__namespace.createElement(user.User, {
+      userId: this.getUserId()
+    }));
+  }
+}
+function $isMentionNode(node) {
+  return node instanceof MentionNode;
+}
+function $createMentionNode(userId) {
+  const id = `in_${nanoid.nanoid()}`;
+  const node = new MentionNode(id, userId);
+  return lexical.$applyNodeReplacement(node);
 }
 
-exports.createMentionNodeFactory = createMentionNodeFactory;
+exports.$createMentionNode = $createMentionNode;
+exports.$isMentionNode = $isMentionNode;
+exports.MentionNode = MentionNode;
 //# sourceMappingURL=mention-node.js.map