@liveblocks/react-tiptap 2.16.0-toolbars2 → 2.16.0-toolbars4

package/dist/index.d.mts

@@ -36,6 +36,9 @@ interface AnchoredThreadsProps<M extends BaseMetadata = DM> extends Omit<Compone
 }
 declare function AnchoredThreads({ threads, components, className, style, editor, ...props }: AnchoredThreadsProps): react_jsx_runtime.JSX.Element | null;
 
+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"> & {
     editor: Editor | null;
 } & react.RefAttributes<HTMLFormElement>>;
@@ -79,49 +82,236 @@ interface ToolbarSlotProps {
 }
 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"> {
-    icon?: ReactNode;
+    /**
+     * 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;
-    isActive: (editor: Editor) => boolean;
+    /**
+     * 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"> {
-    items?: ToolbarBlockSelectorItem[];
+    /**
+     * 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;
-    BlockSelector: react.ForwardRefExoticComponent<Omit<ToolbarBlockSelectorProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 };
 
 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>>;
 };
 
@@ -144,4 +334,4 @@ declare module "@tiptap/core" {
     }
 }
 
-export { AnchoredThreads, FloatingComposer, FloatingThreads, FloatingToolbar, HistoryVersionPreview, Toolbar, useIsEditorReady, useLiveblocksExtension };
+export { AnchoredThreads, AnchoredThreadsProps, FloatingComposer, FloatingComposerProps, FloatingThreads, FloatingThreadsProps, FloatingToolbar, FloatingToolbarProps, HistoryVersionPreview, HistoryVersionPreviewProps, Toolbar, ToolbarBlockSelectorItem, ToolbarBlockSelectorProps, ToolbarButtonProps, ToolbarProps, ToolbarSeparatorProps, ToolbarToggleProps, useIsEditorReady, useLiveblocksExtension };

package/dist/index.d.ts

@@ -36,6 +36,9 @@ interface AnchoredThreadsProps<M extends BaseMetadata = DM> extends Omit<Compone
 }
 declare function AnchoredThreads({ threads, components, className, style, editor, ...props }: AnchoredThreadsProps): react_jsx_runtime.JSX.Element | null;
 
+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"> & {
     editor: Editor | null;
 } & react.RefAttributes<HTMLFormElement>>;
@@ -79,49 +82,236 @@ interface ToolbarSlotProps {
 }
 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"> {
-    icon?: ReactNode;
+    /**
+     * 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;
-    isActive: (editor: Editor) => boolean;
+    /**
+     * 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"> {
-    items?: ToolbarBlockSelectorItem[];
+    /**
+     * 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;
-    BlockSelector: react.ForwardRefExoticComponent<Omit<ToolbarBlockSelectorProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 };
 
 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>>;
 };
 
@@ -144,4 +334,4 @@ declare module "@tiptap/core" {
     }
 }
 
-export { AnchoredThreads, FloatingComposer, FloatingThreads, FloatingToolbar, HistoryVersionPreview, Toolbar, useIsEditorReady, useLiveblocksExtension };
+export { AnchoredThreads, AnchoredThreadsProps, FloatingComposer, FloatingComposerProps, FloatingThreads, FloatingThreadsProps, FloatingToolbar, FloatingToolbarProps, HistoryVersionPreview, HistoryVersionPreviewProps, Toolbar, ToolbarBlockSelectorItem, ToolbarBlockSelectorProps, ToolbarButtonProps, ToolbarProps, ToolbarSeparatorProps, ToolbarToggleProps, useIsEditorReady, useLiveblocksExtension };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport type { CommentsCommands } from \"./types\";\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { useIsEditorReady } from \"./LiveblocksExtension\";\nexport { FloatingToolbar } from \"./toolbar/FloatingToolbar\";\nexport { Toolbar } from \"./toolbar/Toolbar\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: CommentsCommands<ReturnType>;\n  }\n}\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;;AAKAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport type { CommentsCommands } from \"./types\";\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { AnchoredThreadsProps } from \"./comments/AnchoredThreads\";\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport type { FloatingComposerProps } from \"./comments/FloatingComposer\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport type { FloatingThreadsProps } from \"./comments/FloatingThreads\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { useIsEditorReady } from \"./LiveblocksExtension\";\nexport type { FloatingToolbarProps } from \"./toolbar/FloatingToolbar\";\nexport { FloatingToolbar } from \"./toolbar/FloatingToolbar\";\nexport type {\n  ToolbarBlockSelectorItem,\n  ToolbarBlockSelectorProps,\n  ToolbarButtonProps,\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarToggleProps,\n} from \"./toolbar/Toolbar\";\nexport { Toolbar } from \"./toolbar/Toolbar\";\nexport type { HistoryVersionPreviewProps } from \"./version-history/HistoryVersionPreview\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: CommentsCommands<ReturnType>;\n  }\n}\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;;;AAKAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;;;"}

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport type { CommentsCommands } from \"./types\";\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { useIsEditorReady } from \"./LiveblocksExtension\";\nexport { FloatingToolbar } from \"./toolbar/FloatingToolbar\";\nexport { Toolbar } from \"./toolbar/Toolbar\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: CommentsCommands<ReturnType>;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AAKA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport type { CommentsCommands } from \"./types\";\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { AnchoredThreadsProps } from \"./comments/AnchoredThreads\";\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport type { FloatingComposerProps } from \"./comments/FloatingComposer\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport type { FloatingThreadsProps } from \"./comments/FloatingThreads\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { useIsEditorReady } from \"./LiveblocksExtension\";\nexport type { FloatingToolbarProps } from \"./toolbar/FloatingToolbar\";\nexport { FloatingToolbar } from \"./toolbar/FloatingToolbar\";\nexport type {\n  ToolbarBlockSelectorItem,\n  ToolbarBlockSelectorProps,\n  ToolbarButtonProps,\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarToggleProps,\n} from \"./toolbar/Toolbar\";\nexport { Toolbar } from \"./toolbar/Toolbar\";\nexport type { HistoryVersionPreviewProps } from \"./version-history/HistoryVersionPreview\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: CommentsCommands<ReturnType>;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;AAKA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/toolbar/FloatingToolbar.js

@@ -49,11 +49,6 @@ const FloatingToolbar = Object.assign(
       const [isPointerDown, setPointerDown] = react.useState(false);
       const [isFocused, setFocused] = react.useState(false);
       const [isManuallyClosed, setManuallyClosed] = react.useState(false);
-      const isEditable = react$1.useEditorState({
-        editor,
-        equalityFn: Object.is,
-        selector: (ctx) => ctx.editor?.isEditable ?? false
-      }) ?? false;
       const hasSelectionRange = react$1.useEditorState({
         editor,
         equalityFn: Object.is,
@@ -204,7 +199,7 @@ const FloatingToolbar = Object.assign(
         [onPointerDown]
       );
       react.useEffect(() => {
-        if (!editor || !isEditable) {
+        if (!editor) {
           return;
         }
         const handlePointerDown2 = () => {
@@ -213,15 +208,15 @@ const FloatingToolbar = Object.assign(
         const handlePointerUp = () => {
           setPointerDown(false);
         };
-        document.addEventListener("pointerdown", handlePointerDown2);
-        document.addEventListener("pointercancel", handlePointerUp);
-        document.addEventListener("pointerup", handlePointerUp);
+        editor.view.dom.addEventListener("pointerdown", handlePointerDown2);
+        editor.view.dom.addEventListener("pointercancel", handlePointerUp);
+        editor.view.dom.addEventListener("pointerup", handlePointerUp);
         return () => {
-          document.removeEventListener("pointerdown", handlePointerDown2);
-          document.removeEventListener("pointercancel", handlePointerUp);
-          document.removeEventListener("pointerup", handlePointerUp);
+          editor.view.dom.removeEventListener("pointerdown", handlePointerDown2);
+          editor.view.dom.removeEventListener("pointercancel", handlePointerUp);
+          editor.view.dom.removeEventListener("pointerup", handlePointerUp);
         };
-      }, [editor, isEditable]);
+      }, [editor]);
       _private$1.useLayoutEffect(() => {
         if (!editor || !delayedIsOpen) {
           return;