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

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

@@ -28,13 +28,14 @@ import { SmartTag } from './extensions/SmartTag';
 import { TextTransform } from './extensions/TextTransform';
 import { CustomUnorderedList } from './extensions/UnorderedList';
 import { ClearFormatting } from './extensions/ClearFormatting';
-import { useTextEditorStore } from './provider';
+import { TextEditorProvider, useTextEditorStore } from './provider';
 import { StyledEditorContent } from './styled';
+import { isSmartTagNode, } from './types';
 import { emojiSuggestion } from './ui/Emoji';
 import { Toolbar } from './ui/Toolbar';
-import { analyzeFont, defaultShouldShowBubbleMenu, handleLinkAction, handleSmartTagAction, isShowLinkToolbar, safeParseHTMLContent, htmlSerializerForOutput, } from './utils';
+import { analyzeFont, defaultShouldShowBubbleMenu, getAllFullLinkGroups, handleLinkAction, handleSmartTagAction, isShowLinkToolbar, safeParseHTMLContent, htmlSerializerForOutput, } from './utils';
 import { BubbleMenu } from './ui/BubbleMenu';
-export const TextEditor = memo(forwardRef((props, ref) => {
+const TextEditorInternal = memo(forwardRef((props, ref) => {
     const { id, className, config, editable = true, initialContent = '', dataAttributes, onUpdateDebounced = 400, defaultTextStyle: defaultTextStyleProp, linkHandler: outerLinkHandler, smartTagHandler: outerSmartTagHandler, bubbleMenuProps, style, render, onUpdate, onFocus, onChangeFont, } = props;
     const isShowBubbleMenu = useTextEditorStore(state => state.isShowBubbleMenu);
     const setBubbleMenuContainer = useTextEditorStore(state => state.setBubbleMenuContainer);
@@ -203,6 +204,23 @@ export const TextEditor = memo(forwardRef((props, ref) => {
             editor?.chain().blur().setTextSelection({ from: 0, to: 0 }).run();
         }
     }, [editor]);
+    const handleEachLinkGroup = useCallback(callback => {
+        if (!editor)
+            return;
+        const linkGroups = getAllFullLinkGroups(editor.state);
+        linkGroups.forEach(callback);
+    }, [editor]);
+    const handleEachSmartag = useCallback(callback => {
+        if (!editor)
+            return;
+        const { state } = editor;
+        const { doc } = state;
+        doc.descendants(node => {
+            if (isSmartTagNode(node)) {
+                callback(node.attrs);
+            }
+        });
+    }, [editor]);
     const handleBubbleMenuRef = useCallback((htmlElement) => {
         setBubbleMenuContainer(htmlElement);
     }, [setBubbleMenuContainer]);
@@ -226,6 +244,8 @@ export const TextEditor = memo(forwardRef((props, ref) => {
             })
                 .run();
         },
+        eachLinkGroup: handleEachLinkGroup,
+        eachSmartag: handleEachSmartag,
         setSmartTag: handleSetSmartTag,
         deleteSmartTag: handleDeleteSmartTag,
         updateSmartTagAttrs: handleUpdateSmartTagAttrs,
@@ -256,3 +276,56 @@ export const TextEditor = memo(forwardRef((props, ref) => {
                         });
                     } })) })] }));
 }));
+TextEditorInternal.displayName = 'TextEditorInternal';
+const TextEditorWithProvider = forwardRef((props, ref) => {
+    const { onChangeColors, ...editorProps } = props;
+    const providerRef = useRef(null);
+    const editorRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        // Forward TextEditorRef methods - accessed at call time
+        get style() {
+            return editorRef.current?.style;
+        },
+        get editor() {
+            return editorRef.current?.editor ?? null;
+        },
+        get setLink() {
+            return editorRef.current.setLink;
+        },
+        get deleteLink() {
+            return editorRef.current.deleteLink;
+        },
+        get updateLinkAttrs() {
+            return editorRef.current.updateLinkAttrs;
+        },
+        get updateLinkText() {
+            return editorRef.current.updateLinkText;
+        },
+        get eachLinkGroup() {
+            return editorRef.current.eachLinkGroup;
+        },
+        get eachSmartag() {
+            return editorRef.current.eachSmartag;
+        },
+        get setSmartTag() {
+            return editorRef.current.setSmartTag;
+        },
+        get deleteSmartTag() {
+            return editorRef.current.deleteSmartTag;
+        },
+        get updateSmartTagAttrs() {
+            return editorRef.current.updateSmartTagAttrs;
+        },
+        get blur() {
+            return editorRef.current.blur;
+        },
+        // Forward TextEditorProviderRefHandler methods
+        updateColors: colors => providerRef.current?.updateColors?.(colors),
+    }), []);
+    return (_jsx(TextEditorProvider, { ref: providerRef, onChangeColors: onChangeColors, children: _jsx(TextEditorInternal, { ...editorProps, ref: editorRef }) }));
+});
+TextEditorWithProvider.displayName = 'TextEditorWithProvider';
+export const TextEditor = Object.assign(TextEditorWithProvider, {
+    Provider: TextEditorProvider,
+    Internal: TextEditorInternal,
+});

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

@@ -2,6 +2,7 @@ import { arrow, autoPlacement, computePosition, flip, hide, inline, offset, shif
 import { isTextSelection, posToDOMRect } from '@tiptap/core';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
 import { CellSelection } from '@tiptap/pm/tables';
+import { textBetween } from '../../utils';
 function combineDOMRects(rect1, rect2) {
     const top = Math.min(rect1.top, rect2.top);
     const bottom = Math.max(rect1.bottom, rect2.bottom);
@@ -76,12 +77,12 @@ export class BubbleMenuView {
             onDestroy: undefined,
         };
         this.shouldShow = ({ view, state, from, to, }) => {
-            const { doc, selection } = state;
+            const { selection } = state;
             const { empty } = selection;
             // Sometime check for `empty` is not enough.
             // Doubleclick an empty paragraph returns a node size of 2.
             // So we check also for an empty text size.
-            const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
+            const isEmptyTextBlock = !textBetween(state, from, to).length && isTextSelection(state.selection);
             // When clicking on a element inside the bubble menu the editor "blur" event
             // is called and the bubble menu item is focussed. In this case we should
             // consider the menu as part of the editor and keep showing the menu

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

@@ -3,7 +3,7 @@ import { CUSTOM_LINK_EXTENSION_NAME, LINK_TEXT_COLOR } from '../constants';
 import { TextSelection } from '@tiptap/pm/state';
 import { dataAttrArrayToObject } from '@antscorp/antsomi-ui/es/utils';
 import { isEmpty, isEqual, map, toString } from 'lodash';
-import { getLinkMarkRanges, getLinkRange, isLinkColor } from '../utils';
+import { getLinkMarkRanges, getLinkRange, isLinkColor, textBetween } from '../utils';
 import { mergeAdjacentRanges } from '../utils/shared';
 export const CustomLink = TiptapLinkExtension.extend({
     name: CUSTOM_LINK_EXTENSION_NAME,
@@ -40,7 +40,7 @@ export const CustomLink = TiptapLinkExtension.extend({
             setCustomLink: ({ attrs, content }) => ({ state, chain }) => {
                 const { selection } = state;
                 const { from, to } = selection;
-                let linkContent = state.doc.textBetween(from, to);
+                let linkContent = textBetween(state, from, to);
                 if (content && linkContent !== content) {
                     linkContent = content;
                 }
@@ -146,7 +146,7 @@ export const CustomLink = TiptapLinkExtension.extend({
                     to: state.doc.content.size,
                 }).filter(range => predicate(range.mark.attrs));
                 mergeAdjacentRanges(linkMarkRanges, (existingRanges, candidateRange) => existingRanges.some(range => mergeAdjacentEqualFn(range.mark.attrs, candidateRange.mark.attrs))).forEach(range => {
-                    const currentText = state.doc.textBetween(range.from, range.to);
+                    const currentText = textBetween(state, range.from, range.to);
                     const updatedText = updated(currentText);
                     if (currentText === updatedText)
                         return;

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

@@ -1,11 +1,5 @@
 import { Node } from '@tiptap/core';
 import { Attrs } from '@tiptap/pm/model';
-export type SmartTagAttrs = {
-    id: string;
-} & Partial<{
-    content: string;
-    tag: string;
-}>;
 /**
  * Represents the options for the SmartTag node.
  */

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

@@ -58,8 +58,9 @@ export const SmartTag = Node.create({
         return {
             setSmartTag: attrs => ({ chain, state }) => {
                 const { selection, storedMarks } = state;
-                const { $from } = selection;
-                const marks = storedMarks || $from.marks();
+                const { $from, from, to } = selection;
+                // Get marks from inside the selection to capture boundary marks
+                const marks = storedMarks || (from !== to ? state.doc.resolve(from + 1).marks() : $from.marks());
                 const smartTagNode = this.type.create(attrs);
                 const nodeWithMarks = marks.length > 0 ? smartTagNode.mark(marks) : smartTagNode;
                 return chain()

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

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
+import { textBetween } from '../utils';
 export function useMarkTracking(editor, options = {}) {
     const { maxSnapshots = 10, excludeMarks = ['link', 'smartTag'], debounceDelay = 500, autoCapture = true, } = options;
     const [snapshots, setSnapshots] = useState([]);
@@ -14,7 +15,7 @@ export function useMarkTracking(editor, options = {}) {
             marks,
             position: $from.pos,
             timestamp: Date.now(),
-            textContent: editor.state.doc.textBetween(Math.max(0, $from.pos - 50), Math.min(editor.state.doc.content.size, $from.pos + 50)),
+            textContent: textBetween(editor.state, Math.max(0, $from.pos - 50), Math.min(editor.state.doc.content.size, $from.pos + 50)),
         };
         setSnapshots(prev => {
             const updated = [snapshot, ...prev];

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

@@ -1,14 +1,15 @@
 /// <reference types="react" />
 import { JSONContent } from '@tiptap/core';
-export type { TextEditorProps, TextEditorRef, TextEditorComponentsRender, LinkAttrs, FontConfig, } from './types';
+export type { TextEditorProps, TextEditorAllProps, TextEditorRef, TextEditorWithProviderRef, TextEditorComponentsRender, LinkAttrs, FontConfig, } from './types';
 export { isLinkMark, isLinkMarkRange } from './types';
 export { CUSTOM_LINK_EXTENSION_NAME } from './constants';
 export type { JSONContent as TextEditorJSONContent };
 export { TextEditorProvider, type TextEditorProviderProps, type TextEditorProviderRefHandler, } from './provider';
-export declare const TextEditor: import("react").NamedExoticComponent<Omit<import("./types").TextEditorProps & import("react").RefAttributes<import("./types").TextEditorRef>, "ref"> & {
-    ref?: ((instance: import("./types").TextEditorRef | null) => void) | import("react").RefObject<import("./types").TextEditorRef> | null | undefined;
-}> & {
-    readonly type: import("react").ForwardRefExoticComponent<import("./types").TextEditorProps & import("react").RefAttributes<import("./types").TextEditorRef>>;
+export declare const TextEditor: import("react").ForwardRefExoticComponent<import("./types").TextEditorProps & {
+    onChangeColors?: ((colors: string[]) => void) | undefined;
+} & import("react").RefAttributes<import("./types").TextEditorWithProviderRef>> & {
+    Provider: import("react").ForwardRefExoticComponent<import("./provider").TextEditorProviderProps & import("react").RefAttributes<import("./provider").TextEditorProviderRefHandler>>;
+    Internal: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./types").TextEditorProps & import("react").RefAttributes<import("./types").TextEditorRef>>>;
 } & {
     Utils: {
         htmlMinifyForEmail: (htmlEditorContent: string) => string;

package/es/components/organism/TextEditor/stories/WithOldDynAndLink/settings.json

@@ -0,0 +1,95 @@
+{
+  "rawHTML": "<div class=\"fr-element fr-view\" dir=\"auto\" contenteditable=\"true\" aria-disabled=\"false\" spellcheck=\"true\"><p><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px; color: #000000;\"><a data-link-id=\"j24jwuk2\" target=\"_blank\" href=\"https://ant.design/components/modal\"><span data-dynamic=\"true\" data-dynamic-id=\"i6fapgk6\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\">Last modified by</span></a> Special <a data-link-id=\"rrd48wh5\" target=\"_blank\" href=\"https://ant.design\">Bonus <span data-dynamic=\"true\" data-dynamic-id=\"4ip5g3w4\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\">Created date</span> Has</a> Been <span data-dynamic=\"true\" data-dynamic-id=\"vd3tmfc3\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\"><a data-link-id=\"ir1h7e67\" target=\"_blank\" href=\"https://fireup.pro/news/goodbye-useeffect-exploring-use-in-react-19?ref=dailydev\">Name</a></span>&nbsp;Special <a data-link-id=\"rrd48wh5\" href=\"https://ant.design\" target=\"_blank\" id=\"isPasted\">Bonus</a>&nbsp;fasdfas&nbsp; sdfadf</span></p></div>",
+  "dynamic": {
+    "data": {
+      "4ip5g3w4": {
+        "type": "visitor-attribute",
+        "attribute": {
+          "label": "Created date",
+          "value": "date_created",
+          "status": 1,
+          "dataType": "datetime",
+          "disabled": false,
+          "datetimeFormatSettings": {
+            "type": "datetime",
+            "language": "en",
+            "hasDateFormat": true,
+            "hasTimeFormat": true,
+            "dateParseFormat": "MM/DD/YYYY",
+            "dateParseOption": "medium",
+            "timeParseFormat": "12hour",
+            "timeParseOption": "medium",
+            "dateFormatString": "MMM DD, YYYY h:mm:ss A"
+          }
+        },
+        "mappingKey": "lg5pk39o2qmxyc7oano5-4ip5g3w4",
+        "mappingFields": "visitor.date_created"
+      },
+      "i6fapgk6": {
+        "type": "event-attribute",
+        "event": "226539:17",
+        "source": [556657814],
+        "attribute": {
+          "type": 1,
+          "label": "Last modified by",
+          "value": "ad_zone.u_user_id",
+          "status": 1,
+          "children": [],
+          "dataType": "number",
+          "itemTypeId": -1013,
+          "itemTypeName": "ad_zone",
+          "propertyName": "u_user_id",
+          "eventPropertySyntax": "dims.ad_zone_id",
+          "numberFormatSettings": {
+            "type": "number",
+            "decimal": ".",
+            "grouping": ",",
+            "isCompact": false,
+            "prefixType": "code",
+            "currencyCode": "USD",
+            "decimalPlaces": 2
+          }
+        },
+        "mappingKey": "lg5pk39o2qmxyc7oano5-i6fapgk6",
+        "mappingFields": "event.ad_zone.u_user_id"
+      },
+      "vd3tmfc3": {
+        "type": "customer-attribute",
+        "attribute": {
+          "label": "Name",
+          "value": "name",
+          "status": 1,
+          "dataType": "string",
+          "disabled": false
+        },
+        "mappingKey": "lg5pk39o2qmxyc7oano5-vd3tmfc3",
+        "mappingFields": "customer.name"
+      }
+    },
+    "highlight": true,
+    "selectedId": ""
+  },
+  "link": {
+    "data": {
+      "ir1h7e67": {
+        "url": "https://fireup.pro/news/goodbye-useeffect-exploring-use-in-react-19?ref=dailydev",
+        "text": "Name",
+        "linkType": "static",
+        "openNewTab": true
+      },
+      "j24jwuk2": {
+        "url": "https://ant.design/components/modal",
+        "text": "Your",
+        "linkType": "static",
+        "openNewTab": true
+      },
+      "rrd48wh5": {
+        "url": "https://ant.design",
+        "text": "Bonus Offer Has",
+        "linkType": "static",
+        "openNewTab": true
+      }
+    },
+    "selectedId": ""
+  }
+}

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

@@ -1,7 +1,6 @@
 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 { 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';
@@ -22,6 +21,11 @@ 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;
@@ -142,6 +146,12 @@ export type TextEditorProps = {
         };
     }) => void;
 };
+export type TextEditorAllProps = TextEditorProps & {
+    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 +165,18 @@ export type LinkAttrs = {
     title: string | null;
     data: Record<string, string>;
 }>;
+export type SmartTagAttrs = {
+    id: 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 +189,60 @@ export declare const isLinkMark: (mark: Mark) => mark is {
     toJSON: () => any;
     attrs: LinkAttrs;
 };
+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/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