@antscorp/antsomi-ui 2.0.83-text-editor-beta.10 → 2.0.84

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,31 +0,0 @@
-import '@tiptap/extension-text-style';
-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) => 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,37 +0,0 @@
-import '@tiptap/extension-text-style';
-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 && attrs.textTransform !== 'none'
-                            ? {
-                                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/hooks/index.d.ts

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

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

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

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

@@ -1,18 +0,0 @@
-import { Editor } from '@tiptap/react';
-import { DocumentStateConfig, getDocumentStats } from '../utils/documentState';
-export interface UseDocumentStateOptions extends DocumentStateConfig {
-    /** Callback when document becomes empty */
-    onBecomeEmpty?: () => void;
-    /** Callback when document becomes non-empty */
-    onBecomeNonEmpty?: () => void;
-    /** Callback when document state changes */
-    onStateChange?: (stats: ReturnType<typeof getDocumentStats>) => void;
-}
-export declare function useDocumentState(editor: Editor | null, options?: UseDocumentStateOptions): {
-    nodeSize: number;
-    textLength: number;
-    trimmedTextLength: number;
-    nodeCount: void;
-    isEmpty: boolean;
-    emptyDocumentSize: number;
-} | null;

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

@@ -1,42 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { DocumentStateTracker, getDocumentStats, } from '../utils/documentState';
-export function useDocumentState(editor, options = {}) {
-    const { onBecomeEmpty, onBecomeNonEmpty, onStateChange } = options;
-    const [documentStats, setDocumentStats] = useState(() => editor ? getDocumentStats(editor.state) : null);
-    const trackerRef = useRef(new DocumentStateTracker());
-    const updateDocumentState = useCallback(() => {
-        if (!editor)
-            return;
-        const stats = getDocumentStats(editor.state);
-        const changes = trackerRef.current.update(editor.state);
-        setDocumentStats(stats);
-        // Trigger callbacks
-        if (changes.becameEmpty) {
-            onBecomeEmpty?.();
-        }
-        if (changes.becameNonEmpty) {
-            onBecomeNonEmpty?.();
-        }
-        if (changes.sizeChanged || changes.textLengthChanged) {
-            onStateChange?.(stats);
-        }
-    }, [editor, onBecomeEmpty, onBecomeNonEmpty, onStateChange]);
-    useEffect(() => {
-        if (!editor)
-            return;
-        // Initial state
-        updateDocumentState();
-        // Listen to changes
-        editor.on('update', updateDocumentState);
-        editor.on('transaction', updateDocumentState);
-        return () => {
-            editor.off('update', updateDocumentState);
-            editor.off('transaction', updateDocumentState);
-        };
-    }, [editor, updateDocumentState]);
-    // Reset tracker when editor changes
-    useEffect(() => {
-        trackerRef.current.reset();
-    }, [editor]);
-    return documentStats;
-}

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

@@ -1,10 +0,0 @@
-import { Editor } from '@tiptap/react';
-import { Attrs } from '@tiptap/pm/model';
-export declare function useLinkHandler(params: {
-    editor?: Editor | null;
-}): {
-    setLink: (attrs: import("../extensions/Link").LinkAttrs) => void;
-    deleteLink: (id: string) => void;
-    unsetLink: () => void;
-    updateLinkAttrsGlobally: (updateFn: (attrs: Attrs) => Attrs | undefined) => void;
-};