@liveblocks/react-tiptap 2.14.0-v2encoding → 2.15.0-debug1

package/dist/comments/FloatingThreads.mjs

@@ -1,7 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
 import { useFloating, flip, offset, hide, shift, limitShift, size, autoUpdate } from '@floating-ui/react-dom';
 import { Thread } from '@liveblocks/react-ui';
 import { useEditorState } from '@tiptap/react';
-import React, { useState, useEffect, useCallback, useLayoutEffect } from 'react';
+import { useState, useEffect, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { classNames } from '../classnames.mjs';
 import { THREADS_PLUGIN_KEY } from '../types.mjs';
@@ -53,18 +54,18 @@ function FloatingThreads({
   }, [activeThread, editor]);
   if (!activeThread || !editor || activeThread.resolved)
     return null;
-  return /* @__PURE__ */ React.createElement(FloatingThreadPortal, {
+  return /* @__PURE__ */ jsx(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"
-  }));
+    ...props,
+    children: activeThread && /* @__PURE__ */ jsx(ThreadWrapper, {
+      thread: activeThread,
+      Thread: Thread$1,
+      onEscapeKeydown: handleEscapeKeydown,
+      className: "lb-tiptap-floating-threads-thread"
+    }, activeThread.id)
+  });
 }
 const FLOATING_THREAD_COLLISION_PADDING = 10;
 function FloatingThreadPortal({
@@ -126,7 +127,7 @@ function FloatingThreadPortal({
   }, [editor, updateRef]);
   useLayoutEffect(updateRef, [updateRef]);
   return createPortal(
-    /* @__PURE__ */ React.createElement("div", {
+    /* @__PURE__ */ jsx("div", {
       ref: setFloating,
       ...props,
       style: {
@@ -140,8 +141,9 @@ function FloatingThreadPortal({
       className: classNames(
         "lb-root lb-portal lb-elevation lb-tiptap-floating lb-tiptap-floating-threads",
         className
-      )
-    }, children),
+      ),
+      children
+    }),
     container
   );
 }
@@ -161,7 +163,7 @@ function ThreadWrapper({
     },
     [onEscapeKeydown, onKeyDown]
   );
-  return /* @__PURE__ */ React.createElement(Thread, {
+  return /* @__PURE__ */ jsx(Thread, {
     thread,
     onKeyDown: handleKeyDown,
     ...threadProps

package/dist/comments/FloatingThreads.mjs.map

@@ -1 +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, useEditorState } 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 { 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\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\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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"}
+{"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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"}

package/dist/index.d.mts

@@ -1,7 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 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 * as react from 'react';
+import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes } from 'react';
 import { BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
 import { Extension, Content } from '@tiptap/core';
 
@@ -22,11 +24,11 @@ interface AnchoredThreadsProps<M extends BaseMetadata = DM> extends Omit<Compone
      */
     editor: Editor | null;
 }
-declare function AnchoredThreads({ threads, components, className, style, editor, ...props }: AnchoredThreadsProps): React.JSX.Element | null;
+declare function AnchoredThreads({ threads, components, className, style, editor, ...props }: AnchoredThreadsProps): react_jsx_runtime.JSX.Element | null;
 
-declare const FloatingComposer: React.ForwardRefExoticComponent<Omit<ComposerProps<BaseMetadata$1>, "threadId" | "commentId"> & {
+declare const FloatingComposer: react.ForwardRefExoticComponent<Omit<ComposerProps<BaseMetadata$1>, "threadId" | "commentId"> & {
     editor: Editor | null;
-} & React.RefAttributes<HTMLFormElement>>;
+} & react.RefAttributes<HTMLFormElement>>;
 
 declare type ThreadPanelComponents = {
     Thread: ComponentType<ThreadProps>;
@@ -45,7 +47,7 @@ interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAtt
      */
     editor: Editor | null;
 }
-declare function FloatingThreads({ threads, components, editor, ...props }: FloatingThreadsProps): React.JSX.Element | null;
+declare function FloatingThreads({ threads, components, editor, ...props }: FloatingThreadsProps): react_jsx_runtime.JSX.Element | null;
 
 declare type LiveblocksExtensionOptions = {
     field?: string;
@@ -73,7 +75,7 @@ interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
  * @example
  * <HistoryVersionPreview version={version} />
  */
-declare const HistoryVersionPreview: React.ForwardRefExoticComponent<HistoryVersionPreviewProps & React.RefAttributes<HTMLDivElement>>;
+declare const HistoryVersionPreview: react.ForwardRefExoticComponent<HistoryVersionPreviewProps & react.RefAttributes<HTMLDivElement>>;
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {

package/dist/index.d.ts

@@ -1,7 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 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 * as react from 'react';
+import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes } from 'react';
 import { BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
 import { Extension, Content } from '@tiptap/core';
 
@@ -22,11 +24,11 @@ interface AnchoredThreadsProps<M extends BaseMetadata = DM> extends Omit<Compone
      */
     editor: Editor | null;
 }
-declare function AnchoredThreads({ threads, components, className, style, editor, ...props }: AnchoredThreadsProps): React.JSX.Element | null;
+declare function AnchoredThreads({ threads, components, className, style, editor, ...props }: AnchoredThreadsProps): react_jsx_runtime.JSX.Element | null;
 
-declare const FloatingComposer: React.ForwardRefExoticComponent<Omit<ComposerProps<BaseMetadata$1>, "threadId" | "commentId"> & {
+declare const FloatingComposer: react.ForwardRefExoticComponent<Omit<ComposerProps<BaseMetadata$1>, "threadId" | "commentId"> & {
     editor: Editor | null;
-} & React.RefAttributes<HTMLFormElement>>;
+} & react.RefAttributes<HTMLFormElement>>;
 
 declare type ThreadPanelComponents = {
     Thread: ComponentType<ThreadProps>;
@@ -45,7 +47,7 @@ interface FloatingThreadsProps<M extends BaseMetadata = DM> extends Omit<HTMLAtt
      */
     editor: Editor | null;
 }
-declare function FloatingThreads({ threads, components, editor, ...props }: FloatingThreadsProps): React.JSX.Element | null;
+declare function FloatingThreads({ threads, components, editor, ...props }: FloatingThreadsProps): react_jsx_runtime.JSX.Element | null;
 
 declare type LiveblocksExtensionOptions = {
     field?: string;
@@ -73,7 +75,7 @@ interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
  * @example
  * <HistoryVersionPreview version={version} />
  */
-declare const HistoryVersionPreview: React.ForwardRefExoticComponent<HistoryVersionPreviewProps & React.RefAttributes<HTMLDivElement>>;
+declare const HistoryVersionPreview: react.ForwardRefExoticComponent<HistoryVersionPreviewProps & react.RefAttributes<HTMLDivElement>>;
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {

package/dist/mentions/Avatar.js

@@ -1,43 +1,50 @@
 'use strict';
 
-var react = require('@liveblocks/react');
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@liveblocks/react');
+var react = require('react');
 var classnames = require('../classnames.js');
 
-const Avatar = React.forwardRef(
+const Avatar = react.forwardRef(
   function Avatar2(props, forwardedRef) {
     const { userId, className, ...spanProps } = props;
-    const { user, isLoading } = react.useUser(userId);
+    const { user, isLoading } = react$1.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", {
+        return /* @__PURE__ */ jsxRuntime.jsx("span", {
           "aria-hidden": true,
-          className: "lb-avatar-fallback"
-        }, initials);
+          className: "lb-avatar-fallback",
+          children: initials
+        });
       }
       if (isLoading)
         return null;
       if (user === void 0)
         return null;
-      return /* @__PURE__ */ React.createElement("span", {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", {
         "aria-label": userId,
         title: userId,
-        className: "lb-avatar-fallback"
-      }, getInitials(userId));
+        className: "lb-avatar-fallback",
+        children: getInitials(userId)
+      });
     }
-    return /* @__PURE__ */ React.createElement("span", {
+    return /* @__PURE__ */ jsxRuntime.jsxs("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));
+      ref: forwardedRef,
+      children: [
+        avatar && /* @__PURE__ */ jsxRuntime.jsx("img", {
+          src: avatar,
+          alt: name,
+          className: "lb-avatar-image"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(Initials, {})
+      ]
+    });
   }
 );
 function getInitials(name) {

package/dist/mentions/Avatar.js.map

@@ -1 +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;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../src/mentions/Avatar.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { 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","jsx","jsxs","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,gBAAQ,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,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,UAAK,aAAW,EAAA,IAAA;AAAA,UAAC,SAAU,EAAA,oBAAA;AAAA,UACzB,QAAA,EAAA,QAAA;AAAA,SACH,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,uBACGA,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,YAAY,EAAA,MAAA;AAAA,QAAQ,KAAO,EAAA,MAAA;AAAA,QAAQ,SAAU,EAAA,oBAAA;AAAA,QAChD,sBAAY,MAAM,CAAA;AAAA,OACrB,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,uBACGC,eAAA,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,MAEJ,QAAA,EAAA;AAAA,QAAA,MAAA,oBAAWF,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,GAAK,EAAA,MAAA;AAAA,UAAQ,GAAK,EAAA,IAAA;AAAA,UAAM,SAAU,EAAA,iBAAA;AAAA,SAAkB,CAAA;AAAA,uCAEnE,QAAS,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KACZ,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,EAAUG,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;;;;"}

package/dist/mentions/Avatar.mjs

@@ -1,5 +1,6 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useUser } from '@liveblocks/react';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { classNames } from '../classnames.mjs';
 
 const Avatar = forwardRef(
@@ -11,31 +12,37 @@ const Avatar = forwardRef(
     function Initials() {
       const initials = name ? getInitials(name) : void 0;
       if (initials) {
-        return /* @__PURE__ */ React.createElement("span", {
+        return /* @__PURE__ */ jsx("span", {
           "aria-hidden": true,
-          className: "lb-avatar-fallback"
-        }, initials);
+          className: "lb-avatar-fallback",
+          children: initials
+        });
       }
       if (isLoading)
         return null;
       if (user === void 0)
         return null;
-      return /* @__PURE__ */ React.createElement("span", {
+      return /* @__PURE__ */ jsx("span", {
         "aria-label": userId,
         title: userId,
-        className: "lb-avatar-fallback"
-      }, getInitials(userId));
+        className: "lb-avatar-fallback",
+        children: getInitials(userId)
+      });
     }
-    return /* @__PURE__ */ React.createElement("span", {
+    return /* @__PURE__ */ jsxs("span", {
       "data-loading": isLoading ? "" : void 0,
       ...spanProps,
       className: classNames("lb-avatar", className),
-      ref: forwardedRef
-    }, avatar && /* @__PURE__ */ React.createElement("img", {
-      src: avatar,
-      alt: name,
-      className: "lb-avatar-image"
-    }), /* @__PURE__ */ React.createElement(Initials, null));
+      ref: forwardedRef,
+      children: [
+        avatar && /* @__PURE__ */ jsx("img", {
+          src: avatar,
+          alt: name,
+          className: "lb-avatar-image"
+        }),
+        /* @__PURE__ */ jsx(Initials, {})
+      ]
+    });
   }
 );
 function getInitials(name) {

package/dist/mentions/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","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":["Avatar","name"],"mappings":";;;;AAWO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,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,GAAI,QAAQ,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,EAAW,UAAW,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;;;;"}
+{"version":3,"file":"Avatar.mjs","sources":["../../src/mentions/Avatar.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { 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":["Avatar","name"],"mappings":";;;;;AAWO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,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,GAAI,QAAQ,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,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,aAAW,EAAA,IAAA;AAAA,UAAC,SAAU,EAAA,oBAAA;AAAA,UACzB,QAAA,EAAA,QAAA;AAAA,SACH,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,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,YAAY,EAAA,MAAA;AAAA,QAAQ,KAAO,EAAA,MAAA;AAAA,QAAQ,SAAU,EAAA,oBAAA;AAAA,QAChD,sBAAY,MAAM,CAAA;AAAA,OACrB,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,UAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,MAC5C,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,QAAA,MAAA,oBAAW,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,GAAK,EAAA,MAAA;AAAA,UAAQ,GAAK,EAAA,IAAA;AAAA,UAAM,SAAU,EAAA,iBAAA;AAAA,SAAkB,CAAA;AAAA,4BAEnE,QAAS,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KACZ,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;;;;"}

package/dist/mentions/Mention.js

@@ -1,22 +1,27 @@
 'use strict';
 
-var react = require('@tiptap/react');
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@tiptap/react');
+var react = require('react');
 var classnames = require('../classnames.js');
 var MentionsList = require('./MentionsList.js');
 
 const MENTION_CHARACTER = "@";
-const Mention = React.forwardRef(
+const Mention = react.forwardRef(
   (props, forwardedRef) => {
     const id = props.node.attrs.id;
     const classnames$1 = classnames.classNames("lb-root", "lb-tiptap-mention", props.selected ? "lb-mention-selected" : null);
-    return /* @__PURE__ */ React.createElement(react.NodeViewWrapper, {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react$1.NodeViewWrapper, {
       className: classnames$1,
       as: "span",
-      ref: forwardedRef
-    }, MENTION_CHARACTER, /* @__PURE__ */ React.createElement(MentionsList.User, {
-      userId: id
-    }));
+      ref: forwardedRef,
+      children: [
+        MENTION_CHARACTER,
+        /* @__PURE__ */ jsxRuntime.jsx(MentionsList.User, {
+          userId: id
+        })
+      ]
+    });
   }
 );
 

package/dist/mentions/Mention.js.map

@@ -1 +1 @@
-{"version":3,"file":"Mention.js","sources":["../../src/mentions/Mention.tsx"],"sourcesContent":["import type { Node } from \"@tiptap/pm/model\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport React, { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport { User } from \"./MentionsList\";\n\nconst MENTION_CHARACTER = \"@\";\n\nexport const Mention = forwardRef<HTMLSpanElement, { node: Node, selected: boolean }>(\n  (props, forwardedRef) => {\n    const id = (props.node.attrs as { id: string }).id;\n    const classnames = classNames(\"lb-root\", \"lb-tiptap-mention\", props.selected ? \"lb-mention-selected\" : null);\n    return (\n      <NodeViewWrapper className={classnames} as=\"span\"\n        ref={forwardedRef}>\n        {MENTION_CHARACTER}\n        <User userId={id} />\n      </NodeViewWrapper>\n    )\n  }\n);\n"],"names":["forwardRef","classnames","classNames","NodeViewWrapper","User"],"mappings":";;;;;;;AAOA,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAEnB,MAAM,OAAU,GAAAA,gBAAA;AAAA,EACrB,CAAC,OAAO,YAAiB,KAAA;AACvB,IAAM,MAAA,EAAA,GAAM,KAAM,CAAA,IAAA,CAAK,KAAyB,CAAA,EAAA,CAAA;AAChD,IAAA,MAAMC,eAAaC,qBAAW,CAAA,SAAA,EAAW,qBAAqB,KAAM,CAAA,QAAA,GAAW,wBAAwB,IAAI,CAAA,CAAA;AAC3G,IAAA,uBACG,KAAA,CAAA,aAAA,CAAAC,qBAAA,EAAA;AAAA,MAAgB,SAAW,EAAAF,YAAA;AAAA,MAAY,EAAG,EAAA,MAAA;AAAA,MACzC,GAAK,EAAA,YAAA;AAAA,KAAA,EACJ,mCACA,KAAA,CAAA,aAAA,CAAAG,iBAAA,EAAA;AAAA,MAAK,MAAQ,EAAA,EAAA;AAAA,KAAI,CACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Mention.js","sources":["../../src/mentions/Mention.tsx"],"sourcesContent":["import type { Node } from \"@tiptap/pm/model\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport { User } from \"./MentionsList\";\n\nconst MENTION_CHARACTER = \"@\";\n\nexport const Mention = forwardRef<HTMLSpanElement, { node: Node, selected: boolean }>(\n  (props, forwardedRef) => {\n    const id = (props.node.attrs as { id: string }).id;\n    const classnames = classNames(\"lb-root\", \"lb-tiptap-mention\", props.selected ? \"lb-mention-selected\" : null);\n    return (\n      <NodeViewWrapper className={classnames} as=\"span\"\n        ref={forwardedRef}>\n        {MENTION_CHARACTER}\n        <User userId={id} />\n      </NodeViewWrapper>\n    )\n  }\n);\n"],"names":["forwardRef","classnames","classNames","jsxs","NodeViewWrapper","jsx","User"],"mappings":";;;;;;;;AAOA,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAEnB,MAAM,OAAU,GAAAA,gBAAA;AAAA,EACrB,CAAC,OAAO,YAAiB,KAAA;AACvB,IAAM,MAAA,EAAA,GAAM,KAAM,CAAA,IAAA,CAAK,KAAyB,CAAA,EAAA,CAAA;AAChD,IAAA,MAAMC,eAAaC,qBAAW,CAAA,SAAA,EAAW,qBAAqB,KAAM,CAAA,QAAA,GAAW,wBAAwB,IAAI,CAAA,CAAA;AAC3G,IAAA,uBACGC,eAAA,CAAAC,uBAAA,EAAA;AAAA,MAAgB,SAAW,EAAAH,YAAA;AAAA,MAAY,EAAG,EAAA,MAAA;AAAA,MACzC,GAAK,EAAA,YAAA;AAAA,MACJ,QAAA,EAAA;AAAA,QAAA,iBAAA;AAAA,wBACAI,cAAA,CAAAC,iBAAA,EAAA;AAAA,UAAK,MAAQ,EAAA,EAAA;AAAA,SAAI,CAAA;AAAA,OAAA;AAAA,KACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/mentions/Mention.mjs

@@ -1,5 +1,6 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { NodeViewWrapper } from '@tiptap/react';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { classNames } from '../classnames.mjs';
 import { User } from './MentionsList.mjs';
 
@@ -8,13 +9,17 @@ const Mention = forwardRef(
   (props, forwardedRef) => {
     const id = props.node.attrs.id;
     const classnames = classNames("lb-root", "lb-tiptap-mention", props.selected ? "lb-mention-selected" : null);
-    return /* @__PURE__ */ React.createElement(NodeViewWrapper, {
+    return /* @__PURE__ */ jsxs(NodeViewWrapper, {
       className: classnames,
       as: "span",
-      ref: forwardedRef
-    }, MENTION_CHARACTER, /* @__PURE__ */ React.createElement(User, {
-      userId: id
-    }));
+      ref: forwardedRef,
+      children: [
+        MENTION_CHARACTER,
+        /* @__PURE__ */ jsx(User, {
+          userId: id
+        })
+      ]
+    });
   }
 );
 

package/dist/mentions/Mention.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Mention.mjs","sources":["../../src/mentions/Mention.tsx"],"sourcesContent":["import type { Node } from \"@tiptap/pm/model\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport React, { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport { User } from \"./MentionsList\";\n\nconst MENTION_CHARACTER = \"@\";\n\nexport const Mention = forwardRef<HTMLSpanElement, { node: Node, selected: boolean }>(\n  (props, forwardedRef) => {\n    const id = (props.node.attrs as { id: string }).id;\n    const classnames = classNames(\"lb-root\", \"lb-tiptap-mention\", props.selected ? \"lb-mention-selected\" : null);\n    return (\n      <NodeViewWrapper className={classnames} as=\"span\"\n        ref={forwardedRef}>\n        {MENTION_CHARACTER}\n        <User userId={id} />\n      </NodeViewWrapper>\n    )\n  }\n);\n"],"names":[],"mappings":";;;;;AAOA,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAEnB,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,CAAC,OAAO,YAAiB,KAAA;AACvB,IAAM,MAAA,EAAA,GAAM,KAAM,CAAA,IAAA,CAAK,KAAyB,CAAA,EAAA,CAAA;AAChD,IAAA,MAAM,aAAa,UAAW,CAAA,SAAA,EAAW,qBAAqB,KAAM,CAAA,QAAA,GAAW,wBAAwB,IAAI,CAAA,CAAA;AAC3G,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MAAgB,SAAW,EAAA,UAAA;AAAA,MAAY,EAAG,EAAA,MAAA;AAAA,MACzC,GAAK,EAAA,YAAA;AAAA,KAAA,EACJ,mCACA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MAAK,MAAQ,EAAA,EAAA;AAAA,KAAI,CACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Mention.mjs","sources":["../../src/mentions/Mention.tsx"],"sourcesContent":["import type { Node } from \"@tiptap/pm/model\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport { User } from \"./MentionsList\";\n\nconst MENTION_CHARACTER = \"@\";\n\nexport const Mention = forwardRef<HTMLSpanElement, { node: Node, selected: boolean }>(\n  (props, forwardedRef) => {\n    const id = (props.node.attrs as { id: string }).id;\n    const classnames = classNames(\"lb-root\", \"lb-tiptap-mention\", props.selected ? \"lb-mention-selected\" : null);\n    return (\n      <NodeViewWrapper className={classnames} as=\"span\"\n        ref={forwardedRef}>\n        {MENTION_CHARACTER}\n        <User userId={id} />\n      </NodeViewWrapper>\n    )\n  }\n);\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAEnB,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,CAAC,OAAO,YAAiB,KAAA;AACvB,IAAM,MAAA,EAAA,GAAM,KAAM,CAAA,IAAA,CAAK,KAAyB,CAAA,EAAA,CAAA;AAChD,IAAA,MAAM,aAAa,UAAW,CAAA,SAAA,EAAW,qBAAqB,KAAM,CAAA,QAAA,GAAW,wBAAwB,IAAI,CAAA,CAAA;AAC3G,IAAA,uBACG,IAAA,CAAA,eAAA,EAAA;AAAA,MAAgB,SAAW,EAAA,UAAA;AAAA,MAAY,EAAG,EAAA,MAAA;AAAA,MACzC,GAAK,EAAA,YAAA;AAAA,MACJ,QAAA,EAAA;AAAA,QAAA,iBAAA;AAAA,wBACA,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,MAAQ,EAAA,EAAA;AAAA,SAAI,CAAA;AAAA,OAAA;AAAA,KACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/mentions/MentionsList.js

@@ -1,31 +1,33 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('@floating-ui/react-dom');
 var core = require('@liveblocks/core');
-var react = require('@liveblocks/react');
+var react$1 = require('@liveblocks/react');
 var _private = require('@liveblocks/react/_private');
 var reactUi = require('@liveblocks/react-ui');
-var React = require('react');
+var react = require('react');
 var Avatar = require('./Avatar.js');
 
-const User = React.forwardRef(
+const User = react.forwardRef(
   function User2(props, forwardedRef) {
     const { userId, className, ...spanProps } = props;
-    const { user, isLoading } = react.useUser(userId);
+    const { user, isLoading } = react$1.useUser(userId);
     const $ = reactUi.useOverrides();
     const name = user === void 0 || user === null ? $.USER_UNKNOWN : user.name;
-    return /* @__PURE__ */ React.createElement("span", {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", {
       className,
       "data-loading": isLoading ? "" : void 0,
       ref: forwardedRef,
-      ...spanProps
-    }, isLoading ? null : name);
+      ...spanProps,
+      children: isLoading ? null : name
+    });
   }
 );
 const SUGGESTIONS_COLLISION_PADDING = 10;
-const MentionsList = React.forwardRef((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const room = react.useRoom();
+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 {
@@ -49,7 +51,7 @@ const MentionsList = React.forwardRef((props, ref) => {
       });
     }
   });
-  React.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     setReference({
       getBoundingClientRect: props.clientRect
     });
@@ -69,8 +71,8 @@ const MentionsList = React.forwardRef((props, ref) => {
   const enterHandler = () => {
     selectItem(selectedIndex);
   };
-  React.useEffect(() => setSelectedIndex(0), [suggestions]);
-  React.useImperativeHandle(ref, () => ({
+  react.useEffect(() => setSelectedIndex(0), [suggestions]);
+  react.useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
         upHandler();
@@ -102,7 +104,7 @@ const MentionsList = React.forwardRef((props, ref) => {
   if (suggestions === void 0 || suggestions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: "lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions",
     ref: setFloating,
     style: {
@@ -112,23 +114,28 @@ const MentionsList = React.forwardRef((props, ref) => {
       transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
       minWidth: "max-content",
       display: props.hide ? "none" : "block"
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list"
-  }, suggestions.map((item, index) => /* @__PURE__ */ React.createElement("div", {
-    className: "lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion",
-    key: index,
-    role: "option",
-    "data-highlighted": index === selectedIndex || void 0,
-    onMouseEnter: handleMouseEnter(index),
-    onClick: handleClick(index)
-  }, /* @__PURE__ */ React.createElement(Avatar.Avatar, {
-    userId: item,
-    className: "lb-tiptap-mention-suggestion-avatar"
-  }), /* @__PURE__ */ React.createElement(User, {
-    userId: item,
-    className: "lb-tiptap-mention-suggestion-user"
-  })))));
+    },
+    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;