@liveblocks/react-tiptap 2.14.0 → 2.15.0-debug1

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;

package/dist/mentions/MentionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionsList.js","sources":["../../src/mentions/MentionsList.tsx"],"sourcesContent":["import { autoUpdate, flip, hide, limitShift, offset, shift, size, useFloating } from \"@floating-ui/react-dom\";\nimport { createInboxNotificationId } from \"@liveblocks/core\";\nimport { useRoom, useUser } from \"@liveblocks/react\";\nimport { useMentionSuggestions } from \"@liveblocks/react/_private\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport React, {\n  forwardRef, useEffect, useImperativeHandle,\n  useLayoutEffect,\n  useState,\n} from \"react\"\n\nimport { Avatar } from \"./Avatar\";\n\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n    const $ = useOverrides();\n\n    const name =\n      user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n    return (\n      <span\n        className={className}\n        data-loading={isLoading ? \"\" : undefined}\n        ref={forwardedRef}\n        {...spanProps}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n\n\nexport const SUGGESTIONS_COLLISION_PADDING = 10;\n\nexport interface MentionsListProps extends HTMLAttributes<HTMLDivElement> {\n  query: string,\n  command: (otps: { id: string, notificationId: string }) => void,\n  clientRect: () => DOMRect,\n  hide: boolean\n}\n\nexport type MentionsListHandle = {\n  onKeyDown: ({ event }: { event: KeyboardEvent }) => boolean,\n};\n\nexport const MentionsList = forwardRef<MentionsListHandle, MentionsListProps>((props, ref) => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const room = useRoom();\n  const suggestions = useMentionSuggestions(room.id, props.query);\n  const { onMouseEnter, onClick } = props;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"top-start\",\n    middleware: [\n      flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: SUGGESTIONS_COLLISION_PADDING }),\n      shift({ padding: SUGGESTIONS_COLLISION_PADDING, limiter: limitShift() }),\n      size({ padding: SUGGESTIONS_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    setReference({\n      getBoundingClientRect: props.clientRect,\n    });\n  }, [setReference, props.clientRect]);\n\n  const selectItem = (index: number) => {\n    const item = (suggestions ?? [])[index];\n    if (item) {\n      props.command({ id: item, notificationId: createInboxNotificationId() });\n    }\n  }\n\n  const upHandler = () => {\n    setSelectedIndex((selectedIndex + (suggestions?.length ?? 0) - 1) % (suggestions?.length ?? 0))\n  }\n\n  const downHandler = () => {\n    setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0))\n  }\n\n  const enterHandler = () => {\n    selectItem(selectedIndex)\n  }\n\n  useEffect(() => setSelectedIndex(0), [suggestions])\n\n  useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }: { event: KeyboardEvent }) => {\n      if (event.key === \"ArrowUp\") {\n        upHandler()\n        return true\n      }\n\n      if (event.key === \"ArrowDown\") {\n        downHandler()\n        return true\n      }\n\n      if (event.key === \"Enter\") {\n        enterHandler()\n        return true\n      }\n\n      return false\n    },\n  }))\n\n  const handleClick = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n\n    if (event.isDefaultPrevented()) return;\n    selectItem(index)\n  }\n  const handleMouseEnter = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(event);\n\n    if (event.isDefaultPrevented()) return;\n\n    setSelectedIndex(index);\n  }\n\n  if (suggestions === undefined || suggestions.length === 0) {\n    return null\n  }\n\n  return (\n    <div className=\"lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions\" ref={setFloating}\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        display: props.hide ? \"none\" : \"block\"\n      }}>\n      <div className=\"lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list\">\n        {suggestions.map((item, index) => (\n          <div className=\"lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion\"\n            key={index}\n            role=\"option\"\n            data-highlighted={index === selectedIndex || undefined}\n\n            onMouseEnter={handleMouseEnter(index)}\n            onClick={handleClick(index)}>\n            <Avatar\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-avatar\"\n            />\n            <User\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-user\"\n            />\n          </div>\n        ))\n        }\n      </div>\n    </div>\n  )\n})"],"names":["forwardRef","User","useUser","useOverrides","useState","useRoom","useMentionSuggestions","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","createInboxNotificationId","useEffect","useImperativeHandle","Avatar"],"mappings":"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"}
+{"version":3,"file":"MentionsList.js","sources":["../../src/mentions/MentionsList.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 { createInboxNotificationId } from \"@liveblocks/core\";\nimport { useRoom, useUser } from \"@liveblocks/react\";\nimport { useMentionSuggestions } from \"@liveblocks/react/_private\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useState,\n} from \"react\";\n\nimport { Avatar } from \"./Avatar\";\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n    const $ = useOverrides();\n\n    const name =\n      user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n    return (\n      <span\n        className={className}\n        data-loading={isLoading ? \"\" : undefined}\n        ref={forwardedRef}\n        {...spanProps}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n\n\nexport const SUGGESTIONS_COLLISION_PADDING = 10;\n\nexport interface MentionsListProps extends HTMLAttributes<HTMLDivElement> {\n  query: string,\n  command: (otps: { id: string, notificationId: string }) => void,\n  clientRect: () => DOMRect,\n  hide: boolean\n}\n\nexport type MentionsListHandle = {\n  onKeyDown: ({ event }: { event: KeyboardEvent }) => boolean,\n};\n\nexport const MentionsList = forwardRef<MentionsListHandle, MentionsListProps>((props, ref) => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const room = useRoom();\n  const suggestions = useMentionSuggestions(room.id, props.query);\n  const { onMouseEnter, onClick } = props;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"top-start\",\n    middleware: [\n      flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: SUGGESTIONS_COLLISION_PADDING }),\n      shift({ padding: SUGGESTIONS_COLLISION_PADDING, limiter: limitShift() }),\n      size({ padding: SUGGESTIONS_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    setReference({\n      getBoundingClientRect: props.clientRect,\n    });\n  }, [setReference, props.clientRect]);\n\n  const selectItem = (index: number) => {\n    const item = (suggestions ?? [])[index];\n    if (item) {\n      props.command({ id: item, notificationId: createInboxNotificationId() });\n    }\n  }\n\n  const upHandler = () => {\n    setSelectedIndex((selectedIndex + (suggestions?.length ?? 0) - 1) % (suggestions?.length ?? 0))\n  }\n\n  const downHandler = () => {\n    setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0))\n  }\n\n  const enterHandler = () => {\n    selectItem(selectedIndex)\n  }\n\n  useEffect(() => setSelectedIndex(0), [suggestions])\n\n  useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }: { event: KeyboardEvent }) => {\n      if (event.key === \"ArrowUp\") {\n        upHandler()\n        return true\n      }\n\n      if (event.key === \"ArrowDown\") {\n        downHandler()\n        return true\n      }\n\n      if (event.key === \"Enter\") {\n        enterHandler()\n        return true\n      }\n\n      return false\n    },\n  }))\n\n  const handleClick = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n\n    if (event.isDefaultPrevented()) return;\n    selectItem(index)\n  }\n  const handleMouseEnter = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(event);\n\n    if (event.isDefaultPrevented()) return;\n\n    setSelectedIndex(index);\n  }\n\n  if (suggestions === undefined || suggestions.length === 0) {\n    return null\n  }\n\n  return (\n    <div className=\"lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions\" ref={setFloating}\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        display: props.hide ? \"none\" : \"block\"\n      }}>\n      <div className=\"lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list\">\n        {suggestions.map((item, index) => (\n          <div className=\"lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion\"\n            key={index}\n            role=\"option\"\n            data-highlighted={index === selectedIndex || undefined}\n\n            onMouseEnter={handleMouseEnter(index)}\n            onClick={handleClick(index)}>\n            <Avatar\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-avatar\"\n            />\n            <User\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-user\"\n            />\n          </div>\n        ))\n        }\n      </div>\n    </div>\n  )\n})"],"names":["forwardRef","User","useUser","useOverrides","jsx","useState","useRoom","useMentionSuggestions","useFloating","flip","offset","hide","shift","limitShift","size","autoUpdate","useLayoutEffect","createInboxNotificationId","useEffect","useImperativeHandle","jsxs","Avatar"],"mappings":"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"}

package/dist/mentions/MentionsList.mjs

@@ -1,9 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useFloating, flip, offset, hide, shift, limitShift, size, autoUpdate } from '@floating-ui/react-dom';
 import { createInboxNotificationId } from '@liveblocks/core';
 import { useUser, useRoom } from '@liveblocks/react';
 import { useMentionSuggestions } from '@liveblocks/react/_private';
 import { useOverrides } from '@liveblocks/react-ui';
-import React, { forwardRef, useState, useLayoutEffect, useEffect, useImperativeHandle } from 'react';
+import { forwardRef, useState, useLayoutEffect, useEffect, useImperativeHandle } from 'react';
 import { Avatar } from './Avatar.mjs';
 
 const User = forwardRef(
@@ -12,12 +13,13 @@ const User = forwardRef(
     const { user, isLoading } = useUser(userId);
     const $ = useOverrides();
     const name = user === void 0 || user === null ? $.USER_UNKNOWN : user.name;
-    return /* @__PURE__ */ React.createElement("span", {
+    return /* @__PURE__ */ jsx("span", {
       className,
       "data-loading": isLoading ? "" : void 0,
       ref: forwardedRef,
-      ...spanProps
-    }, isLoading ? null : name);
+      ...spanProps,
+      children: isLoading ? null : name
+    });
   }
 );
 const SUGGESTIONS_COLLISION_PADDING = 10;
@@ -100,7 +102,7 @@ const MentionsList = forwardRef((props, ref) => {
   if (suggestions === void 0 || suggestions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsx("div", {
     className: "lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions",
     ref: setFloating,
     style: {
@@ -110,23 +112,28 @@ const MentionsList = 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, {
-    userId: item,
-    className: "lb-tiptap-mention-suggestion-avatar"
-  }), /* @__PURE__ */ React.createElement(User, {
-    userId: item,
-    className: "lb-tiptap-mention-suggestion-user"
-  })))));
+    },
+    children: /* @__PURE__ */ jsx("div", {
+      className: "lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list",
+      children: suggestions.map((item, index) => /* @__PURE__ */ 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__ */ jsx(Avatar, {
+            userId: item,
+            className: "lb-tiptap-mention-suggestion-avatar"
+          }),
+          /* @__PURE__ */ jsx(User, {
+            userId: item,
+            className: "lb-tiptap-mention-suggestion-user"
+          })
+        ]
+      }, index))
+    })
+  });
 });
 
 export { MentionsList, SUGGESTIONS_COLLISION_PADDING, User };

package/dist/mentions/MentionsList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MentionsList.mjs","sources":["../../src/mentions/MentionsList.tsx"],"sourcesContent":["import { autoUpdate, flip, hide, limitShift, offset, shift, size, useFloating } from \"@floating-ui/react-dom\";\nimport { createInboxNotificationId } from \"@liveblocks/core\";\nimport { useRoom, useUser } from \"@liveblocks/react\";\nimport { useMentionSuggestions } from \"@liveblocks/react/_private\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport React, {\n  forwardRef, useEffect, useImperativeHandle,\n  useLayoutEffect,\n  useState,\n} from \"react\"\n\nimport { Avatar } from \"./Avatar\";\n\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n    const $ = useOverrides();\n\n    const name =\n      user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n    return (\n      <span\n        className={className}\n        data-loading={isLoading ? \"\" : undefined}\n        ref={forwardedRef}\n        {...spanProps}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n\n\nexport const SUGGESTIONS_COLLISION_PADDING = 10;\n\nexport interface MentionsListProps extends HTMLAttributes<HTMLDivElement> {\n  query: string,\n  command: (otps: { id: string, notificationId: string }) => void,\n  clientRect: () => DOMRect,\n  hide: boolean\n}\n\nexport type MentionsListHandle = {\n  onKeyDown: ({ event }: { event: KeyboardEvent }) => boolean,\n};\n\nexport const MentionsList = forwardRef<MentionsListHandle, MentionsListProps>((props, ref) => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const room = useRoom();\n  const suggestions = useMentionSuggestions(room.id, props.query);\n  const { onMouseEnter, onClick } = props;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"top-start\",\n    middleware: [\n      flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: SUGGESTIONS_COLLISION_PADDING }),\n      shift({ padding: SUGGESTIONS_COLLISION_PADDING, limiter: limitShift() }),\n      size({ padding: SUGGESTIONS_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    setReference({\n      getBoundingClientRect: props.clientRect,\n    });\n  }, [setReference, props.clientRect]);\n\n  const selectItem = (index: number) => {\n    const item = (suggestions ?? [])[index];\n    if (item) {\n      props.command({ id: item, notificationId: createInboxNotificationId() });\n    }\n  }\n\n  const upHandler = () => {\n    setSelectedIndex((selectedIndex + (suggestions?.length ?? 0) - 1) % (suggestions?.length ?? 0))\n  }\n\n  const downHandler = () => {\n    setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0))\n  }\n\n  const enterHandler = () => {\n    selectItem(selectedIndex)\n  }\n\n  useEffect(() => setSelectedIndex(0), [suggestions])\n\n  useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }: { event: KeyboardEvent }) => {\n      if (event.key === \"ArrowUp\") {\n        upHandler()\n        return true\n      }\n\n      if (event.key === \"ArrowDown\") {\n        downHandler()\n        return true\n      }\n\n      if (event.key === \"Enter\") {\n        enterHandler()\n        return true\n      }\n\n      return false\n    },\n  }))\n\n  const handleClick = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n\n    if (event.isDefaultPrevented()) return;\n    selectItem(index)\n  }\n  const handleMouseEnter = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(event);\n\n    if (event.isDefaultPrevented()) return;\n\n    setSelectedIndex(index);\n  }\n\n  if (suggestions === undefined || suggestions.length === 0) {\n    return null\n  }\n\n  return (\n    <div className=\"lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions\" ref={setFloating}\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        display: props.hide ? \"none\" : \"block\"\n      }}>\n      <div className=\"lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list\">\n        {suggestions.map((item, index) => (\n          <div className=\"lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion\"\n            key={index}\n            role=\"option\"\n            data-highlighted={index === selectedIndex || undefined}\n\n            onMouseEnter={handleMouseEnter(index)}\n            onClick={handleClick(index)}>\n            <Avatar\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-avatar\"\n            />\n            <User\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-user\"\n            />\n          </div>\n        ))\n        }\n      </div>\n    </div>\n  )\n})"],"names":["User"],"mappings":"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"}
+{"version":3,"file":"MentionsList.mjs","sources":["../../src/mentions/MentionsList.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 { createInboxNotificationId } from \"@liveblocks/core\";\nimport { useRoom, useUser } from \"@liveblocks/react\";\nimport { useMentionSuggestions } from \"@liveblocks/react/_private\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useState,\n} from \"react\";\n\nimport { Avatar } from \"./Avatar\";\n\nexport interface UserProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  userId: string;\n}\n\nexport const User = forwardRef<HTMLSpanElement, UserProps>(\n  function User(props, forwardedRef) {\n    const { userId, className, ...spanProps } = props;\n\n    const { user, isLoading } = useUser(userId);\n    const $ = useOverrides();\n\n    const name =\n      user === undefined || user === null ? $.USER_UNKNOWN : user.name;\n\n    return (\n      <span\n        className={className}\n        data-loading={isLoading ? \"\" : undefined}\n        ref={forwardedRef}\n        {...spanProps}\n      >\n        {isLoading ? null : name}\n      </span>\n    );\n  }\n);\n\n\nexport const SUGGESTIONS_COLLISION_PADDING = 10;\n\nexport interface MentionsListProps extends HTMLAttributes<HTMLDivElement> {\n  query: string,\n  command: (otps: { id: string, notificationId: string }) => void,\n  clientRect: () => DOMRect,\n  hide: boolean\n}\n\nexport type MentionsListHandle = {\n  onKeyDown: ({ event }: { event: KeyboardEvent }) => boolean,\n};\n\nexport const MentionsList = forwardRef<MentionsListHandle, MentionsListProps>((props, ref) => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const room = useRoom();\n  const suggestions = useMentionSuggestions(room.id, props.query);\n  const { onMouseEnter, onClick } = props;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    x,\n    y,\n  } = useFloating({\n    strategy: \"fixed\",\n    placement: \"top-start\",\n    middleware: [\n      flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),\n      offset(10),\n      hide({ padding: SUGGESTIONS_COLLISION_PADDING }),\n      shift({ padding: SUGGESTIONS_COLLISION_PADDING, limiter: limitShift() }),\n      size({ padding: SUGGESTIONS_COLLISION_PADDING }),\n    ],\n    whileElementsMounted: (...args) => {\n      return autoUpdate(...args, {\n        animationFrame: true,\n      });\n    },\n  });\n\n  useLayoutEffect(() => {\n    setReference({\n      getBoundingClientRect: props.clientRect,\n    });\n  }, [setReference, props.clientRect]);\n\n  const selectItem = (index: number) => {\n    const item = (suggestions ?? [])[index];\n    if (item) {\n      props.command({ id: item, notificationId: createInboxNotificationId() });\n    }\n  }\n\n  const upHandler = () => {\n    setSelectedIndex((selectedIndex + (suggestions?.length ?? 0) - 1) % (suggestions?.length ?? 0))\n  }\n\n  const downHandler = () => {\n    setSelectedIndex((selectedIndex + 1) % (suggestions?.length ?? 0))\n  }\n\n  const enterHandler = () => {\n    selectItem(selectedIndex)\n  }\n\n  useEffect(() => setSelectedIndex(0), [suggestions])\n\n  useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }: { event: KeyboardEvent }) => {\n      if (event.key === \"ArrowUp\") {\n        upHandler()\n        return true\n      }\n\n      if (event.key === \"ArrowDown\") {\n        downHandler()\n        return true\n      }\n\n      if (event.key === \"Enter\") {\n        enterHandler()\n        return true\n      }\n\n      return false\n    },\n  }))\n\n  const handleClick = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n\n    if (event.isDefaultPrevented()) return;\n    selectItem(index)\n  }\n  const handleMouseEnter = (index: number) => (event: MouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(event);\n\n    if (event.isDefaultPrevented()) return;\n\n    setSelectedIndex(index);\n  }\n\n  if (suggestions === undefined || suggestions.length === 0) {\n    return null\n  }\n\n  return (\n    <div className=\"lb-root lb-portal lb-elevation lb-tiptap-suggestions lb-tiptap-mention-suggestions\" ref={setFloating}\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        display: props.hide ? \"none\" : \"block\"\n      }}>\n      <div className=\"lb-tiptap-suggestions-list lb-tiptap-mention-suggestions-list\">\n        {suggestions.map((item, index) => (\n          <div className=\"lb-tiptap-suggestions-list-item lb-tiptap-mention-suggestion\"\n            key={index}\n            role=\"option\"\n            data-highlighted={index === selectedIndex || undefined}\n\n            onMouseEnter={handleMouseEnter(index)}\n            onClick={handleClick(index)}>\n            <Avatar\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-avatar\"\n            />\n            <User\n              userId={item}\n              className=\"lb-tiptap-mention-suggestion-user\"\n            />\n          </div>\n        ))\n        }\n      </div>\n    </div>\n  )\n})"],"names":["User"],"mappings":"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"}

package/dist/version-history/HistoryVersionPreview.js

@@ -1,23 +1,24 @@
 'use strict';
 
-var react = require('@liveblocks/react');
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@liveblocks/react');
 var reactUi = require('@liveblocks/react-ui');
 var _private = require('@liveblocks/react-ui/_private');
-var react$1 = require('@tiptap/react');
-var React = require('react');
+var react$2 = require('@tiptap/react');
+var react = require('react');
 var yProsemirror = require('y-prosemirror');
 var yjs = require('yjs');
 var classnames = require('../classnames.js');
 
 const AUTHORS_TRUNCATE = 3;
-const HistoryVersionPreview = React.forwardRef(({ version, editor: parentEditor, onVersionRestore, className, ...props }, forwardedRef) => {
+const HistoryVersionPreview = react.forwardRef(({ version, editor: parentEditor, onVersionRestore, className, ...props }, forwardedRef) => {
   const $ = reactUi.useOverrides();
-  const { isLoading, data, error } = react.useHistoryVersionData(version.id);
-  const previewEditor = react$1.useEditor({
+  const { isLoading, data, error } = react$1.useHistoryVersionData(version.id);
+  const previewEditor = react$2.useEditor({
     editable: false,
     extensions: parentEditor.extensionManager.extensions.filter((e) => e.type !== "extension")
   });
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (data && previewEditor) {
       const doc = new yjs.Doc();
       yjs.applyUpdate(doc, data);
@@ -26,53 +27,70 @@ const HistoryVersionPreview = React.forwardRef(({ version, editor: parentEditor,
       previewEditor.commands.setContent(node.toJSON());
     }
   }, [data, previewEditor, parentEditor]);
-  const restore = React.useCallback(() => {
+  const restore = react.useCallback(() => {
     parentEditor.commands.setContent(previewEditor?.getJSON() ?? "");
     onVersionRestore?.(version);
   }, [onVersionRestore, parentEditor, previewEditor, version]);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ...props,
     className: classnames.classNames(
       "lb-root lb-history-version-preview lb-tiptap-version-preview",
       className
     ),
-    ref: forwardedRef
-  }, isLoading ? /* @__PURE__ */ React.createElement("div", {
-    className: "lb-loading lb-history-version-preview-loading"
-  }, /* @__PURE__ */ React.createElement(_private.SpinnerIcon, null)) : error ? /* @__PURE__ */ React.createElement("div", {
-    className: "lb-error lb-history-version-preview-error"
-  }, $.HISTORY_VERSION_PREVIEW_ERROR(error)) : /* @__PURE__ */ React.createElement("div", {
-    className: "lb-history-version-preview-content lb-tiptap-editor-container lb-tiptap-version-preview-editor-container"
-  }, /* @__PURE__ */ React.createElement(react$1.EditorContent, {
-    editor: previewEditor
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "lb-history-version-preview-footer"
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "lb-history-version-preview-authors"
-  }, $.HISTORY_VERSION_PREVIEW_AUTHORS_LIST(
-    /* @__PURE__ */ React.createElement(_private.List, {
-      values: version.authors.map((author) => /* @__PURE__ */ React.createElement(_private.User, {
-        key: author.id,
-        userId: author.id,
-        replaceSelf: true
-      })),
-      formatRemaining: $.LIST_REMAINING_USERS,
-      truncate: AUTHORS_TRUNCATE,
-      locale: $.locale
-    })
-  )), /* @__PURE__ */ React.createElement("div", {
-    className: "lb-history-version-preview-actions"
-  }, /* @__PURE__ */ React.createElement(_private.Button, {
-    onClick: restore,
-    disabled: !data,
-    variant: "primary",
-    size: "large",
-    className: "lb-history-version-preview-action"
-  }, /* @__PURE__ */ React.createElement(_private.RestoreIcon, {
-    className: "lb-button-icon"
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "lb-button-label"
-  }, $.HISTORY_VERSION_PREVIEW_RESTORE)))));
+    ref: forwardedRef,
+    children: [
+      isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-loading lb-history-version-preview-loading",
+        children: /* @__PURE__ */ jsxRuntime.jsx(_private.SpinnerIcon, {})
+      }) : error ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-error lb-history-version-preview-error",
+        children: $.HISTORY_VERSION_PREVIEW_ERROR(error)
+      }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-history-version-preview-content lb-tiptap-editor-container lb-tiptap-version-preview-editor-container",
+        children: /* @__PURE__ */ jsxRuntime.jsx(react$2.EditorContent, {
+          editor: previewEditor
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: "lb-history-version-preview-footer",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", {
+            className: "lb-history-version-preview-authors",
+            children: $.HISTORY_VERSION_PREVIEW_AUTHORS_LIST(
+              /* @__PURE__ */ jsxRuntime.jsx(_private.List, {
+                values: version.authors.map((author) => /* @__PURE__ */ jsxRuntime.jsx(_private.User, {
+                  userId: author.id,
+                  replaceSelf: true
+                }, author.id)),
+                formatRemaining: $.LIST_REMAINING_USERS,
+                truncate: AUTHORS_TRUNCATE,
+                locale: $.locale
+              })
+            )
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: "lb-history-version-preview-actions",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(_private.Button, {
+              onClick: restore,
+              disabled: !data,
+              variant: "primary",
+              size: "large",
+              className: "lb-history-version-preview-action",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(_private.RestoreIcon, {
+                  className: "lb-button-icon"
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", {
+                  className: "lb-button-label",
+                  children: $.HISTORY_VERSION_PREVIEW_RESTORE
+                })
+              ]
+            })
+          })
+        ]
+      })
+    ]
+  });
 });
 
 exports.HistoryVersionPreview = HistoryVersionPreview;

package/dist/version-history/HistoryVersionPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryVersionPreview.js","sources":["../../src/version-history/HistoryVersionPreview.tsx"],"sourcesContent":["import type { HistoryVersion } from \"@liveblocks/core\";\nimport { useHistoryVersionData } from \"@liveblocks/react\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport {\n  Button,\n  List,\n  RestoreIcon,\n  SpinnerIcon,\n  User,\n} from \"@liveblocks/react-ui/_private\";\nimport type { Content, Editor } from \"@tiptap/react\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { yXmlFragmentToProseMirrorRootNode } from \"y-prosemirror\";\nimport { applyUpdate, Doc } from \"yjs\";\n\nimport { classNames } from \"../classnames\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionPreviewProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  version: HistoryVersion;\n  editor: Editor;\n  onVersionRestore?: (version: HistoryVersion) => void;\n}\n\n/**\n * Displays a specific version of the current TipTap document.\n *\n * @example\n * <HistoryVersionPreview version={version} />\n */\nexport const HistoryVersionPreview = forwardRef<\n  HTMLDivElement,\n  HistoryVersionPreviewProps\n>(({ version, editor: parentEditor, onVersionRestore, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n  const { isLoading, data, error } = useHistoryVersionData(version.id);\n\n  const previewEditor = useEditor({\n    // ignore extensions, only get marks/nodes\n    editable: false,\n    extensions: parentEditor.extensionManager.extensions.filter((e) => e.type !== \"extension\"),\n  });\n  useEffect(() => {\n    if (data && previewEditor) {\n      const doc = new Doc();\n      applyUpdate(doc, data);\n      const root = doc.getXmlFragment(\"default\") // TODO: lookup field\n      const node = yXmlFragmentToProseMirrorRootNode(root, parentEditor.schema);\n      previewEditor.commands.setContent(node.toJSON() as Content)\n    }\n  }, [data, previewEditor, parentEditor]);\n  const restore = useCallback(() => {\n    parentEditor.commands.setContent(previewEditor?.getJSON() ?? \"\");\n    onVersionRestore?.(version);\n  }, [onVersionRestore, parentEditor, previewEditor, version]);\n\n  return (\n    <div\n      {...props}\n      className={classNames(\n        \"lb-root lb-history-version-preview lb-tiptap-version-preview\",\n        className\n      )}\n      ref={forwardedRef}\n    >\n      {isLoading ? (\n        <div className=\"lb-loading lb-history-version-preview-loading\">\n          <SpinnerIcon />\n        </div>\n      ) : error ? (\n        <div className=\"lb-error lb-history-version-preview-error\">\n          {$.HISTORY_VERSION_PREVIEW_ERROR(error)}\n        </div>\n      ) : (\n        <div className=\"lb-history-version-preview-content lb-tiptap-editor-container lb-tiptap-version-preview-editor-container\">\n\n          <EditorContent editor={previewEditor} />\n        </div>\n      )}\n      <div className=\"lb-history-version-preview-footer\">\n        <span className=\"lb-history-version-preview-authors\">\n          {$.HISTORY_VERSION_PREVIEW_AUTHORS_LIST(\n            <List\n              values={version.authors.map((author) => (\n                <User key={author.id} userId={author.id} replaceSelf />\n              ))}\n              formatRemaining={$.LIST_REMAINING_USERS}\n              truncate={AUTHORS_TRUNCATE}\n              locale={$.locale}\n            />\n          )}\n        </span>\n        <div className=\"lb-history-version-preview-actions\">\n          <Button\n            onClick={restore}\n            disabled={!data}\n            variant=\"primary\"\n            size=\"large\"\n            className=\"lb-history-version-preview-action\"\n          >\n            <RestoreIcon className=\"lb-button-icon\" />\n            <span className=\"lb-button-label\">\n              {$.HISTORY_VERSION_PREVIEW_RESTORE}\n            </span>\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":["forwardRef","useOverrides","useHistoryVersionData","useEditor","useEffect","Doc","applyUpdate","yXmlFragmentToProseMirrorRootNode","useCallback","classNames","SpinnerIcon","EditorContent","List","User","Button","RestoreIcon"],"mappings":"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"}
+{"version":3,"file":"HistoryVersionPreview.js","sources":["../../src/version-history/HistoryVersionPreview.tsx"],"sourcesContent":["import type { HistoryVersion } from \"@liveblocks/core\";\nimport { useHistoryVersionData } from \"@liveblocks/react\";\nimport { useOverrides } from \"@liveblocks/react-ui\";\nimport {\n  Button,\n  List,\n  RestoreIcon,\n  SpinnerIcon,\n  User,\n} from \"@liveblocks/react-ui/_private\";\nimport type { Content, Editor } from \"@tiptap/react\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef, useCallback, useEffect } from \"react\";\nimport { yXmlFragmentToProseMirrorRootNode } from \"y-prosemirror\";\nimport { applyUpdate, Doc } from \"yjs\";\n\nimport { classNames } from \"../classnames\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionPreviewProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  version: HistoryVersion;\n  editor: Editor;\n  onVersionRestore?: (version: HistoryVersion) => void;\n}\n\n/**\n * Displays a specific version of the current TipTap document.\n *\n * @example\n * <HistoryVersionPreview version={version} />\n */\nexport const HistoryVersionPreview = forwardRef<\n  HTMLDivElement,\n  HistoryVersionPreviewProps\n>(({ version, editor: parentEditor, onVersionRestore, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n  const { isLoading, data, error } = useHistoryVersionData(version.id);\n\n  const previewEditor = useEditor({\n    // ignore extensions, only get marks/nodes\n    editable: false,\n    extensions: parentEditor.extensionManager.extensions.filter((e) => e.type !== \"extension\"),\n  });\n  useEffect(() => {\n    if (data && previewEditor) {\n      const doc = new Doc();\n      applyUpdate(doc, data);\n      const root = doc.getXmlFragment(\"default\") // TODO: lookup field\n      const node = yXmlFragmentToProseMirrorRootNode(root, parentEditor.schema);\n      previewEditor.commands.setContent(node.toJSON() as Content)\n    }\n  }, [data, previewEditor, parentEditor]);\n  const restore = useCallback(() => {\n    parentEditor.commands.setContent(previewEditor?.getJSON() ?? \"\");\n    onVersionRestore?.(version);\n  }, [onVersionRestore, parentEditor, previewEditor, version]);\n\n  return (\n    <div\n      {...props}\n      className={classNames(\n        \"lb-root lb-history-version-preview lb-tiptap-version-preview\",\n        className\n      )}\n      ref={forwardedRef}\n    >\n      {isLoading ? (\n        <div className=\"lb-loading lb-history-version-preview-loading\">\n          <SpinnerIcon />\n        </div>\n      ) : error ? (\n        <div className=\"lb-error lb-history-version-preview-error\">\n          {$.HISTORY_VERSION_PREVIEW_ERROR(error)}\n        </div>\n      ) : (\n        <div className=\"lb-history-version-preview-content lb-tiptap-editor-container lb-tiptap-version-preview-editor-container\">\n\n          <EditorContent editor={previewEditor} />\n        </div>\n      )}\n      <div className=\"lb-history-version-preview-footer\">\n        <span className=\"lb-history-version-preview-authors\">\n          {$.HISTORY_VERSION_PREVIEW_AUTHORS_LIST(\n            <List\n              values={version.authors.map((author) => (\n                <User key={author.id} userId={author.id} replaceSelf />\n              ))}\n              formatRemaining={$.LIST_REMAINING_USERS}\n              truncate={AUTHORS_TRUNCATE}\n              locale={$.locale}\n            />\n          )}\n        </span>\n        <div className=\"lb-history-version-preview-actions\">\n          <Button\n            onClick={restore}\n            disabled={!data}\n            variant=\"primary\"\n            size=\"large\"\n            className=\"lb-history-version-preview-action\"\n          >\n            <RestoreIcon className=\"lb-button-icon\" />\n            <span className=\"lb-button-label\">\n              {$.HISTORY_VERSION_PREVIEW_RESTORE}\n            </span>\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":["forwardRef","useOverrides","useHistoryVersionData","useEditor","useEffect","Doc","applyUpdate","yXmlFragmentToProseMirrorRootNode","useCallback","jsxs","classNames","jsx","SpinnerIcon","EditorContent","List","User","Button","RestoreIcon"],"mappings":"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"}

package/dist/version-history/HistoryVersionPreview.mjs

@@ -1,8 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useHistoryVersionData } from '@liveblocks/react';
 import { useOverrides } from '@liveblocks/react-ui';
 import { SpinnerIcon, List, User, Button, RestoreIcon } from '@liveblocks/react-ui/_private';
 import { useEditor, EditorContent } from '@tiptap/react';
-import React, { forwardRef, useEffect, useCallback } from 'react';
+import { forwardRef, useEffect, useCallback } from 'react';
 import { yXmlFragmentToProseMirrorRootNode } from 'y-prosemirror';
 import { Doc, applyUpdate } from 'yjs';
 import { classNames } from '../classnames.mjs';
@@ -28,49 +29,66 @@ const HistoryVersionPreview = forwardRef(({ version, editor: parentEditor, onVer
     parentEditor.commands.setContent(previewEditor?.getJSON() ?? "");
     onVersionRestore?.(version);
   }, [onVersionRestore, parentEditor, previewEditor, version]);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxs("div", {
     ...props,
     className: classNames(
       "lb-root lb-history-version-preview lb-tiptap-version-preview",
       className
     ),
-    ref: forwardedRef
-  }, isLoading ? /* @__PURE__ */ React.createElement("div", {
-    className: "lb-loading lb-history-version-preview-loading"
-  }, /* @__PURE__ */ React.createElement(SpinnerIcon, null)) : error ? /* @__PURE__ */ React.createElement("div", {
-    className: "lb-error lb-history-version-preview-error"
-  }, $.HISTORY_VERSION_PREVIEW_ERROR(error)) : /* @__PURE__ */ React.createElement("div", {
-    className: "lb-history-version-preview-content lb-tiptap-editor-container lb-tiptap-version-preview-editor-container"
-  }, /* @__PURE__ */ React.createElement(EditorContent, {
-    editor: previewEditor
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "lb-history-version-preview-footer"
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "lb-history-version-preview-authors"
-  }, $.HISTORY_VERSION_PREVIEW_AUTHORS_LIST(
-    /* @__PURE__ */ React.createElement(List, {
-      values: version.authors.map((author) => /* @__PURE__ */ React.createElement(User, {
-        key: author.id,
-        userId: author.id,
-        replaceSelf: true
-      })),
-      formatRemaining: $.LIST_REMAINING_USERS,
-      truncate: AUTHORS_TRUNCATE,
-      locale: $.locale
-    })
-  )), /* @__PURE__ */ React.createElement("div", {
-    className: "lb-history-version-preview-actions"
-  }, /* @__PURE__ */ React.createElement(Button, {
-    onClick: restore,
-    disabled: !data,
-    variant: "primary",
-    size: "large",
-    className: "lb-history-version-preview-action"
-  }, /* @__PURE__ */ React.createElement(RestoreIcon, {
-    className: "lb-button-icon"
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "lb-button-label"
-  }, $.HISTORY_VERSION_PREVIEW_RESTORE)))));
+    ref: forwardedRef,
+    children: [
+      isLoading ? /* @__PURE__ */ jsx("div", {
+        className: "lb-loading lb-history-version-preview-loading",
+        children: /* @__PURE__ */ jsx(SpinnerIcon, {})
+      }) : error ? /* @__PURE__ */ jsx("div", {
+        className: "lb-error lb-history-version-preview-error",
+        children: $.HISTORY_VERSION_PREVIEW_ERROR(error)
+      }) : /* @__PURE__ */ jsx("div", {
+        className: "lb-history-version-preview-content lb-tiptap-editor-container lb-tiptap-version-preview-editor-container",
+        children: /* @__PURE__ */ jsx(EditorContent, {
+          editor: previewEditor
+        })
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "lb-history-version-preview-footer",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "lb-history-version-preview-authors",
+            children: $.HISTORY_VERSION_PREVIEW_AUTHORS_LIST(
+              /* @__PURE__ */ jsx(List, {
+                values: version.authors.map((author) => /* @__PURE__ */ jsx(User, {
+                  userId: author.id,
+                  replaceSelf: true
+                }, author.id)),
+                formatRemaining: $.LIST_REMAINING_USERS,
+                truncate: AUTHORS_TRUNCATE,
+                locale: $.locale
+              })
+            )
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: "lb-history-version-preview-actions",
+            children: /* @__PURE__ */ jsxs(Button, {
+              onClick: restore,
+              disabled: !data,
+              variant: "primary",
+              size: "large",
+              className: "lb-history-version-preview-action",
+              children: [
+                /* @__PURE__ */ jsx(RestoreIcon, {
+                  className: "lb-button-icon"
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  className: "lb-button-label",
+                  children: $.HISTORY_VERSION_PREVIEW_RESTORE
+                })
+              ]
+            })
+          })
+        ]
+      })
+    ]
+  });
 });
 
 export { HistoryVersionPreview };