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

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

@@ -1,123 +1,8 @@
-import { arrow, autoPlacement, computePosition, flip, hide, inline, offset, shift, size, } from '@floating-ui/dom';
-import { isTextSelection, posToDOMRect } from '@tiptap/core';
+import { BubbleMenuView as TiptapBubbleMenuView } from '@tiptap/extension-bubble-menu';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { CellSelection } from '@tiptap/pm/tables';
-function combineDOMRects(rect1, rect2) {
-    const top = Math.min(rect1.top, rect2.top);
-    const bottom = Math.max(rect1.bottom, rect2.bottom);
-    const left = Math.min(rect1.left, rect2.left);
-    const right = Math.max(rect1.right, rect2.right);
-    const width = right - left;
-    const height = bottom - top;
-    const x = left;
-    const y = top;
-    return new DOMRect(x, y, width, height);
-}
-export class BubbleMenuView {
-    get middlewares() {
-        const middlewares = [];
-        if (this.floatingUIOptions.flip) {
-            middlewares.push(flip(typeof this.floatingUIOptions.flip !== 'boolean'
-                ? this.floatingUIOptions.flip
-                : undefined));
-        }
-        if (this.floatingUIOptions.shift) {
-            middlewares.push(shift(typeof this.floatingUIOptions.shift !== 'boolean'
-                ? this.floatingUIOptions.shift
-                : undefined));
-        }
-        if (this.floatingUIOptions.offset) {
-            middlewares.push(offset(typeof this.floatingUIOptions.offset !== 'boolean'
-                ? this.floatingUIOptions.offset
-                : undefined));
-        }
-        if (this.floatingUIOptions.arrow) {
-            middlewares.push(arrow(this.floatingUIOptions.arrow));
-        }
-        if (this.floatingUIOptions.size) {
-            middlewares.push(size(typeof this.floatingUIOptions.size !== 'boolean'
-                ? this.floatingUIOptions.size
-                : undefined));
-        }
-        if (this.floatingUIOptions.autoPlacement) {
-            middlewares.push(autoPlacement(typeof this.floatingUIOptions.autoPlacement !== 'boolean'
-                ? this.floatingUIOptions.autoPlacement
-                : undefined));
-        }
-        if (this.floatingUIOptions.hide) {
-            middlewares.push(hide(typeof this.floatingUIOptions.hide !== 'boolean'
-                ? this.floatingUIOptions.hide
-                : undefined));
-        }
-        if (this.floatingUIOptions.inline) {
-            middlewares.push(inline(typeof this.floatingUIOptions.inline !== 'boolean'
-                ? this.floatingUIOptions.inline
-                : undefined));
-        }
-        return middlewares;
-    }
-    constructor({ editor, element, view, updateDelay = 250, resizeDelay = 60, container, shouldShow, options, }) {
-        this.preventHide = false;
-        this.isVisible = false;
-        this.floatingUIOptions = {
-            strategy: 'absolute',
-            placement: 'top',
-            offset: 8,
-            flip: {},
-            shift: {},
-            arrow: false,
-            size: false,
-            autoPlacement: false,
-            hide: false,
-            inline: false,
-            onShow: undefined,
-            onHide: undefined,
-            onUpdate: undefined,
-            onDestroy: undefined,
-        };
-        this.shouldShow = ({ view, state, from, to, }) => {
-            const { doc, 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);
-            // 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
-            const isChildOfMenu = this.element.contains(document.activeElement);
-            const hasEditorFocus = view.hasFocus() || isChildOfMenu;
-            if (!hasEditorFocus || empty || isEmptyTextBlock || !this.editor.isEditable) {
-                return false;
-            }
-            return true;
-        };
-        this.mousedownHandler = () => {
-            this.preventHide = true;
-        };
-        this.dragstartHandler = () => {
-            this.hide();
-        };
-        /**
-         * Handles the window resize event and element resize event to update the position of the bubble menu.
-         * It uses a debounce mechanism to prevent excessive updates.
-         * The delay is defined by the `resizeDelay` property.
-         */
-        this.resizeHandler = (delay = this.resizeDelay) => {
-            if (this.resizeDebounceTimer) {
-                clearTimeout(this.resizeDebounceTimer);
-            }
-            this.resizeDebounceTimer = window.setTimeout(() => {
-                this.updatePosition();
-            }, delay);
-        };
-        /**
-         * Window resize handler that uses the default resize delay.
-         * This is a separate function to maintain the same reference for addEventListener/removeEventListener.
-         */
-        this.windowResizeHandler = () => {
-            this.resizeHandler();
-        };
+export class BubbleMenuView extends TiptapBubbleMenuView {
+    constructor(props) {
+        super(props);
         /**
          * Sets up ResizeObserver to watch for bubble menu element size changes.
          * This ensures the bubble menu position is updated when the element resizes
@@ -131,7 +16,7 @@ export class BubbleMenuView {
             // Timer for debouncing the visibility restoration after resize
             let resizeTimer = null;
             // Time to wait before showing the element again after resize stops
-            const DEBOUNCE_TIME = 100;
+            const DEBOUNCE_TIME = this.resizeDelay + 50;
             this.resizeObserver = new ResizeObserver(entries => {
                 for (const entry of entries) {
                     // Only handle resize events for the bubble menu element itself
@@ -145,7 +30,7 @@ export class BubbleMenuView {
                             clearTimeout(resizeTimer);
                         }
                         // Immediately update the position with no delay for responsive positioning
-                        this.resizeHandler(0);
+                        this.resizeHandler();
                         // Set up a debounced timer to restore visibility after resize activity stops
                         resizeTimer = setTimeout(() => {
                             // Use requestAnimationFrame to ensure the position update is complete
@@ -165,36 +50,6 @@ export class BubbleMenuView {
             // Also observe the editor view DOM element for editor size changes
             this.resizeObserver.observe(this.view.dom);
         };
-        this.focusHandler = () => {
-            // we use `setTimeout` to make sure `selection` is already updated
-            setTimeout(() => this.update(this.editor.view));
-        };
-        this.blurHandler = ({ event }) => {
-            if (this.preventHide) {
-                this.preventHide = false;
-                return;
-            }
-            if (event?.relatedTarget && this.element.parentNode?.contains(event.relatedTarget)) {
-                return;
-            }
-            if (event?.relatedTarget === this.editor.view.dom) {
-                return;
-            }
-            this.hide();
-        };
-        this.handleDebouncedUpdate = (view, oldState) => {
-            const selectionChanged = !oldState?.selection.eq(view.state.selection);
-            const docChanged = !oldState?.doc.eq(view.state.doc);
-            if (!selectionChanged && !docChanged) {
-                return;
-            }
-            if (this.updateDebounceTimer) {
-                clearTimeout(this.updateDebounceTimer);
-            }
-            this.updateDebounceTimer = window.setTimeout(() => {
-                this.updateHandler(view, selectionChanged, docChanged, oldState);
-            }, this.updateDelay);
-        };
         this.updateHandler = (view, selectionChanged, docChanged, oldState) => {
             const { composing } = view;
             const isSame = !selectionChanged && !docChanged;
@@ -209,155 +64,15 @@ export class BubbleMenuView {
             this.show();
             this.updatePosition();
         };
-        this.editor = editor;
-        this.element = element;
-        this.view = view;
-        this.updateDelay = updateDelay;
-        this.resizeDelay = resizeDelay;
-        this.container = container;
-        this.floatingUIOptions = {
-            ...this.floatingUIOptions,
-            ...options,
-        };
-        this.element.tabIndex = 0;
-        if (shouldShow) {
-            this.shouldShow = shouldShow;
-        }
-        const containerElement = this.getContainer();
-        if (containerElement === document.body) {
-            this.element.style.zIndex = '9999';
-        }
-        this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true });
-        this.view.dom.addEventListener('dragstart', this.dragstartHandler);
-        this.editor.on('focus', this.focusHandler);
-        this.editor.on('blur', this.blurHandler);
-        window.addEventListener('resize', this.windowResizeHandler);
         this.setupResizeObserver();
-        this.update(view, view.state);
-        if (this.getShouldShow()) {
-            this.show();
-        }
-    }
-    updatePosition() {
-        const { selection } = this.editor.state;
-        const domRect = posToDOMRect(this.view, selection.from, selection.to);
-        let virtualElement = {
-            getBoundingClientRect: () => domRect,
-            getClientRects: () => [domRect],
-        };
-        // this is a special case for cell selections
-        if (selection instanceof CellSelection) {
-            const { $anchorCell, $headCell } = selection;
-            const from = $anchorCell ? $anchorCell.pos : $headCell.pos;
-            const to = $headCell ? $headCell.pos : $anchorCell.pos;
-            const fromDOM = this.view.nodeDOM(from);
-            const toDOM = this.view.nodeDOM(to);
-            if (!fromDOM || !toDOM) {
-                return;
-            }
-            const clientRect = fromDOM === toDOM
-                ? fromDOM.getBoundingClientRect()
-                : combineDOMRects(fromDOM.getBoundingClientRect(), toDOM.getBoundingClientRect());
-            virtualElement = {
-                getBoundingClientRect: () => clientRect,
-                getClientRects: () => [clientRect],
-            };
-        }
-        computePosition(virtualElement, this.element, {
-            placement: this.floatingUIOptions.placement,
-            strategy: this.floatingUIOptions.strategy,
-            middleware: this.middlewares,
-        }).then(({ x, y, strategy }) => {
-            this.element.style.width = 'max-content';
-            this.element.style.position = strategy;
-            this.element.style.left = `${x}px`;
-            this.element.style.top = `${y}px`;
-            if (this.isVisible && this.floatingUIOptions.onUpdate) {
-                this.floatingUIOptions.onUpdate();
-            }
-        });
-    }
-    update(view, oldState) {
-        const { state } = view;
-        const hasValidSelection = state.selection.from !== state.selection.to;
-        if (this.updateDelay > 0 && hasValidSelection) {
-            this.handleDebouncedUpdate(view, oldState);
-            return;
-        }
-        const selectionChanged = !oldState?.selection.eq(view.state.selection);
-        const docChanged = !oldState?.doc.eq(view.state.doc);
-        this.updateHandler(view, selectionChanged, docChanged, oldState);
-    }
-    getShouldShow(oldState) {
-        const { state } = this.view;
-        const { selection } = state;
-        // support for CellSelections
-        const { ranges } = selection;
-        const from = Math.min(...ranges.map(range => range.$from.pos));
-        const to = Math.max(...ranges.map(range => range.$to.pos));
-        const shouldShow = this.shouldShow?.({
-            editor: this.editor,
-            element: this.element,
-            view: this.view,
-            state,
-            oldState,
-            from,
-            to,
-        });
-        return shouldShow;
-    }
-    getContainer() {
-        if (!this.container) {
-            return this.view.dom.parentElement;
-        }
-        if (typeof this.container === 'function') {
-            return this.container();
-        }
-        return this.container;
-    }
-    show() {
-        if (this.isVisible) {
-            return;
-        }
-        this.element.style.visibility = 'visible';
-        this.element.style.opacity = '1';
-        const container = this.getContainer();
-        if (container) {
-            container.appendChild(this.element);
-        }
-        if (this.floatingUIOptions.onShow) {
-            this.floatingUIOptions.onShow();
-        }
-        this.isVisible = true;
-    }
-    hide() {
-        if (!this.isVisible) {
-            return;
-        }
-        this.element.style.visibility = 'hidden';
-        this.element.style.opacity = '0';
-        // remove from the parent element
-        this.element.remove();
-        if (this.floatingUIOptions.onHide) {
-            this.floatingUIOptions.onHide();
-        }
-        this.isVisible = false;
     }
     destroy() {
-        this.hide();
-        this.element.removeEventListener('mousedown', this.mousedownHandler, { capture: true });
-        this.view.dom.removeEventListener('dragstart', this.dragstartHandler);
-        window.removeEventListener('resize', this.windowResizeHandler);
-        this.editor.off('focus', this.focusHandler);
-        this.editor.off('blur', this.blurHandler);
+        super.destroy();
         // Cleanup ResizeObserver
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
             this.resizeObserver = undefined;
         }
-        if (this.floatingUIOptions.onDestroy) {
-            this.floatingUIOptions.onDestroy();
-        }
     }
 }
 export const BubbleMenuPlugin = (options) => new Plugin({

package/es/components/organism/TextEditor/extensions/BubbleMenu/bubble-menu.d.ts

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/core';
-import type { BubbleMenuPluginProps } from './bubble-menu-plugin';
+import { type BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 export type BubbleMenuOptions = Omit<BubbleMenuPluginProps, 'editor' | 'element'> & {
     /**
      * The DOM element that contains your menu.

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

@@ -11,6 +11,7 @@ export const BubbleMenu = Extension.create({
             element: null,
             pluginKey: 'bubbleMenu',
             updateDelay: undefined,
+            appendTo: undefined,
             shouldShow: null,
         };
     },
@@ -24,6 +25,9 @@ export const BubbleMenu = Extension.create({
                 editor: this.editor,
                 element: this.options.element,
                 updateDelay: this.options.updateDelay,
+                options: this.options.options,
+                appendTo: this.options.appendTo,
+                getReferencedVirtualElement: this.options.getReferencedVirtualElement,
                 shouldShow: this.options.shouldShow,
             }),
         ];

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/ListItem.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 declare const CustomListItem: import("@tiptap/core").Node<import("@tiptap/extension-list").ListItemOptions, any>;

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 { 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() {
@@ -58,8 +67,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()
@@ -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) => {