@antscorp/antsomi-ui 1.3.7-beta.21 → 1.3.7-beta.23

package/es/components/molecules/EmojiPopover/styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const EmojiTabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
+export declare const EmojiTabs: import("styled-components").StyledComponent<import("react").FC<import("antd/es/tabs").TabsProps> & {
     TabPane: import("react").FC<import("antd").TabPaneProps>;
 }, any, {
     shadow?: boolean | undefined;
 }, never>;
-export declare const EmojiPopoverStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
+export declare const EmojiPopoverStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/popover").PopoverProps & import("react").RefAttributes<unknown>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 }, any, {}, never>;

package/es/components/molecules/EmojiPopover/styled.js

@@ -1,8 +1,8 @@
 // Libraries
-import { Popover } from 'antd';
 import styled from 'styled-components';
 // Components
 import { Tabs as TabsUI } from '@antscorp/antsomi-ui/es/components/molecules';
+import { Popover } from '../../atoms/Popover';
 export const EmojiTabs = styled(TabsUI) `
   .antsomi-tabs-tab {
     padding: 5.5px 20px !important;

package/es/components/molecules/VirtualizedMenu/VirtualizedMenu.d.ts

@@ -8,6 +8,7 @@ export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
     className: string;
     itemSize: number;
     selected: string | string[];
+    focusedKey: string;
     expanded: string[];
     onClick: (args: {
         item: import("./types").ItemType;

package/es/components/molecules/VirtualizedMenu/components/Item/Item.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useRef, useEffect, useCallback } from 'react';
+import { memo, useMemo, useRef, useCallback } from 'react';
 import { Typography } from '../../../../atoms/Typography';
 import { MenuItemRoot } from '../../styled';
 import clsx from 'clsx';
@@ -69,11 +69,7 @@ export const Item = memo((props) => {
     }, [item.id, normalizeTreeItems, selectedKeys]);
     const className = clsx(itemClassName, {
         [CLS.Item.selectedDescendant]: isSelectedDescendant,
+        [CLS.Item.focused]: isFocused,
     });
-    useEffect(() => {
-        if (isFocused) {
-            itemRef.current?.focus({ preventScroll: true });
-        }
-    }, [isFocused]);
-    return (_jsxs(MenuItemRoot, { ref: handleItemRef, role: displayOnly ? 'none' : 'treeitem', tabIndex: displayOnly ? -1 : isFocused ? 0 : -1, "aria-selected": displayOnly ? undefined : selected, "aria-disabled": displayOnly ? undefined : disabled, "aria-expanded": displayOnly ? undefined : expanded, "aria-level": displayOnly ? undefined : item.level, "aria-posinset": displayOnly ? undefined : index + 1, "aria-setsize": displayOnly ? undefined : items.length, className: className, style: itemStyle, onClick: e => handleOnClick(e, 'item'), children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
+    return (_jsxs(MenuItemRoot, { "data-selected": !!selected, "data-focused": isFocused, ref: handleItemRef, role: displayOnly ? 'none' : 'treeitem', "aria-selected": displayOnly ? undefined : selected, "aria-disabled": displayOnly ? undefined : disabled, "aria-expanded": displayOnly ? undefined : expanded, "aria-level": displayOnly ? undefined : item.level, "aria-posinset": displayOnly ? undefined : index + 1, "aria-setsize": displayOnly ? undefined : items.length, className: className, style: itemStyle, onClick: e => handleOnClick(e, 'item'), children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
 }, areEqual);

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.d.ts

@@ -9,6 +9,7 @@ export declare const MenuInline: React.MemoExoticComponent<React.ForwardRefExoti
     className: string;
     itemSize: number;
     selected: string | string[];
+    focusedKey: string;
     expanded: string[];
     onClick: (args: {
         item: ItemType;

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.js

@@ -103,7 +103,7 @@ const computeVisibleItemsByLevel = (normalizeTreeItems, rootItemIds, expandedKey
     return visibleItems;
 };
 const MenuInlineInner = forwardRef((props, ref) => {
-    const { items: itemsProp = [], expanded: expandedProp = [], selected: selectedProp = [], inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, selectable = false, action, className, onClick, } = props;
+    const { items: itemsProp = [], expanded: expandedProp = [], selected: selectedProp = [], focusedKey, inlineIndent = INLINE_INDENT, inlinePadding = INLINE_PADDING, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING, selectable = false, action, className, onClick, } = props;
     const [focusId, setFocusId] = useState(null);
     const [expandedKeys, setExpandedKeys] = useState(new Set());
     const [selectedKeys, setSelectedKeys] = useState(new Set());
@@ -122,6 +122,12 @@ const MenuInlineInner = forwardRef((props, ref) => {
     useDeepCompareEffect(() => {
         setExpandedKeys(new Set(expandedProp));
     }, [expandedProp]);
+    // Sync external focusedKey prop with internal focusId state for auto-scrolling
+    useEffect(() => {
+        if (focusedKey !== undefined) {
+            setFocusId(focusedKey);
+        }
+    }, [focusedKey]);
     useEffect(() => {
         setTreeState(serializeItems({
             items: itemsProp,

package/es/components/molecules/VirtualizedMenu/styled.js

@@ -32,7 +32,7 @@ export const MenuItemRoot = styled.li `
     align-items: center;
     overflow: hidden;
 
-    &:focus {
+    &.${CLS.Item.focused} {
       outline: none;
     }
 
@@ -84,8 +84,18 @@ export const MenuItemRoot = styled.li `
       }
     }
 
-    &:focus:not(.${CLS.Item.disabled}, .${CLS.Item.selected}, .${CLS.Item.selectedDescendant}, .${CLS.Item.displayOnly}),
-    &:hover:not(.${CLS.Item.disabled}, .${CLS.Item.selected}, .${CLS.Item.selectedDescendant}, .${CLS.Item.displayOnly}) {
+    &.${CLS.Item.focused}:not(
+        .${CLS.Item.disabled},
+          .${CLS.Item.selected},
+          .${CLS.Item.selectedDescendant},
+          .${CLS.Item.displayOnly}
+      ),
+    &:hover:not(
+        .${CLS.Item.disabled},
+          .${CLS.Item.selected},
+          .${CLS.Item.selectedDescendant},
+          .${CLS.Item.displayOnly}
+      ) {
       background-color: ${THEME.components?.Menu?.itemHoverBg};
     }
   }
@@ -101,4 +111,5 @@ export const VirtualizedMenuContainer = styled((VariableSizeList)) `
 `;
 export const StyledAutoSizer = styled(AutoSizer) `
   flex: 1;
+  outline: none;
 `;

package/es/components/molecules/VirtualizedMenu/types.d.ts

@@ -22,6 +22,7 @@ type VirtualizedMenuBaseProps = Partial<{
     className: string;
     itemSize: number;
     selected: string | string[];
+    focusedKey: string;
     expanded: string[];
     onClick: (args: {
         item: ItemType;

package/es/components/molecules/VirtualizedMenu/utils.d.ts

@@ -29,6 +29,7 @@ export declare const CLS: {
         readonly disabled: string;
         readonly selected: string;
         readonly expanded: string;
+        readonly focused: string;
         readonly selectedDescendant: string;
         readonly displayOnly: string;
     };

package/es/components/molecules/VirtualizedMenu/utils.js

@@ -37,6 +37,7 @@ export const CLS = {
         disabled: componentCls('item-disabled'),
         selected: componentCls('item-selected'),
         expanded: componentCls('item-expanded'),
+        focused: componentCls('item-focused'),
         selectedDescendant: componentCls('item-selected-descendant'),
         displayOnly: componentCls('item-display-only'),
     },

package/es/components/organism/TextEditor/TextEditor.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { TextEditorProviderRefHandler } from './provider';
+import { type TextEditorProviderRefHandler } from './provider';
 import { type TextEditorProps, type TextEditorRef, type TextEditorWithProviderRef } from './types';
 export declare const TextEditor: React.ForwardRefExoticComponent<TextEditorProps & {
+    colors?: string[] | undefined;
     onChangeColors?: ((colors: string[]) => void) | undefined;
 } & React.RefAttributes<TextEditorWithProviderRef>> & {
     Provider: React.ForwardRefExoticComponent<import("./provider").TextEditorProviderProps & React.RefAttributes<TextEditorProviderRefHandler>>;

package/es/components/organism/TextEditor/TextEditor.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ANTSOMI_COMPONENT_PREFIX_CLS } from '@antscorp/antsomi-ui/es/constants';
-import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 import SubScript from '@tiptap/extension-subscript';
 import Superscript from '@tiptap/extension-superscript';
 import TextAlign from '@tiptap/extension-text-align';
 import { TextStyleKit } from '@tiptap/extension-text-style';
-import { Selection } from '@tiptap/extensions';
+import { Selection, Focus } from '@tiptap/extensions';
 import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import clsx from 'clsx';
 import { isBoolean, omit } from 'lodash';
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import { DEFAULT_TEXT_STYLE } from './constants';
 import { BackgroundColor } from './extensions/BackgroundColor';
@@ -28,25 +28,47 @@ import { SmartTag } from './extensions/SmartTag';
 import { TextTransform } from './extensions/TextTransform';
 import { CustomUnorderedList } from './extensions/UnorderedList';
 import { ClearFormatting } from './extensions/ClearFormatting';
-import { TextEditorProvider, useTextEditorStore } from './provider';
+import { TextEditorProvider, useTextEditorStore, } from './provider';
 import { StyledEditorContent } from './styled';
 import { isSmartTagNode, } from './types';
 import { emojiSuggestion } from './ui/Emoji';
-import { Toolbar } from './ui/Toolbar';
+import { LinkPreviewToolbar, FormattingToolbar } from './ui/Toolbar';
 import { analyzeFont, defaultShouldShowBubbleMenu, getAllFullLinkGroups, handleLinkAction, handleSmartTagAction, isShowLinkToolbar, safeParseHTMLContent, htmlSerializerForOutput, } from './utils';
 import { BubbleMenu } from './ui/BubbleMenu';
+import { LinkPopover } from './ui/LinkPopover';
 const TextEditorInternal = memo(forwardRef((props, ref) => {
-    const { id, className, config, editable = true, initialContent = '', dataAttributes, onUpdateDebounced = 400, defaultTextStyle: defaultTextStyleProp, linkHandler: outerLinkHandler, smartTagHandler: outerSmartTagHandler, bubbleMenuProps, style, render, onUpdate, onFocus, onChangeFont, } = props;
-    const isShowBubbleMenu = useTextEditorStore(state => state.isShowBubbleMenu);
+    const { id, className, config, editable = true, initialContent = '', dataAttributes, onUpdateDebounced = 300, defaultTextStyle: defaultTextStyleProp, linkHandler: outerLinkHandler, smartTagHandler: outerSmartTagHandler, bubbleMenuProps, style, render, onUpdate, onFocus, onChangeFont, } = props;
+    // Initialize bubbleMenuContainer with default value (document.body)
+    // This ensures BubbleMenu receives a valid appendTo prop on first render
+    const bubbleMenuContainer = useRef((() => {
+        const appendTo = bubbleMenuProps?.appendTo;
+        if (!appendTo)
+            return document.body;
+        return typeof appendTo === 'function' ? appendTo() : appendTo;
+    })());
+    const linkFormVisible = useTextEditorStore(state => state.linkFormState?.isVisible);
     const setBubbleMenuContainer = useTextEditorStore(state => state.setBubbleMenuContainer);
+    const showLinkForm = useTextEditorStore(state => state.showLinkForm);
     const defaultTextStyle = useDeepCompareMemo(() => ({
         ...DEFAULT_TEXT_STYLE,
         ...defaultTextStyleProp,
     }), [defaultTextStyleProp]);
+    useEffect(() => {
+        const bubbleMenuAppendTo = bubbleMenuProps?.appendTo;
+        // Default to document.body when no appendTo is provided
+        // This prevents bubble menu from being clipped by overflow containers
+        const el = bubbleMenuAppendTo
+            ? typeof bubbleMenuAppendTo === 'function'
+                ? bubbleMenuAppendTo()
+                : bubbleMenuAppendTo
+            : document.body;
+        setBubbleMenuContainer(el);
+        bubbleMenuContainer.current = el;
+    }, [bubbleMenuProps?.appendTo, setBubbleMenuContainer]);
     const handleOnUpdateDebounce = useDebouncedCallback((editor) => {
-        const html = editor.getHTML();
         const text = editor.getText();
         const json = editor.getJSON();
+        const html = editor.getHTML();
         onUpdate?.({
             html: htmlSerializerForOutput(html),
             text,
@@ -54,6 +76,28 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
         });
     }, onUpdateDebounced);
     const contentRef = useRef(null);
+    // Compose linkHandler: merge outerLinkHandler with default handlers
+    // Allows partial override - user can provide only setNew or only edit
+    const linkHandler = useMemo(() => {
+        const defaultSetNew = ({ selectionText }) => {
+            showLinkForm('insert', {
+                url: '',
+                text: selectionText,
+                openInNewTab: false,
+            });
+        };
+        const defaultEdit = ({ attrs, selectionText, }) => {
+            showLinkForm('edit', {
+                url: attrs.href || '',
+                text: selectionText,
+                openInNewTab: attrs.target === '_blank',
+            });
+        };
+        return {
+            setNew: outerLinkHandler?.setNew || defaultSetNew,
+            edit: outerLinkHandler?.edit || defaultEdit,
+        };
+    }, [outerLinkHandler, showLinkForm]);
     const editor = useEditor({
         extensions: [
             StarterKit.configure({
@@ -108,6 +152,9 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
             Selection.configure({
                 className: 'selection',
             }),
+            Focus.configure({
+                className: 'has-focused',
+            }),
             SmartTag,
             TextAlign.configure({
                 types: ['heading', 'paragraph'],
@@ -122,7 +169,7 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
             Indent,
             Emoji.configure({
                 suggestion: emojiSuggestion({
-                    container: bubbleMenuProps?.container,
+                    container: bubbleMenuContainer.current,
                 }),
             }),
             ClearFormatting.configure({
@@ -155,7 +202,7 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
                 if (event.ctrlKey && event.key === 'k') {
                     // Add this line to prevent browser's default behavior.
                     event.preventDefault();
-                    handleLinkAction(view, outerLinkHandler);
+                    handleLinkAction(view, linkHandler);
                 }
             },
         },
@@ -184,10 +231,15 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
             return updatedAttrs;
     })
         .run(), [editor]);
-    const shouldShowBubbleMenu = useCallback((params) => {
+    const shouldShowLinkPreview = useCallback((params) => {
+        const { state } = params;
+        return isShowLinkToolbar(state);
+    }, []);
+    const shouldShowFormattingToolbar = useCallback((params) => {
         const { state, view, element } = params;
+        // Don't show if link preview is visible
         if (isShowLinkToolbar(state)) {
-            return true;
+            return false;
         }
         return defaultShouldShowBubbleMenu({
             state,
@@ -221,9 +273,6 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
             }
         });
     }, [editor]);
-    const handleBubbleMenuRef = useCallback((htmlElement) => {
-        setBubbleMenuContainer(htmlElement);
-    }, [setBubbleMenuContainer]);
     useImperativeHandle(ref, () => ({
         setLink: params => {
             editor?.chain().setCustomLink(params).run();
@@ -260,27 +309,37 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
                     // Inline styles apply to inner html elements (support email client)
                     ...omit(defaultTextStyle, ['fontSize']),
                     ...style,
-                }, id: id, ref: contentRef, editor: editor, ...dataAttributes }), _jsx(BubbleMenu, { ref: handleBubbleMenuRef, editor: editor, shouldShow: shouldShowBubbleMenu, resizeDelay: 700, ...bubbleMenuProps, children: isShowBubbleMenu && (_jsx(Toolbar, { config: config, editor: editor, defaultTextStyle: defaultTextStyle, linkHanlder: {
-                        onUpsert: () => {
-                            handleLinkAction(editor.view, outerLinkHandler);
-                        },
-                    }, smartTagHandler: {
-                        onUpsert: (event) => {
-                            handleSmartTagAction(event, editor.view, outerSmartTagHandler);
-                        },
-                    }, render: render, onChangeFont: ({ font, weight }) => {
-                        onChangeFont?.({
-                            font,
-                            weight,
-                            analysis: analyzeFont(font),
-                        });
-                    } })) })] }));
+                }, id: id, ref: contentRef, editor: editor, ...dataAttributes }), _jsx(LinkPopover, { editor: editor }), !linkFormVisible && (_jsxs(_Fragment, { children: [_jsx(BubbleMenu, { pluginKey: "linkPreviewBubbleMenu", resizeDelay: 400, ...bubbleMenuProps, appendTo: bubbleMenuContainer.current, editor: editor, shouldShow: shouldShowLinkPreview, children: _jsx(LinkPreviewToolbar, { editor: editor, linkHanlder: {
+                                onUpsert: () => {
+                                    handleLinkAction(editor.view, linkHandler);
+                                },
+                            }, render: render }) }), _jsx(BubbleMenu, { pluginKey: "formattingBubbleMenu", resizeDelay: 400, ...bubbleMenuProps, appendTo: bubbleMenuContainer.current, editor: editor, shouldShow: shouldShowFormattingToolbar, children: _jsx(FormattingToolbar, { config: config, editor: editor, defaultTextStyle: defaultTextStyle, linkHanlder: {
+                                onUpsert: () => {
+                                    handleLinkAction(editor.view, linkHandler);
+                                },
+                            }, smartTagHandler: {
+                                onUpsert: (event) => {
+                                    handleSmartTagAction(event, editor.view, outerSmartTagHandler);
+                                },
+                            }, onChangeFont: ({ font, weight }) => {
+                                onChangeFont?.({
+                                    font,
+                                    weight,
+                                    analysis: analyzeFont(font),
+                                });
+                            } }) })] }))] }));
 }));
 TextEditorInternal.displayName = 'TextEditorInternal';
 const TextEditorWithProvider = forwardRef((props, ref) => {
-    const { onChangeColors, ...editorProps } = props;
+    const { colors, onChangeColors, ...editorProps } = props;
     const providerRef = useRef(null);
     const editorRef = useRef(null);
+    // Sync external colors to internal store
+    useDeepCompareEffect(() => {
+        if (colors !== undefined) {
+            providerRef.current?.updateColors?.(colors);
+        }
+    }, [colors]);
     useImperativeHandle(ref, () => ({
         // Forward TextEditorRef methods - accessed at call time
         get style() {
@@ -322,7 +381,7 @@ const TextEditorWithProvider = forwardRef((props, ref) => {
         // Forward TextEditorProviderRefHandler methods
         updateColors: colors => providerRef.current?.updateColors?.(colors),
     }), []);
-    return (_jsx(TextEditorProvider, { ref: providerRef, onChangeColors: onChangeColors, children: _jsx(TextEditorInternal, { ...editorProps, ref: editorRef }) }));
+    return (_jsx(TextEditorProvider, { ref: providerRef, colors: colors, onChangeColors: onChangeColors, children: _jsx(TextEditorInternal, { ...editorProps, ref: editorRef }) }));
 });
 TextEditorWithProvider.displayName = 'TextEditorWithProvider';
 export const TextEditor = Object.assign(TextEditorWithProvider, {

package/es/components/organism/TextEditor/constants.d.ts

@@ -185,3 +185,12 @@ export declare const DEFAULT_FONT_GROUPING: {
         readonly label: "Non-standard";
     };
 };
+/**
+ * All available toolbar actions in default order
+ */
+export declare const ALL_TOOLBAR_ACTIONS: readonly ["fontFamily", "fontSize", "bold", "italic", "underline", "link", "strike", "superscript", "subscript", "textTransform", "textColor", "backgroundColor", "emoji", "smartTag", "bulletList", "orderedList", "textAlign", "lineSpacing", "letterSpacing", "indent", "outdent", "history", "clearFormatting"];
+/**
+ * Default grouping of toolbar actions into rows
+ */
+export declare const DEFAULT_TOOLBAR_GROUPING: readonly [readonly ["fontFamily", "fontSize", "bold", "italic", "underline", "link", "strike", "superscript", "subscript", "textTransform", "textColor", "backgroundColor", "emoji", "smartTag"], readonly ["bulletList", "orderedList", "textAlign", "lineSpacing", "letterSpacing", "indent", "outdent", "history", "clearFormatting"]];
+export declare const ATTR_WHITESPACE: RegExp;

package/es/components/organism/TextEditor/constants.js

@@ -330,3 +330,69 @@ export const DEFAULT_FONT_GROUPING = {
         label: 'Non-standard',
     },
 };
+/**
+ * All available toolbar actions in default order
+ */
+export const ALL_TOOLBAR_ACTIONS = [
+    // Row 1: Text formatting and styling
+    'fontFamily',
+    'fontSize',
+    'bold',
+    'italic',
+    'underline',
+    'link',
+    'strike',
+    'superscript',
+    'subscript',
+    'textTransform',
+    'textColor',
+    'backgroundColor',
+    'emoji',
+    'smartTag',
+    // Row 2: Lists, alignment, and utilities
+    'bulletList',
+    'orderedList',
+    'textAlign',
+    'lineSpacing',
+    'letterSpacing',
+    'indent',
+    'outdent',
+    'history',
+    'clearFormatting',
+];
+/**
+ * Default grouping of toolbar actions into rows
+ */
+export const DEFAULT_TOOLBAR_GROUPING = [
+    // Row 1
+    [
+        'fontFamily',
+        'fontSize',
+        'bold',
+        'italic',
+        'underline',
+        'link',
+        'strike',
+        'superscript',
+        'subscript',
+        'textTransform',
+        'textColor',
+        'backgroundColor',
+        'emoji',
+        'smartTag',
+    ],
+    // Row 2
+    [
+        'bulletList',
+        'orderedList',
+        'textAlign',
+        'lineSpacing',
+        'letterSpacing',
+        'indent',
+        'outdent',
+        'history',
+        'clearFormatting',
+    ],
+];
+// eslint-disable-next-line no-control-regex
+export const ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;

package/es/components/organism/TextEditor/extensions/BubbleMenu/bubble-menu-plugin.d.ts

@@ -1,140 +1,18 @@
-import { arrow, autoPlacement, flip, hide, inline, offset, shift, size } from '@floating-ui/dom';
-import type { Editor } from '@tiptap/core';
-import type { EditorState, PluginView } from '@tiptap/pm/state';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
+import type { EditorState } from '@tiptap/pm/state';
+import { BubbleMenuView as TiptapBubbleMenuView } from '@tiptap/extension-bubble-menu';
+import { Plugin } from '@tiptap/pm/state';
 import type { EditorView } from '@tiptap/pm/view';
-export interface BubbleMenuPluginProps {
-    /**
-     * The plugin key.
-     * @type {PluginKey | string}
-     * @default 'bubbleMenu'
-     */
-    pluginKey: PluginKey | string;
-    /**
-     * The editor instance.
-     */
-    editor: Editor;
-    /**
-     * The DOM element that contains your menu.
-     * @type {HTMLElement}
-     * @default null
-     */
-    element: HTMLElement;
-    container?: HTMLElement | (() => HTMLElement) | null;
-    /**
-     * The delay in milliseconds before the menu should be updated.
-     * This can be useful to prevent performance issues.
-     * @type {number}
-     * @default 250
-     */
-    updateDelay?: number;
-    /**
-     * The delay in milliseconds before the menu position should be updated on window resize.
-     * This can be useful to prevent performance issues.
-     * @type {number}
-     * @default 60
-     */
-    resizeDelay?: number;
-    /**
-     * A function that determines whether the menu should be shown or not.
-     * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
-     */
-    shouldShow?: ((props: {
-        editor: Editor;
-        element: HTMLElement;
-        view: EditorView;
-        state: EditorState;
-        oldState?: EditorState;
-        from: number;
-        to: number;
-    }) => boolean) | null;
-    /**
-     * The options for the bubble menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, arrow, size, autoPlacement,
-     * hide, and inline middlewares.
-     * @default {}
-     * @see https://floating-ui.com/docs/computePosition#options
-     */
-    options?: {
-        strategy?: 'absolute' | 'fixed';
-        placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
-        offset?: Parameters<typeof offset>[0] | boolean;
-        flip?: Parameters<typeof flip>[0] | boolean;
-        shift?: Parameters<typeof shift>[0] | boolean;
-        arrow?: Parameters<typeof arrow>[0] | false;
-        size?: Parameters<typeof size>[0] | boolean;
-        autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
-        hide?: Parameters<typeof hide>[0] | boolean;
-        inline?: Parameters<typeof inline>[0] | boolean;
-        onShow?: () => void;
-        onHide?: () => void;
-        onUpdate?: () => void;
-        onDestroy?: () => void;
-    };
-}
-export type BubbleMenuViewProps = BubbleMenuPluginProps & {
-    view: EditorView;
-};
-export declare class BubbleMenuView implements PluginView {
-    editor: Editor;
-    element: HTMLElement;
-    container?: HTMLElement | (() => HTMLElement) | null;
-    view: EditorView;
-    preventHide: boolean;
-    updateDelay: number;
-    resizeDelay: number;
-    private updateDebounceTimer;
-    private resizeDebounceTimer;
+import type { BubbleMenuPluginProps, BubbleMenuViewProps } from '@tiptap/extension-bubble-menu';
+export declare class BubbleMenuView extends TiptapBubbleMenuView {
     private resizeObserver;
-    private isVisible;
-    private floatingUIOptions;
-    shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null>;
-    get middlewares(): {
-        name: string;
-        options?: any;
-        fn: (state: {
-            x: number;
-            y: number;
-            platform: import("@floating-ui/core").Platform;
-            placement: import("@floating-ui/utils").Placement;
-            initialPlacement: import("@floating-ui/utils").Placement;
-            strategy: import("@floating-ui/utils").Strategy;
-            middlewareData: import("@floating-ui/core").MiddlewareData;
-            rects: import("@floating-ui/utils").ElementRects;
-            elements: import("@floating-ui/dom").Elements;
-        }) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
-    }[];
-    constructor({ editor, element, view, updateDelay, resizeDelay, container, shouldShow, options, }: BubbleMenuViewProps);
-    mousedownHandler: () => void;
-    dragstartHandler: () => void;
-    /**
-     * Handles the window resize event and element resize event to update the position of the bubble menu.
-     * It uses a debounce mechanism to prevent excessive updates.
-     * The delay is defined by the `resizeDelay` property.
-     */
-    resizeHandler: (delay?: number) => void;
-    /**
-     * Window resize handler that uses the default resize delay.
-     * This is a separate function to maintain the same reference for addEventListener/removeEventListener.
-     */
-    windowResizeHandler: () => void;
+    constructor(props: BubbleMenuViewProps);
     /**
      * Sets up ResizeObserver to watch for bubble menu element size changes.
      * This ensures the bubble menu position is updated when the element resizes
      * due to React component rendering different children, not just when the window resizes.
      */
     setupResizeObserver: () => void;
-    focusHandler: () => void;
-    blurHandler: ({ event }: {
-        event: FocusEvent;
-    }) => void;
-    updatePosition(): void;
-    update(view: EditorView, oldState?: EditorState): void;
-    handleDebouncedUpdate: (view: EditorView, oldState?: EditorState) => void;
-    getShouldShow(oldState?: EditorState): boolean | undefined;
     updateHandler: (view: EditorView, selectionChanged: boolean, docChanged: boolean, oldState?: EditorState) => void;
-    private getContainer;
-    show(): void;
-    hide(): void;
     destroy(): void;
 }
 export declare const BubbleMenuPlugin: (options: BubbleMenuPluginProps) => Plugin<any>;