@liveblocks/react-tiptap 2.17.0-channels1 → 2.17.0-usrnotsettings1

package/dist/index.d.ts

@@ -3,10 +3,20 @@ import { BaseMetadata, DM, ThreadData, HistoryVersion } from '@liveblocks/core';
 import { ThreadProps, ComposerProps } from '@liveblocks/react-ui';
 import { Editor } from '@tiptap/react';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef, ComponentType, HTMLAttributes, ComponentProps, ReactNode } from 'react';
 import { BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
 import { Extension, Content } from '@tiptap/core';
 
+type FloatingPosition = "top" | "bottom";
+type CommentsCommands<ReturnType> = {
+    /**
+     * Add a comment
+     */
+    addComment: (id: string) => ReturnType;
+    selectThread: (id: string | null) => ReturnType;
+    addPendingComment: () => ReturnType;
+};
+
 type AnchoredThreadsComponents = {
     Thread: ComponentType<ThreadProps>;
 };
@@ -26,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>>;
@@ -64,6 +77,244 @@ type LiveblocksExtensionOptions = {
 declare function useIsEditorReady(): boolean;
 declare const useLiveblocksExtension: (opts?: LiveblocksExtensionOptions) => Extension;
 
+interface ToolbarSlotProps {
+    editor: Editor;
+}
+type ToolbarSlot = ReactNode | ComponentType<ToolbarSlotProps>;
+interface ToolbarProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * 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={() => { ... }} />
+     *
+     * @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} />
+     *
+     * @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"> {
     version: HistoryVersion;
     editor: Editor;
@@ -79,15 +330,8 @@ declare const HistoryVersionPreview: react.ForwardRefExoticComponent<HistoryVers
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        comments: {
-            /**
-             * Add a comment
-             */
-            addComment: (id: string) => ReturnType;
-            selectThread: (id: string | null) => ReturnType;
-            addPendingComment: () => ReturnType;
-        };
+        comments: CommentsCommands<ReturnType>;
     }
 }
 
-export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useIsEditorReady, useLiveblocksExtension };
+export { AnchoredThreads, AnchoredThreadsProps, FloatingComposer, FloatingComposerProps, FloatingThreads, FloatingThreadsProps, FloatingToolbar, FloatingToolbarProps, HistoryVersionPreview, HistoryVersionPreviewProps, Toolbar, ToolbarBlockSelectorItem, ToolbarBlockSelectorProps, ToolbarButtonProps, ToolbarProps, ToolbarSeparatorProps, ToolbarToggleProps, useIsEditorReady, useLiveblocksExtension };

package/dist/index.js

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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { useIsEditorReady } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: {\n      /**\n       * Add a comment\n       */\n      addComment: (id: string) => ReturnType;\n      selectThread: (id: string | null) => ReturnType;\n      addPendingComment: () => ReturnType;\n    };\n  }\n}\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport type { CommentsCommands } from \"./types\";\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport 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

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

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { useIsEditorReady } from \"./LiveblocksExtension\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n  interface Commands<ReturnType> {\n    comments: {\n      /**\n       * Add a comment\n       */\n      addComment: (id: string) => ReturnType;\n      selectThread: (id: string | null) => ReturnType;\n      addPendingComment: () => ReturnType;\n    };\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport type { CommentsCommands } from \"./types\";\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport 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

@@ -0,0 +1,321 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('@floating-ui/react-dom');
+var _private$1 = require('@liveblocks/react/_private');
+var _private = require('@liveblocks/react-ui/_private');
+var react$1 = require('@tiptap/react');
+var react = require('react');
+var reactDom$1 = require('react-dom');
+var classnames = require('../classnames.js');
+var context = require('../context.js');
+var shared = require('./shared.js');
+var Toolbar = require('./Toolbar.js');
+
+const FLOATING_TOOLBAR_COLLISION_PADDING = 10;
+const FLOATING_TOOLBAR_OPEN_DELAY = 50;
+function DefaultFloatingToolbarContent({ editor }) {
+  const supportsThread = "addPendingComment" in editor.commands;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Toolbar.Toolbar.BlockSelector, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Toolbar.Toolbar.SectionInline, {}),
+      supportsThread ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Toolbar.Toolbar.Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(Toolbar.Toolbar.SectionCollaboration, {})
+        ]
+      }) : null
+    ]
+  });
+}
+const FloatingToolbar = Object.assign(
+  react.forwardRef(
+    ({
+      children = DefaultFloatingToolbarContent,
+      before,
+      after,
+      position = "top",
+      offset: sideOffset = 6,
+      editor,
+      onPointerDown,
+      onFocus,
+      onBlur,
+      className,
+      ...props
+    }, forwardedRef) => {
+      const toolbarRef = react.useRef(null);
+      const externalIds = _private.useInitial(() => /* @__PURE__ */ new Set());
+      const [isPointerDown, setPointerDown] = react.useState(false);
+      const [isFocused, setFocused] = react.useState(false);
+      const [isManuallyClosed, setManuallyClosed] = react.useState(false);
+      const hasSelectionRange = react$1.useEditorState({
+        editor,
+        equalityFn: Object.is,
+        selector: (ctx) => {
+          const editor2 = ctx.editor;
+          if (!editor2) {
+            return false;
+          }
+          const { doc, selection } = editor2.state;
+          const { empty, ranges } = selection;
+          const from = Math.min(...ranges.map((range) => range.$from.pos));
+          const to = Math.max(...ranges.map((range) => range.$to.pos));
+          if (empty) {
+            return false;
+          }
+          return react$1.isTextSelection(selection) && doc.textBetween(from, to).length > 0;
+        }
+      }) ?? false;
+      const isOpen = isFocused && !isPointerDown && hasSelectionRange && !isManuallyClosed;
+      const [delayedIsOpen, setDelayedIsOpen] = react.useState(isOpen);
+      const delayedIsOpenTimeoutRef = react.useRef();
+      react.useEffect(() => {
+        if (!editor) {
+          return;
+        }
+        setManuallyClosed(false);
+        const handleSelectionChange = () => {
+          setManuallyClosed(false);
+        };
+        editor.on("selectionUpdate", handleSelectionChange);
+        return () => {
+          editor.off("selectionUpdate", handleSelectionChange);
+        };
+      }, [isFocused, hasSelectionRange, editor]);
+      react.useEffect(() => {
+        if (!editor) {
+          return;
+        }
+        const handleFocus2 = () => {
+          setFocused(true);
+        };
+        const handleBlur2 = (event) => {
+          if (event.relatedTarget && toolbarRef.current?.contains(event.relatedTarget)) {
+            return;
+          }
+          if (event.relatedTarget === editor.view.dom) {
+            return;
+          }
+          for (const externalId of externalIds) {
+            if (document.getElementById(externalId)?.contains(event.relatedTarget)) {
+              return;
+            }
+          }
+          setFocused(false);
+        };
+        editor.view.dom.addEventListener("focus", handleFocus2);
+        editor.view.dom.addEventListener("blur", handleBlur2);
+        return () => {
+          editor.view.dom.removeEventListener("focus", handleFocus2);
+          editor.view.dom.removeEventListener("blur", handleBlur2);
+        };
+      }, [editor, externalIds]);
+      const handleFocus = react.useCallback(
+        (event) => {
+          onFocus?.(event);
+          if (!event.isDefaultPrevented()) {
+            setFocused(true);
+          }
+        },
+        [onFocus]
+      );
+      const handleBlur = react.useCallback(
+        (event) => {
+          onBlur?.(event);
+          if (!event.isDefaultPrevented()) {
+            if (event.relatedTarget && toolbarRef.current?.contains(event.relatedTarget)) {
+              return;
+            }
+            if (event.relatedTarget === editor?.view.dom) {
+              return;
+            }
+            for (const externalId of externalIds) {
+              if (document.getElementById(externalId)?.contains(event.relatedTarget)) {
+                return;
+              }
+            }
+            setFocused(false);
+          }
+        },
+        [onBlur, editor, externalIds]
+      );
+      react.useEffect(() => {
+        if (isOpen) {
+          delayedIsOpenTimeoutRef.current = window.setTimeout(() => {
+            setDelayedIsOpen(true);
+          }, FLOATING_TOOLBAR_OPEN_DELAY);
+        } else {
+          setDelayedIsOpen(false);
+        }
+        return () => {
+          window.clearTimeout(delayedIsOpenTimeoutRef.current);
+        };
+      }, [isOpen]);
+      const floatingOptions = react.useMemo(() => {
+        const detectOverflowOptions = {
+          padding: FLOATING_TOOLBAR_COLLISION_PADDING
+        };
+        return {
+          strategy: "fixed",
+          placement: position,
+          middleware: [
+            reactDom.inline(detectOverflowOptions),
+            reactDom.flip({ ...detectOverflowOptions, crossAxis: false }),
+            reactDom.hide(detectOverflowOptions),
+            reactDom.shift({
+              ...detectOverflowOptions,
+              limiter: reactDom.limitShift()
+            }),
+            reactDom.offset(sideOffset),
+            reactDom.size(detectOverflowOptions)
+          ],
+          whileElementsMounted: (...args) => {
+            return reactDom.autoUpdate(...args, {
+              animationFrame: true
+            });
+          }
+        };
+      }, [position, sideOffset]);
+      const {
+        refs: { setReference, setFloating },
+        strategy,
+        x,
+        y,
+        isPositioned
+      } = reactDom.useFloating({
+        ...floatingOptions,
+        open: delayedIsOpen
+      });
+      const mergedRefs = _private.useRefs(forwardedRef, toolbarRef, setFloating);
+      const handlePointerDown = react.useCallback(
+        (event) => {
+          onPointerDown?.(event);
+          event.stopPropagation();
+          if (event.target === toolbarRef.current) {
+            event.preventDefault();
+          }
+        },
+        [onPointerDown]
+      );
+      react.useEffect(() => {
+        if (!editor) {
+          return;
+        }
+        const handlePointerDown2 = () => {
+          setPointerDown(true);
+        };
+        const handlePointerUp = () => {
+          setPointerDown(false);
+        };
+        editor.view.dom.addEventListener("pointerdown", handlePointerDown2);
+        document.addEventListener("pointercancel", handlePointerUp);
+        document.addEventListener("pointerup", handlePointerUp);
+        return () => {
+          editor.view.dom.removeEventListener("pointerdown", handlePointerDown2);
+          document.removeEventListener("pointercancel", handlePointerUp);
+          document.removeEventListener("pointerup", handlePointerUp);
+        };
+      }, [editor]);
+      _private$1.useLayoutEffect(() => {
+        if (!editor || !delayedIsOpen) {
+          return;
+        }
+        const updateSelectionReference = () => {
+          const domSelection = window.getSelection();
+          if (editor.state.selection.empty || !domSelection || !domSelection.rangeCount) {
+            setReference(null);
+          } else {
+            const domRange = domSelection.getRangeAt(0);
+            setReference(domRange);
+          }
+        };
+        editor.on("transaction", updateSelectionReference);
+        updateSelectionReference();
+        return () => {
+          editor.off("transaction", updateSelectionReference);
+        };
+      }, [editor, delayedIsOpen, setReference]);
+      react.useEffect(() => {
+        if (!editor || !delayedIsOpen) {
+          return;
+        }
+        const handleKeyDown = (event) => {
+          if (event.target !== editor.view.dom && event.defaultPrevented) {
+            return;
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            editor.commands.focus();
+            setManuallyClosed(true);
+          }
+        };
+        editor.view.dom.addEventListener("keydown", handleKeyDown);
+        return () => {
+          editor.view.dom.removeEventListener("keydown", handleKeyDown);
+        };
+      }, [editor, delayedIsOpen]);
+      const close = react.useCallback(() => {
+        setManuallyClosed(true);
+      }, [setManuallyClosed]);
+      const registerExternal = react.useCallback(
+        (id) => {
+          externalIds.add(id);
+          return () => {
+            externalIds.delete(id);
+          };
+        },
+        [externalIds]
+      );
+      if (!editor || !delayedIsOpen) {
+        return null;
+      }
+      const slotProps = { editor };
+      return reactDom$1.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsx(_private.TooltipProvider, {
+          children: /* @__PURE__ */ jsxRuntime.jsx(context.EditorProvider, {
+            editor,
+            children: /* @__PURE__ */ jsxRuntime.jsx(shared.FloatingToolbarContext.Provider, {
+              value: { close, registerExternal },
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                role: "toolbar",
+                "aria-label": "Floating toolbar",
+                "aria-orientation": "horizontal",
+                className: classnames.classNames(
+                  "lb-root lb-portal lb-elevation lb-tiptap-floating-toolbar lb-tiptap-toolbar",
+                  className
+                ),
+                ref: mergedRefs,
+                style: {
+                  position: strategy,
+                  top: 0,
+                  left: 0,
+                  transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
+                  minWidth: "max-content"
+                },
+                onPointerDown: handlePointerDown,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                ...props,
+                children: [
+                  Toolbar.applyToolbarSlot(before, slotProps),
+                  Toolbar.applyToolbarSlot(children, slotProps),
+                  Toolbar.applyToolbarSlot(after, slotProps)
+                ]
+              })
+            })
+          })
+        }),
+        document.body
+      );
+    }
+  ),
+  {
+    External: shared.FloatingToolbarExternal
+  }
+);
+
+exports.FLOATING_TOOLBAR_COLLISION_PADDING = FLOATING_TOOLBAR_COLLISION_PADDING;
+exports.FloatingToolbar = FloatingToolbar;
+//# sourceMappingURL=FloatingToolbar.js.map