@antscorp/antsomi-ui 2.0.92-text-editor-beta.6 → 2.0.93

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

@@ -1,167 +0,0 @@
-import { Node, mergeAttributes } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { Decoration, DecorationSet } from '@tiptap/pm/view';
-export const EXTENSION_NAME = 'smartTag';
-/**
- * Creates decorations for all SmartTag nodes in the document
- * @param doc - The ProseMirror document
- * @param highlight - Whether to highlight the SmartTags
- * @returns A DecorationSet containing decorations for all SmartTag nodes
- */
-function createSmartTagDecorations(doc, highlight) {
-    const decorations = [];
-    if (!highlight) {
-        return DecorationSet.create(doc, decorations);
-    }
-    // Find all SmartTag nodes and create decorations for them
-    doc.descendants((node, pos) => {
-        if (node.type.name === EXTENSION_NAME) {
-            // Create a node decoration that adds the highlight class
-            decorations.push(Decoration.node(pos, pos + node.nodeSize, {
-                class: 'highlight',
-            }));
-        }
-    });
-    return DecorationSet.create(doc, decorations);
-}
-/**
- * Represents a dynamic tag node in the editor.
- */
-export const SmartTag = Node.create({
-    name: EXTENSION_NAME,
-    group: 'inline',
-    atom: true,
-    inline: true,
-    selectable: true,
-    addStorage() {
-        return {
-            highlight: this.options.highlight,
-        };
-    },
-    addOptions() {
-        return {
-            HTMLAttributes: {},
-            highlight: true,
-        };
-    },
-    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),
-            },
-        };
-    },
-    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, storedMarks } = state;
-                const { $from } = selection;
-                const marks = storedMarks || $from.marks();
-                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;
-            },
-            updateSmartTagHighlight: (enabled) => ({ tr }) => {
-                // Update the storage value
-                this.storage.highlight = enabled;
-                // Set metadata on the transaction to trigger the plugin to update decorations
-                tr.setMeta('updateSmartTagHighlight', { highlight: enabled });
-                return true;
-            },
-        };
-    },
-    addProseMirrorPlugins() {
-        return [
-            new Plugin({
-                key: new PluginKey(`${EXTENSION_NAME}_highlight`),
-                // Initialize the plugin state with decorations based on the initial highlight value
-                state: {
-                    init: (_, { doc }) => createSmartTagDecorations(doc, this.storage.highlight),
-                    // Update the decorations when the document changes or when the highlight value changes
-                    apply: (tr, oldDecorations) => {
-                        // Check if the highlight value has changed
-                        const highlightMeta = tr.getMeta('updateSmartTagHighlight');
-                        // If the document has changed or the highlight value has changed, update the decorations
-                        if (tr.docChanged || highlightMeta !== undefined) {
-                            return createSmartTagDecorations(tr.doc, this.storage.highlight);
-                        }
-                        // Otherwise, map the old decorations through the transaction
-                        return oldDecorations.map(tr.mapping, tr.doc);
-                    },
-                },
-                // Provide the decorations to the editor view
-                props: {
-                    decorations(state) {
-                        return this.getState(state);
-                    },
-                },
-            }),
-        ];
-    },
-});

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

@@ -1,36 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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(),
-        };
-    },
-});

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

@@ -1,55 +0,0 @@
-import { Node } from '@tiptap/core';
-import { type UnorderedListStyleType } from '../types';
-type ListStyleType = UnorderedListStyleType;
-export interface CustomUnorderedListOptions {
-    /**
-     * The node name for the list items
-     * @default 'listItem'
-     */
-    itemTypeName: string;
-    /**
-     * HTML attributes to add to the unordered list element
-     * @default {}
-     */
-    HTMLAttributes: Record<string, any>;
-    /**
-     * Keep the marks when splitting the list
-     * @default false
-     */
-    keepMarks: boolean;
-    /**
-     * Keep the attributes when splitting the list
-     * @default false
-     */
-    keepAttributes: boolean;
-    /**
-     * Default list style type
-     * @default 'disc'
-     */
-    defaultListStyleType: ListStyleType;
-}
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        customUnorderedList: {
-            /**
-             * Toggle a custom unordered list
-             */
-            toggleCustomUnorderedList: (options?: {
-                listStyleType?: ListStyleType;
-                customBulletChar?: string;
-            }) => ReturnType;
-            /**
-             * Set list style type for current unordered list
-             */
-            setUnorderedListStyle: (options: {
-                listStyleType?: ListStyleType;
-                customBulletChar?: string;
-            }) => ReturnType;
-        };
-    }
-}
-/**
- * This extension allows you to create unordered lists with custom bullet styles.
- */
-export declare const CustomUnorderedList: Node<CustomUnorderedListOptions, any>;
-export {};

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

@@ -1,176 +0,0 @@
-import { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core';
-import { UNORDERED_LIST_STYLE_TYPE } from '../constants';
-const ListItemName = 'listItem';
-const TextStyleName = 'textStyle';
-/**
- * Input regex patterns for different bullet styles
- */
-const inputRegexPatterns = {
-    disc: /^\s*([-*•])\s$/,
-    circle: /^\s*([○◯])\s$/,
-    square: /^\s*([▪■])\s$/,
-    plus: /^\s*([+])\s$/,
-    arrow: /^\s*([→➤])\s$/,
-    star: /^\s*([★☆])\s$/,
-};
-/**
- * Map input characters to bullet style types
- */
-const charToBulletStyle = {
-    '-': UNORDERED_LIST_STYLE_TYPE.disc,
-    '*': UNORDERED_LIST_STYLE_TYPE.disc,
-    '•': UNORDERED_LIST_STYLE_TYPE.disc,
-    '○': UNORDERED_LIST_STYLE_TYPE.circle,
-    '◯': UNORDERED_LIST_STYLE_TYPE.circle,
-    '▪': UNORDERED_LIST_STYLE_TYPE.square,
-    '■': UNORDERED_LIST_STYLE_TYPE.square,
-    '+': UNORDERED_LIST_STYLE_TYPE.custom,
-    '→': UNORDERED_LIST_STYLE_TYPE.custom,
-    '➤': UNORDERED_LIST_STYLE_TYPE.custom,
-    '★': UNORDERED_LIST_STYLE_TYPE.custom,
-    '☆': UNORDERED_LIST_STYLE_TYPE.custom,
-};
-/**
- * This extension allows you to create unordered lists with custom bullet styles.
- */
-export const CustomUnorderedList = Node.create({
-    name: 'customUnorderedList',
-    addOptions() {
-        return {
-            itemTypeName: ListItemName,
-            HTMLAttributes: {
-                style: 'margin:0.5em 0;padding-inline-start:1.2em',
-            },
-            keepMarks: false,
-            keepAttributes: false,
-            defaultListStyleType: UNORDERED_LIST_STYLE_TYPE.disc,
-            customBulletChar: '→',
-        };
-    },
-    group: 'block list',
-    content() {
-        return `${this.options.itemTypeName}+`;
-    },
-    addAttributes() {
-        return {
-            listStyleType: {
-                default: this.options.defaultListStyleType,
-                parseHTML: element => {
-                    if (element.dataset.bulletChar) {
-                        return UNORDERED_LIST_STYLE_TYPE.custom;
-                    }
-                    const style = element.getAttribute('style');
-                    const listStyleType = style?.match(/list-style-type:\s*([^;]+)/)?.[1]?.trim();
-                    return listStyleType || this.options.defaultListStyleType;
-                },
-                renderHTML: attributes => {
-                    if (attributes.listStyleType === UNORDERED_LIST_STYLE_TYPE.custom) {
-                        return {};
-                    }
-                    return {
-                        style: `list-style-type: ${attributes.listStyleType}`,
-                    };
-                },
-            },
-            customBulletChar: {
-                default: null,
-                parseHTML: element => element.getAttribute('data-bullet-char'),
-                renderHTML: attributes => {
-                    if (attributes.listStyleType === UNORDERED_LIST_STYLE_TYPE.custom) {
-                        return {
-                            'data-bullet-char': attributes.customBulletChar,
-                            style: `list-style-type: '${attributes.customBulletChar} '`,
-                        };
-                    }
-                    return {};
-                },
-            },
-        };
-    },
-    parseHTML() {
-        return [{ tag: 'ul' }];
-    },
-    renderHTML({ HTMLAttributes }) {
-        return ['ul', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-    },
-    addCommands() {
-        return {
-            toggleCustomUnorderedList: (options = {}) => ({ chain }) => {
-                const { listStyleType = this.options.defaultListStyleType, customBulletChar } = 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,
-                        customBulletChar,
-                    })
-                        .run();
-                }
-                return chain()
-                    .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
-                    .updateAttributes(this.name, {
-                    listStyleType,
-                    customBulletChar,
-                })
-                    .run();
-            },
-            setUnorderedListStyle: (options = {}) => ({ commands }) => {
-                const { listStyleType, customBulletChar } = options;
-                return commands.updateAttributes(this.name, {
-                    listStyleType,
-                    customBulletChar,
-                });
-            },
-        };
-    },
-    addKeyboardShortcuts() {
-        return {
-            'Mod-Shift-8': () => this.editor.commands.toggleCustomUnorderedList(),
-        };
-    },
-    addInputRules() {
-        const inputRules = [];
-        Object.values(inputRegexPatterns).forEach(regex => {
-            let inputRule = wrappingInputRule({
-                find: regex,
-                type: this.type,
-                getAttributes: match => {
-                    const char = match[1];
-                    const listStyleType = charToBulletStyle[char] || UNORDERED_LIST_STYLE_TYPE.disc;
-                    if (listStyleType === UNORDERED_LIST_STYLE_TYPE.custom) {
-                        return {
-                            listStyleType: UNORDERED_LIST_STYLE_TYPE.custom,
-                            customBulletChar: char,
-                        };
-                    }
-                    return { listStyleType };
-                },
-            });
-            if (this.options.keepMarks || this.options.keepAttributes) {
-                inputRule = wrappingInputRule({
-                    find: regex,
-                    type: this.type,
-                    keepMarks: this.options.keepMarks,
-                    keepAttributes: this.options.keepAttributes,
-                    getAttributes: match => {
-                        const char = match[1];
-                        const listStyleType = charToBulletStyle[char] || UNORDERED_LIST_STYLE_TYPE.disc;
-                        const baseAttributes = this.editor.getAttributes(TextStyleName);
-                        if (listStyleType === UNORDERED_LIST_STYLE_TYPE.custom) {
-                            return {
-                                ...baseAttributes,
-                                listStyleType: UNORDERED_LIST_STYLE_TYPE.custom,
-                                customBulletChar: char,
-                            };
-                        }
-                        return { ...baseAttributes, listStyleType };
-                    },
-                    editor: this.editor,
-                });
-            }
-            inputRules.push(inputRule);
-        });
-        return inputRules;
-    },
-});

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

@@ -1,6 +0,0 @@
-export * from './usePersistence';
-export * from './useMarkTracking';
-export * from './useStyleMemory';
-export * from './useStylePresets';
-export * from './useDocumentState';
-export * from './useColorSet';

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

@@ -1,6 +0,0 @@
-export * from './usePersistence';
-export * from './useMarkTracking';
-export * from './useStyleMemory';
-export * from './useStylePresets';
-export * from './useDocumentState';
-export * from './useColorSet';