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

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

@@ -1,58 +1,58 @@
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { Dropdown } from 'antd';
 import styled from 'styled-components';
-export const StyledDropdownButton = styled(Dropdown.Button) `
-  &.antsomi-dropdown-button {
-    width: fit-content;
-
-    .antsomi-btn {
-      border-radius: 4px;
-    }
-
-    .antsomi-btn-compact-item:not(.antsomi-btn-compact-last-item).antsomi-btn-compact-first-item {
-      width: 24px;
-      height: 24px;
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-      padding: 0;
-      color: ${THEME.token?.bw8};
-
-      &:hover:not(:disabled, .is-active) {
-        background-color: #ebebeb;
-      }
-    }
-
-    .antsomi-btn-compact-item:not(.antsomi-btn-compact-first-item).antsomi-btn-compact-last-item {
-      width: 16px;
-      height: 24px;
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-      padding: 0;
-
-      &:hover:not(:disabled),
-      &.antsomi-dropdown-open:not(:disabled) {
-        background-color: #ebebeb;
-      }
-    }
-
-    &.is-active {
-      .antsomi-btn-compact-item:not(.antsomi-btn-compact-last-item).antsomi-btn-compact-first-item {
-        :not(:disabled) {
-          color: ${THEME.token?.colorPrimary};
-          background-color: #e0ebf7;
-
-          &:hover {
-            color: ${THEME.token?.colorPrimary};
-            background-color: #e0ebf7;
-          }
-        }
-      }
-    }
-
-    &.is-open {
-      .antsomi-btn-icon svg {
-        transform: rotate(180deg);
-      }
-    }
-  }
+export const StyledDropdownButton = styled(Dropdown.Button) `
+  &.antsomi-dropdown-button {
+    width: fit-content;
+
+    .antsomi-btn {
+      border-radius: 4px;
+    }
+
+    .antsomi-btn-compact-item:not(.antsomi-btn-compact-last-item).antsomi-btn-compact-first-item {
+      width: 24px;
+      height: 24px;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      padding: 0;
+      color: ${THEME.token?.bw8};
+
+      &:hover:not(:disabled, .is-active) {
+        background-color: #ebebeb;
+      }
+    }
+
+    .antsomi-btn-compact-item:not(.antsomi-btn-compact-first-item).antsomi-btn-compact-last-item {
+      width: 16px;
+      height: 24px;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      padding: 0;
+
+      &:hover:not(:disabled),
+      &.antsomi-dropdown-open:not(:disabled) {
+        background-color: #ebebeb;
+      }
+    }
+
+    &.is-active {
+      .antsomi-btn-compact-item:not(.antsomi-btn-compact-last-item).antsomi-btn-compact-first-item {
+        :not(:disabled) {
+          color: ${THEME.token?.colorPrimary};
+          background-color: #e0ebf7;
+
+          &:hover {
+            color: ${THEME.token?.colorPrimary};
+            background-color: #e0ebf7;
+          }
+        }
+      }
+    }
+
+    &.is-open {
+      .antsomi-btn-icon svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
 `;

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

@@ -35,15 +35,15 @@ const textAlignOptions = [
         icon: AlignJustifyIcon,
     },
 ];
-const StyledTriggerButton = styled(TextEditorButton) `
-  &.antsomi-btn.antsomi-btn-text {
-    width: 40px;
-    gap: 0;
-
-    &.is-active {
-      background-color: unset;
-    }
-  }
+const StyledTriggerButton = styled(TextEditorButton) `
+  &.antsomi-btn.antsomi-btn-text {
+    width: 40px;
+    gap: 0;
+
+    &.is-active {
+      background-color: unset;
+    }
+  }
 `;
 export const TextAlignSelect = (props) => {
     const { editor, onChange } = props;
@@ -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,90 @@
+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: config?.UndoRedo !== false ? _jsx(HistoryAction, { editor: editor }, "history") : null,
+        clearFormatting: _jsx(ClearFormattingAction, { editor: editor }, "clearFormatting"),
+    }), [
+        editor,
+        config?.FontFamily?.fonts,
+        config?.FontFamily?.fontGroupingFn,
+        config?.FontFamily?.groupOrder,
+        config?.UnorderedList?.useCustomBullet,
+        config?.UndoRedo,
+        defaultTextStyle.fontFamily,
+        defaultTextStyle.fontSize,
+        defaultTextStyle?.lineHeight,
+        linkHanlder?.onUpsert,
+        smartTagHandler?.onUpsert,
+        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,22 +2,22 @@ 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';
 import { DEFAULT_TEXT_STYLE } from '../../../constants';
-const StyledFontSizeInput = styled(FontSizeInput) `
-  &.antsomi-input-number {
-    width: 36px;
-
-    input.antsomi-input-number-input {
-      text-align: center;
-      height: 30px;
-      padding-inline: 0;
-      font-size: 12px;
-    }
-  }
+const StyledFontSizeInput = styled(FontSizeInput) `
+  &.antsomi-input-number {
+    width: 36px;
+
+    input.antsomi-input-number-input {
+      text-align: center;
+      height: 30px;
+      padding-inline: 0;
+      font-size: 12px;
+    }
+  }
 `;
 export const FontSizeAction = memo(({ editor, throttled = 100, defaultFontSize = DEFAULT_TEXT_STYLE.fontSize, }) => {
     const inputRef = useRef(null);
@@ -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