@liveblocks/react-tiptap - npm Package Compare versions

Comparing version 2.16.0-toolbars5 to 2.17.0-channels1

dist/comments/CommentsExtension.js

@@ -152,3 +152,3 @@ 'use strict';
     return {
-      pendingCommentSelection: null
+      pendingComment: false
     };
@@ -168,12 +168,5 @@ },
         );
-        this.storage.pendingCommentSelection = new state.TextSelection(
-          this.editor.state.selection.$anchor,
-          this.editor.state.selection.$head
-        );
+        this.storage.pendingComment = true;
         return true;
       },
-      closePendingComment: () => () => {
-        this.storage.pendingCommentSelection = null;
-        return true;
-      },
       selectThread: (id) => () => {
@@ -189,8 +182,7 @@ this.editor.view.dispatch(
       addComment: (id) => ({ commands }) => {
-        if (!this.storage.pendingCommentSelection) {
+        if (!this.storage.pendingComment || this.editor.state.selection.empty) {
           return false;
         }
-        this.editor.state.selection = this.storage.pendingCommentSelection;
         commands.setMark(types.LIVEBLOCKS_COMMENT_MARK_TYPE, { threadId: id });
-        this.storage.pendingCommentSelection = null;
+        this.storage.pendingComment = false;
         return true;
@@ -201,6 +193,6 @@ }
   onSelectionUpdate({ transaction }) {
-    if (!this.storage.pendingCommentSelection || transaction.getMeta(yProsemirror.ySyncPluginKey)) {
+    if (!this.storage.pendingComment || transaction.getMeta(yProsemirror.ySyncPluginKey)) {
       return;
     }
-    this.storage.pendingCommentSelection = null;
+    this.storage.pendingComment = false;
   },
@@ -210,13 +202,12 @@ addProseMirrorPlugins() {
       new state.Plugin({
-        key: types.THREADS_ACTIVE_SELECTION_PLUGIN,
+        key: types.ACTIVE_SELECTION_PLUGIN,
         props: {
-          decorations: ({ doc }) => {
-            const active = this.storage.pendingCommentSelection !== null;
-            if (!active) {
+          decorations: ({ doc, selection }) => {
+            if (!this.storage.pendingComment) {
               return view.DecorationSet.create(doc, []);
             }
-            const { from, to } = this.storage.pendingCommentSelection;
+            const { from, to } = selection;
             const decorations = [
               view.Decoration.inline(from, to, {
-                class: "lb-root lb-selection lb-tiptap-active-selection"
+                class: "lb-root lb-tiptap-active-selection"
               })
@@ -223,0 +214,0 @@ ];

dist/comments/FloatingComposer.js

@@ -11,3 +11,2 @@ 'use strict';
 var reactDom$1 = require('react-dom');
-var utils = require('../utils.js');
 
@@ -18,10 +17,13 @@ const FLOATING_COMPOSER_COLLISION_PADDING = 10;
   const { editor, onComposerSubmit, onKeyDown } = props;
-  const pendingCommentSelection = react$2.useEditorState({
+  const { showComposer } = react$2.useEditorState({
     editor,
-    selector: (ctx) => {
-      return ctx.editor?.storage.liveblocksComments?.pendingCommentSelection;
-    },
-    equalityFn: utils.compareTextSelections
-  }) ?? void 0;
-  const isOpen = pendingCommentSelection !== void 0;
+    selector: (ctx) => ({
+      showComposer: !!ctx.editor?.storage.liveblocksComments?.pendingComment && !editor?.state.selection.empty
+    }),
+    equalityFn: (prev, next) => {
+      if (!next)
+        return false;
+      return prev.showComposer === next.showComposer;
+    }
+  }) ?? { showComposer: false };
   const {
@@ -36,3 +38,2 @@ refs: { setReference, setFloating },
     middleware: [
-      reactDom.inline({ padding: FLOATING_COMPOSER_COLLISION_PADDING }),
       reactDom.flip({ padding: FLOATING_COMPOSER_COLLISION_PADDING, crossAxis: false }),
@@ -53,16 +54,21 @@ reactDom.offset(10),
   });
-  _private.useLayoutEffect(() => {
-    if (!editor || !isOpen) {
+  const updateRef = react.useCallback(() => {
+    if (!editor || !showComposer) {
       return;
     }
-    if (!pendingCommentSelection) {
-      setReference(null);
-    } else {
-      const domRange = utils.getDomRangeFromTextSelection(
-        pendingCommentSelection,
-        editor
-      );
-      setReference(domRange);
+    const el = editor.view.dom.querySelector(".lb-tiptap-active-selection");
+    if (el) {
+      setReference(el);
     }
-  }, [pendingCommentSelection, editor, isOpen, setReference]);
+  }, [setReference, editor, showComposer]);
+  react.useEffect(() => {
+    if (!editor || !showComposer) {
+      return;
+    }
+    editor.on("transaction", updateRef);
+    return () => {
+      editor.off("transaction", updateRef);
+    };
+  }, [editor, updateRef, showComposer]);
+  _private.useLayoutEffect(updateRef, [updateRef]);
   const handleComposerSubmit = react.useCallback(
@@ -88,13 +94,10 @@ (comment, event) => {
     (event) => {
+      if (event.key === "Escape" && editor) {
+        editor.commands.focus();
+      }
       onKeyDown?.(event);
-      if (event.isDefaultPrevented() || !editor) {
-        return;
-      }
-      if (event.key === "Escape") {
-        editor.chain().closePendingComment().run();
-      }
     },
     [editor, onKeyDown]
   );
-  if (!isOpen || !editor) {
+  if (!showComposer || !editor) {
     return null;
@@ -101,0 +104,0 @@ }

dist/index.d.ts

@@ -6,16 +6,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, ComponentProps, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes } from 'react';
 import { BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
 import { Extension, Content } from '@tiptap/core';
 
-type FloatingPosition = "top" | "bottom";
-type CommentsCommands<ReturnType> = {
-    /**
-     * Add a comment
-     */
-    addComment: (id: string) => ReturnType;
-    selectThread: (id: string | null) => ReturnType;
-    addPendingComment: () => ReturnType;
-};
-
 type AnchoredThreadsComponents = {
@@ -40,5 +30,2 @@ Thread: ComponentType<ThreadProps>;
 
-type FloatingComposerProps<M extends BaseMetadata$1 = DM> = Omit<ComposerProps<M>, "threadId" | "commentId"> & {
-    editor: Editor | null;
-};
 declare const FloatingComposer: react.ForwardRefExoticComponent<Omit<ComposerProps<BaseMetadata$1>, "threadId" | "commentId"> & {
@@ -82,240 +69,2 @@ editor: Editor | null;
 
-interface ToolbarSlotProps {
-    editor: Editor;
-}
-type ToolbarSlot = ReactNode | ComponentType<ToolbarSlotProps>;
-interface ToolbarProps extends Omit<ComponentProps<"div">, "children"> {
-    /**
-     * The Tiptap editor.
-     */
-    editor: Editor | null;
-    /**
-     * The content of the toolbar, overriding the default content.
-     * Use the `before` and `after` props if you want to keep and extend the default content.
-     */
-    children?: ToolbarSlot;
-    /**
-     * The content to display at the start of the toolbar.
-     */
-    before?: ToolbarSlot;
-    /**
-     * The content to display at the end of the toolbar.
-     */
-    after?: ToolbarSlot;
-}
-interface ToolbarButtonProps extends ComponentProps<"button"> {
-    /**
-     * The name of this button displayed in its tooltip.
-     */
-    name: string;
-    /**
-     * An optional icon displayed in this button.
-     */
-    icon?: ReactNode;
-    /**
-     * An optional keyboard shortcut displayed in this button's tooltip.
-     *
-     * @example
-     * "Mod-Alt-B" → "⌘⌥B" in Apple environments, "⌃⌥B" otherwise
-     * "Ctrl-Shift-Escape" → "⌃⇧⎋"
-     * "Space" → "␣"
-     */
-    shortcut?: string;
-}
-interface ToolbarToggleProps extends ToolbarButtonProps {
-    /**
-     * Whether the button is toggled.
-     */
-    active: boolean;
-}
-interface ToolbarBlockSelectorItem {
-    /**
-     * The name of this block element, displayed as the label of this item.
-     */
-    name: string;
-    /**
-     * Optionally replace the name used as the label of this item by any content.
-     */
-    label?: ReactNode;
-    /**
-     * An optional icon displayed in this item.
-     */
-    icon?: ReactNode;
-    /**
-     * Whether this block element is currently active.
-     * Set to `"default"` to display this item when no other item is active.
-     */
-    isActive: ((editor: Editor) => boolean) | "default";
-    /**
-     * A callback invoked when this item is selected.
-     */
-    setActive: (editor: Editor) => void;
-}
-interface ToolbarBlockSelectorProps extends ComponentProps<"button"> {
-    /**
-     * The items displayed in this block selector.
-     * When provided as an array, the default items are overridden. To avoid this,
-     * a function can be provided instead and it will receive the default items.
-     *
-     * @example
-     * <Toolbar.BlockSelector
-     *   items={[
-     *     {
-     *       name: "Text",
-     *       isActive: "default",
-     *       setActive: () => { ... },
-     *     },
-     *     {
-     *       name: "Heading 1",
-     *       isActive: () => { ... },
-     *       setActive: () => { ... },
-     *     },
-     *   ]}
-     * />
-     *
-     * @example
-     * <Toolbar.BlockSelector
-     *   items={(defaultItems) => [
-     *     ...defaultItems,
-     *     {
-     *       name: "Custom block",
-     *       isActive: () => { ... },
-     *       setActive: () => { ... },
-     *     },
-     *   ]}
-     * />
-     */
-    items?: ToolbarBlockSelectorItem[] | ((defaultItems: ToolbarBlockSelectorItem[]) => ToolbarBlockSelectorItem[]);
-}
-type ToolbarSeparatorProps = ComponentProps<"div">;
-declare function ToolbarSectionHistory(): react_jsx_runtime.JSX.Element;
-declare function ToolbarSectionInline(): react_jsx_runtime.JSX.Element;
-declare function ToolbarSectionCollaboration(): react_jsx_runtime.JSX.Element;
-/**
- * A static toolbar containing actions and values related to the editor.
- *
- * @example
- * <Toolbar editor={editor} />
- *
- * @example
- * <Toolbar editor={editor}>
- *   <Toolbar.BlockSelector />
- *   <Toolbar.Separator />
- *   <Toolbar.SectionInline />
- *   <Toolbar.Separator />
- *   <Toolbar.Button name="Custom action" onClick={() => { ... }} icon={<Icon.QuestionMark />} />
- * </Toolbar>
- */
-declare const Toolbar: react.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
-    /**
-     * A button for triggering actions.
-     *
-     * @example
-     * <Toolbar.Button name="Comment" shortcut="Mod-Shift-E" onClick={() => { ... }}>Comment</Toolbar.Button>
-     *
-     * @example
-     * <Toolbar.Button name="Mention someone" icon={<Icon.Mention />} onClick={() => { ... }} />
-     */
-    Button: react.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-    /**
-     * A toggle button for values that can be active or inactive.
-     *
-     * @example
-     * <Toolbar.Toggle name="Bold" active={isBold}>Bold</Toolbar.Toggle>
-     *
-     * @example
-     * <Toolbar.Toggle name="Italic" icon={<Icon.Italic />} shortcut="Mod-I" active={isItalic} onClick={() => { ... }} />
-     */
-    Toggle: react.ForwardRefExoticComponent<Omit<ToolbarToggleProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-    /**
-     * A dropdown selector to switch between different block types.
-     *
-     * @example
-     * <Toolbar.BlockSelector />
-     */
-    BlockSelector: react.ForwardRefExoticComponent<Omit<ToolbarBlockSelectorProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-    /**
-     * A visual (and accessible) separator to separate sections in a toolbar.
-     */
-    Separator: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * A section containing history actions. (e.g. undo, redo)
-     */
-    SectionHistory: typeof ToolbarSectionHistory;
-    /**
-     * A section containing inline formatting actions. (e.g. bold, italic, underline, ...)
-     */
-    SectionInline: typeof ToolbarSectionInline;
-    /**
-     * A section containing collaborative actions. (e.g. adding a comment)
-     */
-    SectionCollaboration: typeof ToolbarSectionCollaboration;
-};
-
-interface FloatingToolbarProps extends Omit<ComponentProps<"div">, "children"> {
-    /**
-     * The Tiptap editor.
-     */
-    editor: Editor | null;
-    /**
-     * The vertical position of the floating toolbar.
-     */
-    position?: FloatingPosition;
-    /**
-     * The vertical offset of the floating toolbar from the selection.
-     */
-    offset?: number;
-    /**
-     * The content of the floating toolbar, overriding the default content.
-     * Use the `before` and `after` props if you want to keep and extend the default content.
-     */
-    children?: ToolbarSlot;
-    /**
-     * The content to display at the start of the floating toolbar.
-     */
-    before?: ToolbarSlot;
-    /**
-     * The content to display at the end of the floating toolbar.
-     */
-    after?: ToolbarSlot;
-}
-/**
- * A floating toolbar attached to the selection and containing actions and values related to the editor.
- *
- * @example
- * <FloatingToolbar editor={editor} />
- *
- * @example
- * <FloatingToolbar editor={editor}>
- *   <Toolbar.BlockSelector />
- *   <Toolbar.Separator />
- *   <Toolbar.SectionInline />
- *   <Toolbar.Separator />
- *   <Toolbar.Button name="Custom action" onClick={() => { ... }} icon={<Icon.QuestionMark />} />
- * </FloatingToolbar>
- */
-declare const FloatingToolbar: react.ForwardRefExoticComponent<Omit<FloatingToolbarProps, "ref"> & react.RefAttributes<HTMLDivElement>> & {
-    /**
-     * A component that can be wrapped around elements which are rendered outside of the floating
-     * toolbar (e.g. portals) to prevent the toolbar from closing when clicking/focusing within them.
-     *
-     * @example
-     * <FloatingToolbar editor={editor}>
-     *   <Popover.Root>
-     *     <Popover.Trigger asChild>
-     *       <Toolbar.Button>Open popover</Toolbar.Button>
-     *     </Popover.Trigger>
-     *     <Popover.Portal>
-     *       <FloatingToolbar.External>
-     *         <Popover.Content>
-     *           This popover is rendered outside of the floating toolbar, but the toolbar will not close when clicking/focusing within it.
-     *         </Popover.Content>
-     *       </FloatingToolbar.External>
-     *     </Popover.Portal>
-     *   </Popover.Root>
-     * </FloatingToolbar>
-     */
-    External: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-};
-
 interface HistoryVersionPreviewProps extends ComponentPropsWithoutRef<"div"> {
@@ -336,6 +85,13 @@ version: HistoryVersion;
     interface Commands<ReturnType> {
-        comments: CommentsCommands<ReturnType>;
+        comments: {
+            /**
+             * Add a comment
+             */
+            addComment: (id: string) => ReturnType;
+            selectThread: (id: string | null) => ReturnType;
+            addPendingComment: () => ReturnType;
+        };
     }
 }
 
-export { AnchoredThreads, AnchoredThreadsProps, FloatingComposer, FloatingComposerProps, FloatingThreads, FloatingThreadsProps, FloatingToolbar, FloatingToolbarProps, HistoryVersionPreview, HistoryVersionPreviewProps, Toolbar, ToolbarBlockSelectorItem, ToolbarBlockSelectorProps, ToolbarButtonProps, ToolbarProps, ToolbarSeparatorProps, ToolbarToggleProps, useIsEditorReady, useLiveblocksExtension };
+export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useIsEditorReady, useLiveblocksExtension };

dist/index.js

@@ -9,4 +9,2 @@ 'use strict';
 var LiveblocksExtension = require('./LiveblocksExtension.js');
-var FloatingToolbar = require('./toolbar/FloatingToolbar.js');
-var Toolbar = require('./toolbar/Toolbar.js');
 var HistoryVersionPreview = require('./version-history/HistoryVersionPreview.js');
@@ -21,5 +19,3 @@
 exports.useLiveblocksExtension = LiveblocksExtension.useLiveblocksExtension;
-exports.FloatingToolbar = FloatingToolbar.FloatingToolbar;
-exports.Toolbar = Toolbar.Toolbar;
 exports.HistoryVersionPreview = HistoryVersionPreview.HistoryVersionPreview;
 //# sourceMappingURL=index.js.map

dist/types.js

@@ -13,4 +13,4 @@ 'use strict';
 const LIVEBLOCKS_MENTION_TYPE = "liveblocksMention";
-const THREADS_ACTIVE_SELECTION_PLUGIN = new state.PluginKey(
-  "lb-threads-active-selection-plugin"
+const ACTIVE_SELECTION_PLUGIN = new state.PluginKey(
+  "lb-active-selection-plugin"
 );
@@ -20,5 +20,2 @@ const THREADS_PLUGIN_KEY = new state.PluginKey(
 );
-const AI_TOOLBAR_SELECTION_PLUGIN = new state.PluginKey(
-  "lb-ai-toolbar-selection-plugin"
-);
 const LIVEBLOCKS_COMMENT_MARK_TYPE = "liveblocksCommentMark";
@@ -30,3 +27,3 @@ var ThreadPluginActions = /* @__PURE__ */ ((ThreadPluginActions2) => {
 
-exports.AI_TOOLBAR_SELECTION_PLUGIN = AI_TOOLBAR_SELECTION_PLUGIN;
+exports.ACTIVE_SELECTION_PLUGIN = ACTIVE_SELECTION_PLUGIN;
 exports.LIVEBLOCKS_COMMENT_MARK_TYPE = LIVEBLOCKS_COMMENT_MARK_TYPE;
@@ -37,5 +34,4 @@ exports.LIVEBLOCKS_MENTION_KEY = LIVEBLOCKS_MENTION_KEY;
 exports.LIVEBLOCKS_MENTION_TYPE = LIVEBLOCKS_MENTION_TYPE;
-exports.THREADS_ACTIVE_SELECTION_PLUGIN = THREADS_ACTIVE_SELECTION_PLUGIN;
 exports.THREADS_PLUGIN_KEY = THREADS_PLUGIN_KEY;
 exports.ThreadPluginActions = ThreadPluginActions;
 //# sourceMappingURL=types.js.map

dist/utils.js

@@ -43,20 +43,3 @@ 'use strict';
 };
-function getDomRangeFromTextSelection(selection, editor) {
-  const { from, to } = selection;
-  const fromPos = editor.view.domAtPos(from);
-  const endPos = editor.view.domAtPos(to);
-  const domRange = document.createRange();
-  domRange.setStart(fromPos.node, fromPos.offset);
-  domRange.setEnd(endPos.node, endPos.offset);
-  return domRange;
-}
-function compareTextSelections(a, b) {
-  if (!a || !b) {
-    return false;
-  }
-  return a.eq(b);
-}
 
-exports.compareTextSelections = compareTextSelections;
-exports.getDomRangeFromTextSelection = getDomRangeFromTextSelection;
 exports.getMentionsFromNode = getMentionsFromNode;
@@ -63,0 +46,0 @@ exports.getRectFromCoords = getRectFromCoords;

dist/version-history/HistoryVersionPreview.js

@@ -14,85 +14,85 @@ 'use strict';
 const AUTHORS_TRUNCATE = 3;
-const HistoryVersionPreview = react.forwardRef(
-  ({ version, editor: parentEditor, onVersionRestore, className, ...props }, forwardedRef) => {
-    const $ = reactUi.useOverrides();
-    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(() => {
-      if (data && previewEditor) {
-        const doc = new yjs.Doc();
-        yjs.applyUpdate(doc, data);
-        const root = doc.getXmlFragment("default");
-        const node = yProsemirror.yXmlFragmentToProseMirrorRootNode(
-          root,
-          parentEditor.schema
-        );
-        previewEditor.commands.setContent(node.toJSON());
-      }
-    }, [data, previewEditor, parentEditor]);
-    const restore = react.useCallback(() => {
-      parentEditor.commands.setContent(previewEditor?.getJSON() ?? "");
-      onVersionRestore?.(version);
-    }, [onVersionRestore, parentEditor, previewEditor, version]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      ...props,
-      className: classnames.classNames(
-        "lb-root lb-history-version-preview lb-tiptap-version-preview",
-        className
-      ),
-      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
+const HistoryVersionPreview = react.forwardRef(({ version, editor: parentEditor, onVersionRestore, className, ...props }, forwardedRef) => {
+  const $ = reactUi.useOverrides();
+  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(() => {
+    if (data && previewEditor) {
+      const doc = new yjs.Doc();
+      yjs.applyUpdate(doc, data);
+      const root = doc.getXmlFragment("default");
+      const node = yProsemirror.yXmlFragmentToProseMirrorRootNode(root, parentEditor.schema);
+      previewEditor.commands.setContent(node.toJSON());
+    }
+  }, [data, previewEditor, parentEditor]);
+  const restore = react.useCallback(() => {
+    parentEditor.commands.setContent(previewEditor?.getJSON() ?? "");
+    onVersionRestore?.(version);
+  }, [onVersionRestore, parentEditor, previewEditor, version]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    ...props,
+    className: classnames.classNames(
+      "lb-root lb-history-version-preview lb-tiptap-version-preview",
+      className
+    ),
+    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
                 })
-              )
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", {
-              className: "lb-history-version-preview-actions",
-              children: /* @__PURE__ */ jsxRuntime.jsx(_private.Button, {
-                onClick: restore,
-                disabled: !data,
-                variant: "primary",
-                size: "large",
-                className: "lb-history-version-preview-action",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(_private.RestoreIcon, {}),
-                children: $.HISTORY_VERSION_PREVIEW_RESTORE
-              })
+              ]
             })
-          ]
-        })
-      ]
-    });
-  }
-);
+          })
+        ]
+      })
+    ]
+  });
+});
 
 exports.HistoryVersionPreview = HistoryVersionPreview;
 //# sourceMappingURL=HistoryVersionPreview.js.map

dist/version.js

 'use strict';
 
 const PKG_NAME = "@liveblocks/react-tiptap";
-const PKG_VERSION = typeof "2.16.0-toolbars5" === "string" && "2.16.0-toolbars5";
+const PKG_VERSION = typeof "2.17.0-channels1" === "string" && "2.17.0-channels1";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
@@ -6,0 +6,0 @@

package.json

 {
   "name": "@liveblocks/react-tiptap",
-  "version": "2.16.0-toolbars5",
+  "version": "2.17.0-channels1",
   "description": "A tiptap react plugin to enable collaboration, comments, live cursors, and more.",
@@ -45,9 +45,7 @@ "license": "Apache-2.0",
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.16.0-toolbars5",
-    "@liveblocks/core": "2.16.0-toolbars5",
-    "@liveblocks/react": "2.16.0-toolbars5",
-    "@liveblocks/react-ui": "2.16.0-toolbars5",
-    "@liveblocks/yjs": "2.16.0-toolbars5",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-toggle": "^1.1.0",
+    "@liveblocks/client": "2.17.0-channels1",
+    "@liveblocks/core": "2.17.0-channels1",
+    "@liveblocks/react": "2.17.0-channels1",
+    "@liveblocks/react-ui": "2.17.0-channels1",
+    "@liveblocks/yjs": "2.17.0-channels1",
     "@tiptap/core": "^2.7.2",
@@ -54,0 +52,0 @@ "@tiptap/react": "^2.7.2",

No alert changes

Improved metrics

Dependency count

18

decreased by-10%

Worsened metrics

Total package byte prevSize

364644

decreased by-36.8%

Number of package files

69

decreased by-18.82%

Lines of code

3494

decreased by-34.69%

Dependency changes

• + Added@liveblocks/client@2.17.0-channels1(transitive)

• + Added@liveblocks/core@2.17.0-channels1(transitive)

• + Added@liveblocks/react@2.17.0-channels1(transitive)

• + Added@liveblocks/react-ui@2.17.0-channels1(transitive)

• + Added@liveblocks/yjs@2.17.0-channels1(transitive)

• - Removed@radix-ui/react-select@^2.1.2

• - Removed@radix-ui/react-toggle@^1.1.0

• - Removed@liveblocks/client@2.16.0-toolbars5(transitive)

• - Removed@liveblocks/core@2.16.0-toolbars5(transitive)

• - Removed@liveblocks/react@2.16.0-toolbars5(transitive)

• - Removed@liveblocks/react-ui@2.16.0-toolbars5(transitive)

• - Removed@liveblocks/yjs@2.16.0-toolbars5(transitive)

• - Removed@radix-ui/number@1.1.0(transitive)

• - Removed@radix-ui/react-select@2.1.5(transitive)

• - Removed@radix-ui/react-use-previous@1.1.0(transitive)

• Updated@liveblocks/client@2.17.0-channels1

• Updated@liveblocks/core@2.17.0-channels1

• Updated@liveblocks/react@2.17.0-channels1

• Updated@liveblocks/react-ui@2.17.0-channels1

• Updated@liveblocks/yjs@2.17.0-channels1