@liveblocks/react-lexical 2.2.2 → 2.2.3-alpha2

package/dist/comments/anchored-threads.js

@@ -0,0 +1,245 @@
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+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 commentPluginProvider = require('./comment-plugin-provider.js');
+var threadMarkNode = require('./thread-mark-node.js');
+
+const DEFAULT_GAP = 20;
+const DEFAULT_ACTIVE_THREAD_OFFSET = -12;
+const GAP = `var(--lb-lexical-anchored-threads-gap, ${DEFAULT_GAP}px)`;
+const ACTIVE_THREAD_OFFSET = `var(--lb-lexical-anchored-threads-active-thread-offset, ${DEFAULT_ACTIVE_THREAD_OFFSET}px)`;
+function compareNodes(a, b) {
+  const position = a.compareDocumentPosition(b);
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+    return -1;
+  if (position & Node.DOCUMENT_POSITION_PRECEDING)
+    return 1;
+  return 0;
+}
+function AnchoredThreads({
+  threads,
+  components,
+  className,
+  style,
+  ...divProps
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const Thread = components?.Thread ?? reactUi.Thread;
+  const containerRef = React.useRef(null);
+  const activeThreads = useActiveThreads();
+  const nodes = useThreadToNodes();
+  const getOrderedThreads = React.useCallback(() => {
+    return threads.map((thread) => {
+      const keys = nodes.get(thread.id);
+      if (keys === void 0 || keys.size === 0)
+        return null;
+      const elements2 = Array.from(keys.values()).map((key) => editor.getElementByKey(key)).filter(Boolean);
+      if (elements2.length === 0)
+        return null;
+      const element = elements2.sort(compareNodes)[0];
+      return {
+        thread,
+        element
+      };
+    }).filter(
+      (entry) => entry !== null
+    ).sort((a, b) => {
+      return compareNodes(a.element, b.element);
+    });
+  }, [editor, threads, nodes]);
+  const orderedThreads = React.useMemo(getOrderedThreads, [getOrderedThreads]);
+  const [elements, setElements] = React.useState(/* @__PURE__ */ new Map());
+  const [positions, setPositions] = React.useState(/* @__PURE__ */ new Map());
+  const onItemAdd = React.useCallback((id, el) => {
+    setElements((prev) => new Map(prev).set(id, el));
+  }, []);
+  const onItemRemove = React.useCallback((id) => {
+    setElements((prev) => {
+      const items = new Map(prev);
+      items.delete(id);
+      return items;
+    });
+  }, []);
+  const handlePositionThreads = React.useCallback(() => {
+    const container = containerRef.current;
+    if (container === null)
+      return;
+    const orderedThreads2 = getOrderedThreads();
+    function getAscendingThreads() {
+      if (activeThreads.length === 0)
+        return orderedThreads2;
+      const active = orderedThreads2.filter(
+        ({ thread }) => activeThreads.includes(thread.id)
+      );
+      const after = orderedThreads2.filter(({ thread, element }) => {
+        if (activeThreads.includes(thread.id))
+          return false;
+        const isAfter = active.some(({ element: activeElement }) => {
+          return compareNodes(activeElement, element) === -1;
+        });
+        return isAfter;
+      });
+      return active.concat(after);
+    }
+    const ascending = getAscendingThreads();
+    const descending = orderedThreads2.filter(
+      (entry) => !ascending.includes(entry)
+    );
+    const newPositions = /* @__PURE__ */ new Map();
+    for (const { thread, element } of ascending) {
+      const rect = element.getBoundingClientRect();
+      let top = rect.top - container.getBoundingClientRect().top;
+      for (const [id, position] of newPositions) {
+        const el = elements.get(id);
+        if (el === void 0)
+          continue;
+        if (top >= position && top <= position + el.getBoundingClientRect().height) {
+          top = position + el.getBoundingClientRect().height;
+        }
+      }
+      newPositions.set(thread.id, top);
+    }
+    for (const { thread, element } of descending.reverse()) {
+      const rect = element.getBoundingClientRect();
+      const el = elements.get(thread.id);
+      if (el === void 0)
+        continue;
+      let top = rect.top - container.getBoundingClientRect().top;
+      for (const [, position] of newPositions) {
+        if (top >= position - el.getBoundingClientRect().height) {
+          top = position - el.getBoundingClientRect().height;
+        }
+      }
+      newPositions.set(thread.id, top);
+    }
+    setPositions(newPositions);
+  }, [getOrderedThreads, activeThreads, elements]);
+  React.useLayoutEffect(() => {
+    handlePositionThreads();
+  }, [handlePositionThreads]);
+  React.useEffect(() => {
+    return editor.registerUpdateListener(() => {
+      handlePositionThreads();
+    });
+  }, [editor, handlePositionThreads]);
+  React.useEffect(() => {
+    const observer = new ResizeObserver(handlePositionThreads);
+    for (const element of elements.values()) {
+      observer.observe(element);
+    }
+    return () => observer.disconnect();
+  }, [elements, handlePositionThreads]);
+  const root = liveblocksPluginProvider.useRootElement();
+  React.useEffect(() => {
+    if (root === null)
+      return;
+    const observer = new ResizeObserver(handlePositionThreads);
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [root, handlePositionThreads]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ...divProps,
+    className: classnames.classNames(className, "lb-root lb-lexical-anchored-threads"),
+    ref: containerRef,
+    style: {
+      position: "relative",
+      ...style
+    }
+  }, orderedThreads.map(({ thread, element }) => {
+    const rect = element.getBoundingClientRect();
+    let top = rect.top;
+    if (positions.has(thread.id)) {
+      top = positions.get(thread.id);
+    }
+    const isActive = activeThreads.includes(thread.id);
+    return /* @__PURE__ */ React.createElement(ThreadWrapper, {
+      key: thread.id,
+      Thread,
+      thread,
+      onItemAdd,
+      onItemRemove,
+      style: {
+        position: "absolute",
+        transform: `translate3d(${isActive ? ACTIVE_THREAD_OFFSET : 0}, ${top}px, 0)`,
+        insetInlineStart: 0,
+        inlineSize: "100%",
+        paddingBlockEnd: GAP
+      }
+    });
+  }));
+}
+function ThreadWrapper({
+  onItemAdd,
+  onItemRemove,
+  thread,
+  Thread,
+  className,
+  ...divProps
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const nodes = useThreadToNodes();
+  const activeThreads = useActiveThreads();
+  const isActive = activeThreads.includes(thread.id);
+  function handleThreadClick() {
+    const keys = nodes.get(thread.id);
+    if (keys === void 0 || keys.size === 0)
+      return;
+    if (activeThreads.includes(thread.id))
+      return;
+    editor.update(() => {
+      const [key] = keys;
+      const node = lexical.$getNodeByKey(key);
+      if (!threadMarkNode.$isThreadMarkNode(node))
+        return;
+      node.selectStart();
+    });
+  }
+  const handleRef = React.useCallback(
+    (el) => {
+      onItemAdd(thread.id, el);
+      return () => onItemRemove(thread.id);
+    },
+    [thread.id, onItemAdd, onItemRemove]
+  );
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: handleRef,
+    className: classnames.classNames(
+      "lb-lexical-anchored-threads-thread-container",
+      className
+    ),
+    ...divProps
+  }, /* @__PURE__ */ React.createElement(Thread, {
+    thread,
+    "data-state": isActive ? "active" : "inactive",
+    onClick: handleThreadClick,
+    className: "lb-lexical-anchored-threads-thread",
+    showComposer: isActive ? true : false
+  }));
+}
+function useThreadToNodes() {
+  const threadToNodes = React.useContext(commentPluginProvider.ThreadToNodesContext);
+  if (threadToNodes === null) {
+    throw new Error(
+      "AnchoredThreads component must be used within a LiveblocksPlugin component."
+    );
+  }
+  return threadToNodes;
+}
+function useActiveThreads() {
+  const activeThreads = React.useContext(commentPluginProvider.ActiveThreadsContext);
+  if (activeThreads === null) {
+    throw new Error(
+      "AnchoredThreads component must be used within LiveblocksPlugin."
+    );
+  }
+  return activeThreads;
+}
+
+exports.AnchoredThreads = AnchoredThreads;
+exports.compareNodes = compareNodes;
+//# sourceMappingURL=anchored-threads.js.map

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

@@ -0,0 +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 {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { $getNodeByKey } from \"lexical\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\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  ...divProps\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      .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  return (\n    <div\n      {...divProps}\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        let top = rect.top;\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  ...divProps\n}: ThreadWrapperProps) {\n  const [editor] = useLexicalComposerContext();\n  const nodes = useThreadToNodes();\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  const handleRef = useCallback(\n    (el: HTMLDivElement) => {\n      onItemAdd(thread.id, el);\n      return () => onItemRemove(thread.id);\n    },\n    [thread.id, onItemAdd, onItemRemove]\n  );\n\n  return (\n    <div\n      ref={handleRef}\n      className={classNames(\n        \"lb-lexical-anchored-threads-thread-container\",\n        className\n      )}\n      {...divProps}\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","classNames","$getNodeByKey","$isThreadMarkNode","useContext","ThreadToNodesContext","ActiveThreadsContext"],"mappings":";;;;;;;;;;;AA2BA,MAAM,WAAc,GAAA,EAAA,CAAA;AACpB,MAAM,4BAA+B,GAAA,CAAA,EAAA,CAAA;AAErC,MAAM,MAAM,CAA0C,uCAAA,EAAA,WAAA,CAAA,GAAA,CAAA,CAAA;AACtD,MAAM,uBAAuB,CAA2D,wDAAA,EAAA,4BAAA,CAAA,GAAA,CAAA,CAAA;AA0BxE,SAAA,YAAA,CAAa,GAAS,CAAiB,EAAA;AAErD,EAAM,MAAA,QAAA,GAAW,CAAE,CAAA,uBAAA,CAAwB,CAAC,CAAA,CAAA;AAC5C,EAAA,IAAI,WAAW,IAAK,CAAA,2BAAA;AAA6B,IAAO,OAAA,CAAA,CAAA,CAAA;AACxD,EAAA,IAAI,WAAW,IAAK,CAAA,2BAAA;AAA6B,IAAO,OAAA,CAAA,CAAA;AACxD,EAAO,OAAA,CAAA,CAAA;AACT,CAAA;AAEO,SAAS,eAAgB,CAAA;AAAA,EAC9B,OAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,QAAA;AACL,CAAyB,EAAA;AACvB,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIA,gDAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,MAAA,GAAS,YAAY,MAAU,IAAAC,cAAA,CAAA;AACrC,EAAM,MAAA,YAAA,GAAeC,aAAuB,IAAI,CAAA,CAAA;AAEhD,EAAA,MAAM,gBAAgB,gBAAiB,EAAA,CAAA;AAEvC,EAAA,MAAM,QAAQ,gBAAiB,EAAA,CAAA;AAE/B,EAAM,MAAA,iBAAA,GAAoBC,kBAAY,MAAM;AAC1C,IAAO,OAAA,OAAA,CACJ,GAAI,CAAA,CAAC,MAAW,KAAA;AACf,MAAA,MAAM,IAAO,GAAA,KAAA,CAAM,GAAI,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAChC,MAAI,IAAA,IAAA,KAAS,KAAa,CAAA,IAAA,IAAA,CAAK,IAAS,KAAA,CAAA;AAAG,QAAO,OAAA,IAAA,CAAA;AAElD,MAAA,MAAMC,YAAW,KAAM,CAAA,IAAA,CAAK,IAAK,CAAA,MAAA,EAAQ,CACtC,CAAA,GAAA,CAAI,CAAC,GAAA,KAAQ,OAAO,eAAgB,CAAA,GAAG,CAAC,CAAA,CACxC,OAAO,OAAO,CAAA,CAAA;AACjB,MAAA,IAAIA,UAAS,MAAW,KAAA,CAAA;AAAG,QAAO,OAAA,IAAA,CAAA;AAElC,MAAA,MAAM,OAAUA,GAAAA,SAAAA,CAAS,IAAK,CAAA,YAAY,CAAE,CAAA,CAAA,CAAA,CAAA;AAC5C,MAAO,OAAA;AAAA,QACL,MAAA;AAAA,QACA,OAAA;AAAA,OACF,CAAA;AAAA,KACD,CACA,CAAA,MAAA;AAAA,MACC,CAAC,UACC,KAAU,KAAA,IAAA;AAAA,KAEb,CAAA,IAAA,CAAK,CAAC,CAAA,EAAG,CAAM,KAAA;AACd,MAAA,OAAO,YAAa,CAAA,CAAA,CAAE,OAAS,EAAA,CAAA,CAAE,OAAO,CAAA,CAAA;AAAA,KACzC,CAAA,CAAA;AAAA,GACF,EAAA,CAAC,MAAQ,EAAA,OAAA,EAAS,KAAK,CAAC,CAAA,CAAA;AAG3B,EAAA,MAAM,cAAiB,GAAAC,aAAA,CAAQ,iBAAmB,EAAA,CAAC,iBAAiB,CAAC,CAAA,CAAA;AAErE,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAIC,cAAmC,iBAAA,IAAI,KAAK,CAAA,CAAA;AAE5E,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,IAAIA,cAA8B,iBAAA,IAAI,KAAK,CAAA,CAAA;AAEzE,EAAA,MAAM,SAAY,GAAAH,iBAAA,CAAY,CAAC,EAAA,EAAY,EAAoB,KAAA;AAC7D,IAAY,WAAA,CAAA,CAAC,SAAS,IAAI,GAAA,CAAI,IAAI,CAAE,CAAA,GAAA,CAAI,EAAI,EAAA,EAAE,CAAC,CAAA,CAAA;AAAA,GACjD,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,YAAA,GAAeA,iBAAY,CAAA,CAAC,EAAe,KAAA;AAC/C,IAAA,WAAA,CAAY,CAAC,IAAS,KAAA;AACpB,MAAM,MAAA,KAAA,GAAQ,IAAI,GAAA,CAAI,IAAI,CAAA,CAAA;AAC1B,MAAA,KAAA,CAAM,OAAO,EAAE,CAAA,CAAA;AACf,MAAO,OAAA,KAAA,CAAA;AAAA,KACR,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,qBAAA,GAAwBA,kBAAY,MAAM;AAC9C,IAAA,MAAM,YAAY,YAAa,CAAA,OAAA,CAAA;AAC/B,IAAA,IAAI,SAAc,KAAA,IAAA;AAAM,MAAA,OAAA;AAExB,IAAA,MAAMI,kBAAiB,iBAAkB,EAAA,CAAA;AAGzC,IAAA,SAAS,mBAAsB,GAAA;AAE7B,MAAA,IAAI,cAAc,MAAW,KAAA,CAAA;AAAG,QAAOA,OAAAA,eAAAA,CAAAA;AAGvC,MAAA,MAAM,SAASA,eAAe,CAAA,MAAA;AAAA,QAAO,CAAC,EAAE,MAAA,OACtC,aAAc,CAAA,QAAA,CAAS,OAAO,EAAE,CAAA;AAAA,OAClC,CAAA;AAGA,MAAA,MAAM,QAAQA,eAAe,CAAA,MAAA,CAAO,CAAC,EAAE,MAAA,EAAQ,SAAc,KAAA;AAC3D,QAAI,IAAA,aAAA,CAAc,QAAS,CAAA,MAAA,CAAO,EAAE,CAAA;AAAG,UAAO,OAAA,KAAA,CAAA;AAG9C,QAAA,MAAM,UAAU,MAAO,CAAA,IAAA,CAAK,CAAC,EAAE,OAAA,EAAS,eAAoB,KAAA;AAC1D,UAAO,OAAA,YAAA,CAAa,aAAe,EAAA,OAAO,CAAM,KAAA,CAAA,CAAA,CAAA;AAAA,SACjD,CAAA,CAAA;AAED,QAAO,OAAA,OAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAED,MAAO,OAAA,MAAA,CAAO,OAAO,KAAK,CAAA,CAAA;AAAA,KAC5B;AAEA,IAAA,MAAM,YAAY,mBAAoB,EAAA,CAAA;AAGtC,IAAA,MAAM,aAAaA,eAAe,CAAA,MAAA;AAAA,MAChC,CAAC,KAAA,KAAU,CAAC,SAAA,CAAU,SAAS,KAAK,CAAA;AAAA,KACtC,CAAA;AAEA,IAAM,MAAA,YAAA,uBAAmB,GAAoB,EAAA,CAAA;AAG7C,IAAA,KAAA,MAAW,EAAE,MAAA,EAAQ,OAAQ,EAAA,IAAK,SAAW,EAAA;AAC3C,MAAM,MAAA,IAAA,GAAO,QAAQ,qBAAsB,EAAA,CAAA;AAC3C,MAAA,IAAI,GAAM,GAAA,IAAA,CAAK,GAAM,GAAA,SAAA,CAAU,uBAAwB,CAAA,GAAA,CAAA;AAEvD,MAAA,KAAA,MAAW,CAAC,EAAA,EAAI,QAAQ,CAAA,IAAK,YAAc,EAAA;AAEzC,QAAM,MAAA,EAAA,GAAK,QAAS,CAAA,GAAA,CAAI,EAAE,CAAA,CAAA;AAC1B,QAAA,IAAI,EAAO,KAAA,KAAA,CAAA;AAAW,UAAA,SAAA;AAEtB,QAAA,IACE,OAAO,QACP,IAAA,GAAA,IAAO,WAAW,EAAG,CAAA,qBAAA,GAAwB,MAC7C,EAAA;AACA,UAAM,GAAA,GAAA,QAAA,GAAW,EAAG,CAAA,qBAAA,EAAwB,CAAA,MAAA,CAAA;AAAA,SAC9C;AAAA,OACF;AAEA,MAAa,YAAA,CAAA,GAAA,CAAI,MAAO,CAAA,EAAA,EAAI,GAAG,CAAA,CAAA;AAAA,KACjC;AAEA,IAAA,KAAA,MAAW,EAAE,MAAQ,EAAA,OAAA,EAAa,IAAA,UAAA,CAAW,SAAW,EAAA;AACtD,MAAM,MAAA,IAAA,GAAO,QAAQ,qBAAsB,EAAA,CAAA;AAE3C,MAAA,MAAM,EAAK,GAAA,QAAA,CAAS,GAAI,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AACjC,MAAA,IAAI,EAAO,KAAA,KAAA,CAAA;AAAW,QAAA,SAAA;AAEtB,MAAA,IAAI,GAAM,GAAA,IAAA,CAAK,GAAM,GAAA,SAAA,CAAU,uBAAwB,CAAA,GAAA,CAAA;AACvD,MAAA,KAAA,MAAW,GAAG,QAAQ,CAAA,IAAK,YAAc,EAAA;AACvC,QAAA,IAAI,GAAO,IAAA,QAAA,GAAW,EAAG,CAAA,qBAAA,GAAwB,MAAQ,EAAA;AACvD,UAAM,GAAA,GAAA,QAAA,GAAW,EAAG,CAAA,qBAAA,EAAwB,CAAA,MAAA,CAAA;AAAA,SAC9C;AAAA,OACF;AAEA,MAAa,YAAA,CAAA,GAAA,CAAI,MAAO,CAAA,EAAA,EAAI,GAAG,CAAA,CAAA;AAAA,KACjC;AAEA,IAAA,YAAA,CAAa,YAAY,CAAA,CAAA;AAAA,GACxB,EAAA,CAAC,iBAAmB,EAAA,aAAA,EAAe,QAAQ,CAAC,CAAA,CAAA;AAE/C,EAAAC,qBAAA,CAAgB,MAAM;AACpB,IAAsB,qBAAA,EAAA,CAAA;AAAA,GACxB,EAAG,CAAC,qBAAqB,CAAC,CAAA,CAAA;AAE1B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAO,OAAA,MAAA,CAAO,uBAAuB,MAAM;AACzC,MAAsB,qBAAA,EAAA,CAAA;AAAA,KACvB,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,MAAQ,EAAA,qBAAqB,CAAC,CAAA,CAAA;AAElC,EAAAA,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,IAAI,cAAA,CAAe,qBAAqB,CAAA,CAAA;AACzD,IAAW,KAAA,MAAA,OAAA,IAAW,QAAS,CAAA,MAAA,EAAU,EAAA;AACvC,MAAA,QAAA,CAAS,QAAQ,OAAO,CAAA,CAAA;AAAA,KAC1B;AAEA,IAAO,OAAA,MAAM,SAAS,UAAW,EAAA,CAAA;AAAA,GAChC,EAAA,CAAC,QAAU,EAAA,qBAAqB,CAAC,CAAA,CAAA;AAEpC,EAAA,MAAM,OAAOC,uCAAe,EAAA,CAAA;AAE5B,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAS,KAAA,IAAA;AAAM,MAAA,OAAA;AACnB,IAAM,MAAA,QAAA,GAAW,IAAI,cAAA,CAAe,qBAAqB,CAAA,CAAA;AAEzD,IAAA,QAAA,CAAS,QAAQ,IAAI,CAAA,CAAA;AACrB,IAAO,OAAA,MAAM,SAAS,UAAW,EAAA,CAAA;AAAA,GAChC,EAAA,CAAC,IAAM,EAAA,qBAAqB,CAAC,CAAA,CAAA;AAEhC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,QAAA;AAAA,IACJ,SAAA,EAAWE,qBAAW,CAAA,SAAA,EAAW,qCAAqC,CAAA;AAAA,IACtE,GAAK,EAAA,YAAA;AAAA,IACL,KAAO,EAAA;AAAA,MACL,QAAU,EAAA,UAAA;AAAA,MACV,GAAG,KAAA;AAAA,KACL;AAAA,GAAA,EAEC,eAAe,GAAI,CAAA,CAAC,EAAE,MAAA,EAAQ,SAAc,KAAA;AAC3C,IAAM,MAAA,IAAA,GAAO,QAAQ,qBAAsB,EAAA,CAAA;AAC3C,IAAA,IAAI,MAAM,IAAK,CAAA,GAAA,CAAA;AAEf,IAAA,IAAI,SAAU,CAAA,GAAA,CAAI,MAAO,CAAA,EAAE,CAAG,EAAA;AAC5B,MAAM,GAAA,GAAA,SAAA,CAAU,GAAI,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA,KAC/B;AAEA,IAAA,MAAM,QAAW,GAAA,aAAA,CAAc,QAAS,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAEjD,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,MACC,KAAK,MAAO,CAAA,EAAA;AAAA,MACZ,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAU,EAAA,UAAA;AAAA,QACV,SAAW,EAAA,CAAA,YAAA,EAAe,QAAW,GAAA,oBAAA,GAAuB,CAAM,CAAA,EAAA,EAAA,GAAA,CAAA,MAAA,CAAA;AAAA,QAClE,gBAAkB,EAAA,CAAA;AAAA,QAClB,UAAY,EAAA,MAAA;AAAA,QACZ,eAAiB,EAAA,GAAA;AAAA,OACnB;AAAA,KACF,CAAA,CAAA;AAAA,GAEH,CACH,CAAA,CAAA;AAEJ,CAAA;AAQA,SAAS,aAAc,CAAA;AAAA,EACrB,SAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,QAAA;AACL,CAAuB,EAAA;AACrB,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIX,gDAA0B,EAAA,CAAA;AAC3C,EAAA,MAAM,QAAQ,gBAAiB,EAAA,CAAA;AAE/B,EAAA,MAAM,gBAAgB,gBAAiB,EAAA,CAAA;AAEvC,EAAA,MAAM,QAAW,GAAA,aAAA,CAAc,QAAS,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAEjD,EAAA,SAAS,iBAAoB,GAAA;AAC3B,IAAA,MAAM,IAAO,GAAA,KAAA,CAAM,GAAI,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAChC,IAAI,IAAA,IAAA,KAAS,KAAa,CAAA,IAAA,IAAA,CAAK,IAAS,KAAA,CAAA;AAAG,MAAA,OAAA;AAE3C,IAAI,IAAA,aAAA,CAAc,QAAS,CAAA,MAAA,CAAO,EAAE,CAAA;AAAG,MAAA,OAAA;AAEvC,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAM,MAAA,CAAC,GAAG,CAAI,GAAA,IAAA,CAAA;AACd,MAAM,MAAA,IAAA,GAAOY,sBAAc,GAAG,CAAA,CAAA;AAC9B,MAAI,IAAA,CAACC,iCAAkB,IAAI,CAAA;AAAG,QAAA,OAAA;AAC9B,MAAA,IAAA,CAAK,WAAY,EAAA,CAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GACH;AAEA,EAAA,MAAM,SAAY,GAAAV,iBAAA;AAAA,IAChB,CAAC,EAAuB,KAAA;AACtB,MAAU,SAAA,CAAA,MAAA,CAAO,IAAI,EAAE,CAAA,CAAA;AACvB,MAAO,OAAA,MAAM,YAAa,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA,KACrC;AAAA,IACA,CAAC,MAAA,CAAO,EAAI,EAAA,SAAA,EAAW,YAAY,CAAA;AAAA,GACrC,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,SAAA;AAAA,IACL,SAAW,EAAAQ,qBAAA;AAAA,MACT,8CAAA;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,QAAA;AAAA,GAAA,kBAEH,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,YAAA,EAAY,WAAW,QAAW,GAAA,UAAA;AAAA,IAClC,OAAS,EAAA,iBAAA;AAAA,IACT,SAAU,EAAA,oCAAA;AAAA,IACV,YAAA,EAAc,WAAW,IAAO,GAAA,KAAA;AAAA,GAClC,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,gBAAqC,GAAA;AAC5C,EAAM,MAAA,aAAA,GAAgBG,iBAAWC,0CAAoB,CAAA,CAAA;AACrD,EAAA,IAAI,kBAAkB,IAAM,EAAA;AAC1B,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,6EAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAO,OAAA,aAAA,CAAA;AACT,CAAA;AAEA,SAAS,gBAAmB,GAAA;AAC1B,EAAM,MAAA,aAAA,GAAgBD,iBAAWE,0CAAoB,CAAA,CAAA;AACrD,EAAA,IAAI,kBAAkB,IAAM,EAAA;AAC1B,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,iEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;;"}

package/dist/comments/anchored-threads.mjs

@@ -0,0 +1,242 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Thread } from '@liveblocks/react-ui';
+import { $getNodeByKey } from 'lexical';
+import React__default, { useRef, useCallback, useMemo, useState, useLayoutEffect, useEffect, useContext } from 'react';
+import { classNames } from '../classnames.mjs';
+import { useRootElement } from '../liveblocks-plugin-provider.mjs';
+import { ThreadToNodesContext, ActiveThreadsContext } from './comment-plugin-provider.mjs';
+import { $isThreadMarkNode } from './thread-mark-node.mjs';
+
+const DEFAULT_GAP = 20;
+const DEFAULT_ACTIVE_THREAD_OFFSET = -12;
+const GAP = `var(--lb-lexical-anchored-threads-gap, ${DEFAULT_GAP}px)`;
+const ACTIVE_THREAD_OFFSET = `var(--lb-lexical-anchored-threads-active-thread-offset, ${DEFAULT_ACTIVE_THREAD_OFFSET}px)`;
+function compareNodes(a, b) {
+  const position = a.compareDocumentPosition(b);
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+    return -1;
+  if (position & Node.DOCUMENT_POSITION_PRECEDING)
+    return 1;
+  return 0;
+}
+function AnchoredThreads({
+  threads,
+  components,
+  className,
+  style,
+  ...divProps
+}) {
+  const [editor] = useLexicalComposerContext();
+  const Thread$1 = components?.Thread ?? Thread;
+  const containerRef = useRef(null);
+  const activeThreads = useActiveThreads();
+  const nodes = useThreadToNodes();
+  const getOrderedThreads = useCallback(() => {
+    return threads.map((thread) => {
+      const keys = nodes.get(thread.id);
+      if (keys === void 0 || keys.size === 0)
+        return null;
+      const elements2 = Array.from(keys.values()).map((key) => editor.getElementByKey(key)).filter(Boolean);
+      if (elements2.length === 0)
+        return null;
+      const element = elements2.sort(compareNodes)[0];
+      return {
+        thread,
+        element
+      };
+    }).filter(
+      (entry) => entry !== null
+    ).sort((a, b) => {
+      return compareNodes(a.element, b.element);
+    });
+  }, [editor, threads, nodes]);
+  const orderedThreads = useMemo(getOrderedThreads, [getOrderedThreads]);
+  const [elements, setElements] = useState(/* @__PURE__ */ new Map());
+  const [positions, setPositions] = useState(/* @__PURE__ */ new Map());
+  const onItemAdd = useCallback((id, el) => {
+    setElements((prev) => new Map(prev).set(id, el));
+  }, []);
+  const onItemRemove = useCallback((id) => {
+    setElements((prev) => {
+      const items = new Map(prev);
+      items.delete(id);
+      return items;
+    });
+  }, []);
+  const handlePositionThreads = useCallback(() => {
+    const container = containerRef.current;
+    if (container === null)
+      return;
+    const orderedThreads2 = getOrderedThreads();
+    function getAscendingThreads() {
+      if (activeThreads.length === 0)
+        return orderedThreads2;
+      const active = orderedThreads2.filter(
+        ({ thread }) => activeThreads.includes(thread.id)
+      );
+      const after = orderedThreads2.filter(({ thread, element }) => {
+        if (activeThreads.includes(thread.id))
+          return false;
+        const isAfter = active.some(({ element: activeElement }) => {
+          return compareNodes(activeElement, element) === -1;
+        });
+        return isAfter;
+      });
+      return active.concat(after);
+    }
+    const ascending = getAscendingThreads();
+    const descending = orderedThreads2.filter(
+      (entry) => !ascending.includes(entry)
+    );
+    const newPositions = /* @__PURE__ */ new Map();
+    for (const { thread, element } of ascending) {
+      const rect = element.getBoundingClientRect();
+      let top = rect.top - container.getBoundingClientRect().top;
+      for (const [id, position] of newPositions) {
+        const el = elements.get(id);
+        if (el === void 0)
+          continue;
+        if (top >= position && top <= position + el.getBoundingClientRect().height) {
+          top = position + el.getBoundingClientRect().height;
+        }
+      }
+      newPositions.set(thread.id, top);
+    }
+    for (const { thread, element } of descending.reverse()) {
+      const rect = element.getBoundingClientRect();
+      const el = elements.get(thread.id);
+      if (el === void 0)
+        continue;
+      let top = rect.top - container.getBoundingClientRect().top;
+      for (const [, position] of newPositions) {
+        if (top >= position - el.getBoundingClientRect().height) {
+          top = position - el.getBoundingClientRect().height;
+        }
+      }
+      newPositions.set(thread.id, top);
+    }
+    setPositions(newPositions);
+  }, [getOrderedThreads, activeThreads, elements]);
+  useLayoutEffect(() => {
+    handlePositionThreads();
+  }, [handlePositionThreads]);
+  useEffect(() => {
+    return editor.registerUpdateListener(() => {
+      handlePositionThreads();
+    });
+  }, [editor, handlePositionThreads]);
+  useEffect(() => {
+    const observer = new ResizeObserver(handlePositionThreads);
+    for (const element of elements.values()) {
+      observer.observe(element);
+    }
+    return () => observer.disconnect();
+  }, [elements, handlePositionThreads]);
+  const root = useRootElement();
+  useEffect(() => {
+    if (root === null)
+      return;
+    const observer = new ResizeObserver(handlePositionThreads);
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [root, handlePositionThreads]);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...divProps,
+    className: classNames(className, "lb-root lb-lexical-anchored-threads"),
+    ref: containerRef,
+    style: {
+      position: "relative",
+      ...style
+    }
+  }, orderedThreads.map(({ thread, element }) => {
+    const rect = element.getBoundingClientRect();
+    let top = rect.top;
+    if (positions.has(thread.id)) {
+      top = positions.get(thread.id);
+    }
+    const isActive = activeThreads.includes(thread.id);
+    return /* @__PURE__ */ React__default.createElement(ThreadWrapper, {
+      key: thread.id,
+      Thread: Thread$1,
+      thread,
+      onItemAdd,
+      onItemRemove,
+      style: {
+        position: "absolute",
+        transform: `translate3d(${isActive ? ACTIVE_THREAD_OFFSET : 0}, ${top}px, 0)`,
+        insetInlineStart: 0,
+        inlineSize: "100%",
+        paddingBlockEnd: GAP
+      }
+    });
+  }));
+}
+function ThreadWrapper({
+  onItemAdd,
+  onItemRemove,
+  thread,
+  Thread,
+  className,
+  ...divProps
+}) {
+  const [editor] = useLexicalComposerContext();
+  const nodes = useThreadToNodes();
+  const activeThreads = useActiveThreads();
+  const isActive = activeThreads.includes(thread.id);
+  function handleThreadClick() {
+    const keys = nodes.get(thread.id);
+    if (keys === void 0 || keys.size === 0)
+      return;
+    if (activeThreads.includes(thread.id))
+      return;
+    editor.update(() => {
+      const [key] = keys;
+      const node = $getNodeByKey(key);
+      if (!$isThreadMarkNode(node))
+        return;
+      node.selectStart();
+    });
+  }
+  const handleRef = useCallback(
+    (el) => {
+      onItemAdd(thread.id, el);
+      return () => onItemRemove(thread.id);
+    },
+    [thread.id, onItemAdd, onItemRemove]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ref: handleRef,
+    className: classNames(
+      "lb-lexical-anchored-threads-thread-container",
+      className
+    ),
+    ...divProps
+  }, /* @__PURE__ */ React__default.createElement(Thread, {
+    thread,
+    "data-state": isActive ? "active" : "inactive",
+    onClick: handleThreadClick,
+    className: "lb-lexical-anchored-threads-thread",
+    showComposer: isActive ? true : false
+  }));
+}
+function useThreadToNodes() {
+  const threadToNodes = useContext(ThreadToNodesContext);
+  if (threadToNodes === null) {
+    throw new Error(
+      "AnchoredThreads component must be used within a LiveblocksPlugin component."
+    );
+  }
+  return threadToNodes;
+}
+function useActiveThreads() {
+  const activeThreads = useContext(ActiveThreadsContext);
+  if (activeThreads === null) {
+    throw new Error(
+      "AnchoredThreads component must be used within LiveblocksPlugin."
+    );
+  }
+  return activeThreads;
+}
+
+export { AnchoredThreads, compareNodes };
+//# sourceMappingURL=anchored-threads.mjs.map

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

@@ -0,0 +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 {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { $getNodeByKey } from \"lexical\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\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  ...divProps\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      .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  return (\n    <div\n      {...divProps}\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        let top = rect.top;\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  ...divProps\n}: ThreadWrapperProps) {\n  const [editor] = useLexicalComposerContext();\n  const nodes = useThreadToNodes();\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  const handleRef = useCallback(\n    (el: HTMLDivElement) => {\n      onItemAdd(thread.id, el);\n      return () => onItemRemove(thread.id);\n    },\n    [thread.id, onItemAdd, onItemRemove]\n  );\n\n  return (\n    <div\n      ref={handleRef}\n      className={classNames(\n        \"lb-lexical-anchored-threads-thread-container\",\n        className\n      )}\n      {...divProps}\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","React"],"mappings":"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"}

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

@@ -31,6 +31,7 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const OnDeleteThreadCallback = React.createContext(null);
+const ActiveThreadsContext = React.createContext(null);
 const IsActiveThreadContext = React.createContext(null);
 const ThreadToNodesContext = React.createContext(
   null
@@ -79,15 +80,16 @@ function CommentPluginProvider({ children }) {
     store.get,
     store.get,
     React.useCallback(
-      () => react.selectedThreads(room.id, store.get(), {}),
+      () => react.selectedThreads(room.id, store.get(), {}).map((thread) => thread.id),
       [room.id, store]
-    )
+    ),
+    core.shallow
   );
   React.useEffect(() => {
     function getThreadMarkElements() {
       const activeElements = /* @__PURE__ */ new Set();
-      for (const thread of threads) {
-        const keys = threadToNodes.get(thread.id);
+      for (const id of threads) {
+        const keys = threadToNodes.get(id);
         if (keys === void 0)
           continue;
         for (const key of keys) {
@@ -101,7 +103,7 @@ function CommentPluginProvider({ children }) {
     }
     const elements = getThreadMarkElements();
     const theme = context.getTheme();
-    const classNames = ["lb-root", "lb-thread-mark"];
+    const classNames = ["lb-root", "lb-lexical-thread-mark"];
     if (theme && theme.liveblocks && "threadMark" in theme.liveblocks) {
       classNames.push(theme.liveblocks.threadMark);
     }
@@ -219,11 +221,13 @@ function CommentPluginProvider({ children }) {
   }, [editor]);
   return /* @__PURE__ */ React__namespace.createElement(OnDeleteThreadCallback.Provider, {
     value: handleThreadDelete
+  }, /* @__PURE__ */ React__namespace.createElement(ActiveThreadsContext.Provider, {
+    value: activeThreads
   }, /* @__PURE__ */ React__namespace.createElement(IsActiveThreadContext.Provider, {
     value: isThreadActive
   }, /* @__PURE__ */ React__namespace.createElement(ThreadToNodesContext.Provider, {
     value: threadToNodes
-  }, children)));
+  }, children))));
 }
 function useIsThreadActive(threadId) {
   const isActive = React__namespace.useContext(IsActiveThreadContext);
@@ -235,6 +239,7 @@ function useIsThreadActive(threadId) {
   return isActive(threadId);
 }
 
+exports.ActiveThreadsContext = ActiveThreadsContext;
 exports.CommentPluginProvider = CommentPluginProvider;
 exports.IsActiveThreadContext = IsActiveThreadContext;
 exports.OnDeleteThreadCallback = OnDeleteThreadCallback;