@liveblocks/react-tiptap 0.0.1 → 2.8.3-tiptap2

package/dist/comments/AnchoredThreads.js

@@ -0,0 +1,178 @@
+'use strict';
+
+var reactUi = require('@liveblocks/react-ui');
+var React = require('react');
+var classnames = require('../classnames.js');
+var types = require('../types.js');
+var utils = require('../utils.js');
+
+const DEFAULT_GAP = 20;
+const DEFAULT_ACTIVE_THREAD_OFFSET = -12;
+const GAP = `var(--lb-tiptap-anchored-threads-gap, ${DEFAULT_GAP}px)`;
+const ACTIVE_THREAD_OFFSET = `var(--lb-tiptap-anchored-threads-active-thread-offset, ${DEFAULT_ACTIVE_THREAD_OFFSET}px)`;
+function AnchoredThreads({
+  threads,
+  components,
+  className,
+  style,
+  editor,
+  ...props
+}) {
+  const Thread = components?.Thread ?? reactUi.Thread;
+  const containerRef = React.useRef(null);
+  const [orderedThreads, setOrderedThreads] = React.useState([]);
+  const [elements, setElements] = React.useState(/* @__PURE__ */ new Map());
+  const [positions, setPositions] = React.useState(/* @__PURE__ */ new Map());
+  const pluginState = editor ? types.THREADS_PLUGIN_KEY.getState(editor.state) : null;
+  const handlePositionThreads = React.useCallback(() => {
+    const container = containerRef.current;
+    if (container === null || !editor)
+      return;
+    const activeIndex = orderedThreads.findIndex(
+      ({ thread }) => thread.id === pluginState?.selectedThreadId
+    );
+    const ascending = activeIndex !== -1 ? orderedThreads.slice(activeIndex) : orderedThreads;
+    const descending = activeIndex !== -1 ? orderedThreads.slice(0, activeIndex) : [];
+    const newPositions = /* @__PURE__ */ new Map();
+    for (const { thread, position } of ascending) {
+      const coords = editor.view.coordsAtPos(Math.min(position.from, editor.view.state.doc.content.size - 1));
+      const rect = utils.getRectFromCoords(coords);
+      let top = rect.top - container.getBoundingClientRect().top;
+      for (const [id, position2] of newPositions) {
+        const el = elements.get(id);
+        if (el === void 0)
+          continue;
+        if (top >= position2 && top <= position2 + el.getBoundingClientRect().height) {
+          top = position2 + el.getBoundingClientRect().height;
+        }
+      }
+      newPositions.set(thread.id, top);
+    }
+    for (const { thread, position } of descending.reverse()) {
+      const coords = editor.view.coordsAtPos(position.from);
+      const rect = utils.getRectFromCoords(coords);
+      const el = elements.get(thread.id);
+      if (el === void 0)
+        continue;
+      let top = rect.top - container.getBoundingClientRect().top;
+      for (const [, position2] of newPositions) {
+        if (top >= position2 - el.getBoundingClientRect().height) {
+          top = position2 - el.getBoundingClientRect().height;
+        }
+      }
+      newPositions.set(thread.id, top);
+    }
+    setPositions(newPositions);
+  }, [editor, orderedThreads, pluginState?.selectedThreadId, elements]);
+  React.useEffect(() => {
+    if (!pluginState)
+      return;
+    setOrderedThreads(Array.from(pluginState.threadPositions, ([threadId, position]) => ({ threadId, position })).reduce((acc, { threadId, position }) => {
+      const thread = threads.find((thread2) => thread2.id === threadId && !thread2.resolved);
+      if (!thread)
+        return acc;
+      acc.push({ thread, position });
+      return acc;
+    }, []));
+    handlePositionThreads();
+  }, [pluginState, threads]);
+  React.useLayoutEffect(() => {
+    handlePositionThreads();
+  }, [handlePositionThreads]);
+  React.useEffect(() => {
+    const observer = new ResizeObserver(handlePositionThreads);
+    for (const element of elements.values()) {
+      observer.observe(element);
+    }
+    return () => observer.disconnect();
+  }, [elements, handlePositionThreads]);
+  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 onThreadSelect = React.useCallback((id) => {
+    if (!editor)
+      return;
+    editor.commands.selectThread(id);
+  }, [editor]);
+  if (!editor)
+    return null;
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: classnames.classNames(className, "lb-root lb-tiptap-anchored-threads"),
+    ref: containerRef,
+    style: {
+      position: "relative",
+      ...style
+    }
+  }, orderedThreads.map(({ thread, position }) => {
+    const coords = editor.view.coordsAtPos(Math.min(position.from, editor.state.doc.content.size - 1));
+    const rect = utils.getRectFromCoords(coords);
+    const offset = editor.options.element.getBoundingClientRect().top;
+    let top = rect.top - offset;
+    if (positions.has(thread.id)) {
+      top = positions.get(thread.id);
+    }
+    const isActive = thread.id === pluginState?.selectedThreadId;
+    return /* @__PURE__ */ React.createElement(ThreadWrapper, {
+      key: thread.id,
+      onThreadClick: onThreadSelect,
+      onItemAdd,
+      onItemRemove,
+      Thread,
+      thread,
+      isActive,
+      style: {
+        position: "absolute",
+        transform: `translate3d(${isActive ? ACTIVE_THREAD_OFFSET : 0}, ${top}px, 0)`,
+        insetInlineStart: 0,
+        inlineSize: "100%",
+        paddingBlockEnd: GAP
+      }
+    });
+  }));
+}
+function ThreadWrapper({
+  onThreadClick,
+  onItemAdd,
+  onItemRemove,
+  thread,
+  Thread,
+  className,
+  isActive,
+  ...props
+}) {
+  const handleRef = React.useCallback(
+    (el) => {
+      onItemAdd(thread.id, el);
+      return () => onItemRemove(thread.id);
+    },
+    [thread.id, onItemAdd, onItemRemove]
+  );
+  function handleThreadClick() {
+    onThreadClick(thread.id);
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: handleRef,
+    className: classnames.classNames(
+      "lb-tiptap-anchored-threads-thread-container",
+      className
+    ),
+    ...props
+  }, /* @__PURE__ */ React.createElement(Thread, {
+    thread,
+    "data-state": isActive ? "active" : "inactive",
+    onClick: handleThreadClick,
+    className: "lb-tiptap-anchored-threads-thread",
+    showComposer: isActive ? true : false
+  }));
+}
+
+exports.AnchoredThreads = AnchoredThreads;
+//# sourceMappingURL=AnchoredThreads.js.map

package/dist/comments/AnchoredThreads.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchoredThreads.js","sources":["../../src/comments/AnchoredThreads.tsx"],"sourcesContent":["import type { BaseMetadata, DM, ThreadData } from \"@liveblocks/core\";\nimport {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport type { Editor } from \"@tiptap/react\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport type { ThreadPluginState } from \"../types\";\nimport { THREADS_PLUGIN_KEY } from \"../types\";\nimport { getRectFromCoords } from \"../utils\";\n\nconst DEFAULT_GAP = 20;\nconst DEFAULT_ACTIVE_THREAD_OFFSET = -12;\n\n// TODO: move that back to a variable\nconst GAP = `var(--lb-tiptap-anchored-threads-gap, ${DEFAULT_GAP}px)`;\nconst ACTIVE_THREAD_OFFSET = `var(--lb-tiptap-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   * The tiptap editor\n   */\n  editor: Editor | null;\n}\n\nexport function AnchoredThreads({\n  threads,\n  components,\n  className,\n  style,\n  editor,\n  ...props\n}: AnchoredThreadsProps) {\n  const Thread = components?.Thread ?? DefaultThread;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [orderedThreads, setOrderedThreads] = useState<{ position: { from: number, to: number }, thread: ThreadData }[]>([]);\n  const [elements, setElements] = useState<Map<string, HTMLElement>>(new Map());\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 pluginState = editor ? THREADS_PLUGIN_KEY.getState(editor.state) as ThreadPluginState : null;\n\n  // TODO: lexical supoprts multiple threads being active, should probably do that here as well\n  const handlePositionThreads = useCallback(() => {\n    const container = containerRef.current;\n    if (container === null || !editor) return;\n\n    const activeIndex = orderedThreads.findIndex(({ thread }) =>\n      thread.id === pluginState?.selectedThreadId\n    );\n    const ascending = activeIndex !== -1 ? orderedThreads.slice(activeIndex) : orderedThreads;\n    const descending = activeIndex !== -1 ? orderedThreads.slice(0, activeIndex) : [];\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, position } of ascending) {\n      const coords = editor.view.coordsAtPos(Math.min(position.from, editor.view.state.doc.content.size - 1));\n      const rect = getRectFromCoords(coords);\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, position } of descending.reverse()) {\n      const coords = editor.view.coordsAtPos(position.from);\n      const rect = getRectFromCoords(coords);\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  }, [editor, orderedThreads, pluginState?.selectedThreadId, elements]);\n\n  useEffect(() => {\n    if (!pluginState) return;\n    setOrderedThreads(Array.from(pluginState.threadPositions, ([threadId, position]) => ({ threadId, position })).reduce((acc, { threadId, position }) => {\n      const thread = threads.find((thread) => thread.id === threadId && !thread.resolved);\n      if (!thread) return acc;\n      acc.push({ thread, position });\n      return acc;\n    }, [] as { thread: ThreadData, position: { from: number, to: number } }[]));\n    handlePositionThreads();\n    // disable exhaustive deps because we don't want an infinite loop\n    // eslint-disable-next-line react-hooks/exhaustive-deps \n  }, [pluginState, threads]);\n\n\n  useLayoutEffect(() => {\n    handlePositionThreads();\n  }, [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 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 onThreadSelect = useCallback((id: string) => {\n    if (!editor) return;\n    editor.commands.selectThread(id);\n  }, [editor]);\n\n\n  if (!editor) return null;\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, \"lb-root lb-tiptap-anchored-threads\")}\n      ref={containerRef}\n      style={{\n        position: \"relative\",\n        ...style,\n      }}\n    >\n      {orderedThreads.map(({ thread, position }) => {\n        const coords = editor.view.coordsAtPos(Math.min(position.from, editor.state.doc.content.size - 1));\n        const rect = getRectFromCoords(coords);\n        const offset = editor.options.element.getBoundingClientRect().top;\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 = thread.id === pluginState?.selectedThreadId;\n\n        return (\n          <ThreadWrapper\n            key={thread.id}\n            onThreadClick={onThreadSelect}\n            onItemAdd={onItemAdd}\n            onItemRemove={onItemRemove}\n            Thread={Thread}\n            thread={thread}\n            isActive={isActive}\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  onThreadClick: (id: string) => void;\n  onItemAdd: (id: string, el: HTMLElement) => void;\n  onItemRemove: (id: string) => void;\n  isActive: boolean;\n}\n\nfunction ThreadWrapper({\n  onThreadClick,\n  onItemAdd,\n  onItemRemove,\n  thread,\n  Thread,\n  className,\n  isActive,\n  ...props\n}: ThreadWrapperProps) {\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\n  function handleThreadClick() {\n    onThreadClick(thread.id);\n  }\n\n  return (\n    <div\n      ref={handleRef}\n      className={classNames(\n        \"lb-tiptap-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-tiptap-anchored-threads-thread\"\n        showComposer={isActive ? true : false}\n      />\n    </div>\n  );\n}\n"],"names":["DefaultThread","useRef","useState","THREADS_PLUGIN_KEY","useCallback","getRectFromCoords","position","useEffect","thread","useLayoutEffect","classNames"],"mappings":";;;;;;;;AAoBA,MAAM,WAAc,GAAA,EAAA,CAAA;AACpB,MAAM,4BAA+B,GAAA,CAAA,EAAA,CAAA;AAGrC,MAAM,MAAM,CAAyC,sCAAA,EAAA,WAAA,CAAA,GAAA,CAAA,CAAA;AACrD,MAAM,uBAAuB,CAA0D,uDAAA,EAAA,4BAAA,CAAA,GAAA,CAAA,CAAA;AAuBhF,SAAS,eAAgB,CAAA;AAAA,EAC9B,OAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAyB,EAAA;AACvB,EAAM,MAAA,MAAA,GAAS,YAAY,MAAU,IAAAA,cAAA,CAAA;AACrC,EAAM,MAAA,YAAA,GAAeC,aAAuB,IAAI,CAAA,CAAA;AAChD,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAAC,cAAA,CAA2E,EAAE,CAAA,CAAA;AACzH,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAIA,cAAmC,iBAAA,IAAI,KAAK,CAAA,CAAA;AAC5E,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,IAAIA,cAA8B,iBAAA,IAAI,KAAK,CAAA,CAAA;AAEzE,EAAA,MAAM,cAAc,MAAS,GAAAC,wBAAA,CAAmB,QAAS,CAAA,MAAA,CAAO,KAAK,CAAyB,GAAA,IAAA,CAAA;AAG9F,EAAM,MAAA,qBAAA,GAAwBC,kBAAY,MAAM;AAC9C,IAAA,MAAM,YAAY,YAAa,CAAA,OAAA,CAAA;AAC/B,IAAI,IAAA,SAAA,KAAc,QAAQ,CAAC,MAAA;AAAQ,MAAA,OAAA;AAEnC,IAAA,MAAM,cAAc,cAAe,CAAA,SAAA;AAAA,MAAU,CAAC,EAAE,MAAA,EAC9C,KAAA,MAAA,CAAO,OAAO,WAAa,EAAA,gBAAA;AAAA,KAC7B,CAAA;AACA,IAAA,MAAM,YAAY,WAAgB,KAAA,CAAA,CAAA,GAAK,cAAe,CAAA,KAAA,CAAM,WAAW,CAAI,GAAA,cAAA,CAAA;AAC3E,IAAM,MAAA,UAAA,GAAa,gBAAgB,CAAK,CAAA,GAAA,cAAA,CAAe,MAAM,CAAG,EAAA,WAAW,IAAI,EAAC,CAAA;AAEhF,IAAM,MAAA,YAAA,uBAAmB,GAAoB,EAAA,CAAA;AAG7C,IAAA,KAAA,MAAW,EAAE,MAAA,EAAQ,QAAS,EAAA,IAAK,SAAW,EAAA;AAC5C,MAAA,MAAM,MAAS,GAAA,MAAA,CAAO,IAAK,CAAA,WAAA,CAAY,KAAK,GAAI,CAAA,QAAA,CAAS,IAAM,EAAA,MAAA,CAAO,KAAK,KAAM,CAAA,GAAA,CAAI,OAAQ,CAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AACtG,MAAM,MAAA,IAAA,GAAOC,wBAAkB,MAAM,CAAA,CAAA;AACrC,MAAA,IAAI,GAAM,GAAA,IAAA,CAAK,GAAM,GAAA,SAAA,CAAU,uBAAwB,CAAA,GAAA,CAAA;AAEvD,MAAA,KAAA,MAAW,CAAC,EAAA,EAAIC,SAAQ,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,OAAOA,SACP,IAAA,GAAA,IAAOA,YAAW,EAAG,CAAA,qBAAA,GAAwB,MAC7C,EAAA;AACA,UAAMA,GAAAA,GAAAA,SAAAA,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,QAAA,EAAc,IAAA,UAAA,CAAW,SAAW,EAAA;AACvD,MAAA,MAAM,MAAS,GAAA,MAAA,CAAO,IAAK,CAAA,WAAA,CAAY,SAAS,IAAI,CAAA,CAAA;AACpD,MAAM,MAAA,IAAA,GAAOD,wBAAkB,MAAM,CAAA,CAAA;AAErC,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,GAAGC,SAAQ,CAAA,IAAK,YAAc,EAAA;AACvC,QAAA,IAAI,GAAOA,IAAAA,SAAAA,GAAW,EAAG,CAAA,qBAAA,GAAwB,MAAQ,EAAA;AACvD,UAAMA,GAAAA,GAAAA,SAAAA,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,KACxB,CAAC,MAAA,EAAQ,gBAAgB,WAAa,EAAA,gBAAA,EAAkB,QAAQ,CAAC,CAAA,CAAA;AAEpE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,WAAA;AAAa,MAAA,OAAA;AAClB,IAAkB,iBAAA,CAAA,KAAA,CAAM,KAAK,WAAY,CAAA,eAAA,EAAiB,CAAC,CAAC,QAAA,EAAU,QAAQ,CAAO,MAAA,EAAE,UAAU,QAAS,EAAA,CAAE,EAAE,MAAO,CAAA,CAAC,KAAK,EAAE,QAAA,EAAU,UAAe,KAAA;AACpJ,MAAM,MAAA,MAAA,GAAS,OAAQ,CAAA,IAAA,CAAK,CAACC,OAAAA,KAAWA,QAAO,EAAO,KAAA,QAAA,IAAY,CAACA,OAAAA,CAAO,QAAQ,CAAA,CAAA;AAClF,MAAA,IAAI,CAAC,MAAA;AAAQ,QAAO,OAAA,GAAA,CAAA;AACpB,MAAA,GAAA,CAAI,IAAK,CAAA,EAAE,MAAQ,EAAA,QAAA,EAAU,CAAA,CAAA;AAC7B,MAAO,OAAA,GAAA,CAAA;AAAA,KACT,EAAG,EAAsE,CAAC,CAAA,CAAA;AAC1E,IAAsB,qBAAA,EAAA,CAAA;AAAA,GAGrB,EAAA,CAAC,WAAa,EAAA,OAAO,CAAC,CAAA,CAAA;AAGzB,EAAAC,qBAAA,CAAgB,MAAM;AACpB,IAAsB,qBAAA,EAAA,CAAA;AAAA,GACxB,EAAG,CAAC,qBAAqB,CAAC,CAAA,CAAA;AAE1B,EAAAF,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,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,cAAA,GAAiBA,iBAAY,CAAA,CAAC,EAAe,KAAA;AACjD,IAAA,IAAI,CAAC,MAAA;AAAQ,MAAA,OAAA;AACb,IAAO,MAAA,CAAA,QAAA,CAAS,aAAa,EAAE,CAAA,CAAA;AAAA,GACjC,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAGX,EAAA,IAAI,CAAC,MAAA;AAAQ,IAAO,OAAA,IAAA,CAAA;AAEpB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,SAAA,EAAWM,qBAAW,CAAA,SAAA,EAAW,oCAAoC,CAAA;AAAA,IACrE,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,UAAe,KAAA;AAC5C,IAAA,MAAM,MAAS,GAAA,MAAA,CAAO,IAAK,CAAA,WAAA,CAAY,KAAK,GAAI,CAAA,QAAA,CAAS,IAAM,EAAA,MAAA,CAAO,KAAM,CAAA,GAAA,CAAI,OAAQ,CAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AACjG,IAAM,MAAA,IAAA,GAAOL,wBAAkB,MAAM,CAAA,CAAA;AACrC,IAAA,MAAM,MAAS,GAAA,MAAA,CAAO,OAAQ,CAAA,OAAA,CAAQ,uBAAwB,CAAA,GAAA,CAAA;AAE9D,IAAI,IAAA,GAAA,GAAM,KAAK,GAAM,GAAA,MAAA,CAAA;AAErB,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,IAAM,MAAA,QAAA,GAAW,MAAO,CAAA,EAAA,KAAO,WAAa,EAAA,gBAAA,CAAA;AAE5C,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,MACC,KAAK,MAAO,CAAA,EAAA;AAAA,MACZ,aAAe,EAAA,cAAA;AAAA,MACf,SAAA;AAAA,MACA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;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;AAUA,SAAS,aAAc,CAAA;AAAA,EACrB,aAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAuB,EAAA;AAErB,EAAA,MAAM,SAAY,GAAAD,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;AAGA,EAAA,SAAS,iBAAoB,GAAA;AAC3B,IAAA,aAAA,CAAc,OAAO,EAAE,CAAA,CAAA;AAAA,GACzB;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,SAAA;AAAA,IACL,SAAW,EAAAM,qBAAA;AAAA,MACT,6CAAA;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;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,mCAAA;AAAA,IACV,YAAA,EAAc,WAAW,IAAO,GAAA,KAAA;AAAA,GAClC,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/comments/AnchoredThreads.mjs

@@ -0,0 +1,176 @@
+import { Thread } from '@liveblocks/react-ui';
+import React, { useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { classNames } from '../classnames.mjs';
+import { THREADS_PLUGIN_KEY } from '../types.mjs';
+import { getRectFromCoords } from '../utils.mjs';
+
+const DEFAULT_GAP = 20;
+const DEFAULT_ACTIVE_THREAD_OFFSET = -12;
+const GAP = `var(--lb-tiptap-anchored-threads-gap, ${DEFAULT_GAP}px)`;
+const ACTIVE_THREAD_OFFSET = `var(--lb-tiptap-anchored-threads-active-thread-offset, ${DEFAULT_ACTIVE_THREAD_OFFSET}px)`;
+function AnchoredThreads({
+  threads,
+  components,
+  className,
+  style,
+  editor,
+  ...props
+}) {
+  const Thread$1 = components?.Thread ?? Thread;
+  const containerRef = useRef(null);
+  const [orderedThreads, setOrderedThreads] = useState([]);
+  const [elements, setElements] = useState(/* @__PURE__ */ new Map());
+  const [positions, setPositions] = useState(/* @__PURE__ */ new Map());
+  const pluginState = editor ? THREADS_PLUGIN_KEY.getState(editor.state) : null;
+  const handlePositionThreads = useCallback(() => {
+    const container = containerRef.current;
+    if (container === null || !editor)
+      return;
+    const activeIndex = orderedThreads.findIndex(
+      ({ thread }) => thread.id === pluginState?.selectedThreadId
+    );
+    const ascending = activeIndex !== -1 ? orderedThreads.slice(activeIndex) : orderedThreads;
+    const descending = activeIndex !== -1 ? orderedThreads.slice(0, activeIndex) : [];
+    const newPositions = /* @__PURE__ */ new Map();
+    for (const { thread, position } of ascending) {
+      const coords = editor.view.coordsAtPos(Math.min(position.from, editor.view.state.doc.content.size - 1));
+      const rect = getRectFromCoords(coords);
+      let top = rect.top - container.getBoundingClientRect().top;
+      for (const [id, position2] of newPositions) {
+        const el = elements.get(id);
+        if (el === void 0)
+          continue;
+        if (top >= position2 && top <= position2 + el.getBoundingClientRect().height) {
+          top = position2 + el.getBoundingClientRect().height;
+        }
+      }
+      newPositions.set(thread.id, top);
+    }
+    for (const { thread, position } of descending.reverse()) {
+      const coords = editor.view.coordsAtPos(position.from);
+      const rect = getRectFromCoords(coords);
+      const el = elements.get(thread.id);
+      if (el === void 0)
+        continue;
+      let top = rect.top - container.getBoundingClientRect().top;
+      for (const [, position2] of newPositions) {
+        if (top >= position2 - el.getBoundingClientRect().height) {
+          top = position2 - el.getBoundingClientRect().height;
+        }
+      }
+      newPositions.set(thread.id, top);
+    }
+    setPositions(newPositions);
+  }, [editor, orderedThreads, pluginState?.selectedThreadId, elements]);
+  useEffect(() => {
+    if (!pluginState)
+      return;
+    setOrderedThreads(Array.from(pluginState.threadPositions, ([threadId, position]) => ({ threadId, position })).reduce((acc, { threadId, position }) => {
+      const thread = threads.find((thread2) => thread2.id === threadId && !thread2.resolved);
+      if (!thread)
+        return acc;
+      acc.push({ thread, position });
+      return acc;
+    }, []));
+    handlePositionThreads();
+  }, [pluginState, threads]);
+  useLayoutEffect(() => {
+    handlePositionThreads();
+  }, [handlePositionThreads]);
+  useEffect(() => {
+    const observer = new ResizeObserver(handlePositionThreads);
+    for (const element of elements.values()) {
+      observer.observe(element);
+    }
+    return () => observer.disconnect();
+  }, [elements, handlePositionThreads]);
+  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 onThreadSelect = useCallback((id) => {
+    if (!editor)
+      return;
+    editor.commands.selectThread(id);
+  }, [editor]);
+  if (!editor)
+    return null;
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: classNames(className, "lb-root lb-tiptap-anchored-threads"),
+    ref: containerRef,
+    style: {
+      position: "relative",
+      ...style
+    }
+  }, orderedThreads.map(({ thread, position }) => {
+    const coords = editor.view.coordsAtPos(Math.min(position.from, editor.state.doc.content.size - 1));
+    const rect = getRectFromCoords(coords);
+    const offset = editor.options.element.getBoundingClientRect().top;
+    let top = rect.top - offset;
+    if (positions.has(thread.id)) {
+      top = positions.get(thread.id);
+    }
+    const isActive = thread.id === pluginState?.selectedThreadId;
+    return /* @__PURE__ */ React.createElement(ThreadWrapper, {
+      key: thread.id,
+      onThreadClick: onThreadSelect,
+      onItemAdd,
+      onItemRemove,
+      Thread: Thread$1,
+      thread,
+      isActive,
+      style: {
+        position: "absolute",
+        transform: `translate3d(${isActive ? ACTIVE_THREAD_OFFSET : 0}, ${top}px, 0)`,
+        insetInlineStart: 0,
+        inlineSize: "100%",
+        paddingBlockEnd: GAP
+      }
+    });
+  }));
+}
+function ThreadWrapper({
+  onThreadClick,
+  onItemAdd,
+  onItemRemove,
+  thread,
+  Thread,
+  className,
+  isActive,
+  ...props
+}) {
+  const handleRef = useCallback(
+    (el) => {
+      onItemAdd(thread.id, el);
+      return () => onItemRemove(thread.id);
+    },
+    [thread.id, onItemAdd, onItemRemove]
+  );
+  function handleThreadClick() {
+    onThreadClick(thread.id);
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: handleRef,
+    className: classNames(
+      "lb-tiptap-anchored-threads-thread-container",
+      className
+    ),
+    ...props
+  }, /* @__PURE__ */ React.createElement(Thread, {
+    thread,
+    "data-state": isActive ? "active" : "inactive",
+    onClick: handleThreadClick,
+    className: "lb-tiptap-anchored-threads-thread",
+    showComposer: isActive ? true : false
+  }));
+}
+
+export { AnchoredThreads };
+//# sourceMappingURL=AnchoredThreads.mjs.map

package/dist/comments/AnchoredThreads.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchoredThreads.mjs","sources":["../../src/comments/AnchoredThreads.tsx"],"sourcesContent":["import type { BaseMetadata, DM, ThreadData } from \"@liveblocks/core\";\nimport {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport type { Editor } from \"@tiptap/react\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport type { ThreadPluginState } from \"../types\";\nimport { THREADS_PLUGIN_KEY } from \"../types\";\nimport { getRectFromCoords } from \"../utils\";\n\nconst DEFAULT_GAP = 20;\nconst DEFAULT_ACTIVE_THREAD_OFFSET = -12;\n\n// TODO: move that back to a variable\nconst GAP = `var(--lb-tiptap-anchored-threads-gap, ${DEFAULT_GAP}px)`;\nconst ACTIVE_THREAD_OFFSET = `var(--lb-tiptap-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   * The tiptap editor\n   */\n  editor: Editor | null;\n}\n\nexport function AnchoredThreads({\n  threads,\n  components,\n  className,\n  style,\n  editor,\n  ...props\n}: AnchoredThreadsProps) {\n  const Thread = components?.Thread ?? DefaultThread;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [orderedThreads, setOrderedThreads] = useState<{ position: { from: number, to: number }, thread: ThreadData }[]>([]);\n  const [elements, setElements] = useState<Map<string, HTMLElement>>(new Map());\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 pluginState = editor ? THREADS_PLUGIN_KEY.getState(editor.state) as ThreadPluginState : null;\n\n  // TODO: lexical supoprts multiple threads being active, should probably do that here as well\n  const handlePositionThreads = useCallback(() => {\n    const container = containerRef.current;\n    if (container === null || !editor) return;\n\n    const activeIndex = orderedThreads.findIndex(({ thread }) =>\n      thread.id === pluginState?.selectedThreadId\n    );\n    const ascending = activeIndex !== -1 ? orderedThreads.slice(activeIndex) : orderedThreads;\n    const descending = activeIndex !== -1 ? orderedThreads.slice(0, activeIndex) : [];\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, position } of ascending) {\n      const coords = editor.view.coordsAtPos(Math.min(position.from, editor.view.state.doc.content.size - 1));\n      const rect = getRectFromCoords(coords);\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, position } of descending.reverse()) {\n      const coords = editor.view.coordsAtPos(position.from);\n      const rect = getRectFromCoords(coords);\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  }, [editor, orderedThreads, pluginState?.selectedThreadId, elements]);\n\n  useEffect(() => {\n    if (!pluginState) return;\n    setOrderedThreads(Array.from(pluginState.threadPositions, ([threadId, position]) => ({ threadId, position })).reduce((acc, { threadId, position }) => {\n      const thread = threads.find((thread) => thread.id === threadId && !thread.resolved);\n      if (!thread) return acc;\n      acc.push({ thread, position });\n      return acc;\n    }, [] as { thread: ThreadData, position: { from: number, to: number } }[]));\n    handlePositionThreads();\n    // disable exhaustive deps because we don't want an infinite loop\n    // eslint-disable-next-line react-hooks/exhaustive-deps \n  }, [pluginState, threads]);\n\n\n  useLayoutEffect(() => {\n    handlePositionThreads();\n  }, [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 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 onThreadSelect = useCallback((id: string) => {\n    if (!editor) return;\n    editor.commands.selectThread(id);\n  }, [editor]);\n\n\n  if (!editor) return null;\n\n  return (\n    <div\n      {...props}\n      className={classNames(className, \"lb-root lb-tiptap-anchored-threads\")}\n      ref={containerRef}\n      style={{\n        position: \"relative\",\n        ...style,\n      }}\n    >\n      {orderedThreads.map(({ thread, position }) => {\n        const coords = editor.view.coordsAtPos(Math.min(position.from, editor.state.doc.content.size - 1));\n        const rect = getRectFromCoords(coords);\n        const offset = editor.options.element.getBoundingClientRect().top;\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 = thread.id === pluginState?.selectedThreadId;\n\n        return (\n          <ThreadWrapper\n            key={thread.id}\n            onThreadClick={onThreadSelect}\n            onItemAdd={onItemAdd}\n            onItemRemove={onItemRemove}\n            Thread={Thread}\n            thread={thread}\n            isActive={isActive}\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  onThreadClick: (id: string) => void;\n  onItemAdd: (id: string, el: HTMLElement) => void;\n  onItemRemove: (id: string) => void;\n  isActive: boolean;\n}\n\nfunction ThreadWrapper({\n  onThreadClick,\n  onItemAdd,\n  onItemRemove,\n  thread,\n  Thread,\n  className,\n  isActive,\n  ...props\n}: ThreadWrapperProps) {\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\n  function handleThreadClick() {\n    onThreadClick(thread.id);\n  }\n\n  return (\n    <div\n      ref={handleRef}\n      className={classNames(\n        \"lb-tiptap-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-tiptap-anchored-threads-thread\"\n        showComposer={isActive ? true : false}\n      />\n    </div>\n  );\n}\n"],"names":["Thread","DefaultThread","position","thread"],"mappings":"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"}

package/dist/comments/CommentsExtension.js

@@ -0,0 +1,224 @@
+'use strict';
+
+var core = require('@tiptap/core');
+var state = require('@tiptap/pm/state');
+var view = require('@tiptap/pm/view');
+var yProsemirror = require('y-prosemirror');
+var types = require('../types.js');
+
+const Comment = core.Mark.create({
+  name: types.LIVEBLOCKS_COMMENT_MARK_TYPE,
+  excludes: "",
+  inclusive: false,
+  keepOnSplit: true,
+  addAttributes() {
+    return {
+      orphan: {
+        parseHTML: (element) => !!element.getAttribute("data-orphan"),
+        renderHTML: (attributes) => {
+          return attributes.orphan ? {
+            "data-orphan": "true"
+          } : {};
+        },
+        default: false
+      },
+      threadId: {
+        parseHTML: (element) => element.getAttribute("data-lb-thread-id"),
+        renderHTML: (attributes) => {
+          return {
+            "data-lb-thread-id": attributes.threadId
+          };
+        },
+        default: ""
+      }
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      core.mergeAttributes(HTMLAttributes, {
+        class: "lb-root lb-tiptap-thread-mark"
+      })
+    ];
+  },
+  addProseMirrorPlugins() {
+    const updateState = (doc, selectedThreadId) => {
+      const threadPositions = /* @__PURE__ */ new Map();
+      const decorations = [];
+      doc.descendants((node, pos) => {
+        node.marks.forEach((mark) => {
+          if (mark.type === this.type) {
+            const thisThreadId = mark.attrs.threadId;
+            if (!thisThreadId) {
+              return;
+            }
+            const from = pos;
+            const to = from + node.nodeSize;
+            const currentPosition = threadPositions.get(thisThreadId) ?? {
+              from: Infinity,
+              to: 0
+            };
+            threadPositions.set(thisThreadId, {
+              from: Math.min(from, currentPosition.from),
+              to: Math.max(to, currentPosition.to)
+            });
+            if (selectedThreadId === thisThreadId) {
+              decorations.push(
+                view.Decoration.inline(from, to, {
+                  class: "lb-root lb-tiptap-thread-mark-selected"
+                })
+              );
+            }
+          }
+        });
+      });
+      return {
+        decorations: view.DecorationSet.create(doc, decorations),
+        selectedThreadId,
+        threadPositions,
+        selectedThreadPos: selectedThreadId !== null ? threadPositions.get(selectedThreadId)?.to ?? null : null
+      };
+    };
+    return [
+      new state.Plugin({
+        key: types.THREADS_PLUGIN_KEY,
+        state: {
+          init() {
+            return {
+              threadPositions: /* @__PURE__ */ new Map(),
+              selectedThreadId: null,
+              selectedThreadPos: null,
+              decorations: view.DecorationSet.empty
+            };
+          },
+          apply(tr, state) {
+            const action = tr.getMeta(types.THREADS_PLUGIN_KEY);
+            if (!tr.docChanged && !action) {
+              return state;
+            }
+            if (!action) {
+              return updateState(tr.doc, state.selectedThreadId);
+            }
+            if (action.name === types.ThreadPluginActions.SET_SELECTED_THREAD_ID && state.selectedThreadId !== action.data) {
+              return updateState(tr.doc, action.data);
+            }
+            return state;
+          }
+        },
+        props: {
+          decorations: (state) => {
+            return types.THREADS_PLUGIN_KEY.getState(state)?.decorations ?? view.DecorationSet.empty;
+          },
+          handleClick: (view, pos, event) => {
+            if (event.button !== 0) {
+              return;
+            }
+            const selectThread = (threadId2) => {
+              view.dispatch(
+                view.state.tr.setMeta(types.THREADS_PLUGIN_KEY, {
+                  name: types.ThreadPluginActions.SET_SELECTED_THREAD_ID,
+                  data: threadId2
+                })
+              );
+            };
+            const node = view.state.doc.nodeAt(pos);
+            if (!node) {
+              selectThread(null);
+              return;
+            }
+            const commentMark = node.marks.find(
+              (mark) => mark.type === this.type
+            );
+            if (commentMark?.attrs.orphan) {
+              selectThread(null);
+              return;
+            }
+            const threadId = commentMark?.attrs.threadId;
+            selectThread(threadId ?? null);
+          }
+        }
+      })
+    ];
+  }
+});
+const CommentsExtension = core.Extension.create({
+  name: "liveblocksComments",
+  priority: 95,
+  addExtensions() {
+    return [Comment];
+  },
+  addStorage() {
+    return {
+      pendingCommentSelection: null
+    };
+  },
+  addCommands() {
+    return {
+      addPendingComment: () => () => {
+        if (this.editor.state.selection.empty) {
+          return false;
+        }
+        this.editor.view.dispatch(
+          this.editor.state.tr.setMeta(types.THREADS_PLUGIN_KEY, {
+            name: types.ThreadPluginActions.SET_SELECTED_THREAD_ID,
+            data: null
+          })
+        );
+        this.storage.pendingCommentSelection = new state.TextSelection(
+          this.editor.state.selection.$anchor,
+          this.editor.state.selection.$head
+        );
+        return true;
+      },
+      selectThread: (id) => () => {
+        this.editor.view.dispatch(
+          this.editor.state.tr.setMeta(types.THREADS_PLUGIN_KEY, {
+            name: types.ThreadPluginActions.SET_SELECTED_THREAD_ID,
+            data: id
+          })
+        );
+        return true;
+      },
+      addComment: (id) => ({ commands }) => {
+        if (!this.storage.pendingCommentSelection) {
+          return false;
+        }
+        this.editor.state.selection = this.storage.pendingCommentSelection;
+        commands.setMark(types.LIVEBLOCKS_COMMENT_MARK_TYPE, { threadId: id });
+        this.storage.pendingCommentSelection = null;
+        return true;
+      }
+    };
+  },
+  onSelectionUpdate({ transaction }) {
+    if (!this.storage.pendingCommentSelection || transaction.getMeta(yProsemirror.ySyncPluginKey)) {
+      return;
+    }
+    this.storage.pendingCommentSelection = null;
+  },
+  addProseMirrorPlugins() {
+    return [
+      new state.Plugin({
+        key: types.ACTIVE_SELECTION_PLUGIN,
+        props: {
+          decorations: ({ doc }) => {
+            const active = this.storage.pendingCommentSelection !== null;
+            if (!active) {
+              return view.DecorationSet.create(doc, []);
+            }
+            const { from, to } = this.storage.pendingCommentSelection;
+            const decorations = [
+              view.Decoration.inline(from, to, {
+                class: "lb-root lb-tiptap-active-selection"
+              })
+            ];
+            return view.DecorationSet.create(doc, decorations);
+          }
+        }
+      })
+    ];
+  }
+});
+
+exports.CommentsExtension = CommentsExtension;
+//# sourceMappingURL=CommentsExtension.js.map