@antscorp/antsomi-ui 1.3.7-beta.58 → 1.3.7-beta.59

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

@@ -0,0 +1,187 @@
+import { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core';
+import { ORDERED_LIST_STYLE_TYPE } from '../constants';
+const ListItemName = 'listItem';
+const TextStyleName = 'textStyle';
+/**
+ * Input regex patterns for different list styles
+ */
+const inputRegexPatterns = {
+    decimal: /^(\d+)\.\s$/,
+    'lower-alpha': /^([a-z])\.\s$/,
+    'upper-alpha': /^([A-Z])\.\s$/,
+    'lower-roman': /^(i{1,3}|iv|v|vi{0,3}|ix|x)\.\s$/,
+    'upper-roman': /^(I{1,3}|IV|V|VI{0,3}|IX|X)\.\s$/,
+    'lower-greek': /^(α|β|γ|δ|ε|ζ|η|θ|ι|κ)\.\s$/,
+    'decimal-leading-zero': /^(0\d+)\.\s$/,
+};
+/**
+ * Convert roman numerals to numbers
+ */
+function romanToNumber(roman) {
+    const romanNumerals = {
+        i: 1,
+        v: 5,
+        x: 10,
+    };
+    let result = 0;
+    for (let i = 0; i < roman.length; i++) {
+        const current = romanNumerals[roman[i]];
+        const next = romanNumerals[roman[i + 1]];
+        if (next && current < next) {
+            result += next - current;
+            i++;
+        }
+        else {
+            result += current;
+        }
+    }
+    return result;
+}
+/**
+ * Helper function to convert different formats to numeric start value
+ */
+function getStartValue(match, listStyleType) {
+    switch (listStyleType) {
+        case ORDERED_LIST_STYLE_TYPE.decimal:
+        case ORDERED_LIST_STYLE_TYPE.decimalLeadingZero:
+            return parseInt(match, 10);
+        case ORDERED_LIST_STYLE_TYPE.lowerAlpha:
+            return match.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0) + 1;
+        case ORDERED_LIST_STYLE_TYPE.upperAlpha:
+            return match.toUpperCase().charCodeAt(0) - 'A'.charCodeAt(0) + 1;
+        case ORDERED_LIST_STYLE_TYPE.lowerRoman:
+        case ORDERED_LIST_STYLE_TYPE.upperRoman:
+            return romanToNumber(match.toLowerCase());
+        case ORDERED_LIST_STYLE_TYPE.lowerGreek: {
+            const greekLetters = 'αβγδεζηθικ';
+            return greekLetters.indexOf(match) + 1;
+        }
+        default:
+            return 1;
+    }
+}
+/**
+ * This extension allows you to create ordered lists with custom list-style-type.
+ */
+export const CustomOrderedList = Node.create({
+    name: 'customOrderedList',
+    addOptions() {
+        return {
+            itemTypeName: ListItemName,
+            HTMLAttributes: {
+                style: 'margin:0.5em 0;padding-inline-start:1.2em',
+            },
+            keepMarks: false,
+            keepAttributes: false,
+            defaultListStyleType: ORDERED_LIST_STYLE_TYPE.decimal,
+            availableListStyleTypes: [
+                ORDERED_LIST_STYLE_TYPE.decimal,
+                ORDERED_LIST_STYLE_TYPE.lowerAlpha,
+                ORDERED_LIST_STYLE_TYPE.upperAlpha,
+                ORDERED_LIST_STYLE_TYPE.lowerRoman,
+                ORDERED_LIST_STYLE_TYPE.upperRoman,
+            ],
+        };
+    },
+    group: 'block list',
+    content() {
+        return `${this.options.itemTypeName}+`;
+    },
+    addAttributes() {
+        return {
+            start: {
+                default: 1,
+                parseHTML: element => element.hasAttribute('start') ? parseInt(element.getAttribute('start') || '', 10) : 1,
+            },
+            type: {
+                default: null,
+                parseHTML: element => element.getAttribute('type'),
+            },
+            listStyleType: {
+                default: this.options.defaultListStyleType,
+                parseHTML: element => {
+                    const style = element.getAttribute('style');
+                    const listStyleType = style?.match(/list-style-type:\s*([^;]+)/)?.[1]?.trim();
+                    return listStyleType || this.options.defaultListStyleType;
+                },
+                renderHTML: attributes => ({
+                    style: `list-style-type: ${attributes.listStyleType}`,
+                }),
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'ol',
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const { start, ...attributesWithoutStart } = HTMLAttributes;
+        return start === 1
+            ? ['ol', mergeAttributes(this.options.HTMLAttributes, attributesWithoutStart), 0]
+            : ['ol', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+    addCommands() {
+        return {
+            toggleCustomOrderedList: (options = {}) => ({ chain }) => {
+                const { listStyleType = this.options.defaultListStyleType } = options;
+                if (this.options.keepAttributes) {
+                    return chain()
+                        .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+                        .updateAttributes(ListItemName, this.editor.getAttributes(TextStyleName))
+                        .updateAttributes(this.name, { listStyleType })
+                        .run();
+                }
+                return chain()
+                    .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+                    .updateAttributes(this.name, { listStyleType })
+                    .run();
+            },
+            setOrderedListStyleType: (listStyleType) => ({ commands }) => commands.updateAttributes(this.name, { listStyleType }),
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            'Mod-Shift-7': () => this.editor.commands.toggleCustomOrderedList(),
+        };
+    },
+    addInputRules() {
+        const inputRules = this.options.availableListStyleTypes.map(listStyleType => {
+            const regex = inputRegexPatterns[listStyleType];
+            let inputRule = wrappingInputRule({
+                find: regex,
+                type: this.type,
+                getAttributes: match => ({
+                    start: getStartValue(match[1], listStyleType),
+                    listStyleType,
+                }),
+                joinPredicate: (match, node) => {
+                    const startValue = getStartValue(match[1], listStyleType);
+                    return node.childCount + node.attrs.start === startValue;
+                },
+            });
+            if (this.options.keepMarks || this.options.keepAttributes) {
+                inputRule = wrappingInputRule({
+                    find: regex,
+                    type: this.type,
+                    keepMarks: this.options.keepMarks,
+                    keepAttributes: this.options.keepAttributes,
+                    getAttributes: match => ({
+                        start: getStartValue(match[1], listStyleType),
+                        listStyleType,
+                        ...this.editor.getAttributes(TextStyleName),
+                    }),
+                    joinPredicate: (match, node) => {
+                        const startValue = getStartValue(match[1], listStyleType);
+                        return node.childCount + node.attrs.start === startValue;
+                    },
+                    editor: this.editor,
+                });
+            }
+            return inputRule;
+        });
+        return inputRules;
+    },
+});

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

@@ -0,0 +1,33 @@
+import { Node } from '@tiptap/core';
+import { Attrs } from '@tiptap/pm/model';
+/**
+ * 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.
+ */
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        smartTag: {
+            setSmartTag: (attrs: {
+                id: string;
+                content?: string;
+            }) => ReturnType;
+            deleteSmartTagGlobally: (predicate: (attrs: Attrs) => boolean) => ReturnType;
+            updateSmartTagAttrsGlobally: (updateFn: (attrs: Attrs) => Attrs | undefined) => ReturnType;
+        };
+    }
+}
+export declare const EXTENSION_NAME = "smartTag";
+/**
+ * Represents a dynamic tag node in the editor.
+ */
+export declare const SmartTag: Node<SmartTagOptions, any>;

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

@@ -0,0 +1,194 @@
+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.
+ */
+export const SmartTag = Node.create({
+    name: EXTENSION_NAME,
+    group: 'inline',
+    atom: true,
+    inline: true,
+    selectable: true,
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+            generateSmartTagId: () => uniqid(),
+        };
+    },
+    addAttributes() {
+        return {
+            id: {
+                default: '',
+                parseHTML: el => el.getAttribute('data-dynamic-id'),
+            },
+            content: {
+                default: '',
+                parseHTML: el => el.innerText,
+            },
+            tag: {
+                default: null,
+                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() {
+        return [
+            {
+                tag: 'span[data-dynamic="true"]',
+                priority: 1000,
+                getAttrs: node => node.getAttribute('data-dynamic') === 'true' && null,
+            },
+        ];
+    },
+    renderHTML({ node }) {
+        return [
+            'span',
+            mergeAttributes(this.options.HTMLAttributes, {
+                'data-dynamic': 'true',
+                'data-dynamic-id': node.attrs.id,
+                class: 'smart-tag',
+            }),
+            node.attrs.content,
+        ];
+    },
+    renderText({ node }) {
+        return node.attrs.content;
+    },
+    addCommands() {
+        return {
+            setSmartTag: attrs => ({ chain, state }) => {
+                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()
+                    .command(({ tr }) => {
+                    tr.replaceSelectionWith(nodeWithMarks, false);
+                    return true;
+                })
+                    .run();
+            },
+            deleteSmartTagGlobally: predicate => ({ tr, state }) => {
+                let hasDeleted = false;
+                const { doc } = state;
+                doc.descendants((node, pos) => {
+                    if (node.type.name === this.name && predicate(node.attrs)) {
+                        tr.delete(pos, pos + node.nodeSize);
+                        hasDeleted = true;
+                    }
+                });
+                return hasDeleted;
+            },
+            updateSmartTagAttrsGlobally: updateFn => ({ tr, state }) => {
+                let hasUpdated = false;
+                const { doc } = state;
+                doc.descendants((node, pos) => {
+                    if (node.type.name === this.name) {
+                        const updatedAttrs = updateFn(node.attrs);
+                        if (updatedAttrs) {
+                            tr.setNodeMarkup(pos, undefined, {
+                                ...node.attrs,
+                                ...updatedAttrs,
+                            });
+                            hasUpdated = true;
+                        }
+                    }
+                });
+                return hasUpdated;
+            },
+        };
+    },
+    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/extensions/StyleMemory.d.ts

@@ -0,0 +1,36 @@
+import { Extension } from '@tiptap/core';
+import { Mark } from '@tiptap/pm/model';
+import { DocumentStateConfig } from '../utils/documentState';
+export interface StyleMemoryOptions {
+    /**
+     * Marks to exclude from being stored
+     * @default ['link', 'smartTag']
+     */
+    excludeMarks: string[];
+    /**
+     * Configuration for document emptiness detection
+     */
+    documentStateConfig?: DocumentStateConfig;
+}
+export interface StyleMemoryStorage {
+    storedMarks: Mark[];
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        styleMemory: {
+            /**
+             * Manually store current marks
+             */
+            storeCurrentMarks: () => ReturnType;
+            /**
+             * Clear stored marks
+             */
+            clearStoredMarks: () => ReturnType;
+            /**
+             * Apply stored marks to current selection
+             */
+            applyStoredMarks: () => ReturnType;
+        };
+    }
+}
+export declare const StyleMemory: Extension<StyleMemoryOptions, StyleMemoryStorage>;

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

@@ -0,0 +1,163 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { isDocumentEmpty, DocumentStateTracker } from '../utils/documentState';
+export const StyleMemory = Extension.create({
+    name: 'styleMemory',
+    addOptions() {
+        return {
+            excludeMarks: ['link', 'smartTag'],
+            documentStateConfig: {
+                ignoreWhitespace: true,
+            },
+        };
+    },
+    addStorage() {
+        return {
+            storedMarks: [],
+        };
+    },
+    addCommands() {
+        return {
+            storeCurrentMarks: () => ({ state }) => {
+                const { selection, storedMarks } = state;
+                const { $from } = selection;
+                // Get marks from current position or stored marks
+                const currentMarks = storedMarks || $from.marks();
+                // Filter out excluded marks
+                const filteredMarks = currentMarks.filter(mark => !this.options.excludeMarks.includes(mark.type.name));
+                this.storage.storedMarks = filteredMarks;
+                return true;
+            },
+            clearStoredMarks: () => () => {
+                this.storage.storedMarks = [];
+                return true;
+            },
+            applyStoredMarks: () => ({ commands }) => {
+                if (this.storage.storedMarks.length === 0) {
+                    return true;
+                }
+                // Apply each stored mark
+                this.storage.storedMarks.forEach(mark => {
+                    commands.setMark(mark.type.name, mark.attrs);
+                });
+                return true;
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        const stateTracker = new DocumentStateTracker();
+        return [
+            new Plugin({
+                key: new PluginKey('styleMemory'),
+                state: {
+                    init: (_, initialState) => {
+                        const isEmpty = isDocumentEmpty(initialState, this.options.documentStateConfig);
+                        return {
+                            lastContentSize: initialState.doc.content.size,
+                            wasEmpty: isEmpty,
+                        };
+                    },
+                    apply: (tr, _oldState, _oldEditorState, newEditorState) => {
+                        const changes = stateTracker.update(newEditorState);
+                        const isEmpty = isDocumentEmpty(newEditorState, this.options.documentStateConfig);
+                        const hasContent = !isEmpty;
+                        // Store marks when content exists and user has selection with marks
+                        if (hasContent && tr.selection && !tr.selection.empty) {
+                            const { $from } = tr.selection;
+                            const marks = tr.storedMarks || $from.marks();
+                            if (marks.length > 0) {
+                                const filteredMarks = marks.filter(mark => !this.options.excludeMarks.includes(mark.type.name));
+                                if (filteredMarks.length > 0) {
+                                    this.storage.storedMarks = filteredMarks;
+                                }
+                            }
+                        }
+                        // Also store marks when selection changes and we have marks
+                        if (hasContent && tr.selectionSet) {
+                            const { $from } = tr.selection;
+                            const marks = tr.storedMarks || $from.marks();
+                            if (marks.length > 0) {
+                                const filteredMarks = marks.filter(mark => !this.options.excludeMarks.includes(mark.type.name));
+                                if (filteredMarks.length > 0) {
+                                    this.storage.storedMarks = filteredMarks;
+                                }
+                            }
+                        }
+                        // Apply stored marks when transitioning from empty to non-empty
+                        if (changes.becameNonEmpty && this.storage.storedMarks.length > 0) {
+                            // Set stored marks for the next input
+                            tr.setStoredMarks(this.storage.storedMarks);
+                        }
+                        return {
+                            lastContentSize: newEditorState.doc.content.size,
+                            wasEmpty: isEmpty,
+                        };
+                    },
+                },
+                appendTransaction: (transactions, oldState, newState) => {
+                    const wasEmpty = isDocumentEmpty(oldState, this.options.documentStateConfig);
+                    const hasContent = !isDocumentEmpty(newState, this.options.documentStateConfig);
+                    // Check if we need to restore marks after content was added to empty editor
+                    if (wasEmpty && hasContent && this.storage.storedMarks.length > 0) {
+                        const { tr } = newState;
+                        let hasChanges = false;
+                        // Find the newly added content
+                        let newContentStart = -1;
+                        let newContentEnd = -1;
+                        for (const transaction of transactions) {
+                            if (transaction.docChanged) {
+                                transaction.steps.forEach(step => {
+                                    if ('from' in step &&
+                                        'to' in step &&
+                                        typeof step.from === 'number' &&
+                                        typeof step.to === 'number') {
+                                        if (newContentStart === -1 || step.from < newContentStart) {
+                                            newContentStart = step.from;
+                                        }
+                                        if (newContentEnd === -1 || step.to > newContentEnd) {
+                                            newContentEnd = step.to;
+                                        }
+                                    }
+                                });
+                            }
+                        }
+                        // Apply stored marks to the new content if we found the range
+                        if (newContentStart !== -1 && newContentEnd !== -1) {
+                            this.storage.storedMarks.forEach(mark => {
+                                tr.addMark(newContentStart, newContentEnd, mark);
+                                hasChanges = true;
+                            });
+                        }
+                        // Also set stored marks for future typing
+                        if (this.storage.storedMarks.length > 0) {
+                            tr.setStoredMarks(this.storage.storedMarks);
+                            hasChanges = true;
+                        }
+                        if (hasChanges) {
+                            return tr;
+                        }
+                    }
+                    return null;
+                },
+                // Handle view updates for better mark application
+                view: () => ({
+                    update: (view, prevState) => {
+                        const prevEmpty = isDocumentEmpty(prevState, this.options.documentStateConfig);
+                        const currentEmpty = isDocumentEmpty(view.state, this.options.documentStateConfig);
+                        // When transitioning from empty to non-empty, ensure stored marks are applied
+                        if (prevEmpty && !currentEmpty && this.storage.storedMarks.length > 0) {
+                            // Use setTimeout to ensure this runs after the current transaction
+                            setTimeout(() => {
+                                const { state, dispatch } = view;
+                                const { tr } = state;
+                                // Set stored marks for the current position
+                                tr.setStoredMarks(this.storage.storedMarks);
+                                dispatch(tr);
+                            }, 0);
+                        }
+                    },
+                }),
+            }),
+        ];
+    },
+});

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

@@ -0,0 +1,30 @@
+import { Extension } from '@tiptap/core';
+export type TextTransformOptions = {
+    /**
+     * A list of node names where the text transform can be applied.
+     * @default ['textStyle']
+     * @example ['heading', 'paragraph']
+     */
+    types: string[];
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        textTransform: {
+            /**
+             * Set the text transform
+             * @param textTransform The text transform
+             * @example editor.commands.setTextTransform('uppercase')
+             */
+            setTextTransform: (textTransform: string | null) => ReturnType;
+            /**
+             * Unset the text transform
+             * @example editor.commands.unsetTextTransform()
+             */
+            unsetTextTransform: () => ReturnType;
+        };
+    }
+}
+/**
+ * This extension allows you to set a text transform for text.
+ */
+export declare const TextTransform: Extension<TextTransformOptions, any>;

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

@@ -0,0 +1,36 @@
+import { Extension } from '@tiptap/core';
+/**
+ * This extension allows you to set a text transform for text.
+ */
+export const TextTransform = Extension.create({
+    name: 'textTransform',
+    addOptions() {
+        return {
+            types: ['textStyle'],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    textTransform: {
+                        default: null,
+                        renderHTML: attrs => attrs.textTransform
+                            ? {
+                                style: `text-transform: ${attrs.textTransform}`,
+                            }
+                            : {},
+                        parseHTML: element => element.style.textTransform,
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setTextTransform: textTransform => ({ chain }) => chain().setMark('textStyle', { textTransform }).run(),
+            unsetTextTransform: () => ({ chain }) => chain().setMark('textStyle', { textTransform: 'none' }).removeEmptyTextStyle().run(),
+        };
+    },
+});