@antscorp/antsomi-ui 2.0.111 → 2.0.112

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

@@ -38,7 +38,7 @@ import { analyzeFont, defaultShouldShowBubbleMenu, getAllFullLinkGroups, handleL
 import { BubbleMenu } from './ui/BubbleMenu';
 import { LinkPopover } from './ui/LinkPopover';
 const TextEditorInternal = memo(forwardRef((props, ref) => {
-    const { id, className, config, editable = true, initialContent = '', dataAttributes, onUpdateDebounced = 300, defaultTextStyle: defaultTextStyleProp, linkHandler: outerLinkHandler, smartTagHandler: outerSmartTagHandler, bubbleMenuProps, style, render, onUpdate, onFocus, onChangeFont, } = props;
+    const { id, className, config, editable = true, initialContent = '', dataAttributes, onUpdateDebounced = 300, defaultTextStyle: defaultTextStyleProp, linkHandler: outerLinkHandler, smartTagHandler: outerSmartTagHandler, bubbleMenuProps, style, render, onUpdate, onFocus, onCreate, onChangeFont, } = props;
     // Initialize bubbleMenuContainer with default value (document.body)
     // This ensures BubbleMenu receives a valid appendTo prop on first render
     const bubbleMenuContainer = useRef((() => {
@@ -106,7 +106,7 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
                 bulletList: false,
                 orderedList: false,
                 listItem: false,
-                undoRedo: {
+                undoRedo: config?.UndoRedo ?? {
                     depth: 100,
                 },
             }),
@@ -153,7 +153,9 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
             Focus.configure({
                 className: 'has-focused',
             }),
-            SmartTag,
+            SmartTag.configure({
+                generateSmartTagId: config?.SmartTag?.generateId,
+            }),
             TextAlign.configure({
                 types: ['heading', 'paragraph'],
             }),
@@ -187,6 +189,14 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
             if (safeParseContent !== initialContent) {
                 editor.commands.setContent(safeParseContent);
             }
+            const text = editor.getText();
+            const json = editor.getJSON();
+            const html = editor.getHTML();
+            onCreate?.({
+                html: htmlSerializerForOutput(html),
+                text,
+                json,
+            });
         },
         onUpdate: ({ editor }) => {
             handleOnUpdateDebounce(editor);
@@ -291,23 +301,20 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
             })
                 .run();
         },
+        getHTML: () => htmlSerializerForOutput(editor.getHTML()),
         eachLinkGroup: handleEachLinkGroup,
         eachSmartag: handleEachSmartag,
         setSmartTag: handleSetSmartTag,
         deleteSmartTag: handleDeleteSmartTag,
         updateSmartTagAttrs: handleUpdateSmartTagAttrs,
         blur: handleBlur,
+        setContent: editor.commands.setContent,
         style: contentRef.current?.style,
-        editor,
     }));
     if (!editor) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(StyledEditorContent, { className: clsx(`${ANTSOMI_COMPONENT_PREFIX_CLS}-text-editor`, className), "$textStyle": defaultTextStyle, style: {
-                    // Inline styles apply to inner html elements (support email client)
-                    ...defaultTextStyle,
-                    ...style,
-                }, id: id, ref: contentRef, editor: editor, ...dataAttributes }), _jsx(LinkPopover, { editor: editor }), !linkFormVisible && (_jsxs(_Fragment, { children: [_jsx(BubbleMenu, { pluginKey: "linkPreviewBubbleMenu", ...bubbleMenuProps, appendTo: bubbleMenuContainer.current, editor: editor, shouldShow: shouldShowLinkPreview, children: _jsx(LinkPreviewToolbar, { editor: editor, linkHanlder: {
+    const bubbleMenus = (bubbleMenuProps?.enabled ?? true) ? (_jsxs(_Fragment, { children: [_jsx(LinkPopover, { editor: editor }), !linkFormVisible && (_jsxs(_Fragment, { children: [_jsx(BubbleMenu, { pluginKey: "linkPreviewBubbleMenu", ...bubbleMenuProps, appendTo: bubbleMenuContainer.current, editor: editor, shouldShow: shouldShowLinkPreview, children: _jsx(LinkPreviewToolbar, { editor: editor, linkHanlder: {
                                 onUpsert: () => {
                                     handleLinkAction(editor.view, linkHandler);
                                 },
@@ -325,7 +332,12 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
                                     weight,
                                     analysis: analyzeFont(font),
                                 });
-                            } }) })] }))] }));
+                            } }) })] }))] })) : null;
+    return (_jsxs(_Fragment, { children: [_jsx(StyledEditorContent, { className: clsx(`${ANTSOMI_COMPONENT_PREFIX_CLS}-text-editor`, className), "$textStyle": defaultTextStyle, style: {
+                    // Inline styles apply to inner html elements (support email client)
+                    ...defaultTextStyle,
+                    ...style,
+                }, id: id, ref: contentRef, editor: editor, ...dataAttributes }), bubbleMenus] }));
 }));
 TextEditorInternal.displayName = 'TextEditorInternal';
 const TextEditorWithProvider = forwardRef((props, ref) => {
@@ -343,8 +355,8 @@ const TextEditorWithProvider = forwardRef((props, ref) => {
         get style() {
             return editorRef.current?.style;
         },
-        get editor() {
-            return editorRef.current?.editor ?? null;
+        get getHTML() {
+            return editorRef.current.getHTML;
         },
         get setLink() {
             return editorRef.current.setLink;
@@ -376,6 +388,9 @@ const TextEditorWithProvider = forwardRef((props, ref) => {
         get blur() {
             return editorRef.current.blur;
         },
+        get setContent() {
+            return editorRef.current.setContent;
+        },
         // Forward TextEditorProviderRefHandler methods
         updateColors: colors => providerRef.current?.updateColors?.(colors),
     }), []);

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

@@ -40,22 +40,41 @@ export const CustomLink = TiptapLinkExtension.extend({
             setCustomLink: ({ attrs, content }) => ({ state, chain }) => {
                 const { selection } = state;
                 const { from, to } = selection;
-                let linkContent = textBetween(state, from, to);
-                if (content && linkContent !== content) {
-                    linkContent = content;
+                // Check if custom content is provided and different from current text
+                const currentText = textBetween(state, from, to);
+                const shouldUseCustomContent = content && currentText !== content;
+                if (shouldUseCustomContent) {
+                    // Use custom content as string (replace content)
+                    return chain()
+                        .focus()
+                        .deleteSelection()
+                        .insertContent(content)
+                        .command(({ tr }) => {
+                        const endPos = tr.selection.from;
+                        const startPos = endPos - content.length;
+                        tr.setSelection(TextSelection.create(tr.doc, startPos, endPos));
+                        return true;
+                    })
+                        .setLink({
+                        ...attrs,
+                        href: attrs?.href || './',
+                    })
+                        .command(({ tr }) => {
+                        const endPos = tr.selection.to;
+                        tr.setSelection(TextSelection.create(tr.doc, endPos, endPos));
+                        return true;
+                    })
+                        .run();
                 }
-                return (chain()
+                // Preserve existing content structure (atom nodes like smartTag)
+                // Just apply link mark on current selection without modifying content
+                return chain()
                     .focus()
-                    .deleteSelection()
-                    .insertContent(linkContent)
                     .command(({ tr }) => {
-                    const endPos = tr.selection.from;
-                    const startPos = endPos - linkContent.length;
-                    tr.setSelection(TextSelection.create(tr.doc, startPos, endPos));
+                    // Ensure selection is set correctly
+                    tr.setSelection(TextSelection.create(tr.doc, from, to));
                     return true;
                 })
-                    // .setUnderline()
-                    // .setColor(LINK_TEXT_COLOR)
                     .setLink({
                     ...attrs,
                     href: attrs?.href || './',
@@ -65,7 +84,7 @@ export const CustomLink = TiptapLinkExtension.extend({
                     tr.setSelection(TextSelection.create(tr.doc, endPos, endPos));
                     return true;
                 })
-                    .run());
+                    .run();
             },
             deleteCustomLink: predicate => ({ state, chain }) => {
                 const { doc } = state;

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

@@ -5,6 +5,11 @@ import { Attrs } from '@tiptap/pm/model';
  */
 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,10 +66,10 @@ export const SmartTag = Node.create({
     addCommands() {
         return {
             setSmartTag: attrs => ({ chain, state }) => {
-                const { selection, storedMarks } = state;
-                const { $from, from, to } = selection;
+                const { selection } = state;
+                const { 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 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()
@@ -100,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/types.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { JSONContent, Editor, MarkRange } from '@tiptap/core';
+import type { JSONContent, MarkRange } from '@tiptap/core';
 import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 import type { Mark, Node } from '@tiptap/pm/model';
 import { ORDERED_LIST_STYLE_TYPE, UNORDERED_LIST_STYLE_TYPE } from './constants';
@@ -7,7 +7,7 @@ import type { OverrideProperties } from 'type-fest';
 export type HandleSmartTagRef = {
     setSmartTag: (attrs: SmartTagAttrs) => void;
     deleteSmartTag: (id: string) => void;
-    updateSmartTagAttrs: (id: string, updatedAttrs: Omit<SmartTagAttrs, 'id'>) => void;
+    updateSmartTagAttrs: (id: string, updatedAttrs: Partial<SmartTagAttrs>) => void;
 };
 export type HandleLinkRef = {
     setLink: (params: {
@@ -30,7 +30,8 @@ export type HandleLinkRef = {
 export type TextEditorRef = HandleSmartTagRef & HandleLinkRef & {
     blur: (perserveSelection?: boolean) => void;
     style?: CSSStyleDeclaration;
-    readonly editor: Editor | null;
+    getHTML?: () => string;
+    setContent?: (text: string) => void;
 };
 export type SmartTagHandler = Partial<{
     edit: (id: string, event: React.MouseEvent) => void;
@@ -126,6 +127,7 @@ export type ToolbarConfig = {
  * Configuration options for TextEditor components
  */
 export type Config = Partial<{
+    UndoRedo: false;
     /** Font family configuration */
     FontFamily: {
         /** Array of available font configurations */
@@ -140,6 +142,9 @@ export type Config = Partial<{
         /** Whether to use custom bullet styles */
         useCustomBullet?: boolean;
     };
+    SmartTag: {
+        generateId?: () => string;
+    };
     /** Toolbar configuration */
     Toolbar: ToolbarConfig;
 }>;
@@ -169,7 +174,9 @@ export type TextEditorProps = {
     smartTagHandler?: SmartTagHandler;
     linkHandler?: LinkHandler;
     editable?: boolean;
-    bubbleMenuProps?: Pick<BubbleMenuPluginProps, 'options' | 'appendTo'>;
+    bubbleMenuProps?: Pick<BubbleMenuPluginProps, 'options' | 'appendTo'> & {
+        enabled?: boolean;
+    };
     defaultTextStyle?: Partial<TextStyle>;
     dataAttributes?: Record<`data-${string}`, unknown>;
     onUpdateDebounced?: number;
@@ -180,6 +187,11 @@ export type TextEditorProps = {
         text: string;
         json: JSONContent;
     }) => void;
+    onCreate?: (args: {
+        html: string;
+        text: string;
+        json: JSONContent;
+    }) => void;
     onChangeFont?: (changeInfo: {
         font: FontConfig;
         weight: number;
@@ -211,6 +223,7 @@ export type LinkAttrs = {
 }>;
 export type SmartTagAttrs = {
     id: string;
+    sourceId?: string;
 } & Partial<{
     content: string;
     tag: string;

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

@@ -25,7 +25,7 @@ export const FormattingToolbar = (props) => {
     }, [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 }, "fontFamily")),
+        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"),

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/utils/link.js

@@ -177,8 +177,9 @@ export const extendSelectionToFullLinks = (state, from, to) => {
             }
         }
     }
-    // Collect all link ranges including adjacent ones with same href
-    const allLinkRanges = [];
+    // Track min/max positions directly instead of collecting all ranges
+    let newFrom = from;
+    let newTo = to;
     const processedRanges = new Set();
     for (const linkRange of linkMarkRanges) {
         const rangeKey = `${linkRange.from}-${linkRange.to}`;
@@ -186,23 +187,22 @@ export const extendSelectionToFullLinks = (state, from, to) => {
             continue;
         const { href } = linkRange.mark.attrs;
         if (!href) {
-            allLinkRanges.push(linkRange);
+            newFrom = Math.min(newFrom, linkRange.from);
+            newTo = Math.max(newTo, linkRange.to);
             processedRanges.add(rangeKey);
             continue;
         }
         // Find all adjacent links with same href
         const adjacentLinks = findAdjacentLinksWithSameHref(linkRange, href, linkEndingAt, linkStartingAt, state.doc);
-        adjacentLinks.forEach(range => {
-            const key = `${range.from}-${range.to}`;
-            if (!processedRanges.has(key)) {
-                allLinkRanges.push(range);
-                processedRanges.add(key);
-            }
+        // Since adjacentLinks is sorted (before links unshifted, after links pushed),
+        // first link has minimum from, last link has maximum to
+        newFrom = Math.min(newFrom, adjacentLinks[0].from);
+        newTo = Math.max(newTo, adjacentLinks[adjacentLinks.length - 1].to);
+        // Mark all adjacent links as processed
+        adjacentLinks.forEach(adjLink => {
+            processedRanges.add(`${adjLink.from}-${adjLink.to}`);
         });
     }
-    // Calculate final range from all collected links
-    const newFrom = Math.min(...allLinkRanges.map(range => range.from), from);
-    const newTo = Math.max(...allLinkRanges.map(range => range.to), to);
     return {
         from: newFrom,
         to: newTo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.111",
+  "version": "2.0.112",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",