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

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

@@ -0,0 +1,93 @@
+import { ListItem } from '@tiptap/extension-list-item';
+/**
+ * Custom ListItem extension that extends the default TipTap ListItem
+ * with custom Backspace behavior to prevent merging paragraphs into lists
+ *
+ * This extension only overrides keyboard shortcuts while maintaining
+ * all other default ListItem functionality (HTML parsing, rendering, etc.)
+ *
+ * @see https://www.tiptap.dev/api/nodes/list-item
+ */
+export const CustomListItem = ListItem.extend({
+    addOptions() {
+        return {
+            HTMLAttributes: {
+                style: 'line-height:normal;',
+            },
+            bulletListTypeName: 'customUnorderedList',
+            orderedListTypeName: 'customOrderedList',
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            // Keep default keyboard shortcuts from parent ListItem
+            Enter: () => this.editor.commands.splitListItem(this.name),
+            Tab: () => this.editor.commands.sinkListItem(this.name),
+            'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
+            /**
+             * Custom Backspace handler to prevent merging empty paragraphs into lists
+             *
+             * Behavior:
+             * 1. Check if cursor is at the start of a paragraph
+             * 2. Check if the node before is a list (ordered or unordered)
+             * 3. If both conditions are true and paragraph is empty, delete the paragraph
+             * 4. Otherwise, use default backspace behavior
+             */
+            Backspace: () => {
+                const { state } = this.editor;
+                const { selection } = state;
+                const { $from, empty } = selection;
+                // Only handle if selection is empty (cursor position, not text selection)
+                if (!empty) {
+                    return false;
+                }
+                // Check if cursor is at the start of current node
+                const isAtStart = $from.parentOffset === 0;
+                if (!isAtStart) {
+                    return false;
+                }
+                // Get current node (should be a paragraph)
+                const currentNode = $from.parent;
+                // Only handle paragraphs
+                if (currentNode.type.name !== 'paragraph') {
+                    return false;
+                }
+                // Get the index of current paragraph in its parent (usually doc)
+                const paragraphDepth = $from.depth;
+                const indexInParent = $from.index(paragraphDepth - 1);
+                // Check if there's a node before (index > 0)
+                if (indexInParent === 0) {
+                    return false;
+                }
+                // Get parent node (usually doc) and the node before current paragraph
+                const parent = $from.node(paragraphDepth - 1);
+                const nodeBefore = parent.child(indexInParent - 1);
+                if (!nodeBefore) {
+                    return false;
+                }
+                // Check if the node before is a list (ordered or unordered)
+                const isListBefore = nodeBefore.type.name === this.options.orderedListTypeName ||
+                    nodeBefore.type.name === this.options.bulletListTypeName;
+                if (!isListBefore) {
+                    return false;
+                }
+                // Check if current paragraph is empty
+                const isParagraphEmpty = currentNode.content.size === 0;
+                if (!isParagraphEmpty) {
+                    // If paragraph has content, allow default backspace to handle
+                    return false;
+                }
+                // Calculate the exact positions of the paragraph node
+                // We need to delete from the position before the paragraph open tag
+                // to the position after the paragraph close tag
+                const paragraphPos = $from.before();
+                const paragraphEndPos = $from.after();
+                // Delete the entire paragraph node using deleteRange
+                return this.editor.commands.deleteRange({
+                    from: paragraphPos,
+                    to: paragraphEndPos,
+                });
+            },
+        };
+    },
+});

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

@@ -1,16 +1,15 @@
 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.
  */
 export interface SmartTagOptions {
     HTMLAttributes: Record<string, unknown>;
+    /**
+     * Custom function to generate unique IDs for smart tags
+     * If not provided, falls back to uniqid library
+     */
+    generateSmartTagId?: () => string;
 }
 /**
  * Represents the options for the SmartTag node.

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

@@ -1,4 +1,7 @@
-import { Node, mergeAttributes } from '@tiptap/core';
+import { Node, getMarksBetween, mergeAttributes } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import uniqid from 'uniqid';
+import { isSmartTagNode } from '../types';
 export const EXTENSION_NAME = 'smartTag';
 /**
  * Represents a dynamic tag node in the editor.
@@ -12,6 +15,7 @@ export const SmartTag = Node.create({
     addOptions() {
         return {
             HTMLAttributes: {},
+            generateSmartTagId: () => uniqid(),
         };
     },
     addAttributes() {
@@ -29,6 +33,11 @@ export const SmartTag = Node.create({
                 parseHTML: el => el.getAttribute('tag'),
                 renderHTML: attrs => (attrs.tag ? { tag: attrs.tag } : null),
             },
+            // Transient attribute - not persisted to HTML, used for tracking paste operations
+            sourceId: {
+                default: null,
+                rendered: false, // Don't include in HTML output
+            },
         };
     },
     parseHTML() {
@@ -57,9 +66,10 @@ export const SmartTag = Node.create({
     addCommands() {
         return {
             setSmartTag: attrs => ({ chain, state }) => {
-                const { selection, storedMarks } = state;
-                const { $from } = selection;
-                const marks = storedMarks || $from.marks();
+                const { selection } = state;
+                const { from, to } = selection;
+                // Get marks from inside the selection to capture boundary marks
+                const marks = getMarksBetween(from, to, state.doc).map(markRange => markRange.mark);
                 const smartTagNode = this.type.create(attrs);
                 const nodeWithMarks = marks.length > 0 ? smartTagNode.mark(marks) : smartTagNode;
                 return chain()
@@ -99,4 +109,86 @@ export const SmartTag = Node.create({
             },
         };
     },
+    addProseMirrorPlugins() {
+        // Smart Tag Deduplication Plugin
+        // Responsibility: Set sourceId for pasted smart tags (for external component to handle cloning)
+        const deduplicationPlugin = new Plugin({
+            key: new PluginKey('smartTagDeduplication'),
+            appendTransaction: (transactions, oldState, newState) => {
+                // Only process if there was a paste or document change
+                const hasPaste = transactions.some(tr => tr.getMeta('paste'));
+                const hasDocChange = transactions.some(tr => tr.docChanged);
+                if (!hasPaste && !hasDocChange) {
+                    return null;
+                }
+                // Build position mapping from oldState to newState
+                // This accounts for position shifts when pasting
+                const { mapping } = transactions[0];
+                // Build a map of existing smart tag IDs in oldState (before paste)
+                const oldStateIds = new Map();
+                oldState.doc.descendants((node, pos) => {
+                    if (isSmartTagNode(node)) {
+                        oldStateIds.set(node.attrs.id, { pos });
+                    }
+                });
+                // Collect all smart tag IDs in newState (after paste)
+                const newStateIds = new Map();
+                newState.doc.descendants((node, pos) => {
+                    if (isSmartTagNode(node)) {
+                        const { id } = node.attrs;
+                        if (!newStateIds.has(id)) {
+                            newStateIds.set(id, []);
+                        }
+                        newStateIds.get(id).push({ pos, node });
+                    }
+                });
+                // Find duplicates: IDs that appear multiple times in newState
+                const nodesToSetSourceId = new Map();
+                newStateIds.forEach((positions, id) => {
+                    if (positions.length > 1) {
+                        // This ID has duplicates
+                        const oldInfo = oldStateIds.get(id);
+                        if (oldInfo) {
+                            // Map old position to new position accounting for document changes
+                            const mappedPos = mapping.map(oldInfo.pos);
+                            // Filter out the original node (by mapped position), keep only pasted nodes
+                            const pastedNodes = positions.filter(({ pos }) => pos !== mappedPos);
+                            if (pastedNodes.length > 0) {
+                                nodesToSetSourceId.set(id, pastedNodes);
+                            }
+                        }
+                        else {
+                            // No original in oldState - all are new (e.g., paste multiple new smart tags)
+                            // Pick first as "original", rest get sourceId
+                            const [_first, ...rest] = positions;
+                            if (rest.length > 0) {
+                                nodesToSetSourceId.set(id, rest);
+                            }
+                        }
+                    }
+                });
+                // If no duplicates found, no action needed
+                if (nodesToSetSourceId.size === 0) {
+                    return null;
+                }
+                // Set sourceId for pasted nodes (do NOT generate new IDs)
+                // External component will handle ID generation and attrs cloning
+                const { tr } = newState;
+                let hasChanges = false;
+                nodesToSetSourceId.forEach((positions, sourceId) => {
+                    positions.forEach(({ pos, node }) => {
+                        // Only set sourceId, keep original ID
+                        tr.setNodeMarkup(pos, undefined, {
+                            ...node.attrs,
+                            sourceId,
+                            id: this.options.generateSmartTagId?.() || uniqid(),
+                        });
+                        hasChanges = true;
+                    });
+                });
+                return hasChanges ? tr : null;
+            },
+        });
+        return [deduplicationPlugin];
+    },
 });

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

@@ -2,6 +2,7 @@ import { useBroadcastedLocalStorage, useDeepCompareEffect } from '@antscorp/ants
 import { useTextEditorStore } from '../provider';
 import { ANTSOMI_COMPONENT_PREFIX_CLS } from '@antscorp/antsomi-ui/es/constants';
 import { useCallback } from 'react';
+import isEqual from 'react-fast-compare';
 export const useColorSet = () => {
     const colors = useTextEditorStore(s => s.colors);
     const setColors = useTextEditorStore(s => s.setColors);
@@ -9,9 +10,15 @@ export const useColorSet = () => {
     useDeepCompareEffect(() => {
         if (storageColors === undefined && colors !== undefined) {
             setStorageColors(colors);
+            return;
         }
         if (colors === undefined && storageColors !== undefined) {
             setColors(storageColors);
+            return;
+        }
+        // Sync store → localStorage when both defined but different
+        if (colors !== undefined && storageColors !== undefined && !isEqual(colors, storageColors)) {
+            setStorageColors(colors);
         }
     }, [colors, storageColors, setColors, setStorageColors]);
     const composeSetColors = useCallback((newColors) => {

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,16 @@
 /// <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 & {
+    colors?: string[] | undefined;
+    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/index.scss

@@ -1,68 +1,65 @@
-.antsomi-text-editor-bubble-menu {
-  visibility: hidden;
-  position: absolute;
-  pointer-events: auto;
-  z-index: 999;
-}
-
-.antsomi-text-editor-emoji-popover {
-  position: absolute;
-  width: 180px;
-  z-index: 1000;
-
-  .antsomi-text-editor-emoji-list {
-    .antsomi-virtualize-menu-menu-inline {
-      background-color: white;
-      box-shadow: var(--antsomi-box-shadow-secondary);
-      border-radius: 10px;
-
-      .antsomi-virtualize-menu-item-label {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-      }
-    }
-  }
-}
-
-.font-popover-overlay {
-  padding: 0;
-
-  .font-popover-item {
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    padding-left: 10px;
-    padding-right: 8px;
-
-    &:hover,
-    &.active {
-      background-color: #f2f9ff;
-    }
-  }
-}
-
-.font-weight-popover {
-  &.antsomi-popover {
-    .antsomi-popover-inner {
-      padding: 10px 0px;
-
-      .font-weight-item {
-        padding: 4px 10px;
-        cursor: pointer;
-
-        &:hover,
-        &.active {
-          background-color: #f2f9ff;
-        }
-      }
-    }
-  }
-}
-
-.antsomi-text-editor-bubble-menu {
-  background-color: white;
-  border-radius: 4px;
-  padding: 15px;
-  box-shadow: var(--antsomi-box-shadow-secondary);
-}
+.antsomi-text-editor-bubble-menu {
+  visibility: hidden;
+  position: absolute;
+  pointer-events: auto;
+  z-index: 999;
+  background-color: white;
+  border-radius: 4px;
+  padding: 15px;
+  box-shadow: var(--antsomi-box-shadow-secondary);
+}
+
+.antsomi-text-editor-emoji-popover {
+  position: absolute;
+  width: 180px;
+  z-index: 1000;
+
+  .antsomi-text-editor-emoji-list {
+    .antsomi-virtualize-menu-menu-inline {
+      background-color: white;
+      box-shadow: var(--antsomi-box-shadow-secondary);
+      border-radius: 10px;
+
+      .antsomi-virtualize-menu-item-label {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+    }
+  }
+}
+
+.font-popover-overlay {
+  padding: 0;
+
+  .font-popover-item {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    padding-left: 10px;
+    padding-right: 8px;
+
+    &:hover,
+    &.active {
+      background-color: #f2f9ff;
+    }
+  }
+}
+
+.font-weight-popover {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      padding: 10px 0px;
+
+      .font-weight-item {
+        padding: 4px 10px;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+          background-color: #f2f9ff;
+        }
+      }
+    }
+  }
+}

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

@@ -8,6 +8,7 @@ export interface TextEditorProviderRefHandler {
 }
 export interface TextEditorProviderProps {
     children: React.ReactNode | ((props: TextEditorStoreApi) => React.ReactNode);
+    colors?: string[];
     onChangeColors?: (colors: string[]) => void;
 }
 export declare const TextEditorProvider: import("react").ForwardRefExoticComponent<TextEditorProviderProps & import("react").RefAttributes<TextEditorProviderRefHandler>>;

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

@@ -5,10 +5,12 @@ import { useStore } from 'zustand';
 // Store
 import { createTextEditorStore } from './store';
 export const TextEditorStoreContext = createContext(null);
-export const TextEditorProvider = forwardRef(({ children, onChangeColors }, ref) => {
+export const TextEditorProvider = forwardRef(({ children, colors, onChangeColors }, ref) => {
     const storeRef = useRef();
     if (!storeRef.current) {
-        storeRef.current = createTextEditorStore();
+        storeRef.current = createTextEditorStore({
+            colors,
+        });
     }
     useEffect(() => {
         storeRef.current?.setState({
@@ -20,7 +22,8 @@ export const TextEditorProvider = forwardRef(({ children, onChangeColors }, ref)
     }, [onChangeColors]);
     useImperativeHandle(ref, () => ({
         updateColors: colors => {
-            storeRef.current?.getState().setColors(colors);
+            // Use getInitialState to bypass the wrapped setColors and avoid triggering onChangeColors
+            storeRef.current?.getInitialState().setColors(colors);
         },
     }));
     return (_jsx(TextEditorStoreContext.Provider, { value: storeRef.current, children: typeof children === 'function' ? children(storeRef.current) : children }));

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

@@ -1,12 +1,19 @@
+import type { LinkFormData, LinkFormState } from './types';
 export type TextEditorState = {
-    bubbleMenuContainer: HTMLDivElement | null;
-    isShowBubbleMenu: boolean;
+    bubbleMenuContainer: HTMLElement | null;
     colors?: string[];
+    /** Link form state for default link insert/edit UI */
+    linkFormState: LinkFormState;
 };
 export type TextEditorActions = {
-    setBubbleMenuContainer: (container: HTMLDivElement | null) => void;
-    setIsShowBubbleMenu: (isShow: boolean) => void;
+    setBubbleMenuContainer: (container: HTMLElement | null) => void;
     setColors: (newColorSet: string[]) => void;
+    /** Show link form with initial data */
+    showLinkForm: (mode: 'insert' | 'edit', initialData: LinkFormData) => void;
+    /** Hide link form */
+    hideLinkForm: () => void;
+    /** Update link form data (partial update) */
+    updateLinkFormData: (data: Partial<LinkFormData>) => void;
 };
 export type TextEditorStore = TextEditorState & TextEditorActions;
 export declare const defaultTextEditorState: TextEditorState;

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

@@ -3,13 +3,12 @@ import isEqual from 'react-fast-compare';
 import { createStore } from 'zustand';
 export const defaultTextEditorState = {
     bubbleMenuContainer: null,
-    isShowBubbleMenu: false,
+    linkFormState: null,
 };
 export const createTextEditorStore = (initState = {}) => createStore()((set, get) => ({
     ...defaultTextEditorState,
     ...initState,
     setBubbleMenuContainer: container => set(() => ({ bubbleMenuContainer: container })),
-    setIsShowBubbleMenu: isShow => set(() => ({ isShowBubbleMenu: isShow })),
     setColors: newColors => {
         const currentColors = get().colors;
         if (isEqual(currentColors, newColors)) {
@@ -17,4 +16,25 @@ export const createTextEditorStore = (initState = {}) => createStore()((set, get
         }
         set(() => ({ colors: newColors }));
     },
+    showLinkForm: (mode, initialData) => set(() => ({
+        linkFormState: {
+            isVisible: true,
+            mode,
+            data: initialData,
+        },
+    })),
+    hideLinkForm: () => set(() => ({ linkFormState: null })),
+    updateLinkFormData: data => set(state => {
+        if (!state.linkFormState)
+            return state;
+        return {
+            linkFormState: {
+                ...state.linkFormState,
+                data: {
+                    ...state.linkFormState.data,
+                    ...data,
+                },
+            },
+        };
+    }),
 }));

package/es/components/organism/TextEditor/stories/WithOldDynAndLink/froala-legacy-format.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": ""
+  }
+}