@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.71

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

@@ -0,0 +1,57 @@
+import { produce } from 'immer';
+import uniqid from 'uniqid';
+import { HTML_DOM } from '../__mocks__/text-contennt';
+/**
+ * Parse HTML content from mock data
+ */
+export const htmlContent = (() => {
+    const dom = new DOMParser().parseFromString(HTML_DOM, 'text/html');
+    const body = dom.querySelector('body');
+    if (body) {
+        return body.innerHTML;
+    }
+    return '';
+})();
+/**
+ * Reducer for TextBlock component state management
+ */
+export const reducer = (state, action) => produce(state, draft => {
+    switch (action.type) {
+        case 'add_smart_tag': {
+            draft.dynamic.selectedId = uniqid();
+            break;
+        }
+        case 'edit_smart_tag': {
+            draft.dynamic.selectedId = action.payload.id;
+            break;
+        }
+        case 'close_smart_tag_modal': {
+            draft.dynamic.selectedId = '';
+            break;
+        }
+        case 'add_link': {
+            const newLinkId = uniqid();
+            draft.link.selectedId = newLinkId;
+            draft.link.data[newLinkId] = {
+                title: '',
+                url: '',
+                text: action.payload.selectionText,
+            };
+            break;
+        }
+        case 'edit_link': {
+            draft.link.selectedId = action.payload.id;
+            draft.link.data[action.payload.id] = {
+                ...state.link.data[action.payload.id],
+                ...action.payload.data,
+            };
+            break;
+        }
+        case 'close_link_modal': {
+            draft.link.selectedId = '';
+            break;
+        }
+        default:
+            break;
+    }
+});

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TextStyle } from './types';
-export declare const StyledEditorContent: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>, any, {
+export declare const StyledEditorContent: import("styled-components").StyledComponent<import("react").NamedExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, any, {
     $textStyle: TextStyle;
 }, never>;
 export declare const ColorBox: import("styled-components").StyledComponent<"div", any, {

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

@@ -12,6 +12,7 @@ export const StyledEditorContent = styled(EditorContent) `
 
       // Some apps have global p styles, so we need to override it
 
+      font-size: ${p => p.$textStyle.fontSize};
       line-height: ${p => p.$textStyle.lineHeight};
       font-family: ${p => p.$textStyle.fontFamily};
       color: ${p => p.$textStyle.color};

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

@@ -1,14 +1,13 @@
 import type React from 'react';
-import type { JSONContent, Editor, MarkRange } from '@tiptap/core';
-import type { Mark } from '@tiptap/pm/model';
-import type { SmartTagAttrs } from './extensions/SmartTag';
+import type { Editor, JSONContent, MarkRange } from '@tiptap/core';
+import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+import type { Mark, Node } from '@tiptap/pm/model';
 import { ORDERED_LIST_STYLE_TYPE, UNORDERED_LIST_STYLE_TYPE } from './constants';
 import type { OverrideProperties } from 'type-fest';
-import { BubbleMenuPluginProps } from './extensions/BubbleMenu';
 export type HandleSmartTagRef = {
     setSmartTag: (attrs: SmartTagAttrs) => void;
     deleteSmartTag: (id: string) => void;
-    updateSmartTagAttrs: (id: string, updatedAttrs: Omit<SmartTagAttrs, 'id'>) => void;
+    updateSmartTagAttrs: (id: string, updatedAttrs: Partial<SmartTagAttrs>) => void;
 };
 export type HandleLinkRef = {
     setLink: (params: {
@@ -22,11 +21,21 @@ export type HandleLinkRef = {
         updated: (currentText: string) => string;
         mergeAdjacentEqualFn?: (currentAttrs: LinkAttrs, candidateAttrs: LinkAttrs) => boolean;
     }) => void;
+    eachLinkGroup: (callback: (params: {
+        attrs: LinkAttrs;
+        content: string;
+    }) => void) => void;
+    eachSmartag: (callback: (attrs: SmartTagAttrs) => void) => void;
 };
 export type TextEditorRef = HandleSmartTagRef & HandleLinkRef & {
     blur: (perserveSelection?: boolean) => void;
+    focus: () => void;
     style?: CSSStyleDeclaration;
-    readonly editor: Editor | null;
+    getHTML?: () => string;
+    setContent?: (text: string, options?: Partial<{
+        emitUpdate: boolean;
+    }>) => void;
+    readonly editor: Editor;
 };
 export type SmartTagHandler = Partial<{
     edit: (id: string, event: React.MouseEvent) => void;
@@ -43,6 +52,28 @@ export type LinkHandler = Partial<{
         selectionText: string;
     }) => void;
 }>;
+/**
+ * Link form data structure
+ */
+export type LinkFormData = {
+    /** The URL/href of the link */
+    url: string;
+    /** The text content to display */
+    text: string;
+    /** Whether to open link in new tab */
+    openInNewTab: boolean;
+};
+/**
+ * Link form state in store
+ */
+export type LinkFormState = {
+    /** Whether the link form is visible */
+    isVisible: boolean;
+    /** Mode: insert new link or edit existing link */
+    mode: 'insert' | 'edit';
+    /** Form data */
+    data: LinkFormData;
+} | null;
 export type FontConfig = {
     fontFamily: {
         name: string;
@@ -73,10 +104,34 @@ export type FontGroupResult = {
  * @returns Array of group keys in desired display order
  */
 export type GroupOrderFunction = (groups: string[]) => string[];
+/**
+ * Toolbar action names - union type for type safety
+ */
+export type ToolbarActionName = 'bold' | 'italic' | 'underline' | 'strike' | 'superscript' | 'subscript' | 'fontFamily' | 'fontSize' | 'textColor' | 'backgroundColor' | 'textTransform' | 'bulletList' | 'orderedList' | 'indent' | 'outdent' | 'textAlign' | 'lineSpacing' | 'letterSpacing' | 'link' | 'smartTag' | 'emoji' | 'history' | 'clearFormatting';
+/**
+ * Toolbar configuration options
+ */
+export type ToolbarConfig = {
+    /**
+     * Which toolbar actions to show
+     * - Array: Show only specified actions in given order
+     * - 'all': Show all available actions (default)
+     * - false: Hide toolbar entirely
+     */
+    items?: ToolbarActionName[] | 'all' | false;
+    /**
+     * Which toolbar actions to hide (ignored if items is an array)
+     * Useful when you want to show most items but exclude a few
+     * @example
+     * config={{ Toolbar: { exclude: ['smartTag', 'emoji'] } }}
+     */
+    exclude?: ToolbarActionName[];
+};
 /**
  * Configuration options for TextEditor components
  */
 export type Config = Partial<{
+    UndoRedo: false;
     /** Font family configuration */
     FontFamily: {
         /** Array of available font configurations */
@@ -91,6 +146,11 @@ export type Config = Partial<{
         /** Whether to use custom bullet styles */
         useCustomBullet?: boolean;
     };
+    SmartTag: {
+        generateId?: () => string;
+    };
+    /** Toolbar configuration */
+    Toolbar: ToolbarConfig;
 }>;
 export type TextStyle = {
     fontFamily: string;
@@ -109,8 +169,6 @@ export type TextEditorComponentsRender = {
         unlink: React.ReactNode;
     }) => React.ReactNode;
 };
-type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
-export type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> & React.HTMLAttributes<HTMLDivElement>;
 export type TextEditorProps = {
     id?: string;
     className?: string;
@@ -120,9 +178,9 @@ export type TextEditorProps = {
     smartTagHandler?: SmartTagHandler;
     linkHandler?: LinkHandler;
     editable?: boolean;
-    bubbleMenuProps?: {
-        container?: HTMLElement | null;
-    } & Pick<BubbleMenuProps, 'options'>;
+    bubbleMenuProps?: Pick<BubbleMenuPluginProps, 'options' | 'appendTo'> & {
+        enabled?: boolean;
+    };
     defaultTextStyle?: Partial<TextStyle>;
     dataAttributes?: Record<`data-${string}`, unknown>;
     onUpdateDebounced?: number;
@@ -133,6 +191,11 @@ export type TextEditorProps = {
         text: string;
         json: JSONContent;
     }) => void;
+    onCreate?: (args: {
+        html: string;
+        text: string;
+        json: JSONContent;
+    }) => void;
     onChangeFont?: (changeInfo: {
         font: FontConfig;
         weight: number;
@@ -142,6 +205,13 @@ export type TextEditorProps = {
         };
     }) => void;
 };
+export type TextEditorAllProps = TextEditorProps & {
+    colors?: string[];
+    onChangeColors?: (colors: string[]) => void;
+};
+export type TextEditorWithProviderRef = TextEditorRef & {
+    updateColors?: (colors: string[]) => void;
+};
 export type OrderedListStyleType = (typeof ORDERED_LIST_STYLE_TYPE)[keyof typeof ORDERED_LIST_STYLE_TYPE];
 export type UnorderedListStyleType = (typeof UNORDERED_LIST_STYLE_TYPE)[keyof typeof UNORDERED_LIST_STYLE_TYPE];
 export declare const isOrderedListStyleType: (value: unknown) => value is OrderedListStyleType;
@@ -155,9 +225,19 @@ export type LinkAttrs = {
     title: string | null;
     data: Record<string, string>;
 }>;
+export type SmartTagAttrs = {
+    id: string;
+    sourceId?: string;
+} & Partial<{
+    content: string;
+    tag: string;
+}>;
 export type LinkMark = OverrideProperties<Mark, {
     attrs: LinkAttrs;
 }>;
+export type SmartTagNode = OverrideProperties<Node, {
+    attrs: SmartTagAttrs;
+}>;
 export type LinkMarkRange = OverrideProperties<MarkRange, {
     mark: LinkMark;
 }>;
@@ -170,6 +250,76 @@ export declare const isLinkMark: (mark: Mark) => mark is {
     toJSON: () => any;
     attrs: LinkAttrs;
 };
+type ProtocolOptions = {
+    /**
+     * The protocol scheme to be registered.
+     * @default '''
+     * @example 'ftp'
+     * @example 'git'
+     */
+    scheme: string;
+    /**
+     * If enabled, it allows optional slashes after the protocol.
+     * @default false
+     * @example true
+     */
+    optionalSlashes?: boolean;
+};
+export type ProtocolConfig = Array<ProtocolOptions | string>;
+export declare const isSmartTagNode: (node: Node) => node is {
+    toString: () => string;
+    readonly type: import("prosemirror-model").NodeType;
+    readonly marks: readonly Mark[];
+    readonly content: import("prosemirror-model").Fragment;
+    readonly children: readonly Node[];
+    readonly text: string | undefined;
+    readonly nodeSize: number;
+    readonly childCount: number;
+    child: (index: number) => Node;
+    maybeChild: (index: number) => Node | null;
+    forEach: (f: (node: Node, offset: number, index: number) => void) => void;
+    nodesBetween: (from: number, to: number, f: (node: Node, pos: number, parent: Node | null, index: number) => boolean | void, startPos?: number | undefined) => void;
+    descendants: (f: (node: Node, pos: number, parent: Node | null, index: number) => boolean | void) => void;
+    readonly textContent: string;
+    textBetween: (from: number, to: number, blockSeparator?: string | null | undefined, leafText?: string | ((leafNode: Node) => string) | null | undefined) => string;
+    readonly firstChild: Node | null;
+    readonly lastChild: Node | null;
+    eq: (other: Node) => boolean;
+    sameMarkup: (other: Node) => boolean;
+    hasMarkup: (type: import("prosemirror-model").NodeType, attrs?: import("prosemirror-model").Attrs | null | undefined, marks?: readonly Mark[] | undefined) => boolean;
+    copy: (content?: import("prosemirror-model").Fragment | null | undefined) => Node;
+    mark: (marks: readonly Mark[]) => Node;
+    cut: (from: number, to?: number | undefined) => Node;
+    slice: (from: number, to?: number | undefined, includeParents?: boolean | undefined) => import("prosemirror-model").Slice;
+    replace: (from: number, to: number, slice: import("prosemirror-model").Slice) => Node;
+    nodeAt: (pos: number) => Node | null;
+    childAfter: (pos: number) => {
+        node: Node | null;
+        index: number;
+        offset: number;
+    };
+    childBefore: (pos: number) => {
+        node: Node | null;
+        index: number;
+        offset: number;
+    };
+    resolve: (pos: number) => import("prosemirror-model").ResolvedPos;
+    rangeHasMark: (from: number, to: number, type: import("prosemirror-model").MarkType | Mark) => boolean;
+    readonly isBlock: boolean;
+    readonly isTextblock: boolean;
+    readonly inlineContent: boolean;
+    readonly isInline: boolean;
+    readonly isText: boolean;
+    readonly isLeaf: boolean;
+    readonly isAtom: boolean;
+    contentMatchAt: (index: number) => import("prosemirror-model").ContentMatch;
+    canReplace: (from: number, to: number, replacement?: import("prosemirror-model").Fragment | undefined, start?: number | undefined, end?: number | undefined) => boolean;
+    canReplaceWith: (from: number, to: number, type: import("prosemirror-model").NodeType, marks?: readonly Mark[] | undefined) => boolean;
+    canAppend: (other: Node) => boolean;
+    check: () => void;
+    toJSON: () => any;
+    attrs: SmartTagAttrs;
+};
 export declare const isLinkMarkRange: (markRange: MarkRange) => markRange is {
     from: number;
     to: number;

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

@@ -2,4 +2,5 @@ import { CUSTOM_LINK_EXTENSION_NAME, ORDERED_LIST_STYLE_TYPE, UNORDERED_LIST_STY
 export const isOrderedListStyleType = (value) => typeof value === 'string' && Object.values(ORDERED_LIST_STYLE_TYPE).some(v => v === value);
 export const isUnorderedListStyleType = (value) => typeof value === 'string' && Object.values(UNORDERED_LIST_STYLE_TYPE).some(v => v === value);
 export const isLinkMark = (mark) => mark.type.name === CUSTOM_LINK_EXTENSION_NAME;
+export const isSmartTagNode = (node) => node.type.name === 'smartTag';
 export const isLinkMarkRange = (markRange) => isLinkMark(markRange.mark);

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

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare const BubbleMenu: import("react").ForwardRefExoticComponent<Pick<Partial<Omit<Pick<Partial<import("../../extensions/BubbleMenu").BubbleMenuPluginProps>, "pluginKey"> & Omit<import("../../extensions/BubbleMenu").BubbleMenuPluginProps, "pluginKey">, "element">>, "editor"> & Omit<Omit<Pick<Partial<import("../../extensions/BubbleMenu").BubbleMenuPluginProps>, "pluginKey"> & Omit<import("../../extensions/BubbleMenu").BubbleMenuPluginProps, "pluginKey">, "element">, "editor"> & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+export declare const BubbleMenu: import("react").ForwardRefExoticComponent<Pick<Partial<Omit<Pick<Partial<BubbleMenuPluginProps>, "pluginKey"> & Omit<BubbleMenuPluginProps, "pluginKey">, "element">>, "editor"> & Omit<Omit<Pick<Partial<BubbleMenuPluginProps>, "pluginKey"> & Omit<BubbleMenuPluginProps, "pluginKey">, "element">, "editor"> & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,17 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCurrentEditor } from '@tiptap/react';
-import { forwardRef, useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { BubbleMenuPlugin } from '../../extensions/BubbleMenu';
-import { useDeepCompareEffect, useIsMounted } from '@antscorp/antsomi-ui/es/hooks';
-import { useTextEditorStore } from '../../provider';
-import clsx from 'clsx';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 import { ANTSOMI_COMPONENT_PREFIX_CLS } from '@antscorp/antsomi-ui/es/constants';
-export const BubbleMenu = forwardRef(({ pluginKey = 'bubbleMenu', editor, updateDelay, resizeDelay, shouldShow = null, options, children, container, className, ...restProps }, ref) => {
+export const BubbleMenu = forwardRef(({ pluginKey = 'bubbleMenu', editor, updateDelay, resizeDelay, shouldShow = null, getReferencedVirtualElement, appendTo, options, children, ...restProps }, ref) => {
     const menuEl = useRef(document.createElement('div'));
-    const isMounted = useIsMounted();
-    const setIsShowBubbleMenu = useTextEditorStore(state => state.setIsShowBubbleMenu);
+    menuEl.current.classList.add(`${ANTSOMI_COMPONENT_PREFIX_CLS}-text-editor-bubble-menu`);
     const { editor: currentEditor } = useCurrentEditor();
+    /**
+     * Tracks whether the bubble menu has been shown at least once.
+     * Used for lazy mounting optimization - children are only mounted after first show.
+     */
+    const [hasShown, setHasShown] = useState(false);
+    /**
+     * Ref to track hasShown synchronously (since state updates are async).
+     */
+    const hasShownRef = useRef(false);
+    /**
+     * Tracks whether we're in the first show process (to prevent empty flash).
+     * After first show completes, this flag is no longer used.
+     */
+    const isFirstShowRef = useRef(false);
+    /**
+     * The editor instance where the bubble menu plugin will be registered.
+     */
+    const pluginEditor = editor || currentEditor;
     useEffect(() => {
         if (typeof ref === 'function') {
             ref(menuEl.current);
@@ -20,66 +35,80 @@ export const BubbleMenu = forwardRef(({ pluginKey = 'bubbleMenu', editor, update
             ref.current = menuEl.current;
         }
     }, [ref]);
+    const bubbleMenuPluginProps = {
+        updateDelay,
+        resizeDelay,
+        pluginKey,
+        shouldShow,
+        getReferencedVirtualElement,
+        options: {
+            ...options,
+            strategy: options?.strategy || 'absolute',
+            placement: options?.placement || 'bottom',
+            offset: options?.offset || 10,
+            onHide: () => {
+                options?.onHide?.();
+            },
+            onShow: () => {
+                if (!hasShownRef.current) {
+                    // First show: mark as first show and force hide until children mount
+                    hasShownRef.current = true;
+                    isFirstShowRef.current = true;
+                    menuEl.current.style.visibility = 'hidden';
+                    setHasShown(true);
+                }
+                options?.onShow?.();
+            },
+        },
+    };
+    const bubbleMenuPluginPropsRef = useRef(bubbleMenuPluginProps);
+    bubbleMenuPluginPropsRef.current = bubbleMenuPluginProps;
+    useLayoutEffect(() => {
+        // After children mount in first show, make menuEl visible
+        if (isFirstShowRef.current) {
+            menuEl.current.style.visibility = 'visible';
+            isFirstShowRef.current = false;
+        }
+    });
     useDeepCompareEffect(() => {
-        const bubbleMenuElement = menuEl.current;
-        bubbleMenuElement.className = clsx(className, `${ANTSOMI_COMPONENT_PREFIX_CLS}-text-editor-bubble-menu`);
-        if (editor?.isDestroyed || currentEditor?.isDestroyed) {
+        if (pluginEditor?.isDestroyed) {
             return;
         }
-        const attachToEditor = editor || currentEditor;
-        if (!attachToEditor) {
+        if (!pluginEditor) {
             // eslint-disable-next-line no-console
             console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.');
             return;
         }
+        const bubbleMenuElement = menuEl.current;
+        bubbleMenuElement.style.visibility = 'hidden';
+        bubbleMenuElement.style.position = 'absolute';
         const plugin = BubbleMenuPlugin({
-            updateDelay,
-            resizeDelay,
-            editor: attachToEditor,
+            ...bubbleMenuPluginPropsRef.current,
+            appendTo,
+            editor: pluginEditor,
             element: bubbleMenuElement,
-            container,
-            pluginKey,
-            options: {
-                ...options,
-                strategy: options?.strategy || 'absolute',
-                placement: options?.placement || 'bottom',
-                offset: options?.offset,
-                onShow: () => {
-                    if (isMounted()) {
-                        setIsShowBubbleMenu(true);
-                    }
-                    options?.onShow?.();
-                },
-                onHide: () => {
-                    if (isMounted()) {
-                        setIsShowBubbleMenu(false);
-                    }
-                    options?.onHide?.();
-                },
-            },
-            shouldShow,
         });
-        attachToEditor.registerPlugin(plugin);
+        pluginEditor.registerPlugin(plugin);
+        const createdPluginKey = bubbleMenuPluginPropsRef.current.pluginKey;
         return () => {
-            attachToEditor.unregisterPlugin(pluginKey);
+            pluginEditor.unregisterPlugin(createdPluginKey);
             window.requestAnimationFrame(() => {
                 if (bubbleMenuElement.parentNode) {
                     bubbleMenuElement.parentNode.removeChild(bubbleMenuElement);
                 }
             });
         };
-    }, [
-        editor,
-        container,
-        updateDelay,
-        resizeDelay,
-        pluginKey,
-        options,
-        className,
-        currentEditor,
-        isMounted,
-        shouldShow,
-        setIsShowBubbleMenu,
-    ]);
+    }, [appendTo, pluginEditor]);
+    /**
+     * Lazy mounting optimization: only mount children after the bubble menu
+     * has been shown at least once. This significantly improves performance
+     * when many TextEditor instances exist (e.g., in lists).
+     *
+     * After first show, children remain mounted and the tiptap plugin
+     * handles visibility automatically via CSS, avoiding flash effects.
+     */
+    if (!hasShown) {
+        return null;
+    }
     return createPortal(_jsx("div", { ...restProps, children: children }), menuEl.current);
 });

package/es/components/organism/TextEditor/ui/Emoji/EmojiList.js

@@ -44,7 +44,7 @@ export const EmojiList = forwardRef((props, ref) => {
     if (items.length <= 0) {
         return null;
     }
-    return (_jsx(VirtualizedMenu, { className: `${COMPONENT_CLS}-emoji-list`, itemSize: ITEM_SIZE, selected: items.at(selectedIndex) ? [items[selectedIndex].slug] : [], onClick: item => {
+    return (_jsx(VirtualizedMenu, { className: `${COMPONENT_CLS}-emoji-list`, itemSize: ITEM_SIZE, selected: items.at(selectedIndex) ? [items[selectedIndex].slug] : [], focusedKey: items[selectedIndex]?.slug, onClick: item => {
             const idx = items.findIndex(i => i.slug === item.item.key);
             if (idx !== -1) {
                 selectItem(idx);

package/es/components/organism/TextEditor/ui/Emoji/suggestion.d.ts

@@ -1,4 +1,4 @@
 import { EmojiOptions } from '../../extensions/Emoji';
 export declare const suggestion: ({ container, }: {
-    container?: HTMLElement | null;
+    container?: HTMLElement | (() => HTMLElement);
 }) => EmojiOptions['suggestion'];

package/es/components/organism/TextEditor/ui/Emoji/suggestion.js

@@ -10,7 +10,7 @@ const updatePosition = (editor, element, itemLength) => {
         getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
     };
     computePosition(virtualElement, element, {
-        placement: 'top-start',
+        placement: 'bottom-start',
         strategy: 'absolute',
         middleware: [shift(), flip()],
     }).then(({ x, y, strategy }) => {
@@ -45,7 +45,7 @@ export const suggestion = ({ container }) => ({
                 }
                 const rendererEl = safeGetRenndererEl();
                 rendererEl.classList.add(`${COMPONENT_CLS}-emoji-popover`);
-                (container || document.body).appendChild(rendererEl);
+                ((typeof container === 'function' ? container() : container) || document.body).appendChild(rendererEl);
                 updatePosition(props.editor, rendererEl, props.items.length);
             },
             onUpdate(props) {

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Typography } from 'antd';
 import { SearchPopover, VirtualizedMenu } from '@antscorp/antsomi-ui/es/components/molecules';
 import { FontGroupTitle, PopoverTrigger } from './styled';
@@ -52,6 +52,7 @@ export const FontPopover = memo((props) => {
     const itemSize = 30;
     const itemSpacing = 4;
     const activeFontName = fontValue?.font.fontFamily.name;
+    const inputSearchRef = useRef(null);
     const [search, setSearch] = useState('');
     const [open, setOpen] = useState(false);
     const [fontItemsSize, setFontItemSize] = useDebounce(0, 200);
@@ -83,10 +84,19 @@ export const FontPopover = memo((props) => {
         const listSize = calInlineListSize(Math.min(items.length, 6), itemSize, itemSpacing);
         setFontItemSize(listSize);
     }, [items.length, setFontItemSize]);
+    useEffect(() => {
+        if (open) {
+            // Use setTimeout to ensure the popover content is fully mounted in the DOM
+            const timeoutId = setTimeout(() => {
+                inputSearchRef.current?.focus();
+            }, 0);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [open]);
     return (_jsx(SearchPopover, { open: open, placement: "bottomLeft", onOpenChange: handleOpenChange, getPopupContainer: () => bubbleMenuContainer || document.body, inputSearchProps: {
             value: search,
             onAfterChange: setSearch,
-        }, overlayClassName: "font-popover-overlay", content: _jsx("div", { className: "list-font-root", style: {
+        }, inputSearchRef: inputSearchRef, overlayClassName: "font-popover-overlay", content: _jsx("div", { className: "list-font-root", style: {
                 height: `${fontItemsSize}px`,
             }, children: _jsx(VirtualizedMenu, { itemSize: itemSize, inlinePadding: 0, itemSpacing: itemSpacing, selectable: false, items: items }) }), children: _jsx(PopoverTrigger, { className: "font-popover-trigger", children: _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: activeFontName }) }) }));
 });

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

@@ -0,0 +1,16 @@
+import { Editor } from '@tiptap/core';
+import React from 'react';
+import type { LinkFormData } from '../../types';
+export type LinkInsertFormProps = {
+    /** TipTap editor instance */
+    editor: Editor;
+    /** Form mode: insert or edit */
+    mode: 'insert' | 'edit';
+    /** Initial form data */
+    initialData: LinkFormData;
+    /** Callback when form is submitted */
+    onSubmit: () => void;
+    /** Callback when form is cancelled */
+    onCancel: () => void;
+};
+export declare const LinkInsertForm: React.FC<LinkInsertFormProps>;

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, Flex, Input } from 'antd';
+import { useState, useCallback, useRef, useEffect } from 'react';
+export const LinkInsertForm = props => {
+    const { editor, mode, initialData, onSubmit, onCancel } = props;
+    const [url, setUrl] = useState(initialData.url);
+    const [text, setText] = useState(initialData.text);
+    const [openInNewTab, setOpenInNewTab] = useState(initialData.openInNewTab);
+    const urlInputRef = useRef(null);
+    // Auto-focus the URL input without scrolling
+    useEffect(() => {
+        urlInputRef.current?.focus({
+            preventScroll: true,
+        });
+    }, []);
+    const handleSubmit = useCallback(() => {
+        if (!url.trim()) {
+            // Don't submit if URL is empty
+            return;
+        }
+        // If text is different from initial, update the content
+        if (text !== initialData.text && text.trim()) {
+            editor
+                .chain()
+                .focus()
+                .setCustomLink({
+                attrs: {
+                    href: url,
+                    target: openInNewTab ? '_blank' : null,
+                },
+                content: text,
+            })
+                .run();
+        }
+        else {
+            // Just update the link attributes
+            editor
+                .chain()
+                .focus()
+                .setCustomLink({
+                attrs: {
+                    href: url,
+                    target: openInNewTab ? '_blank' : null,
+                },
+            })
+                .run();
+        }
+        onSubmit();
+    }, [editor, url, text, initialData.text, openInNewTab, onSubmit]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            onCancel();
+        }
+    }, [handleSubmit, onCancel]);
+    return (_jsxs(Flex, { vertical: true, gap: 8, children: [_jsxs(Flex, { gap: 8, vertical: true, children: [_jsx(Input, { ref: urlInputRef, placeholder: "URL", value: url, onChange: e => setUrl(e.target.value), onKeyDown: handleKeyDown }), _jsx(Input, { placeholder: "Text", value: text, onChange: e => setText(e.target.value), onKeyDown: handleKeyDown })] }), _jsx(Checkbox, { checked: openInNewTab, onChange: e => setOpenInNewTab(e.target.checked), children: "Open in new tab" }), _jsxs(Flex, { justify: "flex-end", gap: 8, children: [_jsx(Button, { onClick: onCancel, children: "Cancel" }), _jsx(Button, { type: "primary", onClick: handleSubmit, disabled: !url.trim(), children: mode === 'insert' ? 'Insert' : 'Update' })] })] }));
+};