@liveblocks/react-lexical 2.17.0-channels1 → 2.17.0-usrnotsettings1

package/dist/comments/anchored-threads.js

@@ -7,7 +7,7 @@ var reactUi = require('@liveblocks/react-ui');
 var lexical = require('lexical');
 var react = require('react');
 var classnames = require('../classnames.js');
-var liveblocksPluginProvider = require('../liveblocks-plugin-provider.js');
+var useRootElement = require('../use-root-element.js');
 var commentPluginProvider = require('./comment-plugin-provider.js');
 var threadMarkNode = require('./thread-mark-node.js');
 
@@ -136,7 +136,7 @@ function AnchoredThreads({
     }
     return () => observer.disconnect();
   }, [elements, handlePositionThreads]);
-  const root = liveblocksPluginProvider.useRootElement();
+  const root = useRootElement.useRootElement();
   react.useEffect(() => {
     if (root === null)
       return;

package/dist/comments/anchored-threads.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchored-threads.js","sources":["../../src/comments/anchored-threads.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { BaseMetadata, DM, ThreadData } from \"@liveblocks/core\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { $getNodeByKey } from \"lexical\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport { useRootElement } from \"../liveblocks-plugin-provider\";\nimport {\n  ActiveThreadsContext,\n  type ThreadToNodesMap,\n} from \"./comment-plugin-provider\";\nimport { ThreadToNodesContext } from \"./comment-plugin-provider\";\nimport { $isThreadMarkNode } from \"./thread-mark-node\";\n\nconst DEFAULT_GAP = 20;\nconst DEFAULT_ACTIVE_THREAD_OFFSET = -12;\n\nconst GAP = `var(--lb-lexical-anchored-threads-gap, ${DEFAULT_GAP}px)`;\nconst ACTIVE_THREAD_OFFSET = `var(--lb-lexical-anchored-threads-active-thread-offset, ${DEFAULT_ACTIVE_THREAD_OFFSET}px)`;\n\ntype AnchoredThreadsComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface AnchoredThreadsProps<M extends BaseMetadata = DM>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /**\n   * The threads to display.\n   */\n  threads: ThreadData<M>[];\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<AnchoredThreadsComponents>;\n}\n\n/**\n * Compares two nodes based on their position in the DOM.\n * Returns -1 if a comes before b, 1 if a comes after b, and 0 if they are the same node.\n * @param a The first node to compare\n * @param b The second node to compare\n * @returns -1 if a comes before b, 1 if a comes after b, and 0 if they are the same node.\n */\nexport function compareNodes(a: Node, b: Node): number {\n  // Calculate the position of node 'b' relative to node 'a'\n  const position = a.compareDocumentPosition(b);\n  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n  return 0;\n}\n\nexport function AnchoredThreads({\n  threads,\n  components,\n  className,\n  style,\n  ...props\n}: AnchoredThreadsProps) {\n  const [editor] = useLexicalComposerContext();\n  const Thread = components?.Thread ?? DefaultThread;\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const activeThreads = useActiveThreads();\n\n  const nodes = useThreadToNodes(); // A map of thread ids to a set of thread mark nodes associated with the thread\n\n  const getOrderedThreads = useCallback(() => {\n    return threads\n      .filter((thread) => thread.resolved === false)\n      .map((thread) => {\n        const keys = nodes.get(thread.id);\n        if (keys === undefined || keys.size === 0) return null;\n\n        const elements = Array.from(keys.values())\n          .map((key) => editor.getElementByKey(key))\n          .filter(Boolean) as HTMLElement[];\n        if (elements.length === 0) return null;\n\n        const element = elements.sort(compareNodes)[0];\n        return {\n          thread,\n          element,\n        };\n      })\n      .filter(\n        (entry): entry is { thread: ThreadData; element: HTMLElement } =>\n          entry !== null\n      )\n      .sort((a, b) => {\n        return compareNodes(a.element, b.element);\n      });\n  }, [editor, threads, nodes]);\n\n  // Sort threads by the position of the first element associated with the thread in the document (top to bottom, left to right)\n  const orderedThreads = useMemo(getOrderedThreads, [getOrderedThreads]);\n\n  const [elements, setElements] = useState<Map<string, HTMLElement>>(new Map());\n\n  const [positions, setPositions] = useState<Map<string, number>>(new Map()); // A map of thread ids to their 'top' position in the document\n\n  const onItemAdd = useCallback((id: string, el: HTMLElement) => {\n    setElements((prev) => new Map(prev).set(id, el));\n  }, []);\n\n  const onItemRemove = useCallback((id: string) => {\n    setElements((prev) => {\n      const items = new Map(prev);\n      items.delete(id);\n      return items;\n    });\n  }, []);\n\n  const handlePositionThreads = useCallback(() => {\n    const container = containerRef.current;\n    if (container === null) return;\n\n    const orderedThreads = getOrderedThreads();\n\n    // Returns an array of threads that should be positioned in ascending order - this includes threads that are active and threads that should come after the active threads\n    function getAscendingThreads() {\n      // If there are no active threads, all threads are ordered in ascending manner.\n      if (activeThreads.length === 0) return orderedThreads;\n\n      // Filter threads that are active\n      const active = orderedThreads.filter(({ thread }) =>\n        activeThreads.includes(thread.id)\n      );\n\n      // Filter threads that should come after the active threads\n      const after = orderedThreads.filter(({ thread, element }) => {\n        if (activeThreads.includes(thread.id)) return false;\n\n        // Check if the current thread comes after any of the active threads\n        const isAfter = active.some(({ element: activeElement }) => {\n          return compareNodes(activeElement, element) === -1;\n        });\n\n        return isAfter;\n      });\n\n      return active.concat(after);\n    }\n\n    const ascending = getAscendingThreads();\n\n    // Filter threads that are neither active nor come after active threads (i.e. 'other' threads)\n    const descending = orderedThreads.filter(\n      (entry) => !ascending.includes(entry)\n    );\n\n    const newPositions = new Map<string, number>();\n\n    // Iterate over each thread and calculate its new position by taking into account the position of the previously positioned threads\n    for (const { thread, element } of ascending) {\n      const rect = element.getBoundingClientRect();\n      let top = rect.top - container.getBoundingClientRect().top;\n\n      for (const [id, position] of newPositions) {\n        // Retrieve the element associated with the thread\n        const el = elements.get(id);\n        if (el === undefined) continue;\n\n        if (\n          top >= position &&\n          top <= position + el.getBoundingClientRect().height\n        ) {\n          top = position + el.getBoundingClientRect().height;\n        }\n      }\n\n      newPositions.set(thread.id, top);\n    }\n\n    for (const { thread, element } of descending.reverse()) {\n      const rect = element.getBoundingClientRect();\n      // Retrieve the element associated with the current thread\n      const el = elements.get(thread.id);\n      if (el === undefined) continue;\n\n      let top = rect.top - container.getBoundingClientRect().top;\n      for (const [, position] of newPositions) {\n        if (top >= position - el.getBoundingClientRect().height) {\n          top = position - el.getBoundingClientRect().height;\n        }\n      }\n\n      newPositions.set(thread.id, top);\n    }\n\n    setPositions(newPositions);\n  }, [getOrderedThreads, activeThreads, elements]);\n\n  useLayoutEffect(() => {\n    handlePositionThreads();\n  }, [handlePositionThreads]);\n\n  useEffect(() => {\n    return editor.registerUpdateListener(() => {\n      handlePositionThreads();\n    });\n  }, [editor, handlePositionThreads]);\n\n  useEffect(() => {\n    const observer = new ResizeObserver(handlePositionThreads);\n    for (const element of elements.values()) {\n      observer.observe(element);\n    }\n\n    return () => observer.disconnect();\n  }, [elements, handlePositionThreads]);\n\n  const root = useRootElement();\n\n  useEffect(() => {\n    if (root === null) return;\n    const observer = new ResizeObserver(handlePositionThreads);\n\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, [root, handlePositionThreads]);\n\n  if (orderedThreads.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, \"lb-root lb-lexical-anchored-threads\")}\n      ref={containerRef}\n      style={{\n        position: \"relative\",\n        ...style,\n      }}\n    >\n      {orderedThreads.map(({ thread, element }) => {\n        const rect = element.getBoundingClientRect();\n        const offset = root !== null ? root.getBoundingClientRect().top : 0;\n\n        let top = rect.top - offset;\n\n        if (positions.has(thread.id)) {\n          top = positions.get(thread.id)!;\n        }\n\n        const isActive = activeThreads.includes(thread.id);\n\n        return (\n          <ThreadWrapper\n            key={thread.id}\n            Thread={Thread}\n            thread={thread}\n            onItemAdd={onItemAdd}\n            onItemRemove={onItemRemove}\n            style={{\n              position: \"absolute\",\n              transform: `translate3d(${isActive ? ACTIVE_THREAD_OFFSET : 0}, ${top}px, 0)`,\n              insetInlineStart: 0,\n              inlineSize: \"100%\",\n              paddingBlockEnd: GAP,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  Thread: ComponentType<ThreadProps>;\n  onItemAdd: (id: string, el: HTMLElement) => void;\n  onItemRemove: (id: string) => void;\n}\n\nfunction ThreadWrapper({\n  onItemAdd,\n  onItemRemove,\n  thread,\n  Thread,\n  className,\n  ...props\n}: ThreadWrapperProps) {\n  const [editor] = useLexicalComposerContext();\n  const nodes = useThreadToNodes();\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const activeThreads = useActiveThreads();\n\n  const isActive = activeThreads.includes(thread.id);\n\n  function handleThreadClick() {\n    const keys = nodes.get(thread.id);\n    if (keys === undefined || keys.size === 0) return;\n\n    if (activeThreads.includes(thread.id)) return;\n\n    editor.update(() => {\n      const [key] = keys;\n      const node = $getNodeByKey(key);\n      if (!$isThreadMarkNode(node)) return;\n      node.selectStart();\n    });\n  }\n\n  useLayoutEffect(() => {\n    const el = divRef.current;\n    if (el === null) return;\n\n    onItemAdd(thread.id, el);\n    return () => {\n      onItemRemove(thread.id);\n    };\n  }, [thread.id, onItemAdd, onItemRemove]);\n\n  return (\n    <div\n      ref={divRef}\n      className={classNames(\n        \"lb-lexical-anchored-threads-thread-container\",\n        className\n      )}\n      {...props}\n    >\n      <Thread\n        thread={thread}\n        data-state={isActive ? \"active\" : \"inactive\"}\n        onClick={handleThreadClick}\n        className=\"lb-lexical-anchored-threads-thread\"\n        showComposer={isActive ? true : false}\n      />\n    </div>\n  );\n}\n\nfunction useThreadToNodes(): ThreadToNodesMap {\n  const threadToNodes = useContext(ThreadToNodesContext);\n  if (threadToNodes === null) {\n    throw new Error(\n      \"AnchoredThreads component must be used within a LiveblocksPlugin component.\"\n    );\n  }\n  return threadToNodes;\n}\n\nfunction useActiveThreads() {\n  const activeThreads = useContext(ActiveThreadsContext);\n  if (activeThreads === null) {\n    throw new Error(\n      \"AnchoredThreads component must be used within LiveblocksPlugin.\"\n    );\n  }\n\n  return activeThreads;\n}\n"],"names":["useLexicalComposerContext","DefaultThread","useRef","useCallback","elements","useMemo","useState","orderedThreads","useLayoutEffect","useEffect","useRootElement","jsx","classNames","$getNodeByKey","$isThreadMarkNode","useContext","ThreadToNodesContext","ActiveThreadsContext"],"mappings":"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"}
+{"version":3,"file":"anchored-threads.js","sources":["../../src/comments/anchored-threads.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { BaseMetadata, ThreadData } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { $getNodeByKey } from \"lexical\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport { useRootElement } from \"../use-root-element\";\nimport {\n  ActiveThreadsContext,\n  type ThreadToNodesMap,\n} from \"./comment-plugin-provider\";\nimport { ThreadToNodesContext } from \"./comment-plugin-provider\";\nimport { $isThreadMarkNode } from \"./thread-mark-node\";\n\nconst DEFAULT_GAP = 20;\nconst DEFAULT_ACTIVE_THREAD_OFFSET = -12;\n\nconst GAP = `var(--lb-lexical-anchored-threads-gap, ${DEFAULT_GAP}px)`;\nconst ACTIVE_THREAD_OFFSET = `var(--lb-lexical-anchored-threads-active-thread-offset, ${DEFAULT_ACTIVE_THREAD_OFFSET}px)`;\n\ntype AnchoredThreadsComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface AnchoredThreadsProps<M extends BaseMetadata = DM>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /**\n   * The threads to display.\n   */\n  threads: ThreadData<M>[];\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<AnchoredThreadsComponents>;\n}\n\n/**\n * Compares two nodes based on their position in the DOM.\n * Returns -1 if a comes before b, 1 if a comes after b, and 0 if they are the same node.\n * @param a The first node to compare\n * @param b The second node to compare\n * @returns -1 if a comes before b, 1 if a comes after b, and 0 if they are the same node.\n */\nexport function compareNodes(a: Node, b: Node): number {\n  // Calculate the position of node 'b' relative to node 'a'\n  const position = a.compareDocumentPosition(b);\n  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n  return 0;\n}\n\nexport function AnchoredThreads({\n  threads,\n  components,\n  className,\n  style,\n  ...props\n}: AnchoredThreadsProps) {\n  const [editor] = useLexicalComposerContext();\n  const Thread = components?.Thread ?? DefaultThread;\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const activeThreads = useActiveThreads();\n\n  const nodes = useThreadToNodes(); // A map of thread ids to a set of thread mark nodes associated with the thread\n\n  const getOrderedThreads = useCallback(() => {\n    return threads\n      .filter((thread) => thread.resolved === false)\n      .map((thread) => {\n        const keys = nodes.get(thread.id);\n        if (keys === undefined || keys.size === 0) return null;\n\n        const elements = Array.from(keys.values())\n          .map((key) => editor.getElementByKey(key))\n          .filter(Boolean) as HTMLElement[];\n        if (elements.length === 0) return null;\n\n        const element = elements.sort(compareNodes)[0];\n        return {\n          thread,\n          element,\n        };\n      })\n      .filter(\n        (entry): entry is { thread: ThreadData; element: HTMLElement } =>\n          entry !== null\n      )\n      .sort((a, b) => {\n        return compareNodes(a.element, b.element);\n      });\n  }, [editor, threads, nodes]);\n\n  // Sort threads by the position of the first element associated with the thread in the document (top to bottom, left to right)\n  const orderedThreads = useMemo(getOrderedThreads, [getOrderedThreads]);\n\n  const [elements, setElements] = useState<Map<string, HTMLElement>>(new Map());\n\n  const [positions, setPositions] = useState<Map<string, number>>(new Map()); // A map of thread ids to their 'top' position in the document\n\n  const onItemAdd = useCallback((id: string, el: HTMLElement) => {\n    setElements((prev) => new Map(prev).set(id, el));\n  }, []);\n\n  const onItemRemove = useCallback((id: string) => {\n    setElements((prev) => {\n      const items = new Map(prev);\n      items.delete(id);\n      return items;\n    });\n  }, []);\n\n  const handlePositionThreads = useCallback(() => {\n    const container = containerRef.current;\n    if (container === null) return;\n\n    const orderedThreads = getOrderedThreads();\n\n    // Returns an array of threads that should be positioned in ascending order - this includes threads that are active and threads that should come after the active threads\n    function getAscendingThreads() {\n      // If there are no active threads, all threads are ordered in ascending manner.\n      if (activeThreads.length === 0) return orderedThreads;\n\n      // Filter threads that are active\n      const active = orderedThreads.filter(({ thread }) =>\n        activeThreads.includes(thread.id)\n      );\n\n      // Filter threads that should come after the active threads\n      const after = orderedThreads.filter(({ thread, element }) => {\n        if (activeThreads.includes(thread.id)) return false;\n\n        // Check if the current thread comes after any of the active threads\n        const isAfter = active.some(({ element: activeElement }) => {\n          return compareNodes(activeElement, element) === -1;\n        });\n\n        return isAfter;\n      });\n\n      return active.concat(after);\n    }\n\n    const ascending = getAscendingThreads();\n\n    // Filter threads that are neither active nor come after active threads (i.e. 'other' threads)\n    const descending = orderedThreads.filter(\n      (entry) => !ascending.includes(entry)\n    );\n\n    const newPositions = new Map<string, number>();\n\n    // Iterate over each thread and calculate its new position by taking into account the position of the previously positioned threads\n    for (const { thread, element } of ascending) {\n      const rect = element.getBoundingClientRect();\n      let top = rect.top - container.getBoundingClientRect().top;\n\n      for (const [id, position] of newPositions) {\n        // Retrieve the element associated with the thread\n        const el = elements.get(id);\n        if (el === undefined) continue;\n\n        if (\n          top >= position &&\n          top <= position + el.getBoundingClientRect().height\n        ) {\n          top = position + el.getBoundingClientRect().height;\n        }\n      }\n\n      newPositions.set(thread.id, top);\n    }\n\n    for (const { thread, element } of descending.reverse()) {\n      const rect = element.getBoundingClientRect();\n      // Retrieve the element associated with the current thread\n      const el = elements.get(thread.id);\n      if (el === undefined) continue;\n\n      let top = rect.top - container.getBoundingClientRect().top;\n      for (const [, position] of newPositions) {\n        if (top >= position - el.getBoundingClientRect().height) {\n          top = position - el.getBoundingClientRect().height;\n        }\n      }\n\n      newPositions.set(thread.id, top);\n    }\n\n    setPositions(newPositions);\n  }, [getOrderedThreads, activeThreads, elements]);\n\n  useLayoutEffect(() => {\n    handlePositionThreads();\n  }, [handlePositionThreads]);\n\n  useEffect(() => {\n    return editor.registerUpdateListener(() => {\n      handlePositionThreads();\n    });\n  }, [editor, handlePositionThreads]);\n\n  useEffect(() => {\n    const observer = new ResizeObserver(handlePositionThreads);\n    for (const element of elements.values()) {\n      observer.observe(element);\n    }\n\n    return () => observer.disconnect();\n  }, [elements, handlePositionThreads]);\n\n  const root = useRootElement();\n\n  useEffect(() => {\n    if (root === null) return;\n    const observer = new ResizeObserver(handlePositionThreads);\n\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, [root, handlePositionThreads]);\n\n  if (orderedThreads.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, \"lb-root lb-lexical-anchored-threads\")}\n      ref={containerRef}\n      style={{\n        position: \"relative\",\n        ...style,\n      }}\n    >\n      {orderedThreads.map(({ thread, element }) => {\n        const rect = element.getBoundingClientRect();\n        const offset = root !== null ? root.getBoundingClientRect().top : 0;\n\n        let top = rect.top - offset;\n\n        if (positions.has(thread.id)) {\n          top = positions.get(thread.id)!;\n        }\n\n        const isActive = activeThreads.includes(thread.id);\n\n        return (\n          <ThreadWrapper\n            key={thread.id}\n            Thread={Thread}\n            thread={thread}\n            onItemAdd={onItemAdd}\n            onItemRemove={onItemRemove}\n            style={{\n              position: \"absolute\",\n              transform: `translate3d(${isActive ? ACTIVE_THREAD_OFFSET : 0}, ${top}px, 0)`,\n              insetInlineStart: 0,\n              inlineSize: \"100%\",\n              paddingBlockEnd: GAP,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  Thread: ComponentType<ThreadProps>;\n  onItemAdd: (id: string, el: HTMLElement) => void;\n  onItemRemove: (id: string) => void;\n}\n\nfunction ThreadWrapper({\n  onItemAdd,\n  onItemRemove,\n  thread,\n  Thread,\n  className,\n  ...props\n}: ThreadWrapperProps) {\n  const [editor] = useLexicalComposerContext();\n  const nodes = useThreadToNodes();\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const activeThreads = useActiveThreads();\n\n  const isActive = activeThreads.includes(thread.id);\n\n  function handleThreadClick() {\n    const keys = nodes.get(thread.id);\n    if (keys === undefined || keys.size === 0) return;\n\n    if (activeThreads.includes(thread.id)) return;\n\n    editor.update(() => {\n      const [key] = keys;\n      const node = $getNodeByKey(key);\n      if (!$isThreadMarkNode(node)) return;\n      node.selectStart();\n    });\n  }\n\n  useLayoutEffect(() => {\n    const el = divRef.current;\n    if (el === null) return;\n\n    onItemAdd(thread.id, el);\n    return () => {\n      onItemRemove(thread.id);\n    };\n  }, [thread.id, onItemAdd, onItemRemove]);\n\n  return (\n    <div\n      ref={divRef}\n      className={classNames(\n        \"lb-lexical-anchored-threads-thread-container\",\n        className\n      )}\n      {...props}\n    >\n      <Thread\n        thread={thread}\n        data-state={isActive ? \"active\" : \"inactive\"}\n        onClick={handleThreadClick}\n        className=\"lb-lexical-anchored-threads-thread\"\n        showComposer={isActive ? true : false}\n      />\n    </div>\n  );\n}\n\nfunction useThreadToNodes(): ThreadToNodesMap {\n  const threadToNodes = useContext(ThreadToNodesContext);\n  if (threadToNodes === null) {\n    throw new Error(\n      \"AnchoredThreads component must be used within a LiveblocksPlugin component.\"\n    );\n  }\n  return threadToNodes;\n}\n\nfunction useActiveThreads() {\n  const activeThreads = useContext(ActiveThreadsContext);\n  if (activeThreads === null) {\n    throw new Error(\n      \"AnchoredThreads component must be used within LiveblocksPlugin.\"\n    );\n  }\n\n  return activeThreads;\n}\n"],"names":["useLexicalComposerContext","DefaultThread","useRef","useCallback","elements","useMemo","useState","orderedThreads","useLayoutEffect","useEffect","useRootElement","jsx","classNames","$getNodeByKey","$isThreadMarkNode","useContext","ThreadToNodesContext","ActiveThreadsContext"],"mappings":"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"}

package/dist/comments/anchored-threads.mjs

@@ -5,7 +5,7 @@ import { Thread } from '@liveblocks/react-ui';
 import { $getNodeByKey } from 'lexical';
 import { useRef, useCallback, useMemo, useState, useEffect, useContext } from 'react';
 import { classNames } from '../classnames.mjs';
-import { useRootElement } from '../liveblocks-plugin-provider.mjs';
+import { useRootElement } from '../use-root-element.mjs';
 import { ThreadToNodesContext, ActiveThreadsContext } from './comment-plugin-provider.mjs';
 import { $isThreadMarkNode } from './thread-mark-node.mjs';
 

package/dist/comments/anchored-threads.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"anchored-threads.mjs","sources":["../../src/comments/anchored-threads.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { BaseMetadata, DM, ThreadData } from \"@liveblocks/core\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { $getNodeByKey } from \"lexical\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport { useRootElement } from \"../liveblocks-plugin-provider\";\nimport {\n  ActiveThreadsContext,\n  type ThreadToNodesMap,\n} from \"./comment-plugin-provider\";\nimport { ThreadToNodesContext } from \"./comment-plugin-provider\";\nimport { $isThreadMarkNode } from \"./thread-mark-node\";\n\nconst DEFAULT_GAP = 20;\nconst DEFAULT_ACTIVE_THREAD_OFFSET = -12;\n\nconst GAP = `var(--lb-lexical-anchored-threads-gap, ${DEFAULT_GAP}px)`;\nconst ACTIVE_THREAD_OFFSET = `var(--lb-lexical-anchored-threads-active-thread-offset, ${DEFAULT_ACTIVE_THREAD_OFFSET}px)`;\n\ntype AnchoredThreadsComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface AnchoredThreadsProps<M extends BaseMetadata = DM>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /**\n   * The threads to display.\n   */\n  threads: ThreadData<M>[];\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<AnchoredThreadsComponents>;\n}\n\n/**\n * Compares two nodes based on their position in the DOM.\n * Returns -1 if a comes before b, 1 if a comes after b, and 0 if they are the same node.\n * @param a The first node to compare\n * @param b The second node to compare\n * @returns -1 if a comes before b, 1 if a comes after b, and 0 if they are the same node.\n */\nexport function compareNodes(a: Node, b: Node): number {\n  // Calculate the position of node 'b' relative to node 'a'\n  const position = a.compareDocumentPosition(b);\n  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n  return 0;\n}\n\nexport function AnchoredThreads({\n  threads,\n  components,\n  className,\n  style,\n  ...props\n}: AnchoredThreadsProps) {\n  const [editor] = useLexicalComposerContext();\n  const Thread = components?.Thread ?? DefaultThread;\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const activeThreads = useActiveThreads();\n\n  const nodes = useThreadToNodes(); // A map of thread ids to a set of thread mark nodes associated with the thread\n\n  const getOrderedThreads = useCallback(() => {\n    return threads\n      .filter((thread) => thread.resolved === false)\n      .map((thread) => {\n        const keys = nodes.get(thread.id);\n        if (keys === undefined || keys.size === 0) return null;\n\n        const elements = Array.from(keys.values())\n          .map((key) => editor.getElementByKey(key))\n          .filter(Boolean) as HTMLElement[];\n        if (elements.length === 0) return null;\n\n        const element = elements.sort(compareNodes)[0];\n        return {\n          thread,\n          element,\n        };\n      })\n      .filter(\n        (entry): entry is { thread: ThreadData; element: HTMLElement } =>\n          entry !== null\n      )\n      .sort((a, b) => {\n        return compareNodes(a.element, b.element);\n      });\n  }, [editor, threads, nodes]);\n\n  // Sort threads by the position of the first element associated with the thread in the document (top to bottom, left to right)\n  const orderedThreads = useMemo(getOrderedThreads, [getOrderedThreads]);\n\n  const [elements, setElements] = useState<Map<string, HTMLElement>>(new Map());\n\n  const [positions, setPositions] = useState<Map<string, number>>(new Map()); // A map of thread ids to their 'top' position in the document\n\n  const onItemAdd = useCallback((id: string, el: HTMLElement) => {\n    setElements((prev) => new Map(prev).set(id, el));\n  }, []);\n\n  const onItemRemove = useCallback((id: string) => {\n    setElements((prev) => {\n      const items = new Map(prev);\n      items.delete(id);\n      return items;\n    });\n  }, []);\n\n  const handlePositionThreads = useCallback(() => {\n    const container = containerRef.current;\n    if (container === null) return;\n\n    const orderedThreads = getOrderedThreads();\n\n    // Returns an array of threads that should be positioned in ascending order - this includes threads that are active and threads that should come after the active threads\n    function getAscendingThreads() {\n      // If there are no active threads, all threads are ordered in ascending manner.\n      if (activeThreads.length === 0) return orderedThreads;\n\n      // Filter threads that are active\n      const active = orderedThreads.filter(({ thread }) =>\n        activeThreads.includes(thread.id)\n      );\n\n      // Filter threads that should come after the active threads\n      const after = orderedThreads.filter(({ thread, element }) => {\n        if (activeThreads.includes(thread.id)) return false;\n\n        // Check if the current thread comes after any of the active threads\n        const isAfter = active.some(({ element: activeElement }) => {\n          return compareNodes(activeElement, element) === -1;\n        });\n\n        return isAfter;\n      });\n\n      return active.concat(after);\n    }\n\n    const ascending = getAscendingThreads();\n\n    // Filter threads that are neither active nor come after active threads (i.e. 'other' threads)\n    const descending = orderedThreads.filter(\n      (entry) => !ascending.includes(entry)\n    );\n\n    const newPositions = new Map<string, number>();\n\n    // Iterate over each thread and calculate its new position by taking into account the position of the previously positioned threads\n    for (const { thread, element } of ascending) {\n      const rect = element.getBoundingClientRect();\n      let top = rect.top - container.getBoundingClientRect().top;\n\n      for (const [id, position] of newPositions) {\n        // Retrieve the element associated with the thread\n        const el = elements.get(id);\n        if (el === undefined) continue;\n\n        if (\n          top >= position &&\n          top <= position + el.getBoundingClientRect().height\n        ) {\n          top = position + el.getBoundingClientRect().height;\n        }\n      }\n\n      newPositions.set(thread.id, top);\n    }\n\n    for (const { thread, element } of descending.reverse()) {\n      const rect = element.getBoundingClientRect();\n      // Retrieve the element associated with the current thread\n      const el = elements.get(thread.id);\n      if (el === undefined) continue;\n\n      let top = rect.top - container.getBoundingClientRect().top;\n      for (const [, position] of newPositions) {\n        if (top >= position - el.getBoundingClientRect().height) {\n          top = position - el.getBoundingClientRect().height;\n        }\n      }\n\n      newPositions.set(thread.id, top);\n    }\n\n    setPositions(newPositions);\n  }, [getOrderedThreads, activeThreads, elements]);\n\n  useLayoutEffect(() => {\n    handlePositionThreads();\n  }, [handlePositionThreads]);\n\n  useEffect(() => {\n    return editor.registerUpdateListener(() => {\n      handlePositionThreads();\n    });\n  }, [editor, handlePositionThreads]);\n\n  useEffect(() => {\n    const observer = new ResizeObserver(handlePositionThreads);\n    for (const element of elements.values()) {\n      observer.observe(element);\n    }\n\n    return () => observer.disconnect();\n  }, [elements, handlePositionThreads]);\n\n  const root = useRootElement();\n\n  useEffect(() => {\n    if (root === null) return;\n    const observer = new ResizeObserver(handlePositionThreads);\n\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, [root, handlePositionThreads]);\n\n  if (orderedThreads.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, \"lb-root lb-lexical-anchored-threads\")}\n      ref={containerRef}\n      style={{\n        position: \"relative\",\n        ...style,\n      }}\n    >\n      {orderedThreads.map(({ thread, element }) => {\n        const rect = element.getBoundingClientRect();\n        const offset = root !== null ? root.getBoundingClientRect().top : 0;\n\n        let top = rect.top - offset;\n\n        if (positions.has(thread.id)) {\n          top = positions.get(thread.id)!;\n        }\n\n        const isActive = activeThreads.includes(thread.id);\n\n        return (\n          <ThreadWrapper\n            key={thread.id}\n            Thread={Thread}\n            thread={thread}\n            onItemAdd={onItemAdd}\n            onItemRemove={onItemRemove}\n            style={{\n              position: \"absolute\",\n              transform: `translate3d(${isActive ? ACTIVE_THREAD_OFFSET : 0}, ${top}px, 0)`,\n              insetInlineStart: 0,\n              inlineSize: \"100%\",\n              paddingBlockEnd: GAP,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  Thread: ComponentType<ThreadProps>;\n  onItemAdd: (id: string, el: HTMLElement) => void;\n  onItemRemove: (id: string) => void;\n}\n\nfunction ThreadWrapper({\n  onItemAdd,\n  onItemRemove,\n  thread,\n  Thread,\n  className,\n  ...props\n}: ThreadWrapperProps) {\n  const [editor] = useLexicalComposerContext();\n  const nodes = useThreadToNodes();\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const activeThreads = useActiveThreads();\n\n  const isActive = activeThreads.includes(thread.id);\n\n  function handleThreadClick() {\n    const keys = nodes.get(thread.id);\n    if (keys === undefined || keys.size === 0) return;\n\n    if (activeThreads.includes(thread.id)) return;\n\n    editor.update(() => {\n      const [key] = keys;\n      const node = $getNodeByKey(key);\n      if (!$isThreadMarkNode(node)) return;\n      node.selectStart();\n    });\n  }\n\n  useLayoutEffect(() => {\n    const el = divRef.current;\n    if (el === null) return;\n\n    onItemAdd(thread.id, el);\n    return () => {\n      onItemRemove(thread.id);\n    };\n  }, [thread.id, onItemAdd, onItemRemove]);\n\n  return (\n    <div\n      ref={divRef}\n      className={classNames(\n        \"lb-lexical-anchored-threads-thread-container\",\n        className\n      )}\n      {...props}\n    >\n      <Thread\n        thread={thread}\n        data-state={isActive ? \"active\" : \"inactive\"}\n        onClick={handleThreadClick}\n        className=\"lb-lexical-anchored-threads-thread\"\n        showComposer={isActive ? true : false}\n      />\n    </div>\n  );\n}\n\nfunction useThreadToNodes(): ThreadToNodesMap {\n  const threadToNodes = useContext(ThreadToNodesContext);\n  if (threadToNodes === null) {\n    throw new Error(\n      \"AnchoredThreads component must be used within a LiveblocksPlugin component.\"\n    );\n  }\n  return threadToNodes;\n}\n\nfunction useActiveThreads() {\n  const activeThreads = useContext(ActiveThreadsContext);\n  if (activeThreads === null) {\n    throw new Error(\n      \"AnchoredThreads component must be used within LiveblocksPlugin.\"\n    );\n  }\n\n  return activeThreads;\n}\n"],"names":["Thread","DefaultThread","elements","orderedThreads"],"mappings":"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"}
+{"version":3,"file":"anchored-threads.mjs","sources":["../../src/comments/anchored-threads.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { BaseMetadata, ThreadData } from \"@liveblocks/client\";\nimport type { DM } from \"@liveblocks/core\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { $getNodeByKey } from \"lexical\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport { useRootElement } from \"../use-root-element\";\nimport {\n  ActiveThreadsContext,\n  type ThreadToNodesMap,\n} from \"./comment-plugin-provider\";\nimport { ThreadToNodesContext } from \"./comment-plugin-provider\";\nimport { $isThreadMarkNode } from \"./thread-mark-node\";\n\nconst DEFAULT_GAP = 20;\nconst DEFAULT_ACTIVE_THREAD_OFFSET = -12;\n\nconst GAP = `var(--lb-lexical-anchored-threads-gap, ${DEFAULT_GAP}px)`;\nconst ACTIVE_THREAD_OFFSET = `var(--lb-lexical-anchored-threads-active-thread-offset, ${DEFAULT_ACTIVE_THREAD_OFFSET}px)`;\n\ntype AnchoredThreadsComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface AnchoredThreadsProps<M extends BaseMetadata = DM>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /**\n   * The threads to display.\n   */\n  threads: ThreadData<M>[];\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<AnchoredThreadsComponents>;\n}\n\n/**\n * Compares two nodes based on their position in the DOM.\n * Returns -1 if a comes before b, 1 if a comes after b, and 0 if they are the same node.\n * @param a The first node to compare\n * @param b The second node to compare\n * @returns -1 if a comes before b, 1 if a comes after b, and 0 if they are the same node.\n */\nexport function compareNodes(a: Node, b: Node): number {\n  // Calculate the position of node 'b' relative to node 'a'\n  const position = a.compareDocumentPosition(b);\n  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n  return 0;\n}\n\nexport function AnchoredThreads({\n  threads,\n  components,\n  className,\n  style,\n  ...props\n}: AnchoredThreadsProps) {\n  const [editor] = useLexicalComposerContext();\n  const Thread = components?.Thread ?? DefaultThread;\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const activeThreads = useActiveThreads();\n\n  const nodes = useThreadToNodes(); // A map of thread ids to a set of thread mark nodes associated with the thread\n\n  const getOrderedThreads = useCallback(() => {\n    return threads\n      .filter((thread) => thread.resolved === false)\n      .map((thread) => {\n        const keys = nodes.get(thread.id);\n        if (keys === undefined || keys.size === 0) return null;\n\n        const elements = Array.from(keys.values())\n          .map((key) => editor.getElementByKey(key))\n          .filter(Boolean) as HTMLElement[];\n        if (elements.length === 0) return null;\n\n        const element = elements.sort(compareNodes)[0];\n        return {\n          thread,\n          element,\n        };\n      })\n      .filter(\n        (entry): entry is { thread: ThreadData; element: HTMLElement } =>\n          entry !== null\n      )\n      .sort((a, b) => {\n        return compareNodes(a.element, b.element);\n      });\n  }, [editor, threads, nodes]);\n\n  // Sort threads by the position of the first element associated with the thread in the document (top to bottom, left to right)\n  const orderedThreads = useMemo(getOrderedThreads, [getOrderedThreads]);\n\n  const [elements, setElements] = useState<Map<string, HTMLElement>>(new Map());\n\n  const [positions, setPositions] = useState<Map<string, number>>(new Map()); // A map of thread ids to their 'top' position in the document\n\n  const onItemAdd = useCallback((id: string, el: HTMLElement) => {\n    setElements((prev) => new Map(prev).set(id, el));\n  }, []);\n\n  const onItemRemove = useCallback((id: string) => {\n    setElements((prev) => {\n      const items = new Map(prev);\n      items.delete(id);\n      return items;\n    });\n  }, []);\n\n  const handlePositionThreads = useCallback(() => {\n    const container = containerRef.current;\n    if (container === null) return;\n\n    const orderedThreads = getOrderedThreads();\n\n    // Returns an array of threads that should be positioned in ascending order - this includes threads that are active and threads that should come after the active threads\n    function getAscendingThreads() {\n      // If there are no active threads, all threads are ordered in ascending manner.\n      if (activeThreads.length === 0) return orderedThreads;\n\n      // Filter threads that are active\n      const active = orderedThreads.filter(({ thread }) =>\n        activeThreads.includes(thread.id)\n      );\n\n      // Filter threads that should come after the active threads\n      const after = orderedThreads.filter(({ thread, element }) => {\n        if (activeThreads.includes(thread.id)) return false;\n\n        // Check if the current thread comes after any of the active threads\n        const isAfter = active.some(({ element: activeElement }) => {\n          return compareNodes(activeElement, element) === -1;\n        });\n\n        return isAfter;\n      });\n\n      return active.concat(after);\n    }\n\n    const ascending = getAscendingThreads();\n\n    // Filter threads that are neither active nor come after active threads (i.e. 'other' threads)\n    const descending = orderedThreads.filter(\n      (entry) => !ascending.includes(entry)\n    );\n\n    const newPositions = new Map<string, number>();\n\n    // Iterate over each thread and calculate its new position by taking into account the position of the previously positioned threads\n    for (const { thread, element } of ascending) {\n      const rect = element.getBoundingClientRect();\n      let top = rect.top - container.getBoundingClientRect().top;\n\n      for (const [id, position] of newPositions) {\n        // Retrieve the element associated with the thread\n        const el = elements.get(id);\n        if (el === undefined) continue;\n\n        if (\n          top >= position &&\n          top <= position + el.getBoundingClientRect().height\n        ) {\n          top = position + el.getBoundingClientRect().height;\n        }\n      }\n\n      newPositions.set(thread.id, top);\n    }\n\n    for (const { thread, element } of descending.reverse()) {\n      const rect = element.getBoundingClientRect();\n      // Retrieve the element associated with the current thread\n      const el = elements.get(thread.id);\n      if (el === undefined) continue;\n\n      let top = rect.top - container.getBoundingClientRect().top;\n      for (const [, position] of newPositions) {\n        if (top >= position - el.getBoundingClientRect().height) {\n          top = position - el.getBoundingClientRect().height;\n        }\n      }\n\n      newPositions.set(thread.id, top);\n    }\n\n    setPositions(newPositions);\n  }, [getOrderedThreads, activeThreads, elements]);\n\n  useLayoutEffect(() => {\n    handlePositionThreads();\n  }, [handlePositionThreads]);\n\n  useEffect(() => {\n    return editor.registerUpdateListener(() => {\n      handlePositionThreads();\n    });\n  }, [editor, handlePositionThreads]);\n\n  useEffect(() => {\n    const observer = new ResizeObserver(handlePositionThreads);\n    for (const element of elements.values()) {\n      observer.observe(element);\n    }\n\n    return () => observer.disconnect();\n  }, [elements, handlePositionThreads]);\n\n  const root = useRootElement();\n\n  useEffect(() => {\n    if (root === null) return;\n    const observer = new ResizeObserver(handlePositionThreads);\n\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, [root, handlePositionThreads]);\n\n  if (orderedThreads.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, \"lb-root lb-lexical-anchored-threads\")}\n      ref={containerRef}\n      style={{\n        position: \"relative\",\n        ...style,\n      }}\n    >\n      {orderedThreads.map(({ thread, element }) => {\n        const rect = element.getBoundingClientRect();\n        const offset = root !== null ? root.getBoundingClientRect().top : 0;\n\n        let top = rect.top - offset;\n\n        if (positions.has(thread.id)) {\n          top = positions.get(thread.id)!;\n        }\n\n        const isActive = activeThreads.includes(thread.id);\n\n        return (\n          <ThreadWrapper\n            key={thread.id}\n            Thread={Thread}\n            thread={thread}\n            onItemAdd={onItemAdd}\n            onItemRemove={onItemRemove}\n            style={{\n              position: \"absolute\",\n              transform: `translate3d(${isActive ? ACTIVE_THREAD_OFFSET : 0}, ${top}px, 0)`,\n              insetInlineStart: 0,\n              inlineSize: \"100%\",\n              paddingBlockEnd: GAP,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  Thread: ComponentType<ThreadProps>;\n  onItemAdd: (id: string, el: HTMLElement) => void;\n  onItemRemove: (id: string) => void;\n}\n\nfunction ThreadWrapper({\n  onItemAdd,\n  onItemRemove,\n  thread,\n  Thread,\n  className,\n  ...props\n}: ThreadWrapperProps) {\n  const [editor] = useLexicalComposerContext();\n  const nodes = useThreadToNodes();\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const activeThreads = useActiveThreads();\n\n  const isActive = activeThreads.includes(thread.id);\n\n  function handleThreadClick() {\n    const keys = nodes.get(thread.id);\n    if (keys === undefined || keys.size === 0) return;\n\n    if (activeThreads.includes(thread.id)) return;\n\n    editor.update(() => {\n      const [key] = keys;\n      const node = $getNodeByKey(key);\n      if (!$isThreadMarkNode(node)) return;\n      node.selectStart();\n    });\n  }\n\n  useLayoutEffect(() => {\n    const el = divRef.current;\n    if (el === null) return;\n\n    onItemAdd(thread.id, el);\n    return () => {\n      onItemRemove(thread.id);\n    };\n  }, [thread.id, onItemAdd, onItemRemove]);\n\n  return (\n    <div\n      ref={divRef}\n      className={classNames(\n        \"lb-lexical-anchored-threads-thread-container\",\n        className\n      )}\n      {...props}\n    >\n      <Thread\n        thread={thread}\n        data-state={isActive ? \"active\" : \"inactive\"}\n        onClick={handleThreadClick}\n        className=\"lb-lexical-anchored-threads-thread\"\n        showComposer={isActive ? true : false}\n      />\n    </div>\n  );\n}\n\nfunction useThreadToNodes(): ThreadToNodesMap {\n  const threadToNodes = useContext(ThreadToNodesContext);\n  if (threadToNodes === null) {\n    throw new Error(\n      \"AnchoredThreads component must be used within a LiveblocksPlugin component.\"\n    );\n  }\n  return threadToNodes;\n}\n\nfunction useActiveThreads() {\n  const activeThreads = useContext(ActiveThreadsContext);\n  if (activeThreads === null) {\n    throw new Error(\n      \"AnchoredThreads component must be used within LiveblocksPlugin.\"\n    );\n  }\n\n  return activeThreads;\n}\n"],"names":["Thread","DefaultThread","elements","orderedThreads"],"mappings":"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"}

package/dist/comments/comment-plugin-provider.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var utils = require('@lexical/utils');
-var core = require('@liveblocks/core');
+var client = require('@liveblocks/client');
 var react$1 = require('@liveblocks/react');
 var _private = require('@liveblocks/react/_private');
 var lexical = require('lexical');
@@ -24,7 +24,7 @@ function CommentPluginProvider({ children }) {
     /* @__PURE__ */ new Map()
   );
   const [activeThreads, setActiveThreads] = react.useState([]);
-  const client = react$1.useClient();
+  const client$1 = react$1.useClient();
   const room = react$1.useRoom();
   const isThreadActive = react.useCallback(
     (threadId) => {
@@ -51,12 +51,12 @@ function CommentPluginProvider({ children }) {
     },
     [editor, threadToNodes]
   );
-  react$1.useCommentsErrorListener((error) => {
-    if (error instanceof _private.CreateThreadError) {
-      handleThreadDelete(error.context.threadId);
+  react$1.useErrorListener((err) => {
+    if (err.context.type === "CREATE_THREAD_ERROR" && err.context.roomId === room.id) {
+      handleThreadDelete(err.context.threadId);
     }
   });
-  const store = _private.getUmbrellaStoreForClient(client);
+  const store = _private.getUmbrellaStoreForClient(client$1);
   const roomId = room.id;
   const threadIds = _private.useSignal(
     store.outputs.threads,
@@ -64,7 +64,7 @@ function CommentPluginProvider({ children }) {
       (state) => state.findMany(roomId, { resolved: false }, "asc").map((thread) => thread.id),
       [roomId]
     ),
-    core.shallow
+    client.shallow
   );
   react.useEffect(() => {
     function getThreadMarkElements() {
@@ -156,7 +156,7 @@ function CommentPluginProvider({ children }) {
       unregisterUpdateListener();
       unsubscribeCache();
     };
-  }, [editor, client, roomId, store]);
+  }, [editor, client$1, roomId, store]);
   react.useEffect(() => {
     function getActiveElements() {
       const activeElements2 = /* @__PURE__ */ new Set();

package/dist/comments/comment-plugin-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"comment-plugin-provider.js","sources":["../../src/comments/comment-plugin-provider.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n  addClassNamesToElement,\n  registerNestedElementResolver,\n  removeClassNamesFromElement,\n} from \"@lexical/utils\";\nimport { shallow } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCommentsErrorListener,\n  useRoom,\n} from \"@liveblocks/react\";\nimport {\n  CreateThreadError,\n  getUmbrellaStoreForClient,\n  useSignal,\n} from \"@liveblocks/react/_private\";\nimport type { BaseSelection, NodeKey, NodeMutation } from \"lexical\";\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isRangeSelection,\n  $isTextNode,\n} from \"lexical\";\nimport type { PropsWithChildren } from \"react\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport $getThreadMarkIds from \"./get-thread-mark-ids\";\nimport {\n  $createThreadMarkNode,\n  $isThreadMarkNode,\n  ThreadMarkNode,\n} from \"./thread-mark-node\";\nimport $unwrapThreadMarkNode from \"./unwrap-thread-mark-node\";\n\nexport const OnDeleteThreadCallback = createContext<\n  ((threadId: string) => void) | null\n>(null);\n\nexport const ActiveThreadsContext = createContext<string[] | null>(null);\n\nexport const IsActiveThreadContext = createContext<\n  ((threadId: string) => boolean) | null\n>(null);\n\nexport type ThreadToNodesMap = Map<string, Set<NodeKey>>;\n\nexport const ThreadToNodesContext = createContext<ThreadToNodesMap | null>(\n  null\n);\n\nexport function CommentPluginProvider({ children }: PropsWithChildren) {\n  const [editor, context] = useLexicalComposerContext();\n\n  const [threadToNodes, setThreadToNodes] = useState<ThreadToNodesMap>(\n    new Map()\n  ); // A map from thread id to a set of (thread mark) node keys that are associated with the thread\n\n  const [activeThreads, setActiveThreads] = useState<string[]>([]); // The threads that are currently active (or selected) in the editor\n\n  const client = useClient();\n\n  const room = useRoom();\n\n  const isThreadActive = useCallback(\n    (threadId: string) => {\n      return activeThreads.includes(threadId);\n    },\n    [activeThreads]\n  );\n\n  /**\n   * Remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads.\n   * @param threadId The id of the thread to remove\n   */\n  const handleThreadDelete = useCallback(\n    (threadId: string) => {\n      editor.update(() => {\n        // Retrieve node keys associated with the thread\n        const keys = threadToNodes.get(threadId);\n        if (keys === undefined) return;\n\n        // Iterate over each thread node and disassociate the thread if from the node and unwrap the node if it is no longer associated with any threads\n        for (const key of keys) {\n          const node = $getNodeByKey(key);\n          if (!$isThreadMarkNode(node)) continue;\n          node.deleteID(threadId);\n\n          if (node.getIDs().length === 0) {\n            $unwrapThreadMarkNode(node);\n          }\n        }\n      });\n    },\n    [editor, threadToNodes]\n  );\n\n  useCommentsErrorListener((error) => {\n    // If thread creation fails, we remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads\n    if (error instanceof CreateThreadError) {\n      handleThreadDelete(error.context.threadId);\n    }\n  });\n\n  const store = getUmbrellaStoreForClient(client);\n\n  const roomId = room.id;\n  const threadIds = useSignal(\n    store.outputs.threads,\n    useCallback(\n      (state) =>\n        state\n          .findMany(roomId, { resolved: false }, \"asc\")\n          .map((thread) => thread.id),\n      [roomId]\n    ),\n    shallow\n  );\n\n  /**\n   * Only add styles to the thread mark elements that currently have threads associated with them.\n   */\n  useEffect(() => {\n    function getThreadMarkElements() {\n      const activeElements = new Set<HTMLElement>();\n\n      for (const id of threadIds) {\n        const keys = threadToNodes.get(id);\n        if (keys === undefined) continue;\n\n        for (const key of keys) {\n          const element = editor.getElementByKey(key);\n          if (element === null) continue;\n          activeElements.add(element);\n        }\n      }\n      return activeElements;\n    }\n\n    const elements = getThreadMarkElements();\n\n    const theme = context.getTheme();\n\n    const classNames = [\"lb-root\", \"lb-lexical-thread-mark\"];\n    if (theme && theme.liveblocks && \"threadMark\" in theme.liveblocks) {\n      classNames.push((theme.liveblocks as { threadMark: string }).threadMark);\n    }\n\n    elements.forEach((element) => {\n      addClassNamesToElement(element, ...classNames);\n    });\n\n    return () => {\n      elements.forEach((element) => {\n        removeClassNamesFromElement(element, ...classNames);\n      });\n    };\n  }, [context, editor, threadToNodes, threadIds]);\n\n  /**\n   * Register a mutation listener that listens for mutations on 'ThreadMarkNode's and updates the map of thread to node keys accordingly.\n   */\n  useEffect(() => {\n    function onMutation(mutations: Map<string, NodeMutation>) {\n      const state = editor.getEditorState();\n      setThreadToNodes((prev) => {\n        const updatedMap = new Map(prev);\n        state.read(() => {\n          for (const [key, mutation] of mutations) {\n            // If the node is destroyed, we remove its key from the map of thread to node keys\n            if (mutation === \"destroyed\") {\n              for (const [, nodes] of updatedMap) {\n                nodes.delete(key);\n              }\n            }\n            // Otherwise, if a new node is created or an existing node is updated, we update the map of thread to node keys to include the new/updated node\n            else if (mutation === \"created\" || mutation === \"updated\") {\n              const node = $getNodeByKey(key);\n              if (!$isThreadMarkNode(node)) continue;\n\n              const threadIds = node.getIDs();\n\n              for (const id of threadIds) {\n                const keys = updatedMap.get(id) ?? new Set();\n                keys.add(key);\n                updatedMap.set(id, keys);\n              }\n            }\n          }\n        });\n        return updatedMap;\n      });\n    }\n\n    return editor.registerMutationListener(ThreadMarkNode, onMutation);\n  }, [editor]);\n\n  /**\n   * Register an update listener that listens for changes in the selection and updates the active threads accordingly.\n   */\n  useEffect(() => {\n    function $getThreadIds(selection: BaseSelection | null): string[] {\n      if (selection === null) return [];\n\n      if (!$isRangeSelection(selection)) return [];\n\n      const anchor = selection.anchor.getNode();\n      if (!$isTextNode(anchor)) return [];\n\n      return $getThreadMarkIds(anchor, selection.anchor.offset) ?? [];\n    }\n\n    function $onStateRead() {\n      const selection = $getSelection();\n\n      const threadIds = $getThreadIds(selection).filter((id) => {\n        return store.outputs.threads\n          .get()\n          .findMany(roomId, { resolved: false }, \"asc\")\n          .some((thread) => thread.id === id);\n      });\n      setActiveThreads(threadIds);\n    }\n\n    const unsubscribeCache = store.outputs.threads.subscribe(() => {\n      editor.getEditorState().read($onStateRead);\n    });\n\n    const unregisterUpdateListener = editor.registerUpdateListener(\n      ({ editorState: state }) => {\n        state.read($onStateRead);\n      }\n    );\n\n    return () => {\n      unregisterUpdateListener();\n      unsubscribeCache();\n    };\n  }, [editor, client, roomId, store]);\n\n  /**\n   * When active threads change, we add a data-state attribute and set it to \"active\" for all HTML elements that are associated with the active threads.\n   */\n  useEffect(() => {\n    function getActiveElements() {\n      const activeElements = new Set<HTMLElement>();\n\n      for (const thread of activeThreads) {\n        const keys = threadToNodes.get(thread);\n        if (keys === undefined) continue;\n\n        for (const key of keys) {\n          const element = editor.getElementByKey(key);\n          if (element === null) continue;\n          activeElements.add(element);\n        }\n      }\n      return activeElements;\n    }\n\n    const activeElements = getActiveElements();\n\n    activeElements.forEach((element) => {\n      element.setAttribute(\"data-state\", \"active\");\n    });\n\n    return () => {\n      activeElements.forEach((element) => {\n        element.removeAttribute(\"data-state\");\n      });\n    };\n  }, [activeThreads, editor, threadToNodes]);\n\n  useEffect(() => {\n    return registerNestedElementResolver<ThreadMarkNode>(\n      editor,\n      ThreadMarkNode,\n      (from: ThreadMarkNode) => {\n        return $createThreadMarkNode(from.getIDs());\n      },\n      (from: ThreadMarkNode, to: ThreadMarkNode) => {\n        const ids = from.getIDs();\n        ids.forEach((id) => {\n          to.addID(id);\n        });\n      }\n    );\n  }, [editor]);\n\n  return (\n    <OnDeleteThreadCallback.Provider value={handleThreadDelete}>\n      <ActiveThreadsContext.Provider value={activeThreads}>\n        <IsActiveThreadContext.Provider value={isThreadActive}>\n          <ThreadToNodesContext.Provider value={threadToNodes}>\n            {children}\n          </ThreadToNodesContext.Provider>\n        </IsActiveThreadContext.Provider>\n      </ActiveThreadsContext.Provider>\n    </OnDeleteThreadCallback.Provider>\n  );\n}\n\n/**\n * Returns whether the associated thread annotation for the given thread id is selected or not in the editor.\n * @param threadId The id of the thread to check if the associated annotation is selected or not.\n * @returns true if the associated annotation for the thread is selected, false otherwise.\n */\nexport function useIsThreadActive(threadId: string): boolean {\n  const isActive = useContext(IsActiveThreadContext);\n  if (isActive === null) {\n    throw new Error(\n      \"useIsThreadActive must be used within LiveblocksPlugin. For more information: https://liveblocks.io/docs/api-reference/liveblocks-react-lexical#useIsThreadActive\"\n    );\n  }\n\n  return isActive(threadId);\n}\n"],"names":["createContext","useLexicalComposerContext","useState","useClient","useRoom","useCallback","$getNodeByKey","$isThreadMarkNode","$unwrapThreadMarkNode","useCommentsErrorListener","CreateThreadError","getUmbrellaStoreForClient","useSignal","shallow","useEffect","addClassNamesToElement","removeClassNamesFromElement","threadIds","ThreadMarkNode","$isRangeSelection","$isTextNode","$getThreadMarkIds","$getSelection","activeElements","registerNestedElementResolver","$createThreadMarkNode","jsx","useContext"],"mappings":"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"}
+{"version":3,"file":"comment-plugin-provider.js","sources":["../../src/comments/comment-plugin-provider.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n  addClassNamesToElement,\n  registerNestedElementResolver,\n  removeClassNamesFromElement,\n} from \"@lexical/utils\";\nimport { shallow } from \"@liveblocks/client\";\nimport { useClient, useErrorListener, useRoom } from \"@liveblocks/react\";\nimport {\n  getUmbrellaStoreForClient,\n  useSignal,\n} from \"@liveblocks/react/_private\";\nimport type { BaseSelection, NodeKey, NodeMutation } from \"lexical\";\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isRangeSelection,\n  $isTextNode,\n} from \"lexical\";\nimport type { PropsWithChildren } from \"react\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport $getThreadMarkIds from \"./get-thread-mark-ids\";\nimport {\n  $createThreadMarkNode,\n  $isThreadMarkNode,\n  ThreadMarkNode,\n} from \"./thread-mark-node\";\nimport $unwrapThreadMarkNode from \"./unwrap-thread-mark-node\";\n\nexport const OnDeleteThreadCallback = createContext<\n  ((threadId: string) => void) | null\n>(null);\n\nexport const ActiveThreadsContext = createContext<string[] | null>(null);\n\nexport const IsActiveThreadContext = createContext<\n  ((threadId: string) => boolean) | null\n>(null);\n\nexport type ThreadToNodesMap = Map<string, Set<NodeKey>>;\n\nexport const ThreadToNodesContext = createContext<ThreadToNodesMap | null>(\n  null\n);\n\nexport function CommentPluginProvider({ children }: PropsWithChildren) {\n  const [editor, context] = useLexicalComposerContext();\n\n  const [threadToNodes, setThreadToNodes] = useState<ThreadToNodesMap>(\n    new Map()\n  ); // A map from thread id to a set of (thread mark) node keys that are associated with the thread\n\n  const [activeThreads, setActiveThreads] = useState<string[]>([]); // The threads that are currently active (or selected) in the editor\n\n  const client = useClient();\n\n  const room = useRoom();\n\n  const isThreadActive = useCallback(\n    (threadId: string) => {\n      return activeThreads.includes(threadId);\n    },\n    [activeThreads]\n  );\n\n  /**\n   * Remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads.\n   * @param threadId The id of the thread to remove\n   */\n  const handleThreadDelete = useCallback(\n    (threadId: string) => {\n      editor.update(() => {\n        // Retrieve node keys associated with the thread\n        const keys = threadToNodes.get(threadId);\n        if (keys === undefined) return;\n\n        // Iterate over each thread node and disassociate the thread if from the node and unwrap the node if it is no longer associated with any threads\n        for (const key of keys) {\n          const node = $getNodeByKey(key);\n          if (!$isThreadMarkNode(node)) continue;\n          node.deleteID(threadId);\n\n          if (node.getIDs().length === 0) {\n            $unwrapThreadMarkNode(node);\n          }\n        }\n      });\n    },\n    [editor, threadToNodes]\n  );\n\n  useErrorListener((err) => {\n    // If thread creation fails, we remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads\n    if (\n      err.context.type === \"CREATE_THREAD_ERROR\" &&\n      err.context.roomId === room.id\n    ) {\n      handleThreadDelete(err.context.threadId);\n    }\n  });\n\n  const store = getUmbrellaStoreForClient(client);\n\n  const roomId = room.id;\n  const threadIds = useSignal(\n    store.outputs.threads,\n    useCallback(\n      (state) =>\n        state\n          .findMany(roomId, { resolved: false }, \"asc\")\n          .map((thread) => thread.id),\n      [roomId]\n    ),\n    shallow\n  );\n\n  /**\n   * Only add styles to the thread mark elements that currently have threads associated with them.\n   */\n  useEffect(() => {\n    function getThreadMarkElements() {\n      const activeElements = new Set<HTMLElement>();\n\n      for (const id of threadIds) {\n        const keys = threadToNodes.get(id);\n        if (keys === undefined) continue;\n\n        for (const key of keys) {\n          const element = editor.getElementByKey(key);\n          if (element === null) continue;\n          activeElements.add(element);\n        }\n      }\n      return activeElements;\n    }\n\n    const elements = getThreadMarkElements();\n\n    const theme = context.getTheme();\n\n    const classNames = [\"lb-root\", \"lb-lexical-thread-mark\"];\n    if (theme && theme.liveblocks && \"threadMark\" in theme.liveblocks) {\n      classNames.push((theme.liveblocks as { threadMark: string }).threadMark);\n    }\n\n    elements.forEach((element) => {\n      addClassNamesToElement(element, ...classNames);\n    });\n\n    return () => {\n      elements.forEach((element) => {\n        removeClassNamesFromElement(element, ...classNames);\n      });\n    };\n  }, [context, editor, threadToNodes, threadIds]);\n\n  /**\n   * Register a mutation listener that listens for mutations on 'ThreadMarkNode's and updates the map of thread to node keys accordingly.\n   */\n  useEffect(() => {\n    function onMutation(mutations: Map<string, NodeMutation>) {\n      const state = editor.getEditorState();\n      setThreadToNodes((prev) => {\n        const updatedMap = new Map(prev);\n        state.read(() => {\n          for (const [key, mutation] of mutations) {\n            // If the node is destroyed, we remove its key from the map of thread to node keys\n            if (mutation === \"destroyed\") {\n              for (const [, nodes] of updatedMap) {\n                nodes.delete(key);\n              }\n            }\n            // Otherwise, if a new node is created or an existing node is updated, we update the map of thread to node keys to include the new/updated node\n            else if (mutation === \"created\" || mutation === \"updated\") {\n              const node = $getNodeByKey(key);\n              if (!$isThreadMarkNode(node)) continue;\n\n              const threadIds = node.getIDs();\n\n              for (const id of threadIds) {\n                const keys = updatedMap.get(id) ?? new Set();\n                keys.add(key);\n                updatedMap.set(id, keys);\n              }\n            }\n          }\n        });\n        return updatedMap;\n      });\n    }\n\n    return editor.registerMutationListener(ThreadMarkNode, onMutation);\n  }, [editor]);\n\n  /**\n   * Register an update listener that listens for changes in the selection and updates the active threads accordingly.\n   */\n  useEffect(() => {\n    function $getThreadIds(selection: BaseSelection | null): string[] {\n      if (selection === null) return [];\n\n      if (!$isRangeSelection(selection)) return [];\n\n      const anchor = selection.anchor.getNode();\n      if (!$isTextNode(anchor)) return [];\n\n      return $getThreadMarkIds(anchor, selection.anchor.offset) ?? [];\n    }\n\n    function $onStateRead() {\n      const selection = $getSelection();\n\n      const threadIds = $getThreadIds(selection).filter((id) => {\n        return store.outputs.threads\n          .get()\n          .findMany(roomId, { resolved: false }, \"asc\")\n          .some((thread) => thread.id === id);\n      });\n      setActiveThreads(threadIds);\n    }\n\n    const unsubscribeCache = store.outputs.threads.subscribe(() => {\n      editor.getEditorState().read($onStateRead);\n    });\n\n    const unregisterUpdateListener = editor.registerUpdateListener(\n      ({ editorState: state }) => {\n        state.read($onStateRead);\n      }\n    );\n\n    return () => {\n      unregisterUpdateListener();\n      unsubscribeCache();\n    };\n  }, [editor, client, roomId, store]);\n\n  /**\n   * When active threads change, we add a data-state attribute and set it to \"active\" for all HTML elements that are associated with the active threads.\n   */\n  useEffect(() => {\n    function getActiveElements() {\n      const activeElements = new Set<HTMLElement>();\n\n      for (const thread of activeThreads) {\n        const keys = threadToNodes.get(thread);\n        if (keys === undefined) continue;\n\n        for (const key of keys) {\n          const element = editor.getElementByKey(key);\n          if (element === null) continue;\n          activeElements.add(element);\n        }\n      }\n      return activeElements;\n    }\n\n    const activeElements = getActiveElements();\n\n    activeElements.forEach((element) => {\n      element.setAttribute(\"data-state\", \"active\");\n    });\n\n    return () => {\n      activeElements.forEach((element) => {\n        element.removeAttribute(\"data-state\");\n      });\n    };\n  }, [activeThreads, editor, threadToNodes]);\n\n  useEffect(() => {\n    return registerNestedElementResolver<ThreadMarkNode>(\n      editor,\n      ThreadMarkNode,\n      (from: ThreadMarkNode) => {\n        return $createThreadMarkNode(from.getIDs());\n      },\n      (from: ThreadMarkNode, to: ThreadMarkNode) => {\n        const ids = from.getIDs();\n        ids.forEach((id) => {\n          to.addID(id);\n        });\n      }\n    );\n  }, [editor]);\n\n  return (\n    <OnDeleteThreadCallback.Provider value={handleThreadDelete}>\n      <ActiveThreadsContext.Provider value={activeThreads}>\n        <IsActiveThreadContext.Provider value={isThreadActive}>\n          <ThreadToNodesContext.Provider value={threadToNodes}>\n            {children}\n          </ThreadToNodesContext.Provider>\n        </IsActiveThreadContext.Provider>\n      </ActiveThreadsContext.Provider>\n    </OnDeleteThreadCallback.Provider>\n  );\n}\n\n/**\n * Returns whether the associated thread annotation for the given thread id is selected or not in the editor.\n * @param threadId The id of the thread to check if the associated annotation is selected or not.\n * @returns true if the associated annotation for the thread is selected, false otherwise.\n */\nexport function useIsThreadActive(threadId: string): boolean {\n  const isActive = useContext(IsActiveThreadContext);\n  if (isActive === null) {\n    throw new Error(\n      \"useIsThreadActive must be used within LiveblocksPlugin. For more information: https://liveblocks.io/docs/api-reference/liveblocks-react-lexical#useIsThreadActive\"\n    );\n  }\n\n  return isActive(threadId);\n}\n"],"names":["createContext","useLexicalComposerContext","useState","client","useClient","useRoom","useCallback","$getNodeByKey","$isThreadMarkNode","$unwrapThreadMarkNode","useErrorListener","getUmbrellaStoreForClient","useSignal","shallow","useEffect","addClassNamesToElement","removeClassNamesFromElement","threadIds","ThreadMarkNode","$isRangeSelection","$isTextNode","$getThreadMarkIds","$getSelection","activeElements","registerNestedElementResolver","$createThreadMarkNode","jsx","useContext"],"mappings":"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"}

package/dist/comments/comment-plugin-provider.mjs

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { addClassNamesToElement, removeClassNamesFromElement, registerNestedElementResolver } from '@lexical/utils';
-import { shallow } from '@liveblocks/core';
-import { useClient, useRoom, useCommentsErrorListener } from '@liveblocks/react';
-import { CreateThreadError, getUmbrellaStoreForClient, useSignal } from '@liveblocks/react/_private';
+import { shallow } from '@liveblocks/client';
+import { useClient, useRoom, useErrorListener } from '@liveblocks/react';
+import { getUmbrellaStoreForClient, useSignal } from '@liveblocks/react/_private';
 import { $getNodeByKey, $isRangeSelection, $isTextNode, $getSelection } from 'lexical';
 import { createContext, useState, useCallback, useEffect, useContext } from 'react';
 import $getThreadMarkIds from './get-thread-mark-ids.mjs';
@@ -49,9 +49,9 @@ function CommentPluginProvider({ children }) {
     },
     [editor, threadToNodes]
   );
-  useCommentsErrorListener((error) => {
-    if (error instanceof CreateThreadError) {
-      handleThreadDelete(error.context.threadId);
+  useErrorListener((err) => {
+    if (err.context.type === "CREATE_THREAD_ERROR" && err.context.roomId === room.id) {
+      handleThreadDelete(err.context.threadId);
     }
   });
   const store = getUmbrellaStoreForClient(client);

package/dist/comments/comment-plugin-provider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"comment-plugin-provider.mjs","sources":["../../src/comments/comment-plugin-provider.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n  addClassNamesToElement,\n  registerNestedElementResolver,\n  removeClassNamesFromElement,\n} from \"@lexical/utils\";\nimport { shallow } from \"@liveblocks/core\";\nimport {\n  useClient,\n  useCommentsErrorListener,\n  useRoom,\n} from \"@liveblocks/react\";\nimport {\n  CreateThreadError,\n  getUmbrellaStoreForClient,\n  useSignal,\n} from \"@liveblocks/react/_private\";\nimport type { BaseSelection, NodeKey, NodeMutation } from \"lexical\";\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isRangeSelection,\n  $isTextNode,\n} from \"lexical\";\nimport type { PropsWithChildren } from \"react\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport $getThreadMarkIds from \"./get-thread-mark-ids\";\nimport {\n  $createThreadMarkNode,\n  $isThreadMarkNode,\n  ThreadMarkNode,\n} from \"./thread-mark-node\";\nimport $unwrapThreadMarkNode from \"./unwrap-thread-mark-node\";\n\nexport const OnDeleteThreadCallback = createContext<\n  ((threadId: string) => void) | null\n>(null);\n\nexport const ActiveThreadsContext = createContext<string[] | null>(null);\n\nexport const IsActiveThreadContext = createContext<\n  ((threadId: string) => boolean) | null\n>(null);\n\nexport type ThreadToNodesMap = Map<string, Set<NodeKey>>;\n\nexport const ThreadToNodesContext = createContext<ThreadToNodesMap | null>(\n  null\n);\n\nexport function CommentPluginProvider({ children }: PropsWithChildren) {\n  const [editor, context] = useLexicalComposerContext();\n\n  const [threadToNodes, setThreadToNodes] = useState<ThreadToNodesMap>(\n    new Map()\n  ); // A map from thread id to a set of (thread mark) node keys that are associated with the thread\n\n  const [activeThreads, setActiveThreads] = useState<string[]>([]); // The threads that are currently active (or selected) in the editor\n\n  const client = useClient();\n\n  const room = useRoom();\n\n  const isThreadActive = useCallback(\n    (threadId: string) => {\n      return activeThreads.includes(threadId);\n    },\n    [activeThreads]\n  );\n\n  /**\n   * Remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads.\n   * @param threadId The id of the thread to remove\n   */\n  const handleThreadDelete = useCallback(\n    (threadId: string) => {\n      editor.update(() => {\n        // Retrieve node keys associated with the thread\n        const keys = threadToNodes.get(threadId);\n        if (keys === undefined) return;\n\n        // Iterate over each thread node and disassociate the thread if from the node and unwrap the node if it is no longer associated with any threads\n        for (const key of keys) {\n          const node = $getNodeByKey(key);\n          if (!$isThreadMarkNode(node)) continue;\n          node.deleteID(threadId);\n\n          if (node.getIDs().length === 0) {\n            $unwrapThreadMarkNode(node);\n          }\n        }\n      });\n    },\n    [editor, threadToNodes]\n  );\n\n  useCommentsErrorListener((error) => {\n    // If thread creation fails, we remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads\n    if (error instanceof CreateThreadError) {\n      handleThreadDelete(error.context.threadId);\n    }\n  });\n\n  const store = getUmbrellaStoreForClient(client);\n\n  const roomId = room.id;\n  const threadIds = useSignal(\n    store.outputs.threads,\n    useCallback(\n      (state) =>\n        state\n          .findMany(roomId, { resolved: false }, \"asc\")\n          .map((thread) => thread.id),\n      [roomId]\n    ),\n    shallow\n  );\n\n  /**\n   * Only add styles to the thread mark elements that currently have threads associated with them.\n   */\n  useEffect(() => {\n    function getThreadMarkElements() {\n      const activeElements = new Set<HTMLElement>();\n\n      for (const id of threadIds) {\n        const keys = threadToNodes.get(id);\n        if (keys === undefined) continue;\n\n        for (const key of keys) {\n          const element = editor.getElementByKey(key);\n          if (element === null) continue;\n          activeElements.add(element);\n        }\n      }\n      return activeElements;\n    }\n\n    const elements = getThreadMarkElements();\n\n    const theme = context.getTheme();\n\n    const classNames = [\"lb-root\", \"lb-lexical-thread-mark\"];\n    if (theme && theme.liveblocks && \"threadMark\" in theme.liveblocks) {\n      classNames.push((theme.liveblocks as { threadMark: string }).threadMark);\n    }\n\n    elements.forEach((element) => {\n      addClassNamesToElement(element, ...classNames);\n    });\n\n    return () => {\n      elements.forEach((element) => {\n        removeClassNamesFromElement(element, ...classNames);\n      });\n    };\n  }, [context, editor, threadToNodes, threadIds]);\n\n  /**\n   * Register a mutation listener that listens for mutations on 'ThreadMarkNode's and updates the map of thread to node keys accordingly.\n   */\n  useEffect(() => {\n    function onMutation(mutations: Map<string, NodeMutation>) {\n      const state = editor.getEditorState();\n      setThreadToNodes((prev) => {\n        const updatedMap = new Map(prev);\n        state.read(() => {\n          for (const [key, mutation] of mutations) {\n            // If the node is destroyed, we remove its key from the map of thread to node keys\n            if (mutation === \"destroyed\") {\n              for (const [, nodes] of updatedMap) {\n                nodes.delete(key);\n              }\n            }\n            // Otherwise, if a new node is created or an existing node is updated, we update the map of thread to node keys to include the new/updated node\n            else if (mutation === \"created\" || mutation === \"updated\") {\n              const node = $getNodeByKey(key);\n              if (!$isThreadMarkNode(node)) continue;\n\n              const threadIds = node.getIDs();\n\n              for (const id of threadIds) {\n                const keys = updatedMap.get(id) ?? new Set();\n                keys.add(key);\n                updatedMap.set(id, keys);\n              }\n            }\n          }\n        });\n        return updatedMap;\n      });\n    }\n\n    return editor.registerMutationListener(ThreadMarkNode, onMutation);\n  }, [editor]);\n\n  /**\n   * Register an update listener that listens for changes in the selection and updates the active threads accordingly.\n   */\n  useEffect(() => {\n    function $getThreadIds(selection: BaseSelection | null): string[] {\n      if (selection === null) return [];\n\n      if (!$isRangeSelection(selection)) return [];\n\n      const anchor = selection.anchor.getNode();\n      if (!$isTextNode(anchor)) return [];\n\n      return $getThreadMarkIds(anchor, selection.anchor.offset) ?? [];\n    }\n\n    function $onStateRead() {\n      const selection = $getSelection();\n\n      const threadIds = $getThreadIds(selection).filter((id) => {\n        return store.outputs.threads\n          .get()\n          .findMany(roomId, { resolved: false }, \"asc\")\n          .some((thread) => thread.id === id);\n      });\n      setActiveThreads(threadIds);\n    }\n\n    const unsubscribeCache = store.outputs.threads.subscribe(() => {\n      editor.getEditorState().read($onStateRead);\n    });\n\n    const unregisterUpdateListener = editor.registerUpdateListener(\n      ({ editorState: state }) => {\n        state.read($onStateRead);\n      }\n    );\n\n    return () => {\n      unregisterUpdateListener();\n      unsubscribeCache();\n    };\n  }, [editor, client, roomId, store]);\n\n  /**\n   * When active threads change, we add a data-state attribute and set it to \"active\" for all HTML elements that are associated with the active threads.\n   */\n  useEffect(() => {\n    function getActiveElements() {\n      const activeElements = new Set<HTMLElement>();\n\n      for (const thread of activeThreads) {\n        const keys = threadToNodes.get(thread);\n        if (keys === undefined) continue;\n\n        for (const key of keys) {\n          const element = editor.getElementByKey(key);\n          if (element === null) continue;\n          activeElements.add(element);\n        }\n      }\n      return activeElements;\n    }\n\n    const activeElements = getActiveElements();\n\n    activeElements.forEach((element) => {\n      element.setAttribute(\"data-state\", \"active\");\n    });\n\n    return () => {\n      activeElements.forEach((element) => {\n        element.removeAttribute(\"data-state\");\n      });\n    };\n  }, [activeThreads, editor, threadToNodes]);\n\n  useEffect(() => {\n    return registerNestedElementResolver<ThreadMarkNode>(\n      editor,\n      ThreadMarkNode,\n      (from: ThreadMarkNode) => {\n        return $createThreadMarkNode(from.getIDs());\n      },\n      (from: ThreadMarkNode, to: ThreadMarkNode) => {\n        const ids = from.getIDs();\n        ids.forEach((id) => {\n          to.addID(id);\n        });\n      }\n    );\n  }, [editor]);\n\n  return (\n    <OnDeleteThreadCallback.Provider value={handleThreadDelete}>\n      <ActiveThreadsContext.Provider value={activeThreads}>\n        <IsActiveThreadContext.Provider value={isThreadActive}>\n          <ThreadToNodesContext.Provider value={threadToNodes}>\n            {children}\n          </ThreadToNodesContext.Provider>\n        </IsActiveThreadContext.Provider>\n      </ActiveThreadsContext.Provider>\n    </OnDeleteThreadCallback.Provider>\n  );\n}\n\n/**\n * Returns whether the associated thread annotation for the given thread id is selected or not in the editor.\n * @param threadId The id of the thread to check if the associated annotation is selected or not.\n * @returns true if the associated annotation for the thread is selected, false otherwise.\n */\nexport function useIsThreadActive(threadId: string): boolean {\n  const isActive = useContext(IsActiveThreadContext);\n  if (isActive === null) {\n    throw new Error(\n      \"useIsThreadActive must be used within LiveblocksPlugin. For more information: https://liveblocks.io/docs/api-reference/liveblocks-react-lexical#useIsThreadActive\"\n    );\n  }\n\n  return isActive(threadId);\n}\n"],"names":["threadIds","activeElements"],"mappings":"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"}
+{"version":3,"file":"comment-plugin-provider.mjs","sources":["../../src/comments/comment-plugin-provider.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n  addClassNamesToElement,\n  registerNestedElementResolver,\n  removeClassNamesFromElement,\n} from \"@lexical/utils\";\nimport { shallow } from \"@liveblocks/client\";\nimport { useClient, useErrorListener, useRoom } from \"@liveblocks/react\";\nimport {\n  getUmbrellaStoreForClient,\n  useSignal,\n} from \"@liveblocks/react/_private\";\nimport type { BaseSelection, NodeKey, NodeMutation } from \"lexical\";\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isRangeSelection,\n  $isTextNode,\n} from \"lexical\";\nimport type { PropsWithChildren } from \"react\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport $getThreadMarkIds from \"./get-thread-mark-ids\";\nimport {\n  $createThreadMarkNode,\n  $isThreadMarkNode,\n  ThreadMarkNode,\n} from \"./thread-mark-node\";\nimport $unwrapThreadMarkNode from \"./unwrap-thread-mark-node\";\n\nexport const OnDeleteThreadCallback = createContext<\n  ((threadId: string) => void) | null\n>(null);\n\nexport const ActiveThreadsContext = createContext<string[] | null>(null);\n\nexport const IsActiveThreadContext = createContext<\n  ((threadId: string) => boolean) | null\n>(null);\n\nexport type ThreadToNodesMap = Map<string, Set<NodeKey>>;\n\nexport const ThreadToNodesContext = createContext<ThreadToNodesMap | null>(\n  null\n);\n\nexport function CommentPluginProvider({ children }: PropsWithChildren) {\n  const [editor, context] = useLexicalComposerContext();\n\n  const [threadToNodes, setThreadToNodes] = useState<ThreadToNodesMap>(\n    new Map()\n  ); // A map from thread id to a set of (thread mark) node keys that are associated with the thread\n\n  const [activeThreads, setActiveThreads] = useState<string[]>([]); // The threads that are currently active (or selected) in the editor\n\n  const client = useClient();\n\n  const room = useRoom();\n\n  const isThreadActive = useCallback(\n    (threadId: string) => {\n      return activeThreads.includes(threadId);\n    },\n    [activeThreads]\n  );\n\n  /**\n   * Remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads.\n   * @param threadId The id of the thread to remove\n   */\n  const handleThreadDelete = useCallback(\n    (threadId: string) => {\n      editor.update(() => {\n        // Retrieve node keys associated with the thread\n        const keys = threadToNodes.get(threadId);\n        if (keys === undefined) return;\n\n        // Iterate over each thread node and disassociate the thread if from the node and unwrap the node if it is no longer associated with any threads\n        for (const key of keys) {\n          const node = $getNodeByKey(key);\n          if (!$isThreadMarkNode(node)) continue;\n          node.deleteID(threadId);\n\n          if (node.getIDs().length === 0) {\n            $unwrapThreadMarkNode(node);\n          }\n        }\n      });\n    },\n    [editor, threadToNodes]\n  );\n\n  useErrorListener((err) => {\n    // If thread creation fails, we remove the thread id from the associated nodes and unwrap the nodes if they are no longer associated with any threads\n    if (\n      err.context.type === \"CREATE_THREAD_ERROR\" &&\n      err.context.roomId === room.id\n    ) {\n      handleThreadDelete(err.context.threadId);\n    }\n  });\n\n  const store = getUmbrellaStoreForClient(client);\n\n  const roomId = room.id;\n  const threadIds = useSignal(\n    store.outputs.threads,\n    useCallback(\n      (state) =>\n        state\n          .findMany(roomId, { resolved: false }, \"asc\")\n          .map((thread) => thread.id),\n      [roomId]\n    ),\n    shallow\n  );\n\n  /**\n   * Only add styles to the thread mark elements that currently have threads associated with them.\n   */\n  useEffect(() => {\n    function getThreadMarkElements() {\n      const activeElements = new Set<HTMLElement>();\n\n      for (const id of threadIds) {\n        const keys = threadToNodes.get(id);\n        if (keys === undefined) continue;\n\n        for (const key of keys) {\n          const element = editor.getElementByKey(key);\n          if (element === null) continue;\n          activeElements.add(element);\n        }\n      }\n      return activeElements;\n    }\n\n    const elements = getThreadMarkElements();\n\n    const theme = context.getTheme();\n\n    const classNames = [\"lb-root\", \"lb-lexical-thread-mark\"];\n    if (theme && theme.liveblocks && \"threadMark\" in theme.liveblocks) {\n      classNames.push((theme.liveblocks as { threadMark: string }).threadMark);\n    }\n\n    elements.forEach((element) => {\n      addClassNamesToElement(element, ...classNames);\n    });\n\n    return () => {\n      elements.forEach((element) => {\n        removeClassNamesFromElement(element, ...classNames);\n      });\n    };\n  }, [context, editor, threadToNodes, threadIds]);\n\n  /**\n   * Register a mutation listener that listens for mutations on 'ThreadMarkNode's and updates the map of thread to node keys accordingly.\n   */\n  useEffect(() => {\n    function onMutation(mutations: Map<string, NodeMutation>) {\n      const state = editor.getEditorState();\n      setThreadToNodes((prev) => {\n        const updatedMap = new Map(prev);\n        state.read(() => {\n          for (const [key, mutation] of mutations) {\n            // If the node is destroyed, we remove its key from the map of thread to node keys\n            if (mutation === \"destroyed\") {\n              for (const [, nodes] of updatedMap) {\n                nodes.delete(key);\n              }\n            }\n            // Otherwise, if a new node is created or an existing node is updated, we update the map of thread to node keys to include the new/updated node\n            else if (mutation === \"created\" || mutation === \"updated\") {\n              const node = $getNodeByKey(key);\n              if (!$isThreadMarkNode(node)) continue;\n\n              const threadIds = node.getIDs();\n\n              for (const id of threadIds) {\n                const keys = updatedMap.get(id) ?? new Set();\n                keys.add(key);\n                updatedMap.set(id, keys);\n              }\n            }\n          }\n        });\n        return updatedMap;\n      });\n    }\n\n    return editor.registerMutationListener(ThreadMarkNode, onMutation);\n  }, [editor]);\n\n  /**\n   * Register an update listener that listens for changes in the selection and updates the active threads accordingly.\n   */\n  useEffect(() => {\n    function $getThreadIds(selection: BaseSelection | null): string[] {\n      if (selection === null) return [];\n\n      if (!$isRangeSelection(selection)) return [];\n\n      const anchor = selection.anchor.getNode();\n      if (!$isTextNode(anchor)) return [];\n\n      return $getThreadMarkIds(anchor, selection.anchor.offset) ?? [];\n    }\n\n    function $onStateRead() {\n      const selection = $getSelection();\n\n      const threadIds = $getThreadIds(selection).filter((id) => {\n        return store.outputs.threads\n          .get()\n          .findMany(roomId, { resolved: false }, \"asc\")\n          .some((thread) => thread.id === id);\n      });\n      setActiveThreads(threadIds);\n    }\n\n    const unsubscribeCache = store.outputs.threads.subscribe(() => {\n      editor.getEditorState().read($onStateRead);\n    });\n\n    const unregisterUpdateListener = editor.registerUpdateListener(\n      ({ editorState: state }) => {\n        state.read($onStateRead);\n      }\n    );\n\n    return () => {\n      unregisterUpdateListener();\n      unsubscribeCache();\n    };\n  }, [editor, client, roomId, store]);\n\n  /**\n   * When active threads change, we add a data-state attribute and set it to \"active\" for all HTML elements that are associated with the active threads.\n   */\n  useEffect(() => {\n    function getActiveElements() {\n      const activeElements = new Set<HTMLElement>();\n\n      for (const thread of activeThreads) {\n        const keys = threadToNodes.get(thread);\n        if (keys === undefined) continue;\n\n        for (const key of keys) {\n          const element = editor.getElementByKey(key);\n          if (element === null) continue;\n          activeElements.add(element);\n        }\n      }\n      return activeElements;\n    }\n\n    const activeElements = getActiveElements();\n\n    activeElements.forEach((element) => {\n      element.setAttribute(\"data-state\", \"active\");\n    });\n\n    return () => {\n      activeElements.forEach((element) => {\n        element.removeAttribute(\"data-state\");\n      });\n    };\n  }, [activeThreads, editor, threadToNodes]);\n\n  useEffect(() => {\n    return registerNestedElementResolver<ThreadMarkNode>(\n      editor,\n      ThreadMarkNode,\n      (from: ThreadMarkNode) => {\n        return $createThreadMarkNode(from.getIDs());\n      },\n      (from: ThreadMarkNode, to: ThreadMarkNode) => {\n        const ids = from.getIDs();\n        ids.forEach((id) => {\n          to.addID(id);\n        });\n      }\n    );\n  }, [editor]);\n\n  return (\n    <OnDeleteThreadCallback.Provider value={handleThreadDelete}>\n      <ActiveThreadsContext.Provider value={activeThreads}>\n        <IsActiveThreadContext.Provider value={isThreadActive}>\n          <ThreadToNodesContext.Provider value={threadToNodes}>\n            {children}\n          </ThreadToNodesContext.Provider>\n        </IsActiveThreadContext.Provider>\n      </ActiveThreadsContext.Provider>\n    </OnDeleteThreadCallback.Provider>\n  );\n}\n\n/**\n * Returns whether the associated thread annotation for the given thread id is selected or not in the editor.\n * @param threadId The id of the thread to check if the associated annotation is selected or not.\n * @returns true if the associated annotation for the thread is selected, false otherwise.\n */\nexport function useIsThreadActive(threadId: string): boolean {\n  const isActive = useContext(IsActiveThreadContext);\n  if (isActive === null) {\n    throw new Error(\n      \"useIsThreadActive must be used within LiveblocksPlugin. For more information: https://liveblocks.io/docs/api-reference/liveblocks-react-lexical#useIsThreadActive\"\n    );\n  }\n\n  return isActive(threadId);\n}\n"],"names":["threadIds","activeElements"],"mappings":"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"}

package/dist/comments/floating-composer.js

@@ -115,11 +115,13 @@ const FloatingComposerImpl = react.forwardRef(function FloatingComposer3(props,
     [onThreadCreate, onComposerSubmit, props.metadata, createThread]
   );
   function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.isDefaultPrevented())
+      return;
     if (event.key === "Escape") {
       onRangeChange(null);
       editor.focus();
     }
-    onKeyDown?.(event);
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [
@@ -161,9 +163,7 @@ function ActiveSelectionPortal({
     }
   });
   _private.useLayoutEffect(() => {
-    setReference({
-      getBoundingClientRect: () => range.getBoundingClientRect()
-    });
+    setReference(range);
   }, [setReference, range]);
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const rects = createRectsFromDomRange.createRectsFromDOMRange(editor, range);
@@ -192,7 +192,7 @@ function ActiveSelectionPortal({
             backgroundColor: "var(--lb-selection, rgba(0, 0, 255, 0.2))",
             pointerEvents: "none"
           },
-          className: "lb-lexical-active-selection"
+          className: "lb-selection lb-lexical-active-selection"
         }, JSON.stringify(rect)))
       })
     }),
@@ -214,6 +214,7 @@ function FloatingComposerPortal({
     strategy: "fixed",
     placement: "bottom",
     middleware: [
+      reactDom.inline({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),
       reactDom.flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),
       reactDom.offset(10),
       reactDom.hide({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),
@@ -230,9 +231,7 @@ function FloatingComposerPortal({
     }
   });
   _private.useLayoutEffect(() => {
-    setReference({
-      getBoundingClientRect: () => range.getBoundingClientRect()
-    });
+    setReference(range);
   }, [range, setReference]);
   return reactDom$1.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx("div", {