@liveblocks/react-lexical 2.2.2-test2 → 2.2.3-alpha1

package/dist/liveblocks-plugin-provider.js

@@ -157,4 +157,5 @@ function useRootElement() {
 
 exports.LiveblocksPlugin = LiveblocksPlugin;
 exports.useEditorStatus = useEditorStatus;
+exports.useRootElement = useRootElement;
 //# sourceMappingURL=liveblocks-plugin-provider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"liveblocks-plugin-provider.js","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { autoUpdate, useFloating } from \"@floating-ui/react-dom\";\nimport { CollaborationContext } from \"@lexical/react/LexicalCollaborationContext\";\nimport { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport { kInternal, nn } from \"@liveblocks/core\";\nimport { useClient, useRoom, useSelf } from \"@liveblocks/react\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport type { MutableRefObject } from \"react\";\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\nimport { MentionPlugin } from \"./mentions/mention-plugin\";\n\n// TODO: Replace by ref once I understand why useRef is not stable (?!)\nconst providersMap = new Map<\n  string,\n  LiveblocksYjsProvider<never, never, never, never, never>\n>();\n\nexport type EditorStatus =\n  /* The editor state is not loaded and has not been requested. */\n  | \"not-loaded\"\n  /* The editor state is loading from Liveblocks servers */\n  | \"loading\"\n  /**\n   * Not working yet! Will be available in a future release.\n   * Some editor state modifications has not been acknowledged yet by the server\n   */\n  | \"synchronizing\"\n  /* The editor state is sync with Liveblocks servers */\n  | \"synchronized\";\n\nfunction getEditorStatus(\n  provider?: LiveblocksYjsProvider<never, never, never, never, never>\n): EditorStatus {\n  if (provider === undefined) {\n    return \"not-loaded\";\n  }\n\n  return provider.synced ? \"synchronized\" : \"loading\";\n}\n\n/**\n * Get the storage status.\n *\n * - `not-loaded`: Initial state when entering the room.\n * - `loading`: Once the editor state has been requested by LiveblocksPlugin.\n * - `synchronizing`: Not working yet! Will be available in a future release.\n * - `synchronized`:  The editor state is sync with Liveblocks servers.\n */\nexport function useEditorStatus(): EditorStatus {\n  const room = useRoom();\n  const provider = providersMap.get(room.id);\n\n  const [status, setStatus] = useState(getEditorStatus(provider));\n\n  useEffect(() => {\n    const provider = providersMap.get(room.id);\n\n    setStatus(getEditorStatus(provider));\n\n    if (provider === undefined) {\n      return;\n    }\n\n    const cb = () => setStatus(getEditorStatus(provider));\n\n    provider.on(\"sync\", cb);\n\n    return () => provider.off(\"sync\", cb);\n  }, [room]);\n\n  return status;\n}\n\nexport type LiveblocksPluginProps = {\n  children?: React.ReactNode;\n};\n\n/**\n * Liveblocks plugin for Lexical that adds collaboration to your editor.\n *\n * `LiveblocksPlugin` should always be nested inside `LexicalComposer`.\n *\n * @example\n *\n * import { LexicalComposer } from \"@lexical/react/LexicalComposer\";\n * import { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\n * import { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\n * import { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\n * import { liveblocksConfig, LiveblocksPlugin } from \"@liveblocks/react-lexical\";\n *\n * const initialConfig = liveblocksConfig({\n *   namespace: \"MyEditor\",\n *   theme: {},\n *   nodes: [],\n *   onError: (err) => console.error(err),\n * });\n *\n * function Editor() {\n *   return (\n *     <LexicalComposer initialConfig={initialConfig}>\n *       <LiveblocksPlugin />\n *       <RichTextPlugin\n *         contentEditable={<ContentEditable />}\n *         placeholder={<div>Enter some text...</div>}\n *         ErrorBoundary={LexicalErrorBoundary}\n *       />\n *     </LexicalComposer>\n *   );\n * }\n */\nexport const LiveblocksPlugin = ({\n  children,\n}: LiveblocksPluginProps): JSX.Element => {\n  const client = useClient();\n  const hasResolveMentionSuggestions =\n    client[kInternal].resolveMentionSuggestions !== undefined;\n  const [editor] = useLexicalComposerContext();\n  const room = useRoom();\n  const collabContext = useContext(CollaborationContext);\n  const previousRoomIdRef = useRef<string | null>(null);\n\n  if (!editor.hasNodes([ThreadMarkNode, MentionNode])) {\n    throw new Error(\n      \"LiveblocksPlugin requires Lexical configuration to be wrapped in the `liveblocksConfig(options)` function. For more information: https://liveblocks.io/docs/api-reference/liveblocks-react-lexical#liveblocksConfig\"\n    );\n  }\n\n  const [containerRef, setContainerRef] = useState<\n    MutableRefObject<HTMLDivElement | null> | undefined\n  >(undefined);\n\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  // Warn users if initialConfig.editorState, set on the composer, is not null\n  useEffect(() => {\n    // only in dev mode\n    if (process.env.NODE_ENV !== \"production\") {\n      // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n      if (!editor.getEditorState().isEmpty()) {\n        console.warn(\n          \"Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null.\"\n        );\n      }\n    }\n\n    // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    // Report that this is lexical and root is the rootKey\n    room[kInternal].reportTextEditor(\"lexical\", \"root\");\n  }, [room]);\n\n  // Get user info or allow override from props\n  const info = useSelf((me) => me.info);\n  const username = info?.name || \"\"; // use empty string to prevent random name\n  const cursorcolor = info?.color as string | undefined;\n\n  const providerFactory = useCallback(\n    (id: string, yjsDocMap: Map<string, Doc>): Provider => {\n      // Destroy previously used provider to avoid memory leaks\n      // TODO: Find a way to destroy the last used provider on unmount (while working with StrictMode)\n      if (\n        previousRoomIdRef.current !== null &&\n        previousRoomIdRef.current !== id\n      ) {\n        const previousProvider = providersMap.get(id);\n        if (previousProvider !== undefined) {\n          previousProvider.destroy();\n        }\n      }\n\n      let doc = yjsDocMap.get(id);\n\n      if (doc === undefined) {\n        doc = new Doc();\n        const provider = new LiveblocksYjsProvider(room, doc);\n        yjsDocMap.set(id, doc);\n        providersMap.set(id, provider);\n      }\n\n      return nn(\n        providersMap.get(id),\n        \"Internal error. Should never happen\"\n      ) as Provider;\n    },\n    [room]\n  );\n\n  useEffect(() => {\n    collabContext.name = username || \"\";\n  }, [collabContext, username]);\n\n  const root = useRootElement();\n\n  useLayoutEffect(() => {\n    if (root === null) return;\n    setReference({\n      getBoundingClientRect: () => root.getBoundingClientRect(),\n    });\n  }, [setReference, root]);\n\n  const handleFloatingRef = useCallback(\n    (node: HTMLDivElement) => {\n      setFloating(node);\n      setContainerRef({ current: node });\n    },\n    [setFloating, setContainerRef]\n  );\n\n  return (\n    <>\n      <div\n        ref={handleFloatingRef}\n        style={{\n          position: strategy,\n          top: 0,\n          left: 0,\n          transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n          minWidth: \"max-content\",\n        }}\n      />\n\n      <CollaborationPlugin\n        // Setting the key allows us to reset the internal Y.doc used by useYjsCollaboration\n        // without implementing `reload` event\n        key={room.id}\n        id={room.id}\n        providerFactory={providerFactory}\n        username={username}\n        cursorColor={cursorcolor}\n        cursorsContainerRef={containerRef}\n        shouldBootstrap={true}\n      />\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      <CommentPluginProvider>{children}</CommentPluginProvider>\n    </>\n  );\n};\n\nfunction useRootElement(): HTMLElement | null {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerRootListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getRootElement();\n  }, [editor]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["useRoom","useState","useEffect","provider","useClient","kInternal","useLexicalComposerContext","useContext","CollaborationContext","useRef","ThreadMarkNode","MentionNode","useFloating","autoUpdate","useSelf","useCallback","Doc","LiveblocksYjsProvider","nn","useLayoutEffect","CollaborationPlugin","MentionPlugin","CommentPluginProvider","useSyncExternalStore"],"mappings":"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"}
+{"version":3,"file":"liveblocks-plugin-provider.js","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { autoUpdate, useFloating } from \"@floating-ui/react-dom\";\nimport { CollaborationContext } from \"@lexical/react/LexicalCollaborationContext\";\nimport { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport { kInternal, nn } from \"@liveblocks/core\";\nimport { useClient, useRoom, useSelf } from \"@liveblocks/react\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport type { MutableRefObject } from \"react\";\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\nimport { MentionPlugin } from \"./mentions/mention-plugin\";\n\n// TODO: Replace by ref once I understand why useRef is not stable (?!)\nconst providersMap = new Map<\n  string,\n  LiveblocksYjsProvider<never, never, never, never, never>\n>();\n\nexport type EditorStatus =\n  /* The editor state is not loaded and has not been requested. */\n  | \"not-loaded\"\n  /* The editor state is loading from Liveblocks servers */\n  | \"loading\"\n  /**\n   * Not working yet! Will be available in a future release.\n   * Some editor state modifications has not been acknowledged yet by the server\n   */\n  | \"synchronizing\"\n  /* The editor state is sync with Liveblocks servers */\n  | \"synchronized\";\n\nfunction getEditorStatus(\n  provider?: LiveblocksYjsProvider<never, never, never, never, never>\n): EditorStatus {\n  if (provider === undefined) {\n    return \"not-loaded\";\n  }\n\n  return provider.synced ? \"synchronized\" : \"loading\";\n}\n\n/**\n * Get the storage status.\n *\n * - `not-loaded`: Initial state when entering the room.\n * - `loading`: Once the editor state has been requested by LiveblocksPlugin.\n * - `synchronizing`: Not working yet! Will be available in a future release.\n * - `synchronized`:  The editor state is sync with Liveblocks servers.\n */\nexport function useEditorStatus(): EditorStatus {\n  const room = useRoom();\n  const provider = providersMap.get(room.id);\n\n  const [status, setStatus] = useState(getEditorStatus(provider));\n\n  useEffect(() => {\n    const provider = providersMap.get(room.id);\n\n    setStatus(getEditorStatus(provider));\n\n    if (provider === undefined) {\n      return;\n    }\n\n    const cb = () => setStatus(getEditorStatus(provider));\n\n    provider.on(\"sync\", cb);\n\n    return () => provider.off(\"sync\", cb);\n  }, [room]);\n\n  return status;\n}\n\nexport type LiveblocksPluginProps = {\n  children?: React.ReactNode;\n};\n\n/**\n * Liveblocks plugin for Lexical that adds collaboration to your editor.\n *\n * `LiveblocksPlugin` should always be nested inside `LexicalComposer`.\n *\n * @example\n *\n * import { LexicalComposer } from \"@lexical/react/LexicalComposer\";\n * import { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\n * import { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\n * import { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\n * import { liveblocksConfig, LiveblocksPlugin } from \"@liveblocks/react-lexical\";\n *\n * const initialConfig = liveblocksConfig({\n *   namespace: \"MyEditor\",\n *   theme: {},\n *   nodes: [],\n *   onError: (err) => console.error(err),\n * });\n *\n * function Editor() {\n *   return (\n *     <LexicalComposer initialConfig={initialConfig}>\n *       <LiveblocksPlugin />\n *       <RichTextPlugin\n *         contentEditable={<ContentEditable />}\n *         placeholder={<div>Enter some text...</div>}\n *         ErrorBoundary={LexicalErrorBoundary}\n *       />\n *     </LexicalComposer>\n *   );\n * }\n */\nexport const LiveblocksPlugin = ({\n  children,\n}: LiveblocksPluginProps): JSX.Element => {\n  const client = useClient();\n  const hasResolveMentionSuggestions =\n    client[kInternal].resolveMentionSuggestions !== undefined;\n  const [editor] = useLexicalComposerContext();\n  const room = useRoom();\n  const collabContext = useContext(CollaborationContext);\n  const previousRoomIdRef = useRef<string | null>(null);\n\n  if (!editor.hasNodes([ThreadMarkNode, MentionNode])) {\n    throw new Error(\n      \"LiveblocksPlugin requires Lexical configuration to be wrapped in the `liveblocksConfig(options)` function. For more information: https://liveblocks.io/docs/api-reference/liveblocks-react-lexical#liveblocksConfig\"\n    );\n  }\n\n  const [containerRef, setContainerRef] = useState<\n    MutableRefObject<HTMLDivElement | null> | undefined\n  >(undefined);\n\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  // Warn users if initialConfig.editorState, set on the composer, is not null\n  useEffect(() => {\n    // only in dev mode\n    if (process.env.NODE_ENV !== \"production\") {\n      // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n      if (!editor.getEditorState().isEmpty()) {\n        console.warn(\n          \"Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null.\"\n        );\n      }\n    }\n\n    // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    // Report that this is lexical and root is the rootKey\n    room[kInternal].reportTextEditor(\"lexical\", \"root\");\n  }, [room]);\n\n  // Get user info or allow override from props\n  const info = useSelf((me) => me.info);\n  const username = info?.name || \"\"; // use empty string to prevent random name\n  const cursorcolor = info?.color as string | undefined;\n\n  const providerFactory = useCallback(\n    (id: string, yjsDocMap: Map<string, Doc>): Provider => {\n      // Destroy previously used provider to avoid memory leaks\n      // TODO: Find a way to destroy the last used provider on unmount (while working with StrictMode)\n      if (\n        previousRoomIdRef.current !== null &&\n        previousRoomIdRef.current !== id\n      ) {\n        const previousProvider = providersMap.get(id);\n        if (previousProvider !== undefined) {\n          previousProvider.destroy();\n        }\n      }\n\n      let doc = yjsDocMap.get(id);\n\n      if (doc === undefined) {\n        doc = new Doc();\n        const provider = new LiveblocksYjsProvider(room, doc);\n        yjsDocMap.set(id, doc);\n        providersMap.set(id, provider);\n      }\n\n      return nn(\n        providersMap.get(id),\n        \"Internal error. Should never happen\"\n      ) as Provider;\n    },\n    [room]\n  );\n\n  useEffect(() => {\n    collabContext.name = username || \"\";\n  }, [collabContext, username]);\n\n  const root = useRootElement();\n\n  useLayoutEffect(() => {\n    if (root === null) return;\n    setReference({\n      getBoundingClientRect: () => root.getBoundingClientRect(),\n    });\n  }, [setReference, root]);\n\n  const handleFloatingRef = useCallback(\n    (node: HTMLDivElement) => {\n      setFloating(node);\n      setContainerRef({ current: node });\n    },\n    [setFloating, setContainerRef]\n  );\n\n  return (\n    <>\n      <div\n        ref={handleFloatingRef}\n        style={{\n          position: strategy,\n          top: 0,\n          left: 0,\n          transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n          minWidth: \"max-content\",\n        }}\n      />\n\n      <CollaborationPlugin\n        // Setting the key allows us to reset the internal Y.doc used by useYjsCollaboration\n        // without implementing `reload` event\n        key={room.id}\n        id={room.id}\n        providerFactory={providerFactory}\n        username={username}\n        cursorColor={cursorcolor}\n        cursorsContainerRef={containerRef}\n        shouldBootstrap={true}\n      />\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      <CommentPluginProvider>{children}</CommentPluginProvider>\n    </>\n  );\n};\n\nexport function useRootElement(): HTMLElement | null {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerRootListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getRootElement();\n  }, [editor]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["useRoom","useState","useEffect","provider","useClient","kInternal","useLexicalComposerContext","useContext","CollaborationContext","useRef","ThreadMarkNode","MentionNode","useFloating","autoUpdate","useSelf","useCallback","Doc","LiveblocksYjsProvider","nn","useLayoutEffect","CollaborationPlugin","MentionPlugin","CommentPluginProvider","useSyncExternalStore"],"mappings":"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"}

package/dist/liveblocks-plugin-provider.mjs

@@ -153,5 +153,5 @@ function useRootElement() {
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 
-export { LiveblocksPlugin, useEditorStatus };
+export { LiveblocksPlugin, useEditorStatus, useRootElement };
 //# sourceMappingURL=liveblocks-plugin-provider.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"liveblocks-plugin-provider.mjs","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { autoUpdate, useFloating } from \"@floating-ui/react-dom\";\nimport { CollaborationContext } from \"@lexical/react/LexicalCollaborationContext\";\nimport { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport { kInternal, nn } from \"@liveblocks/core\";\nimport { useClient, useRoom, useSelf } from \"@liveblocks/react\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport type { MutableRefObject } from \"react\";\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\nimport { MentionPlugin } from \"./mentions/mention-plugin\";\n\n// TODO: Replace by ref once I understand why useRef is not stable (?!)\nconst providersMap = new Map<\n  string,\n  LiveblocksYjsProvider<never, never, never, never, never>\n>();\n\nexport type EditorStatus =\n  /* The editor state is not loaded and has not been requested. */\n  | \"not-loaded\"\n  /* The editor state is loading from Liveblocks servers */\n  | \"loading\"\n  /**\n   * Not working yet! Will be available in a future release.\n   * Some editor state modifications has not been acknowledged yet by the server\n   */\n  | \"synchronizing\"\n  /* The editor state is sync with Liveblocks servers */\n  | \"synchronized\";\n\nfunction getEditorStatus(\n  provider?: LiveblocksYjsProvider<never, never, never, never, never>\n): EditorStatus {\n  if (provider === undefined) {\n    return \"not-loaded\";\n  }\n\n  return provider.synced ? \"synchronized\" : \"loading\";\n}\n\n/**\n * Get the storage status.\n *\n * - `not-loaded`: Initial state when entering the room.\n * - `loading`: Once the editor state has been requested by LiveblocksPlugin.\n * - `synchronizing`: Not working yet! Will be available in a future release.\n * - `synchronized`:  The editor state is sync with Liveblocks servers.\n */\nexport function useEditorStatus(): EditorStatus {\n  const room = useRoom();\n  const provider = providersMap.get(room.id);\n\n  const [status, setStatus] = useState(getEditorStatus(provider));\n\n  useEffect(() => {\n    const provider = providersMap.get(room.id);\n\n    setStatus(getEditorStatus(provider));\n\n    if (provider === undefined) {\n      return;\n    }\n\n    const cb = () => setStatus(getEditorStatus(provider));\n\n    provider.on(\"sync\", cb);\n\n    return () => provider.off(\"sync\", cb);\n  }, [room]);\n\n  return status;\n}\n\nexport type LiveblocksPluginProps = {\n  children?: React.ReactNode;\n};\n\n/**\n * Liveblocks plugin for Lexical that adds collaboration to your editor.\n *\n * `LiveblocksPlugin` should always be nested inside `LexicalComposer`.\n *\n * @example\n *\n * import { LexicalComposer } from \"@lexical/react/LexicalComposer\";\n * import { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\n * import { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\n * import { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\n * import { liveblocksConfig, LiveblocksPlugin } from \"@liveblocks/react-lexical\";\n *\n * const initialConfig = liveblocksConfig({\n *   namespace: \"MyEditor\",\n *   theme: {},\n *   nodes: [],\n *   onError: (err) => console.error(err),\n * });\n *\n * function Editor() {\n *   return (\n *     <LexicalComposer initialConfig={initialConfig}>\n *       <LiveblocksPlugin />\n *       <RichTextPlugin\n *         contentEditable={<ContentEditable />}\n *         placeholder={<div>Enter some text...</div>}\n *         ErrorBoundary={LexicalErrorBoundary}\n *       />\n *     </LexicalComposer>\n *   );\n * }\n */\nexport const LiveblocksPlugin = ({\n  children,\n}: LiveblocksPluginProps): JSX.Element => {\n  const client = useClient();\n  const hasResolveMentionSuggestions =\n    client[kInternal].resolveMentionSuggestions !== undefined;\n  const [editor] = useLexicalComposerContext();\n  const room = useRoom();\n  const collabContext = useContext(CollaborationContext);\n  const previousRoomIdRef = useRef<string | null>(null);\n\n  if (!editor.hasNodes([ThreadMarkNode, MentionNode])) {\n    throw new Error(\n      \"LiveblocksPlugin requires Lexical configuration to be wrapped in the `liveblocksConfig(options)` function. For more information: https://liveblocks.io/docs/api-reference/liveblocks-react-lexical#liveblocksConfig\"\n    );\n  }\n\n  const [containerRef, setContainerRef] = useState<\n    MutableRefObject<HTMLDivElement | null> | undefined\n  >(undefined);\n\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  // Warn users if initialConfig.editorState, set on the composer, is not null\n  useEffect(() => {\n    // only in dev mode\n    if (process.env.NODE_ENV !== \"production\") {\n      // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n      if (!editor.getEditorState().isEmpty()) {\n        console.warn(\n          \"Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null.\"\n        );\n      }\n    }\n\n    // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    // Report that this is lexical and root is the rootKey\n    room[kInternal].reportTextEditor(\"lexical\", \"root\");\n  }, [room]);\n\n  // Get user info or allow override from props\n  const info = useSelf((me) => me.info);\n  const username = info?.name || \"\"; // use empty string to prevent random name\n  const cursorcolor = info?.color as string | undefined;\n\n  const providerFactory = useCallback(\n    (id: string, yjsDocMap: Map<string, Doc>): Provider => {\n      // Destroy previously used provider to avoid memory leaks\n      // TODO: Find a way to destroy the last used provider on unmount (while working with StrictMode)\n      if (\n        previousRoomIdRef.current !== null &&\n        previousRoomIdRef.current !== id\n      ) {\n        const previousProvider = providersMap.get(id);\n        if (previousProvider !== undefined) {\n          previousProvider.destroy();\n        }\n      }\n\n      let doc = yjsDocMap.get(id);\n\n      if (doc === undefined) {\n        doc = new Doc();\n        const provider = new LiveblocksYjsProvider(room, doc);\n        yjsDocMap.set(id, doc);\n        providersMap.set(id, provider);\n      }\n\n      return nn(\n        providersMap.get(id),\n        \"Internal error. Should never happen\"\n      ) as Provider;\n    },\n    [room]\n  );\n\n  useEffect(() => {\n    collabContext.name = username || \"\";\n  }, [collabContext, username]);\n\n  const root = useRootElement();\n\n  useLayoutEffect(() => {\n    if (root === null) return;\n    setReference({\n      getBoundingClientRect: () => root.getBoundingClientRect(),\n    });\n  }, [setReference, root]);\n\n  const handleFloatingRef = useCallback(\n    (node: HTMLDivElement) => {\n      setFloating(node);\n      setContainerRef({ current: node });\n    },\n    [setFloating, setContainerRef]\n  );\n\n  return (\n    <>\n      <div\n        ref={handleFloatingRef}\n        style={{\n          position: strategy,\n          top: 0,\n          left: 0,\n          transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n          minWidth: \"max-content\",\n        }}\n      />\n\n      <CollaborationPlugin\n        // Setting the key allows us to reset the internal Y.doc used by useYjsCollaboration\n        // without implementing `reload` event\n        key={room.id}\n        id={room.id}\n        providerFactory={providerFactory}\n        username={username}\n        cursorColor={cursorcolor}\n        cursorsContainerRef={containerRef}\n        shouldBootstrap={true}\n      />\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      <CommentPluginProvider>{children}</CommentPluginProvider>\n    </>\n  );\n};\n\nfunction useRootElement(): HTMLElement | null {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerRootListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getRootElement();\n  }, [editor]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["provider","React"],"mappings":"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"}
+{"version":3,"file":"liveblocks-plugin-provider.mjs","sources":["../src/liveblocks-plugin-provider.tsx"],"sourcesContent":["import { autoUpdate, useFloating } from \"@floating-ui/react-dom\";\nimport { CollaborationContext } from \"@lexical/react/LexicalCollaborationContext\";\nimport { CollaborationPlugin } from \"@lexical/react/LexicalCollaborationPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { Provider } from \"@lexical/yjs\";\nimport { kInternal, nn } from \"@liveblocks/core\";\nimport { useClient, useRoom, useSelf } from \"@liveblocks/react\";\nimport { LiveblocksYjsProvider } from \"@liveblocks/yjs\";\nimport type { MutableRefObject } from \"react\";\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim/index.js\";\nimport { Doc } from \"yjs\";\n\nimport { CommentPluginProvider } from \"./comments/comment-plugin-provider\";\nimport { ThreadMarkNode } from \"./comments/thread-mark-node\";\nimport { MentionNode } from \"./mentions/mention-node\";\nimport { MentionPlugin } from \"./mentions/mention-plugin\";\n\n// TODO: Replace by ref once I understand why useRef is not stable (?!)\nconst providersMap = new Map<\n  string,\n  LiveblocksYjsProvider<never, never, never, never, never>\n>();\n\nexport type EditorStatus =\n  /* The editor state is not loaded and has not been requested. */\n  | \"not-loaded\"\n  /* The editor state is loading from Liveblocks servers */\n  | \"loading\"\n  /**\n   * Not working yet! Will be available in a future release.\n   * Some editor state modifications has not been acknowledged yet by the server\n   */\n  | \"synchronizing\"\n  /* The editor state is sync with Liveblocks servers */\n  | \"synchronized\";\n\nfunction getEditorStatus(\n  provider?: LiveblocksYjsProvider<never, never, never, never, never>\n): EditorStatus {\n  if (provider === undefined) {\n    return \"not-loaded\";\n  }\n\n  return provider.synced ? \"synchronized\" : \"loading\";\n}\n\n/**\n * Get the storage status.\n *\n * - `not-loaded`: Initial state when entering the room.\n * - `loading`: Once the editor state has been requested by LiveblocksPlugin.\n * - `synchronizing`: Not working yet! Will be available in a future release.\n * - `synchronized`:  The editor state is sync with Liveblocks servers.\n */\nexport function useEditorStatus(): EditorStatus {\n  const room = useRoom();\n  const provider = providersMap.get(room.id);\n\n  const [status, setStatus] = useState(getEditorStatus(provider));\n\n  useEffect(() => {\n    const provider = providersMap.get(room.id);\n\n    setStatus(getEditorStatus(provider));\n\n    if (provider === undefined) {\n      return;\n    }\n\n    const cb = () => setStatus(getEditorStatus(provider));\n\n    provider.on(\"sync\", cb);\n\n    return () => provider.off(\"sync\", cb);\n  }, [room]);\n\n  return status;\n}\n\nexport type LiveblocksPluginProps = {\n  children?: React.ReactNode;\n};\n\n/**\n * Liveblocks plugin for Lexical that adds collaboration to your editor.\n *\n * `LiveblocksPlugin` should always be nested inside `LexicalComposer`.\n *\n * @example\n *\n * import { LexicalComposer } from \"@lexical/react/LexicalComposer\";\n * import { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\n * import { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\n * import { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\n * import { liveblocksConfig, LiveblocksPlugin } from \"@liveblocks/react-lexical\";\n *\n * const initialConfig = liveblocksConfig({\n *   namespace: \"MyEditor\",\n *   theme: {},\n *   nodes: [],\n *   onError: (err) => console.error(err),\n * });\n *\n * function Editor() {\n *   return (\n *     <LexicalComposer initialConfig={initialConfig}>\n *       <LiveblocksPlugin />\n *       <RichTextPlugin\n *         contentEditable={<ContentEditable />}\n *         placeholder={<div>Enter some text...</div>}\n *         ErrorBoundary={LexicalErrorBoundary}\n *       />\n *     </LexicalComposer>\n *   );\n * }\n */\nexport const LiveblocksPlugin = ({\n  children,\n}: LiveblocksPluginProps): JSX.Element => {\n  const client = useClient();\n  const hasResolveMentionSuggestions =\n    client[kInternal].resolveMentionSuggestions !== undefined;\n  const [editor] = useLexicalComposerContext();\n  const room = useRoom();\n  const collabContext = useContext(CollaborationContext);\n  const previousRoomIdRef = useRef<string | null>(null);\n\n  if (!editor.hasNodes([ThreadMarkNode, MentionNode])) {\n    throw new Error(\n      \"LiveblocksPlugin requires Lexical configuration to be wrapped in the `liveblocksConfig(options)` function. For more information: https://liveblocks.io/docs/api-reference/liveblocks-react-lexical#liveblocksConfig\"\n    );\n  }\n\n  const [containerRef, setContainerRef] = useState<\n    MutableRefObject<HTMLDivElement | null> | undefined\n  >(undefined);\n\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"bottom\",\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  // Warn users if initialConfig.editorState, set on the composer, is not null\n  useEffect(() => {\n    // only in dev mode\n    if (process.env.NODE_ENV !== \"production\") {\n      // A user should not even be set an emptyState, but when passing null, getEditorState still has initial empty state\n      if (!editor.getEditorState().isEmpty()) {\n        console.warn(\n          \"Warning: LiveblocksPlugin: editorState in initialConfig detected, but must be null.\"\n        );\n      }\n    }\n\n    // we know editor is already defined as we're inside LexicalComposer, and we only want this running the first time\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    // Report that this is lexical and root is the rootKey\n    room[kInternal].reportTextEditor(\"lexical\", \"root\");\n  }, [room]);\n\n  // Get user info or allow override from props\n  const info = useSelf((me) => me.info);\n  const username = info?.name || \"\"; // use empty string to prevent random name\n  const cursorcolor = info?.color as string | undefined;\n\n  const providerFactory = useCallback(\n    (id: string, yjsDocMap: Map<string, Doc>): Provider => {\n      // Destroy previously used provider to avoid memory leaks\n      // TODO: Find a way to destroy the last used provider on unmount (while working with StrictMode)\n      if (\n        previousRoomIdRef.current !== null &&\n        previousRoomIdRef.current !== id\n      ) {\n        const previousProvider = providersMap.get(id);\n        if (previousProvider !== undefined) {\n          previousProvider.destroy();\n        }\n      }\n\n      let doc = yjsDocMap.get(id);\n\n      if (doc === undefined) {\n        doc = new Doc();\n        const provider = new LiveblocksYjsProvider(room, doc);\n        yjsDocMap.set(id, doc);\n        providersMap.set(id, provider);\n      }\n\n      return nn(\n        providersMap.get(id),\n        \"Internal error. Should never happen\"\n      ) as Provider;\n    },\n    [room]\n  );\n\n  useEffect(() => {\n    collabContext.name = username || \"\";\n  }, [collabContext, username]);\n\n  const root = useRootElement();\n\n  useLayoutEffect(() => {\n    if (root === null) return;\n    setReference({\n      getBoundingClientRect: () => root.getBoundingClientRect(),\n    });\n  }, [setReference, root]);\n\n  const handleFloatingRef = useCallback(\n    (node: HTMLDivElement) => {\n      setFloating(node);\n      setContainerRef({ current: node });\n    },\n    [setFloating, setContainerRef]\n  );\n\n  return (\n    <>\n      <div\n        ref={handleFloatingRef}\n        style={{\n          position: strategy,\n          top: 0,\n          left: 0,\n          transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n          minWidth: \"max-content\",\n        }}\n      />\n\n      <CollaborationPlugin\n        // Setting the key allows us to reset the internal Y.doc used by useYjsCollaboration\n        // without implementing `reload` event\n        key={room.id}\n        id={room.id}\n        providerFactory={providerFactory}\n        username={username}\n        cursorColor={cursorcolor}\n        cursorsContainerRef={containerRef}\n        shouldBootstrap={true}\n      />\n\n      {hasResolveMentionSuggestions && <MentionPlugin />}\n\n      <CommentPluginProvider>{children}</CommentPluginProvider>\n    </>\n  );\n};\n\nexport function useRootElement(): HTMLElement | null {\n  const [editor] = useLexicalComposerContext();\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) => {\n      return editor.registerRootListener(onStoreChange);\n    },\n    [editor]\n  );\n\n  const getSnapshot = useCallback(() => {\n    return editor.getRootElement();\n  }, [editor]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["provider","React"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAM,YAAA,uBAAmB,GAGvB,EAAA,CAAA;AAeF,SAAS,gBACP,QACc,EAAA;AACd,EAAA,IAAI,aAAa,KAAW,CAAA,EAAA;AAC1B,IAAO,OAAA,YAAA,CAAA;AAAA,GACT;AAEA,EAAO,OAAA,QAAA,CAAS,SAAS,cAAiB,GAAA,SAAA,CAAA;AAC5C,CAAA;AAUO,SAAS,eAAgC,GAAA;AAC9C,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AACrB,EAAA,MAAM,QAAW,GAAA,YAAA,CAAa,GAAI,CAAA,IAAA,CAAK,EAAE,CAAA,CAAA;AAEzC,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,IAAI,QAAS,CAAA,eAAA,CAAgB,QAAQ,CAAC,CAAA,CAAA;AAE9D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAMA,SAAW,GAAA,YAAA,CAAa,GAAI,CAAA,IAAA,CAAK,EAAE,CAAA,CAAA;AAEzC,IAAU,SAAA,CAAA,eAAA,CAAgBA,SAAQ,CAAC,CAAA,CAAA;AAEnC,IAAA,IAAIA,cAAa,KAAW,CAAA,EAAA;AAC1B,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,EAAK,GAAA,MAAM,SAAU,CAAA,eAAA,CAAgBA,SAAQ,CAAC,CAAA,CAAA;AAEpD,IAAAA,SAAAA,CAAS,EAAG,CAAA,MAAA,EAAQ,EAAE,CAAA,CAAA;AAEtB,IAAA,OAAO,MAAMA,SAAAA,CAAS,GAAI,CAAA,MAAA,EAAQ,EAAE,CAAA,CAAA;AAAA,GACtC,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAO,OAAA,MAAA,CAAA;AACT,CAAA;AAuCO,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;AACrB,EAAM,MAAA,aAAA,GAAgB,WAAW,oBAAoB,CAAA,CAAA;AACrD,EAAM,MAAA,iBAAA,GAAoB,OAAsB,IAAI,CAAA,CAAA;AAEpD,EAAA,IAAI,CAAC,MAAO,CAAA,QAAA,CAAS,CAAC,cAAgB,EAAA,WAAW,CAAC,CAAG,EAAA;AACnD,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,qNAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAEtC,KAAS,CAAA,CAAA,CAAA;AAEX,EAAM,MAAA;AAAA,IACJ,IAAA,EAAM,EAAE,YAAA,EAAc,WAAY,EAAA;AAAA,IAClC,QAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,MACE,WAAY,CAAA;AAAA,IACd,QAAU,EAAA,OAAA;AAAA,IACV,SAAW,EAAA,QAAA;AAAA,IACX,oBAAA,EAAsB,IAAI,IAAS,KAAA;AACjC,MAAO,OAAA,UAAA,CAAW,GAAG,IAAM,EAAA;AAAA,QACzB,cAAgB,EAAA,IAAA;AAAA,OACjB,CAAA,CAAA;AAAA,KACH;AAAA,GACD,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,EAAM,MAAA,QAAA,GAAW,MAAM,IAAQ,IAAA,EAAA,CAAA;AAC/B,EAAA,MAAM,cAAc,IAAM,EAAA,KAAA,CAAA;AAE1B,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,IAAY,SAA0C,KAAA;AAGrD,MAAA,IACE,iBAAkB,CAAA,OAAA,KAAY,IAC9B,IAAA,iBAAA,CAAkB,YAAY,EAC9B,EAAA;AACA,QAAM,MAAA,gBAAA,GAAmB,YAAa,CAAA,GAAA,CAAI,EAAE,CAAA,CAAA;AAC5C,QAAA,IAAI,qBAAqB,KAAW,CAAA,EAAA;AAClC,UAAA,gBAAA,CAAiB,OAAQ,EAAA,CAAA;AAAA,SAC3B;AAAA,OACF;AAEA,MAAI,IAAA,GAAA,GAAM,SAAU,CAAA,GAAA,CAAI,EAAE,CAAA,CAAA;AAE1B,MAAA,IAAI,QAAQ,KAAW,CAAA,EAAA;AACrB,QAAA,GAAA,GAAM,IAAI,GAAI,EAAA,CAAA;AACd,QAAA,MAAM,QAAW,GAAA,IAAI,qBAAsB,CAAA,IAAA,EAAM,GAAG,CAAA,CAAA;AACpD,QAAU,SAAA,CAAA,GAAA,CAAI,IAAI,GAAG,CAAA,CAAA;AACrB,QAAa,YAAA,CAAA,GAAA,CAAI,IAAI,QAAQ,CAAA,CAAA;AAAA,OAC/B;AAEA,MAAO,OAAA,EAAA;AAAA,QACL,YAAA,CAAa,IAAI,EAAE,CAAA;AAAA,QACnB,qCAAA;AAAA,OACF,CAAA;AAAA,KACF;AAAA,IACA,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,OAAO,QAAY,IAAA,EAAA,CAAA;AAAA,GAChC,EAAA,CAAC,aAAe,EAAA,QAAQ,CAAC,CAAA,CAAA;AAE5B,EAAA,MAAM,OAAO,cAAe,EAAA,CAAA;AAE5B,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,IAAS,KAAA,IAAA;AAAM,MAAA,OAAA;AACnB,IAAa,YAAA,CAAA;AAAA,MACX,qBAAA,EAAuB,MAAM,IAAA,CAAK,qBAAsB,EAAA;AAAA,KACzD,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,IAAI,CAAC,CAAA,CAAA;AAEvB,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,IAAyB,KAAA;AACxB,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,MAAgB,eAAA,CAAA,EAAE,OAAS,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,KACnC;AAAA,IACA,CAAC,aAAa,eAAe,CAAA;AAAA,GAC/B,CAAA;AAEA,EAAA,mGAEKC,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,iBAAA;AAAA,IACL,KAAO,EAAA;AAAA,MACL,QAAU,EAAA,QAAA;AAAA,MACV,GAAK,EAAA,CAAA;AAAA,MACL,IAAM,EAAA,CAAA;AAAA,MACN,SAAA,EAAW,eAAe,IAAK,CAAA,KAAA,CAAM,CAAC,CAAQ,CAAA,IAAA,EAAA,IAAA,CAAK,MAAM,CAAC,CAAA,CAAA,MAAA,CAAA;AAAA,MAC1D,QAAU,EAAA,aAAA;AAAA,KACZ;AAAA,GACF,mBAECA,cAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAA,IAGC,KAAK,IAAK,CAAA,EAAA;AAAA,IACV,IAAI,IAAK,CAAA,EAAA;AAAA,IACT,eAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAa,EAAA,WAAA;AAAA,IACb,mBAAqB,EAAA,YAAA;AAAA,IACrB,eAAiB,EAAA,IAAA;AAAA,GACnB,CAAA,EAEC,gDAAiCA,cAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAc,mBAE/CA,cAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAA,EAAuB,QAAS,CACnC,CAAA,CAAA;AAEJ,EAAA;AAEO,SAAS,cAAqC,GAAA;AACnD,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,qBAAqB,aAAa,CAAA,CAAA;AAAA,KAClD;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,OAAO,OAAO,cAAe,EAAA,CAAA;AAAA,GAC/B,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAO,OAAA,oBAAA,CAAqB,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AACjE;;;;"}

package/dist/version.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-lexical";
-const PKG_VERSION = typeof "2.2.2-test2" === "string" && "2.2.2-test2";
+const PKG_VERSION = typeof "2.2.3-alpha1" === "string" && "2.2.3-alpha1";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-lexical\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,4BAAA;AACX,MAAA,WAAA,GAAc,OAAO,aAAA,KAAgB,QAAY,IAAA,cAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-lexical\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,4BAAA;AACX,MAAA,WAAA,GAAc,OAAO,cAAA,KAAgB,QAAY,IAAA,eAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}

package/dist/version.mjs

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-lexical";
-const PKG_VERSION = typeof "2.2.2-test2" === "string" && "2.2.2-test2";
+const PKG_VERSION = typeof "2.2.3-alpha1" === "string" && "2.2.3-alpha1";
 const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/dist/version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-lexical\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,4BAAA;AACX,MAAA,WAAA,GAAc,OAAO,aAAA,KAAgB,QAAY,IAAA,cAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}
+{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-lexical\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,4BAAA;AACX,MAAA,WAAA,GAAc,OAAO,cAAA,KAAgB,QAAY,IAAA,eAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-lexical",
-  "version": "2.2.2-test2",
+  "version": "2.2.3-alpha1",
   "description": "A lexical react plugin to enable collaboration, comments, live cursors, and more.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -42,11 +42,11 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.0",
-    "@liveblocks/client": "2.2.2-test2",
-    "@liveblocks/core": "2.2.2-test2",
-    "@liveblocks/react": "2.2.2-test2",
-    "@liveblocks/react-ui": "2.2.2-test2",
-    "@liveblocks/yjs": "2.2.2-test2",
+    "@liveblocks/client": "2.2.3-alpha1",
+    "@liveblocks/core": "2.2.3-alpha1",
+    "@liveblocks/react": "2.2.3-alpha1",
+    "@liveblocks/react-ui": "2.2.3-alpha1",
+    "@liveblocks/yjs": "2.2.3-alpha1",
     "nanoid": "^3",
     "use-sync-external-store": "^1.2.2",
     "yjs": "^13.6.18"

package/src/styles/constants.css

@@ -1 +1,9 @@
 $lb-elevation-list-padding: 4px;
+$lb-lexical-anchored-threads-shadow:
+  0 0 0 1px rgb(0 0 0 / 4%),
+  0 2px 6px rgb(0 0 0 / 4%),
+  0 6px 20px rgb(0 0 0 / 6%);
+$lb-lexical-anchored-threads-active-shadow:
+  0 0 0 1px rgb(0 0 0 / 4%),
+  0 2px 6px rgb(0 0 0 / 8%),
+  0 8px 26px rgb(0 0 0 / 12%);

package/src/styles/index.css

@@ -2,7 +2,7 @@
 @import "./constants";
 
 /*************************************
- *       Suggestions                 *
+ *            Suggestions            *
  *************************************/
 
 .lb-lexical-suggestions-list {
@@ -12,7 +12,7 @@
 }
 
 /*************************************
- *   Mention suggestions             *
+ *        Mention suggestions        *
  *************************************/
 
 .lb-lexical-mention-suggestions {
@@ -94,7 +94,7 @@
 }
 
 /*************************************
- *       Mention                     *
+ *              Mention              *
  *************************************/
 
 .lb-lexical-mention {
@@ -114,18 +114,10 @@
 }
 
 /*************************************
- *       Active selection            *
+ *            Thread mark            *
  *************************************/
 
-.lb-lexical-active-selection {
-  background-color: var(--lb-selection);
-}
-
-/*************************************
- *              Thread Mark          *
- *************************************/
-
-.lb-thread-mark {
+.lb-lexical-thread-mark {
   background: var(--lb-accent-subtle);
   color: var(--lb-foreground);
   outline: none;
@@ -140,3 +132,74 @@
     text-decoration-color: var(--lb-accent-moderate);
   }
 }
+
+/*************************************
+ *          Anchored threads         *
+ *************************************/
+
+.lb-lexical-anchored-threads {
+  --lb-lexical-anchored-threads-gap: 1.25rem;
+  --lb-lexical-anchored-threads-active-thread-offset: -0.75rem;
+}
+
+.lb-lexical-anchored-threads-thread-container {
+  transition-duration: calc(var(--lb-transition-duration) * 2);
+  transition-property: transform;
+}
+
+@media (prefers-reduced-motion) {
+  .lb-lexical-anchored-threads-thread-container {
+    transition-duration: 0s;
+  }
+}
+
+.lb-lexical-anchored-threads-thread {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--lb-radius);
+  background: var(--lb-dynamic-background);
+  box-shadow: $lb-lexical-anchored-threads-shadow;
+  transition-property: background, box-shadow;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    box-shadow: var(--lb-inset-shadow);
+    pointer-events: none;
+  }
+
+  &:where([data-state="active"]) {
+    box-shadow: $lb-lexical-anchored-threads-active-shadow;
+  }
+}
+
+/*************************************
+ *        Floating components        *
+ *************************************/
+
+.lb-lexical-floating {
+  --lb-lexical-floating-size: 350px;
+}
+
+/*************************************
+ *         Floating threads          *
+ *************************************/
+
+.lb-lexical-floating-threads-thread {
+  inline-size: var(--lb-lexical-floating-size);
+
+  &:where(:not(:last-of-type)) {
+    border-block-end: 1px solid var(--lb-foreground-subtle);
+  }
+}
+
+/*************************************
+ *         Floating composer         *
+ *************************************/
+
+.lb-lexical-floating-composer {
+  inline-size: var(--lb-lexical-floating-size);
+}

package/styles.css

@@ -1 +1 @@
-.lb-lexical-suggestions-list{margin:0;padding:0;list-style:none}.lb-lexical-mention-suggestions{--lb-lexical-mention-suggestion-avatar-size:1.25rem}.lb-lexical-mention-suggestion{padding:calc(.375*var(--lb-spacing))calc(.625*var(--lb-spacing))}.lb-lexical-mention-suggestion-avatar{inline-size:var(--lb-lexical-mention-suggestion-avatar-size);margin-inline-start:calc(-.125*var(--lb-spacing));margin-inline-end:calc(.5*var(--lb-spacing));margin-block:calc(.125*var(--lb-spacing));background:var(--lb-foreground-subtle);color:var(--lb-foreground-moderate)}.lb-lexical-suggestions{animation-duration:var(--lb-transition-duration);animation-timing-function:var(--lb-transition-easing);will-change:transform,opacity;padding:4px}.lb-lexical-suggestions-list-item{padding:calc(.25*var(--lb-spacing))calc(.5*var(--lb-spacing));border-radius:calc(var(--lb-radius) - .75*4px);color:var(--lb-foreground-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;scroll-margin-block:4px;font-size:.875rem;transition-property:background,color,opacity;display:flex}.lb-lexical-suggestions-list-item:where([data-highlighted],[data-selected]){background:var(--lb-foreground-subtle);transition-duration:calc(var(--lb-transition-duration)/2)}.lb-lexical-suggestions-list-item:where(:disabled,[data-disabled]){opacity:.5;cursor:not-allowed}.lb-lexical-suggestions:where([data-side=top]){animation-name:lb-animation-slide-up}.lb-lexical-suggestions:where([data-side=bottom]){animation-name:lb-animation-slide-down}.lb-lexical-suggestions:where([data-state=closed]){animation-name:lb-animation-disappear}.lb-lexical-mention{border-radius:calc(.675*var(--lb-radius));background:var(--lb-accent-subtle);color:var(--lb-accent);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.1em .3em;font-weight:500}.lb-lexical-mention::selection{background:0 0}.lb-lexical-mention ::selection{background:0 0}.lb-lexical-mention:where([data-selected]){background:var(--lb-accent);color:var(--lb-accent-foreground)}.lb-lexical-active-selection{background-color:var(--lb-selection)}.lb-thread-mark{background:var(--lb-accent-subtle);color:var(--lb-foreground);text-decoration-line:underline;-webkit-text-decoration-color:var(--lb-foreground-moderate);text-decoration-color:var(--lb-foreground-moderate);text-underline-offset:2px;outline:none;font-weight:500;transition-property:color,text-decoration-color}.lb-thread-mark:where([data-state=active]){color:var(--lb-accent);-webkit-text-decoration-color:var(--lb-accent-moderate);text-decoration-color:var(--lb-accent-moderate)}@media (prefers-reduced-motion){.lb-lexical-suggestions:where(:not([data-state=closed])){animation-name:lb-animation-appear}}
+.lb-lexical-suggestions-list{margin:0;padding:0;list-style:none}.lb-lexical-mention-suggestions{--lb-lexical-mention-suggestion-avatar-size:1.25rem}.lb-lexical-mention-suggestion{padding:calc(.375*var(--lb-spacing))calc(.625*var(--lb-spacing))}.lb-lexical-mention-suggestion-avatar{inline-size:var(--lb-lexical-mention-suggestion-avatar-size);margin-inline-start:calc(-.125*var(--lb-spacing));margin-inline-end:calc(.5*var(--lb-spacing));margin-block:calc(.125*var(--lb-spacing));background:var(--lb-foreground-subtle);color:var(--lb-foreground-moderate)}.lb-lexical-suggestions{animation-duration:var(--lb-transition-duration);animation-timing-function:var(--lb-transition-easing);will-change:transform,opacity;padding:4px}.lb-lexical-suggestions-list-item{padding:calc(.25*var(--lb-spacing))calc(.5*var(--lb-spacing));border-radius:calc(var(--lb-radius) - .75*4px);color:var(--lb-foreground-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;align-items:center;scroll-margin-block:4px;font-size:.875rem;transition-property:background,color,opacity;display:flex}.lb-lexical-suggestions-list-item:where([data-highlighted],[data-selected]){background:var(--lb-foreground-subtle);transition-duration:calc(var(--lb-transition-duration)/2)}.lb-lexical-suggestions-list-item:where(:disabled,[data-disabled]){opacity:.5;cursor:not-allowed}.lb-lexical-suggestions:where([data-side=top]){animation-name:lb-animation-slide-up}.lb-lexical-suggestions:where([data-side=bottom]){animation-name:lb-animation-slide-down}.lb-lexical-suggestions:where([data-state=closed]){animation-name:lb-animation-disappear}.lb-lexical-mention{border-radius:calc(.675*var(--lb-radius));background:var(--lb-accent-subtle);color:var(--lb-accent);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.1em .3em;font-weight:500}.lb-lexical-mention::selection{background:0 0}.lb-lexical-mention ::selection{background:0 0}.lb-lexical-mention:where([data-selected]){background:var(--lb-accent);color:var(--lb-accent-foreground)}.lb-lexical-thread-mark{background:var(--lb-accent-subtle);color:var(--lb-foreground);text-decoration-line:underline;-webkit-text-decoration-color:var(--lb-foreground-moderate);text-decoration-color:var(--lb-foreground-moderate);text-underline-offset:2px;outline:none;font-weight:500;transition-property:color,text-decoration-color}.lb-lexical-thread-mark:where([data-state=active]){color:var(--lb-accent);-webkit-text-decoration-color:var(--lb-accent-moderate);text-decoration-color:var(--lb-accent-moderate)}.lb-lexical-anchored-threads{--lb-lexical-anchored-threads-gap:1.25rem;--lb-lexical-anchored-threads-active-thread-offset:-.75rem}.lb-lexical-anchored-threads-thread-container{transition-duration:calc(var(--lb-transition-duration)*2);transition-property:transform}.lb-lexical-anchored-threads-thread{border-radius:var(--lb-radius);background:var(--lb-dynamic-background);transition-property:background,box-shadow;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0000000a,0 2px 6px #0000000a,0 6px 20px #0000000f}.lb-lexical-anchored-threads-thread:after{content:"";z-index:1;border-radius:inherit;box-shadow:var(--lb-inset-shadow);pointer-events:none;position:absolute;inset:0}.lb-lexical-anchored-threads-thread:where([data-state=active]){box-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f}.lb-lexical-floating{--lb-lexical-floating-size:350px}.lb-lexical-floating-threads-thread{inline-size:var(--lb-lexical-floating-size)}.lb-lexical-floating-threads-thread:where(:not(:last-of-type)){border-block-end:1px solid var(--lb-foreground-subtle)}.lb-lexical-floating-composer{inline-size:var(--lb-lexical-floating-size)}@media (prefers-reduced-motion){.lb-lexical-suggestions:where(:not([data-state=closed])){animation-name:lb-animation-appear}.lb-lexical-anchored-threads-thread-container{transition-duration:0s}}

package/styles.css.map

@@ -1 +1 @@
-{"version":3,"sources":["src/styles/src/styles/index.css","src/styles/src/styles/utils.css"],"names":[],"mappings":"AAOA,6BAAA,QAAA,CAAA,SAAA,CAAA,eAAA,CAUA,gCAAA,mDAAA,CAIA,+BAAA,gEAAA,CAIA,sCAAA,4DAAA,CAAA,iDAAA,CAAA,4CAAA,CAAA,yCAAA,CAAA,sCAAA,CAAA,mCAAA,CAaA,wBAAA,gDAAA,CAAA,qDAAA,CAAA,6BAAA,CAAA,WAAA,CAOA,kCAAA,6DAAA,CAAA,8CAAA,CAAA,oCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iBAAA,CAAA,4CAAA,CAAA,YAAA,CAeE,4EAAA,sCAAA,CAAA,yDAAA,CAKA,mEAAA,UAAA,CAAA,kBAAA,CAWA,+CAAA,oCAAA,CAIA,kDAAA,sCAAA,CAIA,mDAAA,qCAAA,CAeF,oBAAA,yCAAA,CAAA,kCAAA,CAAA,sBAAA,CAAA,kCAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,eAAA,CClGE,+BAAA,cAAA,CAAA,gCAAA,cAAA,CD4GA,2CAAA,2BAAA,CAAA,iCAAA,CAUF,6BAAA,oCAAA,CAQA,gBAAA,kCAAA,CAAA,0BAAA,CAAA,8BAAA,CAAA,2DAAA,CAAA,mDAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,eAAA,CAAA,+CAAA,CAUE,2CAAA,sBAAA,CAAA,uDAAA,CAAA,+CAAA,CAhDF,gCACE,yDAAA,kCAAA,CAAA","file":"styles.css","sourcesContent":["@import \"./utils\";\n@import \"./constants\";\n\n/*************************************\n *       Suggestions                 *\n *************************************/\n\n.lb-lexical-suggestions-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/*************************************\n *   Mention suggestions             *\n *************************************/\n\n.lb-lexical-mention-suggestions {\n  --lb-lexical-mention-suggestion-avatar-size: 1.25rem;\n}\n\n.lb-lexical-mention-suggestion {\n  padding: calc(0.375 * var(--lb-spacing)) calc(0.625 * var(--lb-spacing));\n}\n\n.lb-lexical-mention-suggestion-avatar {\n  inline-size: var(--lb-lexical-mention-suggestion-avatar-size);\n  margin-inline-start: calc(-0.125 * var(--lb-spacing));\n  margin-inline-end: calc(0.5 * var(--lb-spacing));\n  margin-block: calc(0.125 * var(--lb-spacing));\n  background: var(--lb-foreground-subtle);\n  color: var(--lb-foreground-moderate);\n}\n\n/*************************************\n *          Elevation lists          *\n *************************************/\n\n.lb-lexical-suggestions {\n  padding: $lb-elevation-list-padding;\n  animation-duration: var(--lb-transition-duration);\n  animation-timing-function: var(--lb-transition-easing);\n  will-change: transform, opacity;\n}\n\n.lb-lexical-suggestions-list-item {\n  display: flex;\n  align-items: center;\n  padding: calc(0.25 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));\n  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-list-padding);\n  color: var(--lb-foreground-secondary);\n  outline: none;\n  font-size: 0.875rem;\n  cursor: pointer;\n  user-select: none;\n  transition-property: background, color, opacity;\n  scroll-margin-block: $lb-elevation-list-padding;\n}\n\n:is(.lb-lexical-suggestions-list-item) {\n  &:where([data-highlighted], [data-selected]) {\n    background: var(--lb-foreground-subtle);\n    transition-duration: calc(var(--lb-transition-duration) / 2);\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}\n\n/*************************************\n *        Floating animations        *\n *************************************/\n\n:is(.lb-lexical-suggestions) {\n  &:where([data-side=\"top\"]) {\n    animation-name: lb-animation-slide-up;\n  }\n\n  &:where([data-side=\"bottom\"]) {\n    animation-name: lb-animation-slide-down;\n  }\n\n  &:where([data-state=\"closed\"]) {\n    animation-name: lb-animation-disappear;\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .lb-lexical-suggestions:where(:not([data-state=\"closed\"])) {\n    animation-name: lb-animation-appear;\n  }\n}\n\n/*************************************\n *       Mention                     *\n *************************************/\n\n.lb-lexical-mention {\n  padding: 0.1em 0.3em;\n  border-radius: calc(0.675 * var(--lb-radius));\n  background: var(--lb-accent-subtle);\n  color: var(--lb-accent);\n  box-decoration-break: clone;\n  font-weight: 500;\n\n  @include invisible-selection;\n\n  &:where([data-selected]) {\n    background: var(--lb-accent);\n    color: var(--lb-accent-foreground);\n  }\n}\n\n/*************************************\n *       Active selection            *\n *************************************/\n\n.lb-lexical-active-selection {\n  background-color: var(--lb-selection);\n}\n\n/*************************************\n *              Thread Mark          *\n *************************************/\n\n.lb-thread-mark {\n  background: var(--lb-accent-subtle);\n  color: var(--lb-foreground);\n  outline: none;\n  font-weight: 500;\n  transition-property: color, text-decoration-color;\n  text-decoration-line: underline;\n  text-decoration-color: var(--lb-foreground-moderate);\n  text-underline-offset: 2px;\n\n  &:where([data-state=\"active\"]) {\n    color: var(--lb-accent);\n    text-decoration-color: var(--lb-accent-moderate);\n  }\n}\n","@mixin invisible-selection {\n  &::selection,\n  *::selection {\n    background: transparent;\n  }\n}\n"]}
+{"version":3,"sources":["src/styles/src/styles/index.css","src/styles/src/styles/utils.css"],"names":[],"mappings":"AAOA,6BAAA,QAAA,CAAA,SAAA,CAAA,eAAA,CAUA,gCAAA,mDAAA,CAIA,+BAAA,gEAAA,CAIA,sCAAA,4DAAA,CAAA,iDAAA,CAAA,4CAAA,CAAA,yCAAA,CAAA,sCAAA,CAAA,mCAAA,CAaA,wBAAA,gDAAA,CAAA,qDAAA,CAAA,6BAAA,CAAA,WAAA,CAOA,kCAAA,6DAAA,CAAA,8CAAA,CAAA,oCAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,YAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iBAAA,CAAA,4CAAA,CAAA,YAAA,CAeE,4EAAA,sCAAA,CAAA,yDAAA,CAKA,mEAAA,UAAA,CAAA,kBAAA,CAWA,+CAAA,oCAAA,CAIA,kDAAA,sCAAA,CAIA,mDAAA,qCAAA,CAeF,oBAAA,yCAAA,CAAA,kCAAA,CAAA,sBAAA,CAAA,kCAAA,CAAA,0BAAA,CAAA,iBAAA,CAAA,eAAA,CClGE,+BAAA,cAAA,CAAA,gCAAA,cAAA,CD4GA,2CAAA,2BAAA,CAAA,iCAAA,CAUF,wBAAA,kCAAA,CAAA,0BAAA,CAAA,8BAAA,CAAA,2DAAA,CAAA,mDAAA,CAAA,yBAAA,CAAA,YAAA,CAAA,eAAA,CAAA,+CAAA,CAUE,mDAAA,sBAAA,CAAA,uDAAA,CAAA,+CAAA,CAUF,6BAAA,yCAAA,CAAA,0DAAA,CAKA,8CAAA,yDAAA,CAAA,6BAAA,CAWA,oCAAA,8BAAA,CAAA,uCAAA,CAAA,yCAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,uEAAA,CAQE,0CAAA,UAAA,CAAA,SAAA,CAAA,qBAAA,CAAA,iCAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,OAAA,CAUA,+DAAA,uEAAA,CASF,qBAAA,gCAAA,CAQA,oCAAA,2CAAA,CAGE,+DAAA,sDAAA,CASF,8BAAA,2CAAA,CAjHA,gCACE,yDAAA,kCAAA,CA4DA,8CAAA,sBAAA,CAAA","file":"styles.css","sourcesContent":["@import \"./utils\";\n@import \"./constants\";\n\n/*************************************\n *            Suggestions            *\n *************************************/\n\n.lb-lexical-suggestions-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/*************************************\n *        Mention suggestions        *\n *************************************/\n\n.lb-lexical-mention-suggestions {\n  --lb-lexical-mention-suggestion-avatar-size: 1.25rem;\n}\n\n.lb-lexical-mention-suggestion {\n  padding: calc(0.375 * var(--lb-spacing)) calc(0.625 * var(--lb-spacing));\n}\n\n.lb-lexical-mention-suggestion-avatar {\n  inline-size: var(--lb-lexical-mention-suggestion-avatar-size);\n  margin-inline-start: calc(-0.125 * var(--lb-spacing));\n  margin-inline-end: calc(0.5 * var(--lb-spacing));\n  margin-block: calc(0.125 * var(--lb-spacing));\n  background: var(--lb-foreground-subtle);\n  color: var(--lb-foreground-moderate);\n}\n\n/*************************************\n *          Elevation lists          *\n *************************************/\n\n.lb-lexical-suggestions {\n  padding: $lb-elevation-list-padding;\n  animation-duration: var(--lb-transition-duration);\n  animation-timing-function: var(--lb-transition-easing);\n  will-change: transform, opacity;\n}\n\n.lb-lexical-suggestions-list-item {\n  display: flex;\n  align-items: center;\n  padding: calc(0.25 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));\n  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-list-padding);\n  color: var(--lb-foreground-secondary);\n  outline: none;\n  font-size: 0.875rem;\n  cursor: pointer;\n  user-select: none;\n  transition-property: background, color, opacity;\n  scroll-margin-block: $lb-elevation-list-padding;\n}\n\n:is(.lb-lexical-suggestions-list-item) {\n  &:where([data-highlighted], [data-selected]) {\n    background: var(--lb-foreground-subtle);\n    transition-duration: calc(var(--lb-transition-duration) / 2);\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}\n\n/*************************************\n *        Floating animations        *\n *************************************/\n\n:is(.lb-lexical-suggestions) {\n  &:where([data-side=\"top\"]) {\n    animation-name: lb-animation-slide-up;\n  }\n\n  &:where([data-side=\"bottom\"]) {\n    animation-name: lb-animation-slide-down;\n  }\n\n  &:where([data-state=\"closed\"]) {\n    animation-name: lb-animation-disappear;\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .lb-lexical-suggestions:where(:not([data-state=\"closed\"])) {\n    animation-name: lb-animation-appear;\n  }\n}\n\n/*************************************\n *              Mention              *\n *************************************/\n\n.lb-lexical-mention {\n  padding: 0.1em 0.3em;\n  border-radius: calc(0.675 * var(--lb-radius));\n  background: var(--lb-accent-subtle);\n  color: var(--lb-accent);\n  box-decoration-break: clone;\n  font-weight: 500;\n\n  @include invisible-selection;\n\n  &:where([data-selected]) {\n    background: var(--lb-accent);\n    color: var(--lb-accent-foreground);\n  }\n}\n\n/*************************************\n *            Thread mark            *\n *************************************/\n\n.lb-lexical-thread-mark {\n  background: var(--lb-accent-subtle);\n  color: var(--lb-foreground);\n  outline: none;\n  font-weight: 500;\n  transition-property: color, text-decoration-color;\n  text-decoration-line: underline;\n  text-decoration-color: var(--lb-foreground-moderate);\n  text-underline-offset: 2px;\n\n  &:where([data-state=\"active\"]) {\n    color: var(--lb-accent);\n    text-decoration-color: var(--lb-accent-moderate);\n  }\n}\n\n/*************************************\n *          Anchored threads         *\n *************************************/\n\n.lb-lexical-anchored-threads {\n  --lb-lexical-anchored-threads-gap: 1.25rem;\n  --lb-lexical-anchored-threads-active-thread-offset: -0.75rem;\n}\n\n.lb-lexical-anchored-threads-thread-container {\n  transition-duration: calc(var(--lb-transition-duration) * 2);\n  transition-property: transform;\n}\n\n@media (prefers-reduced-motion) {\n  .lb-lexical-anchored-threads-thread-container {\n    transition-duration: 0s;\n  }\n}\n\n.lb-lexical-anchored-threads-thread {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--lb-radius);\n  background: var(--lb-dynamic-background);\n  box-shadow: $lb-lexical-anchored-threads-shadow;\n  transition-property: background, box-shadow;\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    border-radius: inherit;\n    box-shadow: var(--lb-inset-shadow);\n    pointer-events: none;\n  }\n\n  &:where([data-state=\"active\"]) {\n    box-shadow: $lb-lexical-anchored-threads-active-shadow;\n  }\n}\n\n/*************************************\n *        Floating components        *\n *************************************/\n\n.lb-lexical-floating {\n  --lb-lexical-floating-size: 350px;\n}\n\n/*************************************\n *         Floating threads          *\n *************************************/\n\n.lb-lexical-floating-threads-thread {\n  inline-size: var(--lb-lexical-floating-size);\n\n  &:where(:not(:last-of-type)) {\n    border-block-end: 1px solid var(--lb-foreground-subtle);\n  }\n}\n\n/*************************************\n *         Floating composer         *\n *************************************/\n\n.lb-lexical-floating-composer {\n  inline-size: var(--lb-lexical-floating-size);\n}\n","@mixin invisible-selection {\n  &::selection,\n  *::selection {\n    background: transparent;\n  }\n}\n"]}