@liveblocks/react-tiptap 2.15.1 → 2.16.0-toolbars1

package/dist/comments/FloatingThreads.mjs

@@ -1,8 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { useFloating, flip, offset, hide, shift, limitShift, size, autoUpdate } from '@floating-ui/react-dom';
+import { useLayoutEffect } from '@liveblocks/react/_private';
 import { Thread } from '@liveblocks/react-ui';
 import { useEditorState } from '@tiptap/react';
-import { useState, useEffect, useCallback, useLayoutEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { classNames } from '../classnames.mjs';
 import { THREADS_PLUGIN_KEY } from '../types.mjs';
@@ -114,7 +115,9 @@ function FloatingThreadPortal({
     }
   });
   const updateRef = useCallback(() => {
-    const el = editor.view.dom.querySelector(`[data-lb-thread-id="${thread.id}"]`);
+    const el = editor.view.dom.querySelector(
+      `[data-lb-thread-id="${thread.id}"]`
+    );
     if (el) {
       setReference(el);
     }

package/dist/comments/FloatingThreads.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingThreads.mjs","sources":["../../src/comments/FloatingThreads.tsx"],"sourcesContent":["import {\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, useEditorState } from \"@tiptap/react\";\nimport {\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 { 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  const Thread = components?.Thread ?? DefaultThread;\n\n  const { pluginState } = useEditorState({\n    editor,\n    selector: (ctx) => {\n      if (!ctx?.editor?.state) return { pluginState: undefined };\n      const state = THREADS_PLUGIN_KEY.getState(ctx.editor.state);\n      return {\n        pluginState: state,\n      };\n    },\n    equalityFn: (prev, next) => {\n      if (!prev || !next) return false;\n      return prev.pluginState?.selectedThreadPos === next.pluginState?.selectedThreadPos &&\n        prev.pluginState?.selectedThreadId === next.pluginState?.selectedThreadId;\n    },\n  }) ?? { pluginState: undefined };\n\n  const [activeThread, setActiveThread] = useState<ThreadData | null>(null);\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"],"names":["Thread","DefaultThread"],"mappings":"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"}
+{"version":3,"file":"FloatingThreads.mjs","sources":["../../src/comments/FloatingThreads.tsx"],"sourcesContent":["import {\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 { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport {\n  Thread as DefaultThread,\n  type ThreadProps,\n} from \"@liveblocks/react-ui\";\nimport { type Editor, useEditorState } from \"@tiptap/react\";\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { classNames } from \"../classnames\";\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  const Thread = components?.Thread ?? DefaultThread;\n\n  const { pluginState } = useEditorState({\n    editor,\n    selector: (ctx) => {\n      if (!ctx?.editor?.state) return { pluginState: undefined };\n      const state = THREADS_PLUGIN_KEY.getState(ctx.editor.state);\n      return {\n        pluginState: state,\n      };\n    },\n    equalityFn: (prev, next) => {\n      if (!prev || !next) return false;\n      return (\n        prev.pluginState?.selectedThreadPos ===\n          next.pluginState?.selectedThreadPos &&\n        prev.pluginState?.selectedThreadId ===\n          next.pluginState?.selectedThreadId\n      );\n    },\n  }) ?? { pluginState: undefined };\n\n  const [activeThread, setActiveThread] = useState<ThreadData | null>(null);\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(\n      (thread) => 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(\n      `[data-lb-thread-id=\"${thread.id}\"]`\n    );\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"],"names":["Thread","DefaultThread"],"mappings":"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"}

package/dist/context.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@liveblocks/core');
+var react = require('react');
+
+const EditorContext = react.createContext(null);
+function EditorProvider({
+  editor,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(EditorContext.Provider, {
+    value: editor,
+    children
+  });
+}
+function useCurrentEditor(source, parent) {
+  const currentEditor = react.useContext(EditorContext);
+  return core.nn(currentEditor, `${source} can\u2019t be used outside of ${parent}.`);
+}
+
+exports.EditorProvider = EditorProvider;
+exports.useCurrentEditor = useCurrentEditor;
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../src/context.tsx"],"sourcesContent":["import { nn } from \"@liveblocks/core\";\nimport type { Editor } from \"@tiptap/react\";\nimport type { PropsWithChildren } from \"react\";\nimport { createContext, useContext } from \"react\";\n\nconst EditorContext = createContext<Editor | null>(null);\n\nexport function EditorProvider({\n  editor,\n  children,\n}: PropsWithChildren<{ editor: Editor }>) {\n  return (\n    <EditorContext.Provider value={editor}>{children}</EditorContext.Provider>\n  );\n}\n\n/**\n * @tiptap/react already offers a `useCurrentEditor` hook but our components might\n * not live under `EditorProvider` or `EditorContent` so we create our own to reduce\n * repetition within our own nested components.\n *\n * @example\n * <Toolbar editor={editor}> // `editor` is required here\n *   <ToolbarSectionInline /> // But it isn't there, because `Toolbar` uses our own `EditorProvider`\n * </Toolbar>\n */\nexport function useCurrentEditor(source: string, parent: string) {\n  const currentEditor = useContext(EditorContext);\n\n  return nn(currentEditor, `${source} can’t be used outside of ${parent}.`);\n}\n"],"names":["createContext","jsx","useContext","nn"],"mappings":";;;;;;AAKA,MAAM,aAAA,GAAgBA,oBAA6B,IAAI,CAAA,CAAA;AAEhD,SAAS,cAAe,CAAA;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AACF,CAA0C,EAAA;AACxC,EACE,uBAAAC,cAAA,CAAC,cAAc,QAAd,EAAA;AAAA,IAAuB,KAAO,EAAA,MAAA;AAAA,IAAS,QAAA;AAAA,GAAS,CAAA,CAAA;AAErD,CAAA;AAYgB,SAAA,gBAAA,CAAiB,QAAgB,MAAgB,EAAA;AAC/D,EAAM,MAAA,aAAA,GAAgBC,iBAAW,aAAa,CAAA,CAAA;AAE9C,EAAA,OAAOC,OAAG,CAAA,aAAA,EAAe,CAAG,EAAA,MAAA,CAAA,+BAAA,EAAmC,MAAS,CAAA,CAAA,CAAA,CAAA,CAAA;AAC1E;;;;;"}

package/dist/context.mjs

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { nn } from '@liveblocks/core';
+import { createContext, useContext } from 'react';
+
+const EditorContext = createContext(null);
+function EditorProvider({
+  editor,
+  children
+}) {
+  return /* @__PURE__ */ jsx(EditorContext.Provider, {
+    value: editor,
+    children
+  });
+}
+function useCurrentEditor(source, parent) {
+  const currentEditor = useContext(EditorContext);
+  return nn(currentEditor, `${source} can\u2019t be used outside of ${parent}.`);
+}
+
+export { EditorProvider, useCurrentEditor };
+//# sourceMappingURL=context.mjs.map

package/dist/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","sources":["../src/context.tsx"],"sourcesContent":["import { nn } from \"@liveblocks/core\";\nimport type { Editor } from \"@tiptap/react\";\nimport type { PropsWithChildren } from \"react\";\nimport { createContext, useContext } from \"react\";\n\nconst EditorContext = createContext<Editor | null>(null);\n\nexport function EditorProvider({\n  editor,\n  children,\n}: PropsWithChildren<{ editor: Editor }>) {\n  return (\n    <EditorContext.Provider value={editor}>{children}</EditorContext.Provider>\n  );\n}\n\n/**\n * @tiptap/react already offers a `useCurrentEditor` hook but our components might\n * not live under `EditorProvider` or `EditorContent` so we create our own to reduce\n * repetition within our own nested components.\n *\n * @example\n * <Toolbar editor={editor}> // `editor` is required here\n *   <ToolbarSectionInline /> // But it isn't there, because `Toolbar` uses our own `EditorProvider`\n * </Toolbar>\n */\nexport function useCurrentEditor(source: string, parent: string) {\n  const currentEditor = useContext(EditorContext);\n\n  return nn(currentEditor, `${source} can’t be used outside of ${parent}.`);\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,aAAA,GAAgB,cAA6B,IAAI,CAAA,CAAA;AAEhD,SAAS,cAAe,CAAA;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AACF,CAA0C,EAAA;AACxC,EACE,uBAAA,GAAA,CAAC,cAAc,QAAd,EAAA;AAAA,IAAuB,KAAO,EAAA,MAAA;AAAA,IAAS,QAAA;AAAA,GAAS,CAAA,CAAA;AAErD,CAAA;AAYgB,SAAA,gBAAA,CAAiB,QAAgB,MAAgB,EAAA;AAC/D,EAAM,MAAA,aAAA,GAAgB,WAAW,aAAa,CAAA,CAAA;AAE9C,EAAA,OAAO,EAAG,CAAA,aAAA,EAAe,CAAG,EAAA,MAAA,CAAA,+BAAA,EAAmC,MAAS,CAAA,CAAA,CAAA,CAAA,CAAA;AAC1E;;;;"}

package/dist/index.d.mts

@@ -3,11 +3,21 @@ import { BaseMetadata, DM, ThreadData, HistoryVersion } from '@liveblocks/core';
 import { ThreadProps, ComposerProps } from '@liveblocks/react-ui';
 import { Editor } from '@tiptap/react';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, ComponentProps, ReactNode } from 'react';
 import { BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
 import { Extension, Content } from '@tiptap/core';
 
-declare type AnchoredThreadsComponents = {
+type FloatingPosition = "top" | "bottom";
+type CommentsCommands<ReturnType> = {
+    /**
+     * Add a comment
+     */
+    addComment: (id: string) => ReturnType;
+    selectThread: (id: string | null) => ReturnType;
+    addPendingComment: () => ReturnType;
+};
+
+type AnchoredThreadsComponents = {
     Thread: ComponentType<ThreadProps>;
 };
 interface AnchoredThreadsProps<M extends BaseMetadata = DM> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
@@ -30,7 +40,7 @@ declare const FloatingComposer: react.ForwardRefExoticComponent<Omit<ComposerPro
     editor: Editor | null;
 } & react.RefAttributes<HTMLFormElement>>;
 
-declare type ThreadPanelComponents = {
+type ThreadPanelComponents = {
     Thread: ComponentType<ThreadProps>;
 };
 interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
@@ -49,7 +59,7 @@ interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAtt
 }
 declare function FloatingThreads({ threads, components, editor, ...props }: FloatingThreadsProps): react_jsx_runtime.JSX.Element | null;
 
-declare type LiveblocksExtensionOptions = {
+type LiveblocksExtensionOptions = {
     field?: string;
     comments?: boolean;
     mentions?: boolean;
@@ -64,6 +74,55 @@ declare type LiveblocksExtensionOptions = {
 declare function useIsEditorReady(): boolean;
 declare const useLiveblocksExtension: (opts?: LiveblocksExtensionOptions) => Extension;
 
+interface ToolbarSlotProps {
+    editor: Editor;
+}
+type ToolbarSlot = ReactNode | ComponentType<ToolbarSlotProps>;
+interface ToolbarProps extends Omit<ComponentProps<"div">, "children"> {
+    editor: Editor | null;
+    children?: ToolbarSlot;
+    before?: ToolbarSlot;
+    after?: ToolbarSlot;
+}
+interface ToolbarButtonProps extends ComponentProps<"button"> {
+    icon?: ReactNode;
+    name: string;
+    shortcut?: string;
+}
+interface ToolbarToggleProps extends ToolbarButtonProps {
+    active: boolean;
+}
+interface ToolbarBlockSelectorItem {
+    name: string;
+    isActive: (editor: Editor) => boolean;
+    setActive: (editor: Editor) => void;
+}
+interface ToolbarBlockSelectorProps extends ComponentProps<"button"> {
+    items?: ToolbarBlockSelectorItem[];
+}
+declare function ToolbarSectionHistory(): react_jsx_runtime.JSX.Element;
+declare function ToolbarSectionInline(): react_jsx_runtime.JSX.Element;
+declare function ToolbarSectionCollaboration(): react_jsx_runtime.JSX.Element;
+declare const Toolbar: react.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    Button: react.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Toggle: react.ForwardRefExoticComponent<Omit<ToolbarToggleProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Separator: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    SectionHistory: typeof ToolbarSectionHistory;
+    SectionInline: typeof ToolbarSectionInline;
+    SectionCollaboration: typeof ToolbarSectionCollaboration;
+    BlockSelector: react.ForwardRefExoticComponent<Omit<ToolbarBlockSelectorProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+};
+
+interface FloatingToolbarProps extends Omit<ComponentProps<"div">, "children"> {
+    editor: Editor | null;
+    position?: FloatingPosition;
+    offset?: number;
+    children?: ToolbarSlot;
+    before?: ToolbarSlot;
+    after?: ToolbarSlot;
+}
+declare const FloatingToolbar: react.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
 interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
     version: HistoryVersion;
     editor: Editor;
@@ -79,15 +138,8 @@ declare const HistoryVersionPreview: react.ForwardRefExoticComponent<HistoryVers
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        comments: {
-            /**
-             * Add a comment
-             */
-            addComment: (id: string) => ReturnType;
-            selectThread: (id: string | null) => ReturnType;
-            addPendingComment: () => ReturnType;
-        };
+        comments: CommentsCommands<ReturnType>;
     }
 }
 
-export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useIsEditorReady, useLiveblocksExtension };
+export { AnchoredThreads, FloatingComposer, FloatingThreads, FloatingToolbar, HistoryVersionPreview, Toolbar, useIsEditorReady, useLiveblocksExtension };

package/dist/index.d.ts

@@ -3,11 +3,21 @@ import { BaseMetadata, DM, ThreadData, HistoryVersion } from '@liveblocks/core';
 import { ThreadProps, ComposerProps } from '@liveblocks/react-ui';
 import { Editor } from '@tiptap/react';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, ComponentProps, ReactNode } from 'react';
 import { BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
 import { Extension, Content } from '@tiptap/core';
 
-declare type AnchoredThreadsComponents = {
+type FloatingPosition = "top" | "bottom";
+type CommentsCommands<ReturnType> = {
+    /**
+     * Add a comment
+     */
+    addComment: (id: string) => ReturnType;
+    selectThread: (id: string | null) => ReturnType;
+    addPendingComment: () => ReturnType;
+};
+
+type AnchoredThreadsComponents = {
     Thread: ComponentType<ThreadProps>;
 };
 interface AnchoredThreadsProps<M extends BaseMetadata = DM> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
@@ -30,7 +40,7 @@ declare const FloatingComposer: react.ForwardRefExoticComponent<Omit<ComposerPro
     editor: Editor | null;
 } & react.RefAttributes<HTMLFormElement>>;
 
-declare type ThreadPanelComponents = {
+type ThreadPanelComponents = {
     Thread: ComponentType<ThreadProps>;
 };
 interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
@@ -49,7 +59,7 @@ interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAtt
 }
 declare function FloatingThreads({ threads, components, editor, ...props }: FloatingThreadsProps): react_jsx_runtime.JSX.Element | null;
 
-declare type LiveblocksExtensionOptions = {
+type LiveblocksExtensionOptions = {
     field?: string;
     comments?: boolean;
     mentions?: boolean;
@@ -64,6 +74,55 @@ declare type LiveblocksExtensionOptions = {
 declare function useIsEditorReady(): boolean;
 declare const useLiveblocksExtension: (opts?: LiveblocksExtensionOptions) => Extension;
 
+interface ToolbarSlotProps {
+    editor: Editor;
+}
+type ToolbarSlot = ReactNode | ComponentType<ToolbarSlotProps>;
+interface ToolbarProps extends Omit<ComponentProps<"div">, "children"> {
+    editor: Editor | null;
+    children?: ToolbarSlot;
+    before?: ToolbarSlot;
+    after?: ToolbarSlot;
+}
+interface ToolbarButtonProps extends ComponentProps<"button"> {
+    icon?: ReactNode;
+    name: string;
+    shortcut?: string;
+}
+interface ToolbarToggleProps extends ToolbarButtonProps {
+    active: boolean;
+}
+interface ToolbarBlockSelectorItem {
+    name: string;
+    isActive: (editor: Editor) => boolean;
+    setActive: (editor: Editor) => void;
+}
+interface ToolbarBlockSelectorProps extends ComponentProps<"button"> {
+    items?: ToolbarBlockSelectorItem[];
+}
+declare function ToolbarSectionHistory(): react_jsx_runtime.JSX.Element;
+declare function ToolbarSectionInline(): react_jsx_runtime.JSX.Element;
+declare function ToolbarSectionCollaboration(): react_jsx_runtime.JSX.Element;
+declare const Toolbar: react.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    Button: react.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Toggle: react.ForwardRefExoticComponent<Omit<ToolbarToggleProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Separator: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    SectionHistory: typeof ToolbarSectionHistory;
+    SectionInline: typeof ToolbarSectionInline;
+    SectionCollaboration: typeof ToolbarSectionCollaboration;
+    BlockSelector: react.ForwardRefExoticComponent<Omit<ToolbarBlockSelectorProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+};
+
+interface FloatingToolbarProps extends Omit<ComponentProps<"div">, "children"> {
+    editor: Editor | null;
+    position?: FloatingPosition;
+    offset?: number;
+    children?: ToolbarSlot;
+    before?: ToolbarSlot;
+    after?: ToolbarSlot;
+}
+declare const FloatingToolbar: react.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
 interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
     version: HistoryVersion;
     editor: Editor;
@@ -79,15 +138,8 @@ declare const HistoryVersionPreview: react.ForwardRefExoticComponent<HistoryVers
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        comments: {
-            /**
-             * Add a comment
-             */
-            addComment: (id: string) => ReturnType;
-            selectThread: (id: string | null) => ReturnType;
-            addPendingComment: () => ReturnType;
-        };
+        comments: CommentsCommands<ReturnType>;
     }
 }
 
-export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useIsEditorReady, useLiveblocksExtension };
+export { AnchoredThreads, FloatingComposer, FloatingThreads, FloatingToolbar, HistoryVersionPreview, Toolbar, useIsEditorReady, useLiveblocksExtension };

package/dist/index.js

@@ -6,6 +6,8 @@ var AnchoredThreads = require('./comments/AnchoredThreads.js');
 var FloatingComposer = require('./comments/FloatingComposer.js');
 var FloatingThreads = require('./comments/FloatingThreads.js');
 var LiveblocksExtension = require('./LiveblocksExtension.js');
+var FloatingToolbar = require('./toolbar/FloatingToolbar.js');
+var Toolbar = require('./toolbar/Toolbar.js');
 var HistoryVersionPreview = require('./version-history/HistoryVersionPreview.js');
 
 core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
@@ -15,5 +17,7 @@ exports.FloatingComposer = FloatingComposer.FloatingComposer;
 exports.FloatingThreads = FloatingThreads.FloatingThreads;
 exports.useIsEditorReady = LiveblocksExtension.useIsEditorReady;
 exports.useLiveblocksExtension = LiveblocksExtension.useLiveblocksExtension;
+exports.FloatingToolbar = FloatingToolbar.FloatingToolbar;
+exports.Toolbar = Toolbar.Toolbar;
 exports.HistoryVersionPreview = HistoryVersionPreview.HistoryVersionPreview;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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 { useIsEditorReady } 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;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport type { CommentsCommands } from \"./types\";\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 { useIsEditorReady } from \"./LiveblocksExtension\";\nexport { FloatingToolbar } from \"./toolbar/FloatingToolbar\";\nexport { Toolbar } from \"./toolbar/Toolbar\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: CommentsCommands<ReturnType>;\n  }\n}\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;;AAKAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;;;"}

package/dist/index.mjs

@@ -4,6 +4,8 @@ export { AnchoredThreads } from './comments/AnchoredThreads.mjs';
 export { FloatingComposer } from './comments/FloatingComposer.mjs';
 export { FloatingThreads } from './comments/FloatingThreads.mjs';
 export { useIsEditorReady, useLiveblocksExtension } from './LiveblocksExtension.mjs';
+export { FloatingToolbar } from './toolbar/FloatingToolbar.mjs';
+export { Toolbar } from './toolbar/Toolbar.mjs';
 export { HistoryVersionPreview } from './version-history/HistoryVersionPreview.mjs';
 
 detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);

package/dist/index.mjs.map

@@ -1 +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 { useIsEditorReady } 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"}
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport type { CommentsCommands } from \"./types\";\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 { useIsEditorReady } from \"./LiveblocksExtension\";\nexport { FloatingToolbar } from \"./toolbar/FloatingToolbar\";\nexport { Toolbar } from \"./toolbar/Toolbar\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: CommentsCommands<ReturnType>;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AAKA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/mentions/MentionsList.js

@@ -25,118 +25,128 @@ const User = react.forwardRef(
   }
 );
 const SUGGESTIONS_COLLISION_PADDING = 10;
-const MentionsList = react.forwardRef((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = react.useState(0);
-  const room = react$1.useRoom();
-  const suggestions = _private.useMentionSuggestions(room.id, props.query);
-  const { onMouseEnter, onClick } = props;
-  const {
-    refs: { setReference, setFloating },
-    strategy,
-    x,
-    y
-  } = reactDom.useFloating({
-    strategy: "fixed",
-    placement: "top-start",
-    middleware: [
-      reactDom.flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),
-      reactDom.offset(10),
-      reactDom.hide({ padding: SUGGESTIONS_COLLISION_PADDING }),
-      reactDom.shift({ padding: SUGGESTIONS_COLLISION_PADDING, limiter: reactDom.limitShift() }),
-      reactDom.size({ padding: SUGGESTIONS_COLLISION_PADDING })
-    ],
-    whileElementsMounted: (...args) => {
-      return reactDom.autoUpdate(...args, {
-        animationFrame: true
-      });
-    }
-  });
-  react.useLayoutEffect(() => {
-    setReference({
-      getBoundingClientRect: props.clientRect
-    });
-  }, [setReference, props.clientRect]);
-  const selectItem = (index) => {
-    const item = (suggestions ?? [])[index];
-    if (item) {
-      props.command({ id: item, notificationId: core.createInboxNotificationId() });
-    }
-  };
-  const upHandler = () => {
-    setSelectedIndex((selectedIndex + (suggestions?.length ?? 0) - 1) % (suggestions?.length ?? 0));
-  };
-  const downHandler = () => {
-    setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0));
-  };
-  const enterHandler = () => {
-    selectItem(selectedIndex);
-  };
-  react.useEffect(() => setSelectedIndex(0), [suggestions]);
-  react.useImperativeHandle(ref, () => ({
-    onKeyDown: ({ event }) => {
-      if (event.key === "ArrowUp") {
-        upHandler();
-        return true;
+const MentionsList = react.forwardRef(
+  (props, ref) => {
+    const [selectedIndex, setSelectedIndex] = react.useState(0);
+    const room = react$1.useRoom();
+    const suggestions = _private.useMentionSuggestions(room.id, props.query);
+    const { onMouseEnter, onClick } = props;
+    const {
+      refs: { setReference, setFloating },
+      strategy,
+      x,
+      y
+    } = reactDom.useFloating({
+      strategy: "fixed",
+      placement: "top-start",
+      middleware: [
+        reactDom.flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),
+        reactDom.offset(10),
+        reactDom.hide({ padding: SUGGESTIONS_COLLISION_PADDING }),
+        reactDom.shift({
+          padding: SUGGESTIONS_COLLISION_PADDING,
+          limiter: reactDom.limitShift()
+        }),
+        reactDom.size({ padding: SUGGESTIONS_COLLISION_PADDING })
+      ],
+      whileElementsMounted: (...args) => {
+        return reactDom.autoUpdate(...args, {
+          animationFrame: true
+        });
       }
-      if (event.key === "ArrowDown") {
-        downHandler();
-        return true;
+    });
+    _private.useLayoutEffect(() => {
+      setReference({
+        getBoundingClientRect: props.clientRect
+      });
+    }, [setReference, props.clientRect]);
+    const selectItem = (index) => {
+      const item = (suggestions ?? [])[index];
+      if (item) {
+        props.command({
+          id: item,
+          notificationId: core.createInboxNotificationId()
+        });
       }
-      if (event.key === "Enter") {
-        enterHandler();
-        return true;
+    };
+    const upHandler = () => {
+      setSelectedIndex(
+        (selectedIndex + (suggestions?.length ?? 0) - 1) % (suggestions?.length ?? 0)
+      );
+    };
+    const downHandler = () => {
+      setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0));
+    };
+    const enterHandler = () => {
+      selectItem(selectedIndex);
+    };
+    react.useEffect(() => setSelectedIndex(0), [suggestions]);
+    react.useImperativeHandle(ref, () => ({
+      onKeyDown: ({ event }) => {
+        if (event.key === "ArrowUp") {
+          upHandler();
+          return true;
+        }
+        if (event.key === "ArrowDown") {
+          downHandler();
+          return true;
+        }
+        if (event.key === "Enter") {
+          enterHandler();
+          return true;
+        }
+        return false;
       }
-      return false;
+    }));
+    const handleClick = (index) => (event) => {
+      onClick?.(event);
+      if (event.isDefaultPrevented())
+        return;
+      selectItem(index);
+    };
+    const handleMouseEnter = (index) => (event) => {
+      onMouseEnter?.(event);
+      if (event.isDefaultPrevented())
+        return;
+      setSelectedIndex(index);
+    };
+    if (suggestions === void 0 || suggestions.length === 0) {
+      return null;
     }
-  }));
-  const handleClick = (index) => (event) => {
-    onClick?.(event);
-    if (event.isDefaultPrevented())
-      return;
-    selectItem(index);
-  };
-  const handleMouseEnter = (index) => (event) => {
-    onMouseEnter?.(event);
-    if (event.isDefaultPrevented())
-      return;
-    setSelectedIndex(index);
-  };
-  if (suggestions === void 0 || suggestions.length === 0) {
-    return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: "lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions",
+      ref: setFloating,
+      style: {
+        position: strategy,
+        top: 0,
+        left: 0,
+        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
+        minWidth: "max-content",
+        display: props.hide ? "none" : "block"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list",
+        children: suggestions.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          className: "lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion",
+          role: "option",
+          "data-highlighted": index === selectedIndex || void 0,
+          onMouseEnter: handleMouseEnter(index),
+          onClick: handleClick(index),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
+              userId: item,
+              className: "lb-tiptap-mention-suggestion-avatar"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(User, {
+              userId: item,
+              className: "lb-tiptap-mention-suggestion-user"
+            })
+          ]
+        }, index))
+      })
+    });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: "lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions",
-    ref: setFloating,
-    style: {
-      position: strategy,
-      top: 0,
-      left: 0,
-      transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
-      minWidth: "max-content",
-      display: props.hide ? "none" : "block"
-    },
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: "lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list",
-      children: suggestions.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: "lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion",
-        role: "option",
-        "data-highlighted": index === selectedIndex || void 0,
-        onMouseEnter: handleMouseEnter(index),
-        onClick: handleClick(index),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
-            userId: item,
-            className: "lb-tiptap-mention-suggestion-avatar"
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx(User, {
-            userId: item,
-            className: "lb-tiptap-mention-suggestion-user"
-          })
-        ]
-      }, index))
-    })
-  });
-});
+);
 
 exports.MentionsList = MentionsList;
 exports.SUGGESTIONS_COLLISION_PADDING = SUGGESTIONS_COLLISION_PADDING;