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

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

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 { nanoid } from \"nanoid\";\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    userId: 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    __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      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.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        <MentionWrapper nodeKey={this.getKey()}>\n          <Component userId={this.__userId} />\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(userId: string): MentionNode {\n    const id = `in_${nanoid()}`;\n    const node = new MentionNode(id, userId);\n    return $applyNodeReplacement(node);\n  }\n\n  return {\n    MentionNode,\n    $isMentionNode,\n    $createMentionNode,\n  };\n}\n"],"names":["DecoratorNode","React","MentionWrapper","nanoid","$applyNodeReplacement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAAS,yBACd,SACK,EAAA;AACL,EAAA,MAAM,oBAAoBA,qBAA2B,CAAA;AAAA,IAInD,WAAA,CAAY,EAAY,EAAA,MAAA,EAAgB,GAAe,EAAA;AACrD,MAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AACT,MAAA,IAAA,CAAK,IAAO,GAAA,EAAA,CAAA;AACZ,MAAA,IAAA,CAAK,QAAW,GAAA,MAAA,CAAA;AAAA,KAClB;AAAA,IAEA,OAAO,OAAkB,GAAA;AACvB,MAAO,OAAA,YAAA,CAAA;AAAA,KACT;AAAA,IAEA,OAAO,MAAM,IAAgC,EAAA;AAC3C,MAAA,OAAO,IAAI,WAAA,CAAY,IAAK,CAAA,IAAA,EAAM,KAAK,QAAQ,CAAA,CAAA;AAAA,KACjD;AAAA,IAEA,SAAyB,GAAA;AACvB,MAAM,MAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC7C,MAAA,OAAA,CAAQ,MAAM,OAAU,GAAA,cAAA,CAAA;AACxB,MAAO,OAAA,OAAA,CAAA;AAAA,KACT;AAAA,IAEA,SAAqB,GAAA;AACnB,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,IAEA,OAAO,SAAkD,GAAA;AACvD,MAAO,OAAA;AAAA,QACL,MAAM,OAAO;AAAA,UACX,UAAA,EAAY,CAAC,OAAY,KAAA;AACvB,YAAA,MAAM,KAAQ,GAAA,IAAA;AAAA,cACZ,OAAA,CAAQ,aAAa,yBAAyB,CAAA;AAAA,aAChD,CAAA;AACA,YAAM,MAAA,IAAA,GAAO,mBAAmB,KAAK,CAAA,CAAA;AACrC,YAAA,OAAO,EAAE,IAAK,EAAA,CAAA;AAAA,WAChB;AAAA,UACA,QAAU,EAAA,CAAA;AAAA,SACZ,CAAA;AAAA,OACF,CAAA;AAAA,KACF;AAAA,IAEA,SAA6B,GAAA;AAC3B,MAAM,MAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC7C,MAAM,MAAA,KAAA,GAAQ,KAAK,cAAe,EAAA,CAAA;AAClC,MAAA,OAAA,CAAQ,YAAa,CAAA,yBAAA,EAA2B,IAAK,CAAA,KAAK,CAAC,CAAA,CAAA;AAC3D,MAAQ,OAAA,CAAA,WAAA,GAAc,KAAK,cAAe,EAAA,CAAA;AAC1C,MAAA,OAAO,EAAE,OAAQ,EAAA,CAAA;AAAA,KACnB;AAAA,IAEA,OAAO,WAAW,cAAoD,EAAA;AACpE,MAAM,MAAA,IAAA,GAAO,kBAAmB,CAAA,cAAA,CAAe,MAAM,CAAA,CAAA;AACrD,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,IAEA,UAAoC,GAAA;AAClC,MAAO,OAAA;AAAA,QACL,QAAQ,IAAK,CAAA,QAAA;AAAA,QACb,IAAM,EAAA,YAAA;AAAA,QACN,OAAS,EAAA,CAAA;AAAA,OACX,CAAA;AAAA,KACF;AAAA,IAEA,SAAoB,GAAA;AAClB,MAAM,MAAA,IAAA,GAAO,KAAK,SAAU,EAAA,CAAA;AAC5B,MAAA,OAAO,IAAK,CAAA,QAAA,CAAA;AAAA,KACd;AAAA,IAEA,KAAgB,GAAA;AACd,MAAM,MAAA,IAAA,GAAO,KAAK,SAAU,EAAA,CAAA;AAC5B,MAAA,OAAO,IAAK,CAAA,IAAA,CAAA;AAAA,KACd;AAAA,IAEA,QAAwB,GAAA;AACtB,MAAA,uBACGC,gBAAA,CAAA,aAAA,CAAAC,+BAAA,EAAA;AAAA,QAAe,OAAA,EAAS,KAAK,MAAO,EAAA;AAAA,OAAA,kBAClCD,gBAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,QAAU,QAAQ,IAAK,CAAA,QAAA;AAAA,OAAU,CACpC,CAAA,CAAA;AAAA,KAEJ;AAAA,GACF;AAEA,EAAA,SAAS,eACP,IACqB,EAAA;AACrB,IAAA,OAAO,IAAgB,YAAA,WAAA,CAAA;AAAA,GACzB;AAEA,EAAA,SAAS,mBAAmB,MAA6B,EAAA;AACvD,IAAM,MAAA,EAAA,GAAK,MAAME,aAAO,EAAA,CAAA,CAAA,CAAA;AACxB,IAAA,MAAM,IAAO,GAAA,IAAI,WAAY,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AACvC,IAAA,OAAOC,8BAAsB,IAAI,CAAA,CAAA;AAAA,GACnC;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,cAAA;AAAA,IACA,kBAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"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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"}

package/dist/mentions/mention-node.mjs

@@ -1,91 +1,85 @@
 import { DecoratorNode, $applyNodeReplacement } from 'lexical';
 import { nanoid } from 'nanoid';
 import * as React from 'react';
-import { MentionWrapper } from './mention-component.mjs';
+import { Mention } from './mention-component.mjs';
+import { User } from './user.mjs';
 
-function createMentionNodeFactory(Component) {
-  class MentionNode extends 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.createElement(MentionWrapper, {
-        nodeKey: this.getKey()
-      }, /* @__PURE__ */ React.createElement(Component, {
-        userId: this.__userId
-      }));
-    }
+const MENTION_CHARACTER = "@";
+class MentionNode extends 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()}`;
-    const node = new MentionNode(id, userId);
-    return $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.createElement(Mention, {
+      nodeKey: this.getKey()
+    }, MENTION_CHARACTER, /* @__PURE__ */ React.createElement(User, {
+      userId: this.getUserId()
+    }));
+  }
+}
+function $isMentionNode(node) {
+  return node instanceof MentionNode;
+}
+function $createMentionNode(userId) {
+  const id = `in_${nanoid()}`;
+  const node = new MentionNode(id, userId);
+  return $applyNodeReplacement(node);
 }
 
-export { createMentionNodeFactory };
+export { $createMentionNode, $isMentionNode, MentionNode };
 //# sourceMappingURL=mention-node.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"mention-node.mjs","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 { 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    userId: 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    __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      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.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        <MentionWrapper nodeKey={this.getKey()}>\n          <Component userId={this.__userId} />\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(userId: string): MentionNode {\n    const id = `in_${nanoid()}`;\n    const node = new MentionNode(id, userId);\n    return $applyNodeReplacement(node);\n  }\n\n  return {\n    MentionNode,\n    $isMentionNode,\n    $createMentionNode,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mention-node.mjs","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":[],"mappings":";;;;;;AAgBA,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAQnB,MAAM,oBAAoB,aAA2B,CAAA;AAAA,EAI1D,WAAA,CAAY,EAAY,EAAA,MAAA,EAAgB,GAAe,EAAA;AACrD,IAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AACT,IAAA,IAAA,CAAK,IAAO,GAAA,EAAA,CAAA;AACZ,IAAA,IAAA,CAAK,QAAW,GAAA,MAAA,CAAA;AAAA,GAClB;AAAA,EAEA,OAAO,OAAkB,GAAA;AACvB,IAAO,OAAA,YAAA,CAAA;AAAA,GACT;AAAA,EAEA,OAAO,MAAM,IAAgC,EAAA;AAC3C,IAAA,OAAO,IAAI,WAAA,CAAY,IAAK,CAAA,IAAA,EAAM,KAAK,QAAQ,CAAA,CAAA;AAAA,GACjD;AAAA,EAEA,SAAyB,GAAA;AACvB,IAAM,MAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC7C,IAAA,OAAA,CAAQ,MAAM,OAAU,GAAA,cAAA,CAAA;AACxB,IAAA,OAAA,CAAQ,MAAM,UAAa,GAAA,MAAA,CAAA;AAC3B,IAAO,OAAA,OAAA,CAAA;AAAA,GACT;AAAA,EAEA,SAAqB,GAAA;AACnB,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAAA,EAEA,OAAO,SAAkD,GAAA;AACvD,IAAO,OAAA;AAAA,MACL,MAAM,OAAO;AAAA,QACX,UAAA,EAAY,CAAC,OAAY,KAAA;AACvB,UAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,OAAQ,CAAA,YAAA,CAAa,yBAAyB,CAAE,CAAA,CAAA;AACnE,UAAM,MAAA,IAAA,GAAO,mBAAmB,KAAK,CAAA,CAAA;AACrC,UAAA,OAAO,EAAE,IAAK,EAAA,CAAA;AAAA,SAChB;AAAA,QACA,QAAU,EAAA,CAAA;AAAA,OACZ,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AAAA,EAEA,SAA6B,GAAA;AAC3B,IAAM,MAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC7C,IAAM,MAAA,KAAA,GAAQ,KAAK,cAAe,EAAA,CAAA;AAClC,IAAA,OAAA,CAAQ,YAAa,CAAA,yBAAA,EAA2B,IAAK,CAAA,KAAK,CAAC,CAAA,CAAA;AAC3D,IAAQ,OAAA,CAAA,WAAA,GAAc,KAAK,cAAe,EAAA,CAAA;AAC1C,IAAA,OAAO,EAAE,OAAQ,EAAA,CAAA;AAAA,GACnB;AAAA,EAEA,OAAO,WAAW,cAAoD,EAAA;AACpE,IAAM,MAAA,IAAA,GAAO,kBAAmB,CAAA,cAAA,CAAe,MAAM,CAAA,CAAA;AACrD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAAA,EAEA,UAAoC,GAAA;AAClC,IAAO,OAAA;AAAA,MACL,QAAQ,IAAK,CAAA,QAAA;AAAA,MACb,IAAM,EAAA,YAAA;AAAA,MACN,OAAS,EAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF;AAAA,EAEA,SAAoB,GAAA;AAClB,IAAM,MAAA,IAAA,GAAO,KAAK,SAAU,EAAA,CAAA;AAC5B,IAAA,OAAO,IAAK,CAAA,QAAA,CAAA;AAAA,GACd;AAAA,EAEA,KAAgB,GAAA;AACd,IAAM,MAAA,IAAA,GAAO,KAAK,SAAU,EAAA,CAAA;AAC5B,IAAA,OAAO,IAAK,CAAA,IAAA,CAAA;AAAA,GACd;AAAA,EAEA,QAAwB,GAAA;AACtB,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,MAAQ,OAAA,EAAS,KAAK,MAAO,EAAA;AAAA,KAAA,EAC3B,mCACA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MAAK,MAAA,EAAQ,KAAK,SAAU,EAAA;AAAA,KAAG,CAClC,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA;AAEO,SAAS,eACd,IACqB,EAAA;AACrB,EAAA,OAAO,IAAgB,YAAA,WAAA,CAAA;AACzB,CAAA;AAEO,SAAS,mBAAmB,MAA6B,EAAA;AAC9D,EAAM,MAAA,EAAA,GAAK,MAAM,MAAO,EAAA,CAAA,CAAA,CAAA;AACxB,EAAA,MAAM,IAAO,GAAA,IAAI,WAAY,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AACvC,EAAA,OAAO,sBAAsB,IAAI,CAAA,CAAA;AACnC;;;;"}