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

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":";;;;;;;;;;;AAmEA,MAAM,8BAAA,GACJ,cAAsD,IAAI,CAAA,CAAA;AAErD,MAAM,2BAA2B,CAAC;AAAA,EAIvC,QAAA;AACF,CAAkD,KAAA;AAChD,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,4BAAA,GACJ,MAAO,CAAA,SAAA,CAAA,CAAW,yBAA8B,KAAA,KAAA,CAAA,CAAA;AAClD,EAAA,MAAM,EAAE,OAAA,EAAS,OAAQ,EAAA,GAAI,oBAAqB,EAAA,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,QAE9B,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,kBAAmB,CAAA,IAAA,EAAM,GAAG,CAAA,CAAA;AAClD,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,6FAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAIA,IAAK,IAAA,CAAA,SAAA,CAAA,CAAW,gBAAiB,CAAA,SAAA,EAAW,MAAM,CAAA,CAAA;AAAA,GAIpD,EAAG,EAAE,CAAA,CAAA;AAGL,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;AAsB1B,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,EAAM,MAAA,SAAA,GAAY,OAA+C,IAAI,CAAA,CAAA;AACrE,EAAI,IAAA,SAAA,CAAU,YAAY,IAAM,EAAA;AAC9B,IAAA,SAAA,CAAU,UAAU,0BAA2B,EAAA,CAAA;AAAA,GACjD;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,+BAA+B,QAA/B,EAAA;AAAA,IAAwC,OAAO,SAAU,CAAA,OAAA;AAAA,GAAA,EACvD,4BACEA,cAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAA,IACC,eAAA;AAAA,IAEA,EAAI,EAAA,qBAAA;AAAA,IACJ,QAAA;AAAA,IACA,WAAa,EAAA,WAAA;AAAA,IACb,eAAiB,EAAA,IAAA;AAAA,GACnB,CAAA,EAGD,4BAAgC,oBAAAA,cAAA,CAAA,aAAA,CAAC,aAAc,EAAA,IAAA,CAAA,EAE/C,SAAU,CAAA,OAAA,CAAQ,QACjB,oBAAAA,cAAA,CAAA,aAAA,CAAC,qBAAuB,EAAA,IAAA,EAAA,QAAS,CAErC,CAAA,CAAA;AAEJ,EAAA;AAEO,SAAS,iCAAqE,GAAA;AACnF,EAAM,MAAA,MAAA,GAAS,WAAW,8BAA8B,CAAA,CAAA;AACxD,EAAA,IAAI,WAAW,IAAM,EAAA;AACnB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,0FAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
+{"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));
   }
 );
@@ -45,5 +49,5 @@ function getInitials(name) {
   }, "");
 }
 
-module.exports = Avatar;
+exports.Avatar = Avatar;
 //# sourceMappingURL=avatar.js.map

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\nconst 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\nexport default Avatar;\n"],"names":["forwardRef","Avatar","useSharedContextBundle","name"],"mappings":";;;;;AASA,MAAM,MAAS,GAAAA,gBAAA;AAAA,EACb,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));
   }
 );
@@ -43,5 +47,5 @@ function getInitials(name) {
   }, "");
 }
 
-export { Avatar as default };
+export { Avatar };
 //# sourceMappingURL=avatar.mjs.map

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\nconst 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\nexport default Avatar;\n"],"names":["Avatar","React","name"],"mappings":";;;AASA,MAAM,MAAS,GAAA,UAAA;AAAA,EACb,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

@@ -1,8 +1,10 @@
 'use strict';
 
 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);
@@ -23,83 +25,84 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-function createMentionNodeFactory(Component) {
-  class MentionNode extends lexical.DecoratorNode {
-    constructor(value, key) {
-      super(key);
-      this.__id = value;
-    }
-    static getType() {
-      return "lb-mention";
-    }
-    static clone(node) {
-      return new MentionNode(node.__id);
-    }
-    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.value);
-      return node;
-    }
-    exportJSON() {
-      return {
-        value: this.getTextContent(),
-        type: "lb-mention",
-        version: 1
-      };
-    }
-    getTextContent() {
-      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.__id
-      }));
-    }
+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(id) {
-    const node = new MentionNode(id);
-    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

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

@@ -1 +1 @@
-{"version":3,"file":"mention-node.js","sources":["../../src/mentions/mention-node.tsx"],"sourcesContent":["import type {\n  DOMConversionMap,\n  DOMExportOutput,\n  LexicalNode,\n  NodeKey,\n  SerializedLexicalNode,\n  Spread,\n} from \"lexical\";\nimport { $applyNodeReplacement, DecoratorNode } from \"lexical\";\nimport type { ComponentType, JSX } from \"react\";\nimport * as React from \"react\";\n\nimport type { MentionProps } from \"../liveblocks-config\";\nimport { MentionWrapper } from \"./mention-component\";\n\nexport type SerializedMentionNode = Spread<\n  {\n    value: string;\n  },\n  SerializedLexicalNode\n>;\n\nexport function createMentionNodeFactory(\n  Component: ComponentType<MentionProps>\n): any {\n  class MentionNode extends DecoratorNode<JSX.Element> {\n    __id: string;\n\n    constructor(value: string, key?: NodeKey) {\n      super(key);\n      this.__id = value;\n    }\n\n    static getType(): string {\n      return \"lb-mention\";\n    }\n\n    static clone(node: MentionNode): MentionNode {\n      return new MentionNode(node.__id);\n    }\n\n    createDOM(): HTMLElement {\n      const element = document.createElement(\"span\");\n      element.style.display = \"inline-block\";\n      return element;\n    }\n\n    updateDOM(): boolean {\n      return false;\n    }\n\n    static importDom(): DOMConversionMap<HTMLElement> | null {\n      return {\n        span: () => ({\n          conversion: (element) => {\n            const value = atob(\n              element.getAttribute(\"data-lexical-lb-mention\")!\n            );\n            const node = $createMentionNode(value);\n            return { node };\n          },\n          priority: 1,\n        }),\n      };\n    }\n\n    exportDOM(): DOMExportOutput {\n      const element = document.createElement(\"span\");\n      const value = this.getTextContent();\n      element.setAttribute(\"data-lexical-lb-mention\", btoa(value));\n      element.textContent = this.getTextContent();\n      return { element };\n    }\n\n    static importJSON(serializedNode: SerializedMentionNode): MentionNode {\n      const node = $createMentionNode(serializedNode.value);\n      return node;\n    }\n\n    exportJSON(): SerializedMentionNode {\n      return {\n        value: this.getTextContent(),\n        type: \"lb-mention\",\n        version: 1,\n      };\n    }\n\n    getTextContent(): string {\n      const self = this.getLatest();\n      return self.__id;\n    }\n\n    decorate(): JSX.Element {\n      return (\n        <MentionWrapper nodeKey={this.getKey()}>\n          <Component userId={this.__id} />\n        </MentionWrapper>\n      );\n    }\n  }\n\n  function $isMentionNode(\n    node: LexicalNode | null | undefined\n  ): node is MentionNode {\n    return node instanceof MentionNode;\n  }\n\n  function $createMentionNode(id: string): MentionNode {\n    const node = new MentionNode(id);\n    return $applyNodeReplacement(node);\n  }\n\n  return {\n    MentionNode,\n    $isMentionNode,\n    $createMentionNode,\n  };\n}\n"],"names":["DecoratorNode","React","MentionWrapper","$applyNodeReplacement"],"mappings":"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"}
+{"version":3,"file":"mention-node.js","sources":["../../src/mentions/mention-node.tsx"],"sourcesContent":["import type {\n  DOMConversionMap,\n  DOMExportOutput,\n  LexicalNode,\n  NodeKey,\n  SerializedLexicalNode,\n  Spread,\n} from \"lexical\";\nimport { $applyNodeReplacement, DecoratorNode } from \"lexical\";\nimport { nanoid } from \"nanoid\";\nimport type { JSX } from \"react\";\nimport * as React from \"react\";\n\nimport { Mention } from \"./mention-component\";\nimport { User } from \"./user\";\n\nconst MENTION_CHARACTER = \"@\";\n\nexport type SerializedMentionNode = Spread<\n  {\n    userId: string;\n  },\n  SerializedLexicalNode\n>;\nexport class MentionNode extends DecoratorNode<JSX.Element> {\n  __id: string;\n  __userId: string;\n\n  constructor(id: string, userId: string, key?: NodeKey) {\n    super(key);\n    this.__id = id;\n    this.__userId = userId;\n  }\n\n  static getType(): string {\n    return \"lb-mention\";\n  }\n\n  static clone(node: MentionNode): MentionNode {\n    return new MentionNode(node.__id, node.__userId);\n  }\n\n  createDOM(): HTMLElement {\n    const element = document.createElement(\"span\");\n    element.style.display = \"inline-block\";\n    element.style.userSelect = \"none\";\n    return element;\n  }\n\n  updateDOM(): boolean {\n    return false;\n  }\n\n  static importDom(): DOMConversionMap<HTMLElement> | null {\n    return {\n      span: () => ({\n        conversion: (element) => {\n          const value = atob(element.getAttribute(\"data-lexical-lb-mention\")!);\n          const node = $createMentionNode(value);\n          return { node };\n        },\n        priority: 1,\n      }),\n    };\n  }\n\n  exportDOM(): DOMExportOutput {\n    const element = document.createElement(\"span\");\n    const value = this.getTextContent();\n    element.setAttribute(\"data-lexical-lb-mention\", btoa(value));\n    element.textContent = this.getTextContent();\n    return { element };\n  }\n\n  static importJSON(serializedNode: SerializedMentionNode): MentionNode {\n    const node = $createMentionNode(serializedNode.userId);\n    return node;\n  }\n\n  exportJSON(): SerializedMentionNode {\n    return {\n      userId: this.__userId,\n      type: \"lb-mention\",\n      version: 1,\n    };\n  }\n\n  getUserId(): string {\n    const self = this.getLatest();\n    return self.__userId;\n  }\n\n  getId(): string {\n    const self = this.getLatest();\n    return self.__id;\n  }\n\n  decorate(): JSX.Element {\n    return (\n      <Mention nodeKey={this.getKey()}>\n        {MENTION_CHARACTER}\n        <User userId={this.getUserId()} />\n      </Mention>\n    );\n  }\n}\n\nexport function $isMentionNode(\n  node: LexicalNode | null | undefined\n): node is MentionNode {\n  return node instanceof MentionNode;\n}\n\nexport function $createMentionNode(userId: string): MentionNode {\n  const id = `in_${nanoid()}`;\n  const node = new MentionNode(id, userId);\n  return $applyNodeReplacement(node);\n}\n"],"names":["DecoratorNode","React","Mention","User","nanoid","$applyNodeReplacement"],"mappings":"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"}