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

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/Button/Button.js

@@ -4,28 +4,28 @@ import clsx from 'clsx';
 import styled from 'styled-components';
 import { forwardRef } from 'react';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-const StyledButton = styled(Button) `
-  &.antsomi-btn.antsomi-btn-text {
-    height: 24px;
-    width: 24px;
-    padding: 0;
-    flex-shrink: 0;
-    border-radius: 2px;
-    color: ${THEME.token?.bw8};
-
-    &.is-active {
-      color: ${THEME.token?.colorPrimary};
-      background-color: #e0ebf7;
-
-      &:hover {
-        background-color: #e0ebf7;
-      }
-    }
-
-    &:hover:not(:disabled, .is-active) {
-      color: ${THEME.token?.colorPrimary};
-    }
-  }
+const StyledButton = styled(Button) `
+  &.antsomi-btn.antsomi-btn-text {
+    height: 24px;
+    width: 24px;
+    padding: 0;
+    flex-shrink: 0;
+    border-radius: 2px;
+    color: ${THEME.token?.bw8};
+
+    &.is-active {
+      color: ${THEME.token?.colorPrimary};
+      background-color: #e0ebf7;
+
+      &:hover {
+        background-color: #e0ebf7;
+      }
+    }
+
+    &:hover:not(:disabled, .is-active) {
+      color: ${THEME.token?.colorPrimary};
+    }
+  }
 `;
 export const TextEditorButton = forwardRef((props, ref) => {
     const { children, isActive, tooltipProps, className, disabled, ...restProps } = props;

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

@@ -5,19 +5,19 @@ import { TextEditorButton } from '../Button';
 import { ArrowDropDownIcon } from '@antscorp/antsomi-ui/es/components/icons';
 import styled from 'styled-components';
 import clsx from 'clsx';
-const StyledTriggerButton = styled(TextEditorButton) `
-  &.antsomi-dropdown-trigger.antsomi-btn {
-    gap: 0;
-    padding: 0;
-    width: 40px;
-    height: 24px;
-  }
-
-  &.is-open {
-    svg.icon-dropdown {
-      transform: rotate(180deg);
-    }
-  }
+const StyledTriggerButton = styled(TextEditorButton) `
+  &.antsomi-dropdown-trigger.antsomi-btn {
+    gap: 0;
+    padding: 0;
+    width: 40px;
+    height: 24px;
+  }
+
+  &.is-open {
+    svg.icon-dropdown {
+      transform: rotate(180deg);
+    }
+  }
 `;
 export const DropdownButton = (props) => {
     const { className, children, disabled, tooltipProps, options = [], value, onClickOption } = props;

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/FontPopover/styled.js

@@ -1,36 +1,36 @@
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-export const PopoverTrigger = styled.div `
-  &.font-popover-trigger {
-    width: 100px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    padding: 0 7px;
-    cursor: pointer;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: ${THEME.token?.fontSize || 12}px;
-    border-bottom: 1px solid ${THEME.token?.blue1};
-    flex-shrink: 0;
-
-    &:hover {
-      background-color: ${THEME.token?.blue};
-    }
-  }
+export const PopoverTrigger = styled.div `
+  &.font-popover-trigger {
+    width: 100px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    padding: 0 7px;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: ${THEME.token?.fontSize || 12}px;
+    border-bottom: 1px solid ${THEME.token?.blue1};
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: ${THEME.token?.blue};
+    }
+  }
 `;
-export const FontGroupTitle = styled.div `
-  color: ${THEME.token?.bw8};
-  display: flex;
-  align-items: center;
-  font-size: 11px;
-
-  &.font-popover-item {
-    cursor: default;
-
-    &:hover {
-      background-color: white;
-    }
-  }
+export const FontGroupTitle = styled.div `
+  color: ${THEME.token?.bw8};
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+
+  &.font-popover-item {
+    cursor: default;
+
+    &:hover {
+      background-color: white;
+    }
+  }
 `;

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' })] })] }));
+};

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

@@ -0,0 +1,2 @@
+export { LinkInsertForm } from './LinkInsertForm';
+export type { LinkInsertFormProps } from './LinkInsertForm';

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

@@ -0,0 +1 @@
+export { LinkInsertForm } from './LinkInsertForm';

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

@@ -0,0 +1,9 @@
+import { Editor } from '@tiptap/react';
+import React from 'react';
+export type LinkPopoverProps = {
+    /** TipTap editor instance */
+    editor: Editor;
+    /** Optional container to append the popover to. Defaults to document.body */
+    container?: HTMLElement | (() => HTMLElement);
+};
+export declare const LinkPopover: React.FC<LinkPopoverProps>;

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { posToDOMRect } from '@tiptap/react';
+import { useEffect, useRef, useCallback, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { computePosition, flip, shift, offset } from '@floating-ui/dom';
+import { useTextEditorStore } from '../../provider';
+import { LinkInsertForm } from '../LinkInsertForm';
+import { COMPONENT_CLS } from '../../constants';
+const updatePosition = (editor, element) => {
+    const virtualElement = {
+        getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
+    };
+    computePosition(virtualElement, element, {
+        placement: 'bottom-start',
+        strategy: 'fixed',
+        middleware: [offset(10), shift(), flip()],
+    }).then(({ x, y, strategy }) => {
+        element.style.position = strategy;
+        element.style.left = `${x}px`;
+        element.style.top = `${y}px`;
+    });
+};
+export const LinkPopover = props => {
+    const { editor, container } = props;
+    const popoverRef = useRef(null);
+    const savedSelectionRef = useRef(null);
+    // Get link form state and actions from store
+    const linkFormState = useTextEditorStore(state => state.linkFormState);
+    const hideLinkForm = useTextEditorStore(state => state.hideLinkForm);
+    const isVisible = linkFormState?.isVisible ?? false;
+    // Save initial selection when form becomes visible
+    useEffect(() => {
+        if (isVisible) {
+            savedSelectionRef.current = {
+                from: editor.state.selection.from,
+                to: editor.state.selection.to,
+            };
+        }
+        else {
+            savedSelectionRef.current = null;
+        }
+    }, [editor, isVisible]);
+    // Update position whenever editor state changes or form becomes visible
+    useLayoutEffect(() => {
+        if (!isVisible || !popoverRef.current)
+            return;
+        updatePosition(editor, popoverRef.current);
+    }, [editor, isVisible, linkFormState]);
+    // Effect 1: Close on selection change (only if selection actually changed from saved)
+    useEffect(() => {
+        if (!isVisible || !savedSelectionRef.current)
+            return;
+        const handleSelectionUpdate = () => {
+            const currentSelection = editor.state.selection;
+            const savedSelection = savedSelectionRef.current;
+            // Only close if selection moved to a different position
+            if (savedSelection &&
+                (currentSelection.from !== savedSelection.from || currentSelection.to !== savedSelection.to)) {
+                hideLinkForm();
+                // Editor already has focus when selection changes, no need to refocus
+            }
+        };
+        editor.on('selectionUpdate', handleSelectionUpdate);
+        return () => {
+            editor.off('selectionUpdate', handleSelectionUpdate);
+        };
+    }, [editor, isVisible, hideLinkForm]);
+    // Effect 2: Close on click outside
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        const handleClickOutside = (event) => {
+            if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+                hideLinkForm();
+                // Check if click was on the editor
+                const editorElement = editor.view.dom;
+                const clickedOnEditor = editorElement.contains(event.target);
+                // If not clicked on editor, focus it after closing
+                if (!clickedOnEditor) {
+                    setTimeout(() => {
+                        editor.commands.focus();
+                    }, 0);
+                }
+                // If clicked on editor, it will auto-focus naturally
+            }
+        };
+        // Use mousedown to catch the event before it propagates
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [editor, isVisible, hideLinkForm]);
+    // Handle form submission
+    const handleSubmit = useCallback(() => {
+        hideLinkForm();
+        // Focus back to editor after closing form
+        setTimeout(() => {
+            editor.commands.focus();
+        }, 0);
+    }, [editor, hideLinkForm]);
+    // Handle form cancellation (also handles Escape key via LinkInsertForm)
+    const handleCancel = useCallback(() => {
+        hideLinkForm();
+        // Focus back to editor after closing form
+        setTimeout(() => {
+            editor.commands.focus();
+        }, 0);
+    }, [editor, hideLinkForm]);
+    // Don't render if not visible or no form state
+    if (!isVisible || !linkFormState) {
+        return null;
+    }
+    const popoverElement = (_jsx("div", { ref: popoverRef, className: `${COMPONENT_CLS}-link-popover`, style: {
+            position: 'absolute',
+            zIndex: 1000,
+            background: '#fff',
+            border: '1px solid #d9d9d9',
+            borderRadius: '8px',
+            padding: '16px',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+            minWidth: '300px',
+        }, children: _jsx(LinkInsertForm, { editor: editor, mode: linkFormState.mode, initialData: linkFormState.data, onSubmit: handleSubmit, onCancel: handleCancel }) }));
+    // Use portal to render into container or document.body
+    const containerElement = (typeof container === 'function' ? container() : container) || document.body;
+    return createPortal(popoverElement, containerElement);
+};

package/es/components/organism/TextEditor/ui/LinkPopover/index.d.ts

@@ -0,0 +1,2 @@
+export { LinkPopover } from './LinkPopover';
+export type { LinkPopoverProps } from './LinkPopover';

package/es/components/organism/TextEditor/ui/LinkPopover/index.js

@@ -0,0 +1 @@
+export { LinkPopover } from './LinkPopover';

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

@@ -5,5 +5,5 @@ import { useCallback } from 'react';
 export const TextEditorPopover = ({ children, ...restProps }) => {
     const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
     const getPopupContainer = useCallback(() => bubbleMenuContainer || document.body, [bubbleMenuContainer]);
-    return (_jsx(Popover, { trigger: ['click'], ...restProps, getPopupContainer: getPopupContainer, children: children }));
+    return (_jsx(Popover, { destroyTooltipOnHide: true, trigger: ['click'], ...restProps, getPopupContainer: getPopupContainer, children: children }));
 };