@antscorp/antsomi-ui 1.3.7-beta.3 → 1.3.7-beta.31

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 }));
 };

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

@@ -52,9 +52,7 @@ export const TextAlignSelect = (props) => {
         editor: editor,
         selector: ({ editor: editorInstance }) => {
             const alignment = ['left', 'center', 'right', 'justify'].find(alignment => editorInstance?.isActive({ textAlign: alignment }));
-            return {
-                currentAlignment: alignment || 'left',
-            };
+            return { currentAlignment: alignment };
         },
     });
     const selectedOption = useMemo(() => textAlignOptions.find(option => option.value === currentAlignment), [currentAlignment]);

package/es/components/organism/TextEditor/ui/Toolbar/{Toolbar.d.ts → FormattingToolbar.d.ts}

@@ -1,7 +1,7 @@
 import { Editor } from '@tiptap/core';
 import React from 'react';
-import { Config, FontConfig, TextEditorComponentsRender, TextStyle } from '../../types';
-export type ToolbarProps = {
+import { Config, FontConfig, TextStyle } from '../../types';
+export type FormattingToolbarProps = {
     editor: Editor;
     config?: Config;
     defaultTextStyle?: TextStyle;
@@ -11,10 +11,9 @@ export type ToolbarProps = {
     linkHanlder?: {
         onUpsert?: () => void;
     };
-    render?: Partial<Pick<TextEditorComponentsRender, 'renderLinkToolbar'>>;
     onChangeFont?: (args: {
         font: FontConfig;
         weight: number;
     }) => void;
 };
-export declare const Toolbar: (props: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormattingToolbar: (props: FormattingToolbarProps) => import("react/jsx-runtime").JSX.Element | null;

package/es/components/organism/TextEditor/ui/Toolbar/FormattingToolbar.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from 'antd';
+import { useMemo } from 'react';
+import { ToolbarWrapper } from '../../styled';
+import { BoldAction, BulletListAction, ClearFormattingAction, EmoijiAction, FontFamilyAction, FontSizeAction, HistoryAction, IndentAction, ItalicAction, LetterSpacingAction, LinkAction, OrderedListAction, OutdentAction, SmartTagAction, LineSpacingAction, StrikeAction, SubscriptAction, SuperscriptAction, TextAlignAction, TextBackColorAction, TextColorAction, TextTransformAction, UnderlineAction, } from './actions';
+import { ALL_TOOLBAR_ACTIONS, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_GROUPING } from '../../constants';
+import { useElementSize } from '@antscorp/antsomi-ui/es/hooks';
+export const FormattingToolbar = (props) => {
+    const { editor, smartTagHandler, linkHanlder, config, defaultTextStyle = DEFAULT_TEXT_STYLE, onChangeFont, } = props;
+    const [ref] = useElementSize();
+    // Determine visible actions based on config
+    const visibleActions = useMemo(() => {
+        const toolbarConfig = config?.Toolbar;
+        // If items is false, hide toolbar entirely
+        if (toolbarConfig?.items === false) {
+            return [];
+        }
+        // If items is an array, use it (user-specified order)
+        if (Array.isArray(toolbarConfig?.items)) {
+            return toolbarConfig.items;
+        }
+        // Default: show all actions except excluded ones
+        const excludeSet = new Set(toolbarConfig?.exclude || []);
+        return ALL_TOOLBAR_ACTIONS.filter(action => !excludeSet.has(action));
+    }, [config?.Toolbar]);
+    // Map action names to React components
+    const actionComponentMap = useMemo(() => ({
+        fontFamily: (_jsx(FontFamilyAction, { editor: editor, fonts: config?.FontFamily?.fonts, onChange: (font, weight) => onChangeFont?.({ font, weight }), fontGroupingFn: config?.FontFamily?.fontGroupingFn, groupOrder: config?.FontFamily?.groupOrder, defaultFontFamily: defaultTextStyle.fontFamily }, "fontFamily")),
+        fontSize: (_jsx(FontSizeAction, { editor: editor, defaultFontSize: defaultTextStyle.fontSize }, "fontSize")),
+        bold: _jsx(BoldAction, { editor: editor }, "bold"),
+        italic: _jsx(ItalicAction, { editor: editor }, "italic"),
+        underline: _jsx(UnderlineAction, { editor: editor }, "underline"),
+        link: _jsx(LinkAction, { editor: editor, onClick: linkHanlder?.onUpsert }, "link"),
+        strike: _jsx(StrikeAction, { editor: editor }, "strike"),
+        superscript: _jsx(SuperscriptAction, { editor: editor }, "superscript"),
+        subscript: _jsx(SubscriptAction, { editor: editor }, "subscript"),
+        textTransform: _jsx(TextTransformAction, { editor: editor }, "textTransform"),
+        textColor: _jsx(TextColorAction, { editor: editor }, "textColor"),
+        backgroundColor: _jsx(TextBackColorAction, { editor: editor }, "backgroundColor"),
+        emoji: _jsx(EmoijiAction, { editor: editor }, "emoji"),
+        smartTag: (_jsx(SmartTagAction, { editor: editor, onClick: smartTagHandler?.onUpsert }, "smartTag")),
+        bulletList: (_jsx(BulletListAction, { editor: editor, useCustomBullet: config?.UnorderedList?.useCustomBullet }, "bulletList")),
+        orderedList: _jsx(OrderedListAction, { editor: editor }, "orderedList"),
+        textAlign: _jsx(TextAlignAction, { editor: editor }, "textAlign"),
+        lineSpacing: (_jsx(LineSpacingAction, { editor: editor, defaultValue: defaultTextStyle?.lineHeight }, "lineSpacing")),
+        letterSpacing: _jsx(LetterSpacingAction, { editor: editor }, "letterSpacing"),
+        indent: _jsx(IndentAction, { editor: editor }, "indent"),
+        outdent: _jsx(OutdentAction, { editor: editor }, "outdent"),
+        history: _jsx(HistoryAction, { editor: editor }, "history"),
+        clearFormatting: _jsx(ClearFormattingAction, { editor: editor }, "clearFormatting"),
+    }), [
+        editor,
+        config?.FontFamily,
+        config?.UnorderedList,
+        defaultTextStyle,
+        linkHanlder,
+        smartTagHandler,
+        onChangeFont,
+    ]);
+    // Group actions into rows
+    const actionGroups = useMemo(() => {
+        if (visibleActions.length === 0) {
+            return [];
+        }
+        // Use default grouping to determine which row each action belongs to
+        const row1Actions = DEFAULT_TOOLBAR_GROUPING[0];
+        const row2Actions = DEFAULT_TOOLBAR_GROUPING[1];
+        const row1 = [];
+        const row2 = [];
+        visibleActions.forEach(action => {
+            if (row1Actions.includes(action)) {
+                row1.push(action);
+            }
+            else if (row2Actions.includes(action)) {
+                row2.push(action);
+            }
+        });
+        return [row1, row2].filter(row => row.length > 0);
+    }, [visibleActions]);
+    // If no visible actions, don't render toolbar
+    if (visibleActions.length === 0) {
+        return null;
+    }
+    return (_jsx(ToolbarWrapper, { ref: ref, vertical: true, gap: 20, children: actionGroups.map((group, groupIdx) => (_jsx(Flex, { gap: 15, justify: "flex-start", align: "center", children: group.map(actionName => actionComponentMap[actionName]) }, groupIdx))) }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/LinkPreviewToolbar.d.ts

@@ -0,0 +1,10 @@
+import { Editor } from '@tiptap/core';
+import { TextEditorComponentsRender } from '../../types';
+export type LinkPreviewToolbarProps = {
+    editor: Editor;
+    linkHanlder?: {
+        onUpsert?: () => void;
+    };
+    render?: Partial<Pick<TextEditorComponentsRender, 'renderLinkToolbar'>>;
+};
+export declare const LinkPreviewToolbar: (props: LinkPreviewToolbarProps) => import("react/jsx-runtime").JSX.Element | null;

package/es/components/organism/TextEditor/ui/Toolbar/LinkPreviewToolbar.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyDuplicateIcon, EditIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { useEditorState } from '@tiptap/react';
+import { Typography } from 'antd';
+import { ToolbarWrapper } from '../../styled';
+import { isShowLinkToolbar } from '../../utils';
+import { TextEditorButton } from '../Button';
+import { UnsetLinkAction } from './actions';
+import { CUSTOM_LINK_EXTENSION_NAME } from '../../constants';
+export const LinkPreviewToolbar = (props) => {
+    const { editor, linkHanlder, render } = props;
+    const { showLinkMenu, linkAttrs } = useEditorState({
+        editor,
+        selector: ctx => ({
+            showLinkMenu: isShowLinkToolbar(ctx.editor.state),
+            linkAttrs: editor.getAttributes(CUSTOM_LINK_EXTENSION_NAME),
+        }),
+    });
+    if (!showLinkMenu) {
+        return null;
+    }
+    const href = String(linkAttrs?.href);
+    const goToLinkEl = (_jsx(Typography.Link, { style: { maxWidth: 150 }, ellipsis: true, href: href, children: href }));
+    const copyLinkEl = (_jsx(TextEditorButton, { icon: _jsx(CopyDuplicateIcon, { size: 18 }), tooltipProps: { title: 'Copy' }, onClick: () => {
+            navigator.clipboard.writeText(href);
+        } }));
+    const editLinkEl = (_jsx(TextEditorButton, { icon: _jsx(EditIcon, { size: 18 }), tooltipProps: { title: 'Edit' }, onClick: () => linkHanlder?.onUpsert?.() }));
+    const unsetLinkEl = _jsx(UnsetLinkAction, { editor: editor });
+    let linkTools = (_jsxs(_Fragment, { children: [goToLinkEl, copyLinkEl, editLinkEl, unsetLinkEl] }));
+    if (render?.renderLinkToolbar && linkAttrs) {
+        linkTools = render.renderLinkToolbar(linkAttrs, linkTools, {
+            copy: copyLinkEl,
+            edit: editLinkEl,
+            gotoLink: goToLinkEl,
+            unlink: unsetLinkEl,
+        });
+    }
+    return (_jsx(ToolbarWrapper, { wrap: "wrap", gap: 8, align: "center", children: linkTools }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/actions/EmojiAction.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { EmojiSmileIcon } from '@antscorp/antsomi-ui/es/components/icons';
-import { EMOJI_COLLECTIONS, EmojiPopover } from '@antscorp/antsomi-ui/es/components/molecules';
+import { EMOJI_COLLECTIONS } from '@antscorp/antsomi-ui/es/components/molecules/TagifyInput';
+import { EmojiPopover } from '@antscorp/antsomi-ui/es/components/molecules/EmojiPopover';
 import { TextEditorButton } from '../../Button';
 import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
 import { useTextEditorStore } from '../../../provider';
@@ -16,7 +17,7 @@ export const EmoijiAction = ({ editor }) => {
         }),
     });
     const getPopupContainer = useCallback(() => bubbleMenuContainer || document.body, [bubbleMenuContainer]);
-    return (_jsx(EmojiPopover, { collections: [
+    return (_jsx(EmojiPopover, { isForceHide: true, collections: [
             {
                 key: EMOJI_COLLECTIONS.COMMON,
                 label: _jsx(EmojiSmileIcon, {}),
@@ -25,7 +26,7 @@ export const EmoijiAction = ({ editor }) => {
             if (typeof emoji !== 'string')
                 return;
             editor?.chain().insertEmoji(emoji);
-        }, getPopupContainer: getPopupContainer, children: _jsx(TextEditorButton, { disabled: disabled, tooltipProps: {
+        }, getPopupContainer: getPopupContainer, destroyTooltipOnHide: true, children: _jsx(TextEditorButton, { disabled: disabled, tooltipProps: {
                 title: TOOLTIPS.EMOJI.TITLE,
             }, icon: _jsx(EmojiSmileIcon, { size: 18 }) }) }));
 };

package/es/components/organism/TextEditor/ui/Toolbar/actions/FontFamilyAction.d.ts

@@ -14,5 +14,6 @@ export interface FontFamilyActionProps {
     groupOrder?: string[] | GroupOrderFunction;
     /** Callback when font selection changes */
     onChange?: (font: FontConfig, weight: number) => void;
+    defaultFontFamily?: string;
 }
 export declare const FontFamilyAction: (props: FontFamilyActionProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/TextEditor/ui/Toolbar/actions/FontFamilyAction.js

@@ -5,7 +5,7 @@ import { getPrimaryFontFamily } from '@antscorp/antsomi-ui/es/utils';
 import { useEditorState } from '@tiptap/react';
 import { useCallback, useEffect, useRef } from 'react';
 export const FontFamilyAction = (props) => {
-    const { editor, fonts = DEFAULT_FONT_CONFIGS, onChange, fontGroupingFn, groupOrder } = props;
+    const { editor, fonts = DEFAULT_FONT_CONFIGS, onChange, fontGroupingFn, groupOrder, defaultFontFamily, } = props;
     const onChangeRef = useRef();
     useEffect(() => {
         onChangeRef.current = onChange;
@@ -15,7 +15,7 @@ export const FontFamilyAction = (props) => {
         selector: ({ editor: editorInstance }) => {
             const { fontWeight, fontFamily } = editorInstance.getAttributes('textStyle') || {};
             return {
-                fontValue: getPrimaryFontFamily(fontFamily),
+                fontValue: getPrimaryFontFamily(fontFamily || defaultFontFamily),
                 fontWeight: Number(fontWeight),
             };
         },

package/es/components/organism/TextEditor/ui/Toolbar/actions/FontSizeAction.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useTextEditorStore } from '../../../provider';
 import { FontSizeInput, } from '@antscorp/antsomi-ui/es/components/molecules';
 import styled from 'styled-components';
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useThrottledCallback } from 'use-debounce';
 import { useEditorState } from '@tiptap/react';
 import { toString } from 'lodash';
@@ -30,6 +30,11 @@ export const FontSizeAction = memo(({ editor, throttled = 100, defaultFontSize =
         },
     });
     const [currentFontSize, setCurrentFontSize] = useState(numberFontSize);
+    useEffect(() => {
+        if (numberFontSize) {
+            setCurrentFontSize(numberFontSize);
+        }
+    }, [numberFontSize]);
     const updateEditorFontSize = useThrottledCallback((v) => {
         if (v === numberFontSize)
             return;

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

@@ -1 +1,2 @@
-export { Toolbar, type ToolbarProps } from './Toolbar';
+export { LinkPreviewToolbar, type LinkPreviewToolbarProps } from './LinkPreviewToolbar';
+export { FormattingToolbar, type FormattingToolbarProps } from './FormattingToolbar';

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

@@ -1 +1,2 @@
-export { Toolbar } from './Toolbar';
+export { LinkPreviewToolbar } from './LinkPreviewToolbar';
+export { FormattingToolbar } from './FormattingToolbar';

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

@@ -57,3 +57,17 @@ export declare class DocumentStateTracker {
     reset(): void;
 }
 export declare function isEntireParagraphSelected(editor: Editor): boolean;
+/**
+ * Helper function to extract text from atom nodes (emoji, smartTag)
+ * Used as leafText callback for doc.textBetween()
+ */
+export declare const getTextFromAtomNode: (node: ProseMirrorNode) => string;
+/**
+ * Wrapper for doc.textBetween that automatically handles atom nodes (emoji, smartTag)
+ * @param state EditorState
+ * @param from Start position
+ * @param to End position
+ * @param blockSeparator Optional separator between blocks (default: '')
+ * @returns Text content including atom nodes
+ */
+export declare const textBetween: (state: EditorState, from: number, to: number, blockSeparator?: string) => string;

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

@@ -1,3 +1,4 @@
+import { LIST_EMOJI } from '../extensions/Emoji';
 /**
  * Default configuration for document state detection
  */
@@ -122,3 +123,27 @@ export function isEntireParagraphSelected(editor) {
     // Kiểm tra xem selection có bao phủ toàn bộ nội dung của paragraph không
     return from === paragraphStart && to === paragraphEnd;
 }
+/**
+ * Helper function to extract text from atom nodes (emoji, smartTag)
+ * Used as leafText callback for doc.textBetween()
+ */
+export const getTextFromAtomNode = (node) => {
+    if (node.type.name === 'emoji') {
+        // Find emoji character from name
+        const emojiChar = LIST_EMOJI.find(i => i.name === node.attrs.name)?.emoji;
+        return emojiChar || node.attrs.name || '*';
+    }
+    if (node.type.name === 'smartTag') {
+        return node.attrs.content || '*';
+    }
+    return '*';
+};
+/**
+ * Wrapper for doc.textBetween that automatically handles atom nodes (emoji, smartTag)
+ * @param state EditorState
+ * @param from Start position
+ * @param to End position
+ * @param blockSeparator Optional separator between blocks (default: '')
+ * @returns Text content including atom nodes
+ */
+export const textBetween = (state, from, to, blockSeparator = '') => state.doc.textBetween(from, to, blockSeparator, getTextFromAtomNode);

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

@@ -237,6 +237,64 @@ export function cleanLineBreaks(html) {
         return html;
     }
 }
+/**
+ * Swaps the structure when a dynamic tag contains only a single link.
+ * Changes from: <span data-dynamic><a>text</a></span>
+ * To: <a><span data-dynamic>text</span></a>
+ *
+ * @param html - HTML string to process
+ * @returns Processed HTML string with swapped structure
+ */
+function swapDynamicTagWithLink(html) {
+    try {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        // Find all dynamic tag spans
+        const dynamicSpans = doc.querySelectorAll('span[data-dynamic="true"]');
+        dynamicSpans.forEach(dynamicSpan => {
+            // Get all child nodes (elements and text nodes)
+            const childNodes = Array.from(dynamicSpan.childNodes);
+            // Filter out empty text nodes (whitespace only)
+            const nonEmptyNodes = childNodes.filter(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    return node.textContent?.trim() !== '';
+                }
+                return true;
+            });
+            // Check if there's exactly one child and it's an <a> element
+            if (nonEmptyNodes.length === 1 && nonEmptyNodes[0].nodeType === Node.ELEMENT_NODE) {
+                const childElement = nonEmptyNodes[0];
+                if (childElement instanceof HTMLElement && childElement.tagName.toLowerCase() === 'a') {
+                    const linkElement = childElement;
+                    // Create new span with dynamic attributes
+                    const newSpan = doc.createElement('span');
+                    // Copy all attributes from original dynamic span
+                    Array.from(dynamicSpan.attributes).forEach(attr => {
+                        newSpan.setAttribute(attr.name, attr.value);
+                    });
+                    // Set the text content from the link
+                    newSpan.textContent = linkElement.textContent;
+                    // Create new link element
+                    const newLink = doc.createElement('a');
+                    // Copy all attributes from original link
+                    Array.from(linkElement.attributes).forEach(attr => {
+                        newLink.setAttribute(attr.name, attr.value);
+                    });
+                    // Put span inside link
+                    newLink.appendChild(newSpan);
+                    // Replace original dynamic span with the new link
+                    dynamicSpan.replaceWith(newLink);
+                }
+            }
+        });
+        return doc.body.innerHTML;
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error swapping dynamic tag with link:', error);
+        return html; // Return original HTML in case of error
+    }
+}
 /**
  * Safely parses and processes HTML content for editor use
  * @param html - HTML string to process
@@ -260,6 +318,8 @@ export function safeParseHTMLContent(params) {
             defaultStyle,
         });
     }
+    // Swap dynamic tag structure when it contains only a link
+    resultHTML = swapDynamicTagWithLink(resultHTML);
     // console.log('after safeParseHTMLContent', resultHTML);
     return resultHTML;
 }

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

@@ -78,7 +78,7 @@ export declare const getActiveLinkAttrsFromRange: (params: {
     readonly inactiveLinks: import("../types").LinkAttrs[];
 } | undefined;
 /**
- * Extends selection to include full link marks
+ * Extends selection to include full link marks and adjacent links with same href
  * @param state EditorState
  * @param from Start position
  * @param to End position
@@ -93,6 +93,15 @@ export declare const extendSelectionToFullLinks: (state: EditorState, from: numb
     to: number;
     linkAttrs: import("../types").LinkAttrs;
 };
+/**
+ * Gets all full link groups in the document (adjacent links with same href are grouped)
+ * @param state EditorState
+ * @returns Array of link groups with attrs and content
+ */
+export declare const getAllFullLinkGroups: (state: EditorState) => {
+    attrs: LinkMarkRange['mark']['attrs'];
+    content: string;
+}[];
 /**
  * Handles link actions (create or edit)
  * @param view EditorView instance