@liveblocks/react-tiptap 0.0.1 → 2.8.3-tiptap2

package/dist/comments/FloatingThreads.js

@@ -0,0 +1,159 @@
+'use strict';
+
+var reactDom = require('@floating-ui/react-dom');
+var reactUi = require('@liveblocks/react-ui');
+var React = require('react');
+var reactDom$1 = require('react-dom');
+var classnames = require('../classnames.js');
+var types = require('../types.js');
+
+function FloatingThreads({
+  threads,
+  components,
+  editor,
+  ...props
+}) {
+  const Thread = components?.Thread ?? reactUi.Thread;
+  const pluginState = editor ? types.THREADS_PLUGIN_KEY.getState(editor.state) : null;
+  const [activeThread, setActiveThread] = React.useState(null);
+  React.useEffect(() => {
+    if (!editor || !pluginState) {
+      setActiveThread(null);
+      return;
+    }
+    const { selectedThreadId, selectedThreadPos } = pluginState;
+    if (selectedThreadId === null || selectedThreadPos === null) {
+      setActiveThread(null);
+      return;
+    }
+    const active = (threads ?? []).find(
+      (thread) => selectedThreadId === thread.id
+    );
+    setActiveThread(active ?? null);
+  }, [editor, pluginState, threads]);
+  const handleEscapeKeydown = React.useCallback(() => {
+    if (!editor || activeThread === null)
+      return false;
+    editor.commands.selectThread(null);
+    return true;
+  }, [activeThread, editor]);
+  if (!activeThread || !editor || activeThread.resolved)
+    return null;
+  return /* @__PURE__ */ React.createElement(FloatingThreadPortal, {
+    thread: activeThread,
+    editor,
+    container: document.body,
+    ...props
+  }, activeThread && /* @__PURE__ */ React.createElement(ThreadWrapper, {
+    key: activeThread.id,
+    thread: activeThread,
+    Thread,
+    onEscapeKeydown: handleEscapeKeydown,
+    className: "lb-tiptap-floating-threads-thread"
+  }));
+}
+const FLOATING_THREAD_COLLISION_PADDING = 10;
+function FloatingThreadPortal({
+  container,
+  editor,
+  thread,
+  children,
+  className,
+  style,
+  ...props
+}) {
+  const {
+    refs: { setReference, setFloating },
+    strategy,
+    x,
+    y
+  } = reactDom.useFloating({
+    strategy: "absolute",
+    placement: "bottom",
+    middleware: [
+      reactDom.flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),
+      reactDom.offset(10),
+      reactDom.hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),
+      reactDom.shift({
+        padding: FLOATING_THREAD_COLLISION_PADDING,
+        limiter: reactDom.limitShift()
+      }),
+      reactDom.size({
+        padding: FLOATING_THREAD_COLLISION_PADDING,
+        apply({ availableWidth, availableHeight, elements }) {
+          elements.floating.style.setProperty(
+            "--lb-tiptap-floating-threads-available-width",
+            `${availableWidth}px`
+          );
+          elements.floating.style.setProperty(
+            "--lb-tiptap-floating-threads-available-height",
+            `${availableHeight}px`
+          );
+        }
+      })
+    ],
+    whileElementsMounted: (...args) => {
+      return reactDom.autoUpdate(...args, {
+        animationFrame: true
+      });
+    }
+  });
+  const updateRef = React.useCallback(() => {
+    const el = editor.view.dom.querySelector(`[data-lb-thread-id="${thread.id}"]`);
+    if (el) {
+      setReference(el);
+    }
+  }, [setReference, editor, thread.id]);
+  React.useEffect(() => {
+    editor.on("transaction", updateRef);
+    return () => {
+      editor.off("transaction", updateRef);
+    };
+  }, [editor, updateRef]);
+  React.useLayoutEffect(updateRef, [updateRef]);
+  return reactDom$1.createPortal(
+    /* @__PURE__ */ React.createElement("div", {
+      ref: setFloating,
+      ...props,
+      style: {
+        ...style,
+        position: strategy,
+        top: 0,
+        left: 0,
+        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
+        minWidth: "max-content"
+      },
+      className: classnames.classNames(
+        "lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-threads",
+        className
+      )
+    }, children),
+    container
+  );
+}
+function ThreadWrapper({
+  thread,
+  Thread,
+  onEscapeKeydown,
+  onKeyDown,
+  ...threadProps
+}) {
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.key === "Escape") {
+        onEscapeKeydown();
+      }
+    },
+    [onEscapeKeydown, onKeyDown]
+  );
+  return /* @__PURE__ */ React.createElement(Thread, {
+    thread,
+    onKeyDown: handleKeyDown,
+    ...threadProps
+  });
+}
+
+exports.FLOATING_THREAD_COLLISION_PADDING = FLOATING_THREAD_COLLISION_PADDING;
+exports.FloatingThreads = FloatingThreads;
+//# sourceMappingURL=FloatingThreads.js.map

package/dist/comments/FloatingThreads.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingThreads.js","sources":["../../src/comments/FloatingThreads.tsx"],"sourcesContent":["\nimport {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport 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 React, {\n  type ComponentType,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { classNames } from \"../classnames\";\nimport type { ThreadPluginState } from \"../types\";\nimport { THREADS_PLUGIN_KEY } from \"../types\";\n\ntype ThreadPanelComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface FloatingThreadsProps<M extends BaseMetadata = DM>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * The threads to display.\n   */\n  threads: ThreadData<M>[];\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<ThreadPanelComponents>;\n\n  /**\n   * The tiptap editor\n   */\n  editor: Editor | null;\n}\n\nexport function FloatingThreads({\n  threads,\n  components,\n  editor,\n  ...props\n}: FloatingThreadsProps) {\n\n  const Thread = components?.Thread ?? DefaultThread;\n  const pluginState = editor ? THREADS_PLUGIN_KEY.getState(editor.state) as ThreadPluginState : null;\n\n  const [activeThread, setActiveThread] = useState<ThreadData | null>(null);\n\n\n  useEffect(() => {\n    if (!editor || !pluginState) {\n      setActiveThread(null);\n      return;\n    }\n    const { selectedThreadId, selectedThreadPos } = pluginState;\n    if (selectedThreadId === null || selectedThreadPos === null) {\n      setActiveThread(null);\n      return;\n    }\n    const active = (threads ?? []).find((thread) =>\n      selectedThreadId === thread.id\n    );\n    setActiveThread(active ?? null);\n  }, [editor, pluginState, threads]);\n\n  const handleEscapeKeydown = useCallback((): boolean => {\n    if (!editor || activeThread === null) return false;\n    editor.commands.selectThread(null);\n    return true;\n  }, [activeThread, editor]);\n\n  if (!activeThread || !editor || activeThread.resolved) return null;\n\n  return (\n    <FloatingThreadPortal\n      thread={activeThread}\n      editor={editor}\n      container={document.body}\n      {...props}\n    >\n      {activeThread &&\n        <ThreadWrapper\n          key={activeThread.id}\n          thread={activeThread}\n          Thread={Thread}\n          onEscapeKeydown={handleEscapeKeydown}\n          className=\"lb-tiptap-floating-threads-thread\"\n        />\n      }\n    </FloatingThreadPortal>\n  );\n}\n\ninterface FloatingThreadPortalProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  thread: ThreadData;\n  editor: Editor;\n  container: HTMLElement;\n  children: ReactNode;\n}\n\nexport const FLOATING_THREAD_COLLISION_PADDING = 10;\n\nfunction FloatingThreadPortal({\n  container,\n  editor,\n  thread,\n  children,\n  className,\n  style,\n  ...props\n}: FloatingThreadPortalProps) {\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"absolute\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        apply({ availableWidth, availableHeight, elements }) {\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-width\",\n            `${availableWidth}px`\n          );\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-height\",\n            `${availableHeight}px`\n          );\n        },\n      }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  const updateRef = useCallback(() => {\n    const el = editor.view.dom.querySelector(`[data-lb-thread-id=\"${thread.id}\"]`);\n    if (el) {\n      setReference(el);\n    }\n  }, [setReference, editor, thread.id]);\n\n  // Remote cursor updates and other edits can cause the ref to break\n  useEffect(() => {\n    editor.on(\"transaction\", updateRef)\n    return () => {\n      editor.off(\"transaction\", updateRef);\n    }\n  }, [editor, updateRef]);\n\n  useLayoutEffect(updateRef, [updateRef]);\n\n  return createPortal(\n    <div\n      ref={setFloating}\n      {...props}\n      style={{\n        ...style,\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}\n      className={classNames(\n        \"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-threads\",\n        className\n      )}\n    >\n      {children}\n    </div>,\n    container\n  );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  thread: ThreadData;\n  Thread: ComponentType<ThreadProps>;\n  onEscapeKeydown: () => void;\n}\n\nfunction ThreadWrapper({\n  thread,\n  Thread,\n  onEscapeKeydown,\n  onKeyDown,\n  ...threadProps\n}: ThreadWrapperProps) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      // TODO: Add ability to preventDefault on keydown to override the default behavior, e.g. to show an alert dialog\n      if (event.key === \"Escape\") {\n        onEscapeKeydown();\n      }\n    },\n    [onEscapeKeydown, onKeyDown]\n  );\n\n  return <Thread thread={thread} onKeyDown={handleKeyDown} {...threadProps} />;\n}\n\n"],"names":["DefaultThread","THREADS_PLUGIN_KEY","useState","useEffect","useCallback","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","createPortal","classNames"],"mappings":"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"}

package/dist/comments/FloatingThreads.mjs

@@ -0,0 +1,156 @@
+import { useFloating, flip, offset, hide, shift, limitShift, size, autoUpdate } from '@floating-ui/react-dom';
+import { Thread } from '@liveblocks/react-ui';
+import React, { useState, useEffect, useCallback, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { classNames } from '../classnames.mjs';
+import { THREADS_PLUGIN_KEY } from '../types.mjs';
+
+function FloatingThreads({
+  threads,
+  components,
+  editor,
+  ...props
+}) {
+  const Thread$1 = components?.Thread ?? Thread;
+  const pluginState = editor ? THREADS_PLUGIN_KEY.getState(editor.state) : null;
+  const [activeThread, setActiveThread] = useState(null);
+  useEffect(() => {
+    if (!editor || !pluginState) {
+      setActiveThread(null);
+      return;
+    }
+    const { selectedThreadId, selectedThreadPos } = pluginState;
+    if (selectedThreadId === null || selectedThreadPos === null) {
+      setActiveThread(null);
+      return;
+    }
+    const active = (threads ?? []).find(
+      (thread) => selectedThreadId === thread.id
+    );
+    setActiveThread(active ?? null);
+  }, [editor, pluginState, threads]);
+  const handleEscapeKeydown = useCallback(() => {
+    if (!editor || activeThread === null)
+      return false;
+    editor.commands.selectThread(null);
+    return true;
+  }, [activeThread, editor]);
+  if (!activeThread || !editor || activeThread.resolved)
+    return null;
+  return /* @__PURE__ */ React.createElement(FloatingThreadPortal, {
+    thread: activeThread,
+    editor,
+    container: document.body,
+    ...props
+  }, activeThread && /* @__PURE__ */ React.createElement(ThreadWrapper, {
+    key: activeThread.id,
+    thread: activeThread,
+    Thread: Thread$1,
+    onEscapeKeydown: handleEscapeKeydown,
+    className: "lb-tiptap-floating-threads-thread"
+  }));
+}
+const FLOATING_THREAD_COLLISION_PADDING = 10;
+function FloatingThreadPortal({
+  container,
+  editor,
+  thread,
+  children,
+  className,
+  style,
+  ...props
+}) {
+  const {
+    refs: { setReference, setFloating },
+    strategy,
+    x,
+    y
+  } = useFloating({
+    strategy: "absolute",
+    placement: "bottom",
+    middleware: [
+      flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),
+      offset(10),
+      hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),
+      shift({
+        padding: FLOATING_THREAD_COLLISION_PADDING,
+        limiter: limitShift()
+      }),
+      size({
+        padding: FLOATING_THREAD_COLLISION_PADDING,
+        apply({ availableWidth, availableHeight, elements }) {
+          elements.floating.style.setProperty(
+            "--lb-tiptap-floating-threads-available-width",
+            `${availableWidth}px`
+          );
+          elements.floating.style.setProperty(
+            "--lb-tiptap-floating-threads-available-height",
+            `${availableHeight}px`
+          );
+        }
+      })
+    ],
+    whileElementsMounted: (...args) => {
+      return autoUpdate(...args, {
+        animationFrame: true
+      });
+    }
+  });
+  const updateRef = useCallback(() => {
+    const el = editor.view.dom.querySelector(`[data-lb-thread-id="${thread.id}"]`);
+    if (el) {
+      setReference(el);
+    }
+  }, [setReference, editor, thread.id]);
+  useEffect(() => {
+    editor.on("transaction", updateRef);
+    return () => {
+      editor.off("transaction", updateRef);
+    };
+  }, [editor, updateRef]);
+  useLayoutEffect(updateRef, [updateRef]);
+  return createPortal(
+    /* @__PURE__ */ React.createElement("div", {
+      ref: setFloating,
+      ...props,
+      style: {
+        ...style,
+        position: strategy,
+        top: 0,
+        left: 0,
+        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
+        minWidth: "max-content"
+      },
+      className: classNames(
+        "lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-threads",
+        className
+      )
+    }, children),
+    container
+  );
+}
+function ThreadWrapper({
+  thread,
+  Thread,
+  onEscapeKeydown,
+  onKeyDown,
+  ...threadProps
+}) {
+  const handleKeyDown = useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.key === "Escape") {
+        onEscapeKeydown();
+      }
+    },
+    [onEscapeKeydown, onKeyDown]
+  );
+  return /* @__PURE__ */ React.createElement(Thread, {
+    thread,
+    onKeyDown: handleKeyDown,
+    ...threadProps
+  });
+}
+
+export { FLOATING_THREAD_COLLISION_PADDING, FloatingThreads };
+//# sourceMappingURL=FloatingThreads.mjs.map

package/dist/comments/FloatingThreads.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingThreads.mjs","sources":["../../src/comments/FloatingThreads.tsx"],"sourcesContent":["\nimport {\n  autoUpdate,\n  flip,\n  hide,\n  limitShift,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\";\nimport 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 React, {\n  type ComponentType,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { classNames } from \"../classnames\";\nimport type { ThreadPluginState } from \"../types\";\nimport { THREADS_PLUGIN_KEY } from \"../types\";\n\ntype ThreadPanelComponents = {\n  Thread: ComponentType<ThreadProps>;\n};\n\nexport interface FloatingThreadsProps<M extends BaseMetadata = DM>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * The threads to display.\n   */\n  threads: ThreadData<M>[];\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<ThreadPanelComponents>;\n\n  /**\n   * The tiptap editor\n   */\n  editor: Editor | null;\n}\n\nexport function FloatingThreads({\n  threads,\n  components,\n  editor,\n  ...props\n}: FloatingThreadsProps) {\n\n  const Thread = components?.Thread ?? DefaultThread;\n  const pluginState = editor ? THREADS_PLUGIN_KEY.getState(editor.state) as ThreadPluginState : null;\n\n  const [activeThread, setActiveThread] = useState<ThreadData | null>(null);\n\n\n  useEffect(() => {\n    if (!editor || !pluginState) {\n      setActiveThread(null);\n      return;\n    }\n    const { selectedThreadId, selectedThreadPos } = pluginState;\n    if (selectedThreadId === null || selectedThreadPos === null) {\n      setActiveThread(null);\n      return;\n    }\n    const active = (threads ?? []).find((thread) =>\n      selectedThreadId === thread.id\n    );\n    setActiveThread(active ?? null);\n  }, [editor, pluginState, threads]);\n\n  const handleEscapeKeydown = useCallback((): boolean => {\n    if (!editor || activeThread === null) return false;\n    editor.commands.selectThread(null);\n    return true;\n  }, [activeThread, editor]);\n\n  if (!activeThread || !editor || activeThread.resolved) return null;\n\n  return (\n    <FloatingThreadPortal\n      thread={activeThread}\n      editor={editor}\n      container={document.body}\n      {...props}\n    >\n      {activeThread &&\n        <ThreadWrapper\n          key={activeThread.id}\n          thread={activeThread}\n          Thread={Thread}\n          onEscapeKeydown={handleEscapeKeydown}\n          className=\"lb-tiptap-floating-threads-thread\"\n        />\n      }\n    </FloatingThreadPortal>\n  );\n}\n\ninterface FloatingThreadPortalProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  thread: ThreadData;\n  editor: Editor;\n  container: HTMLElement;\n  children: ReactNode;\n}\n\nexport const FLOATING_THREAD_COLLISION_PADDING = 10;\n\nfunction FloatingThreadPortal({\n  container,\n  editor,\n  thread,\n  children,\n  className,\n  style,\n  ...props\n}: FloatingThreadPortalProps) {\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"absolute\",\n    placement: \"bottom\",\n    middleware: [\n      flip({ padding: FLOATING_THREAD_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: FLOATING_THREAD_COLLISION_PADDING }),\n      shift({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        limiter: limitShift(),\n      }),\n      size({\n        padding: FLOATING_THREAD_COLLISION_PADDING,\n        apply({ availableWidth, availableHeight, elements }) {\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-width\",\n            `${availableWidth}px`\n          );\n          elements.floating.style.setProperty(\n            \"--lb-tiptap-floating-threads-available-height\",\n            `${availableHeight}px`\n          );\n        },\n      }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  const updateRef = useCallback(() => {\n    const el = editor.view.dom.querySelector(`[data-lb-thread-id=\"${thread.id}\"]`);\n    if (el) {\n      setReference(el);\n    }\n  }, [setReference, editor, thread.id]);\n\n  // Remote cursor updates and other edits can cause the ref to break\n  useEffect(() => {\n    editor.on(\"transaction\", updateRef)\n    return () => {\n      editor.off(\"transaction\", updateRef);\n    }\n  }, [editor, updateRef]);\n\n  useLayoutEffect(updateRef, [updateRef]);\n\n  return createPortal(\n    <div\n      ref={setFloating}\n      {...props}\n      style={{\n        ...style,\n        position: strategy,\n        top: 0,\n        left: 0,\n        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n        minWidth: \"max-content\",\n      }}\n      className={classNames(\n        \"lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-threads\",\n        className\n      )}\n    >\n      {children}\n    </div>,\n    container\n  );\n}\n\ninterface ThreadWrapperProps extends ThreadProps {\n  thread: ThreadData;\n  Thread: ComponentType<ThreadProps>;\n  onEscapeKeydown: () => void;\n}\n\nfunction ThreadWrapper({\n  thread,\n  Thread,\n  onEscapeKeydown,\n  onKeyDown,\n  ...threadProps\n}: ThreadWrapperProps) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      // TODO: Add ability to preventDefault on keydown to override the default behavior, e.g. to show an alert dialog\n      if (event.key === \"Escape\") {\n        onEscapeKeydown();\n      }\n    },\n    [onEscapeKeydown, onKeyDown]\n  );\n\n  return <Thread thread={thread} onKeyDown={handleKeyDown} {...threadProps} />;\n}\n\n"],"names":["Thread","DefaultThread"],"mappings":"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"}

package/dist/index.d.mts

@@ -0,0 +1,78 @@
+import { BaseMetadata, DM, ThreadData, HistoryVersion } from '@liveblocks/core';
+import { ThreadProps, ComposerProps } from '@liveblocks/react-ui';
+import { Editor } from '@tiptap/react';
+import React, { ComponentPropsWithoutRef, ComponentType, HTMLAttributes } from 'react';
+import { BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
+import { Extension } from '@tiptap/core';
+
+declare type AnchoredThreadsComponents = {
+    Thread: ComponentType<ThreadProps>;
+};
+interface AnchoredThreadsProps<M extends BaseMetadata = DM> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /**
+     * The threads to display.
+     */
+    threads: ThreadData<M>[];
+    /**
+     * Override the component's components.
+     */
+    components?: Partial<AnchoredThreadsComponents>;
+    /**
+     * The tiptap editor
+     */
+    editor: Editor | null;
+}
+declare function AnchoredThreads({ threads, components, className, style, editor, ...props }: AnchoredThreadsProps): React.JSX.Element | null;
+
+declare const FloatingComposer: React.ForwardRefExoticComponent<Omit<ComposerProps<BaseMetadata$1>, "threadId" | "commentId"> & {
+    editor: Editor | null;
+} & React.RefAttributes<HTMLFormElement>>;
+
+declare type ThreadPanelComponents = {
+    Thread: ComponentType<ThreadProps>;
+};
+interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * The threads to display.
+     */
+    threads: ThreadData<M>[];
+    /**
+     * Override the component's components.
+     */
+    components?: Partial<ThreadPanelComponents>;
+    /**
+     * The tiptap editor
+     */
+    editor: Editor | null;
+}
+declare function FloatingThreads({ threads, components, editor, ...props }: FloatingThreadsProps): React.JSX.Element | null;
+
+declare const useLiveblocksExtension: () => Extension;
+
+interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
+    version: HistoryVersion;
+    editor: Editor;
+    onVersionRestore?: (version: HistoryVersion) => void;
+}
+/**
+ * Displays a specific version of the current TipTap document.
+ *
+ * @example
+ * <HistoryVersionPreview version={version} />
+ */
+declare const HistoryVersionPreview: React.ForwardRefExoticComponent<HistoryVersionPreviewProps & React.RefAttributes<HTMLDivElement>>;
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        comments: {
+            /**
+             * Add a comment
+             */
+            addComment: (id: string) => ReturnType;
+            selectThread: (id: string | null) => ReturnType;
+            addPendingComment: () => ReturnType;
+        };
+    }
+}
+
+export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useLiveblocksExtension };

package/dist/index.d.ts

@@ -0,0 +1,78 @@
+import { BaseMetadata, DM, ThreadData, HistoryVersion } from '@liveblocks/core';
+import { ThreadProps, ComposerProps } from '@liveblocks/react-ui';
+import { Editor } from '@tiptap/react';
+import React, { ComponentPropsWithoutRef, ComponentType, HTMLAttributes } from 'react';
+import { BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
+import { Extension } from '@tiptap/core';
+
+declare type AnchoredThreadsComponents = {
+    Thread: ComponentType<ThreadProps>;
+};
+interface AnchoredThreadsProps<M extends BaseMetadata = DM> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /**
+     * The threads to display.
+     */
+    threads: ThreadData<M>[];
+    /**
+     * Override the component's components.
+     */
+    components?: Partial<AnchoredThreadsComponents>;
+    /**
+     * The tiptap editor
+     */
+    editor: Editor | null;
+}
+declare function AnchoredThreads({ threads, components, className, style, editor, ...props }: AnchoredThreadsProps): React.JSX.Element | null;
+
+declare const FloatingComposer: React.ForwardRefExoticComponent<Omit<ComposerProps<BaseMetadata$1>, "threadId" | "commentId"> & {
+    editor: Editor | null;
+} & React.RefAttributes<HTMLFormElement>>;
+
+declare type ThreadPanelComponents = {
+    Thread: ComponentType<ThreadProps>;
+};
+interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * The threads to display.
+     */
+    threads: ThreadData<M>[];
+    /**
+     * Override the component's components.
+     */
+    components?: Partial<ThreadPanelComponents>;
+    /**
+     * The tiptap editor
+     */
+    editor: Editor | null;
+}
+declare function FloatingThreads({ threads, components, editor, ...props }: FloatingThreadsProps): React.JSX.Element | null;
+
+declare const useLiveblocksExtension: () => Extension;
+
+interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
+    version: HistoryVersion;
+    editor: Editor;
+    onVersionRestore?: (version: HistoryVersion) => void;
+}
+/**
+ * Displays a specific version of the current TipTap document.
+ *
+ * @example
+ * <HistoryVersionPreview version={version} />
+ */
+declare const HistoryVersionPreview: React.ForwardRefExoticComponent<HistoryVersionPreviewProps & React.RefAttributes<HTMLDivElement>>;
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        comments: {
+            /**
+             * Add a comment
+             */
+            addComment: (id: string) => ReturnType;
+            selectThread: (id: string | null) => ReturnType;
+            addPendingComment: () => ReturnType;
+        };
+    }
+}
+
+export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useLiveblocksExtension };

package/dist/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var core = require('@liveblocks/core');
+var version = require('./version.js');
+var AnchoredThreads = require('./comments/AnchoredThreads.js');
+var FloatingComposer = require('./comments/FloatingComposer.js');
+var FloatingThreads = require('./comments/FloatingThreads.js');
+var LiveblocksExtension = require('./LiveblocksExtension.js');
+var HistoryVersionPreview = require('./version-history/HistoryVersionPreview.js');
+
+core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
+
+exports.AnchoredThreads = AnchoredThreads.AnchoredThreads;
+exports.FloatingComposer = FloatingComposer.FloatingComposer;
+exports.FloatingThreads = FloatingThreads.FloatingThreads;
+exports.useLiveblocksExtension = LiveblocksExtension.useLiveblocksExtension;
+exports.HistoryVersionPreview = HistoryVersionPreview.HistoryVersionPreview;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: {\n      /**\n       * Add a comment\n       */\n      addComment: (id: string) => ReturnType;\n      selectThread: (id: string | null) => ReturnType;\n      addPendingComment: () => ReturnType;\n    };\n  }\n}\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;"}

package/dist/index.mjs

@@ -0,0 +1,10 @@
+import { detectDupes } from '@liveblocks/core';
+import { PKG_NAME, PKG_VERSION, PKG_FORMAT } from './version.mjs';
+export { AnchoredThreads } from './comments/AnchoredThreads.mjs';
+export { FloatingComposer } from './comments/FloatingComposer.mjs';
+export { FloatingThreads } from './comments/FloatingThreads.mjs';
+export { useLiveblocksExtension } from './LiveblocksExtension.mjs';
+export { HistoryVersionPreview } from './version-history/HistoryVersionPreview.mjs';
+
+detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: {\n      /**\n       * Add a comment\n       */\n      addComment: (id: string) => ReturnType;\n      selectThread: (id: string | null) => ReturnType;\n      addPendingComment: () => ReturnType;\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/mentions/Avatar.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var react = require('@liveblocks/react');
+var React = require('react');
+var classnames = require('../classnames.js');
+
+const Avatar = React.forwardRef(
+  function Avatar2(props, forwardedRef) {
+    const { userId, className, ...spanProps } = props;
+    const { user, isLoading } = react.useUser(userId);
+    const avatar = user ? user.avatar : void 0;
+    const name = user ? user.name : void 0;
+    function Initials() {
+      const initials = name ? getInitials(name) : void 0;
+      if (initials) {
+        return /* @__PURE__ */ React.createElement("span", {
+          "aria-hidden": true,
+          className: "lb-avatar-fallback"
+        }, initials);
+      }
+      if (isLoading)
+        return null;
+      if (user === void 0)
+        return null;
+      return /* @__PURE__ */ React.createElement("span", {
+        "aria-label": userId,
+        title: userId,
+        className: "lb-avatar-fallback"
+      }, getInitials(userId));
+    }
+    return /* @__PURE__ */ React.createElement("span", {
+      "data-loading": isLoading ? "" : void 0,
+      ...spanProps,
+      className: classnames.classNames("lb-avatar", className),
+      ref: forwardedRef
+    }, avatar && /* @__PURE__ */ React.createElement("img", {
+      src: avatar,
+      alt: name,
+      className: "lb-avatar-image"
+    }), /* @__PURE__ */ React.createElement(Initials, null));
+  }
+);
+function getInitials(name) {
+  return name.trim().split(" ").reduce((initials, name2, index, array) => {
+    if (index === 0 || index === array.length - 1) {
+      initials += name2.charAt(0).toLocaleUpperCase();
+    }
+    return initials;
+  }, "");
+}
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.js.map

package/dist/mentions/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../src/mentions/Avatar.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport type { HTMLAttributes } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\n\nexport interface AvatarProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  userId: string;\n}\n\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n\n    const avatar = user ? user.avatar : undefined;\n\n    const name = user ? user.name : undefined;\n\n    function Initials() {\n      const initials = name ? getInitials(name) : undefined;\n      if (initials) {\n        return (\n          <span aria-hidden className=\"lb-avatar-fallback\">\n            {initials}\n          </span>\n        );\n      }\n\n      if (isLoading) return null;\n\n      if (user === undefined) return null;\n\n      return (\n        <span aria-label={userId} title={userId} className=\"lb-avatar-fallback\">\n          {getInitials(userId)}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        data-loading={isLoading ? \"\" : undefined}\n        {...spanProps}\n        className={classNames(\"lb-avatar\", className)}\n        ref={forwardedRef}\n      >\n        {avatar && <img src={avatar} alt={name} className=\"lb-avatar-image\" />}\n\n        <Initials />\n      </span>\n    );\n  }\n);\n\nfunction getInitials(name: string) {\n  return name\n    .trim()\n    .split(\" \")\n    .reduce((initials, name, index, array) => {\n      if (index === 0 || index === array.length - 1) {\n        initials += name.charAt(0).toLocaleUpperCase();\n      }\n\n      return initials;\n    }, \"\");\n}\n"],"names":["forwardRef","Avatar","useUser","classNames","name"],"mappings":";;;;;;AAWO,MAAM,MAAS,GAAAA,gBAAA;AAAA,EACpB,SAASC,OAAO,CAAA,KAAA,EAAO,YAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAIC,cAAQ,MAAM,CAAA,CAAA;AAE1C,IAAM,MAAA,MAAA,GAAS,IAAO,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAA,CAAA;AAEpC,IAAM,MAAA,IAAA,GAAO,IAAO,GAAA,IAAA,CAAK,IAAO,GAAA,KAAA,CAAA,CAAA;AAEhC,IAAA,SAAS,QAAW,GAAA;AAClB,MAAA,MAAM,QAAW,GAAA,IAAA,GAAO,WAAY,CAAA,IAAI,CAAI,GAAA,KAAA,CAAA,CAAA;AAC5C,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,UAAK,aAAW,EAAA,IAAA;AAAA,UAAC,SAAU,EAAA,oBAAA;AAAA,SAAA,EACzB,QACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAI,IAAA,SAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,IAAI,IAAS,KAAA,KAAA,CAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAE/B,MAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,QAAK,YAAY,EAAA,MAAA;AAAA,QAAQ,KAAO,EAAA,MAAA;AAAA,QAAQ,SAAU,EAAA,oBAAA;AAAA,OAChD,EAAA,WAAA,CAAY,MAAM,CACrB,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,SAAA,EAAWC,qBAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,MAC5C,GAAK,EAAA,YAAA;AAAA,KAAA,EAEJ,0BAAW,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,MAAA;AAAA,MAAQ,GAAK,EAAA,IAAA;AAAA,MAAM,SAAU,EAAA,iBAAA;AAAA,KAAkB,CAAA,kBAEnE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAS,CACZ,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,SAAS,YAAY,IAAc,EAAA;AACjC,EAAO,OAAA,IAAA,CACJ,IAAK,EAAA,CACL,KAAM,CAAA,GAAG,CACT,CAAA,MAAA,CAAO,CAAC,QAAA,EAAUC,KAAM,EAAA,KAAA,EAAO,KAAU,KAAA;AACxC,IAAA,IAAI,KAAU,KAAA,CAAA,IAAK,KAAU,KAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AAC7C,MAAA,QAAA,IAAYA,KAAK,CAAA,MAAA,CAAO,CAAC,CAAA,CAAE,iBAAkB,EAAA,CAAA;AAAA,KAC/C;AAEA,IAAO,OAAA,QAAA,CAAA;AAAA,KACN,EAAE,CAAA,CAAA;AACT;;;;"}