@antscorp/antsomi-ui 2.0.84 → 2.0.86-text-editor-beta.1

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

@@ -0,0 +1,223 @@
+import { useCallback } from 'react';
+import { TextSelection } from '@tiptap/pm/state';
+import { getLinkMark, getLinkMarkRanges, getLinkRange, isLinkColor } from '../utils';
+import { TEXT_EDITOR_CONSTANTS } from '../constants';
+const { LINK_TEXT_COLOR } = TEXT_EDITOR_CONSTANTS;
+export function useLinkHandler(params) {
+    const { editor } = params;
+    const setLink = useCallback(attrs => {
+        if (!editor)
+            return;
+        const { selection } = editor?.state;
+        const { from, to } = selection;
+        let linkContent = editor.state.doc.textBetween(from, to);
+        if (attrs.content && linkContent !== attrs.content) {
+            linkContent = attrs.content;
+        }
+        editor
+            .chain()
+            .focus()
+            .deleteSelection()
+            .insertContent(linkContent)
+            .command(({ tr }) => {
+            const endPos = tr.selection.from;
+            const startPos = endPos - linkContent.length;
+            tr.setSelection(TextSelection.create(tr.doc, startPos, endPos));
+            return true;
+        })
+            .setUnderline()
+            .setColor(LINK_TEXT_COLOR)
+            .setLink(attrs)
+            .command(({ tr }) => {
+            const endPos = tr.selection.to;
+            tr.setSelection(TextSelection.create(tr.doc, endPos, endPos));
+            return true;
+        })
+            .run();
+    }, [editor]);
+    const deleteLink = useCallback((id) => {
+        if (!editor)
+            return;
+        const { state } = editor;
+        const { doc } = state;
+        let linkMark;
+        doc.descendants((node, pos) => {
+            if (linkMark)
+                return;
+            linkMark = getLinkMarkRanges({
+                state,
+                from: pos,
+                to: pos + node.nodeSize,
+            }).find(range => range.mark.attrs.id === id);
+        });
+        if (linkMark) {
+            editor
+                .chain()
+                .deleteRange({
+                from: linkMark.from,
+                to: linkMark.to,
+            })
+                .run();
+        }
+    }, [editor]);
+    const updateLinkAttrsGlobally = useCallback((updateFn) => {
+        if (!editor)
+            return;
+        const { state, view } = editor;
+        const { doc, schema, tr } = state;
+        const linkType = schema.marks.link;
+        let somethingChanged = false;
+        doc.descendants((node, pos) => {
+            // Get all link mark ranges within this node
+            const linkMarkRanges = getLinkMarkRanges({
+                state,
+                from: pos,
+                to: pos + node.nodeSize,
+            });
+            linkMarkRanges.forEach(markRange => {
+                const updatedAttrs = updateFn(markRange.mark.attrs);
+                if (updatedAttrs) {
+                    // Remove the old mark
+                    tr.removeMark(markRange.from, markRange.to, markRange.mark);
+                    // Create a new mark with updated attributes and add it
+                    const newMark = linkType.create({
+                        ...markRange.mark.attrs,
+                        ...updatedAttrs,
+                    });
+                    tr.addMark(markRange.from, markRange.to, newMark);
+                    somethingChanged = true;
+                }
+            });
+        });
+        if (somethingChanged) {
+            view.dispatch(tr);
+        }
+    }, [editor]);
+    const updateLinkTextGlobally = useCallback((updateFn) => {
+        if (!editor)
+            return;
+        const { state, view } = editor;
+        const { doc, schema, tr } = state;
+        const linkType = schema.marks.link;
+        const underlineType = schema.marks.underline; // Assuming you have an underline mark
+        const textStyleType = schema.marks.textStyle; // Assuming textStyle mark handles color
+        const boldType = schema.marks.bold; // Assuming bold mark
+        const italicType = schema.marks.italic; // Assuming italic mark
+        const rangesToProcess = [];
+        // Collect all unique extended link ranges
+        doc.descendants((node, pos) => {
+            if (!node.isText)
+                return;
+            const linkMark = linkType.isInSet(node.marks);
+            if (linkMark) {
+                const linkRange = getLinkRange({ state, pos });
+                if (linkRange) {
+                    // Check if this extended range has already been added
+                    const isProcessed = rangesToProcess.some(pr => pr.from === linkRange.from && pr.to === linkRange.to);
+                    if (!isProcessed) {
+                        // Find the first link mark in the range to get original attributes
+                        const originalLinkMark = getLinkMark({
+                            state,
+                            from: linkRange.from,
+                            to: linkRange.to,
+                        });
+                        if (originalLinkMark) {
+                            rangesToProcess.push({
+                                from: linkRange.from,
+                                to: linkRange.to,
+                                originalAttrs: originalLinkMark.attrs,
+                            });
+                        }
+                    }
+                }
+            }
+        });
+        // Sort ranges in descending order to avoid issues with position shifts during deletion
+        rangesToProcess.sort((a, b) => b.from - a.from);
+        let hasChanged = false;
+        const applyLinkMarks = (from, to, originalAttrs, originalMarks) => {
+            // Apply the link mark with original attributes
+            const newLinkMark = linkType.create({
+                ...originalAttrs,
+                href: originalAttrs.href, // Ensure href is included
+            });
+            tr.addMark(from, to, newLinkMark);
+            // Apply underline mark
+            if (underlineType) {
+                const newUnderlineMark = underlineType.create();
+                tr.addMark(from, to, newUnderlineMark);
+            }
+            // Apply blue color mark (#0066CC) by finding the existing textStyle mark or creating a new one
+            if (textStyleType) {
+                const originalTextStyle = originalMarks.find(m => m.type === textStyleType);
+                const newColorMark = textStyleType.create({
+                    ...originalTextStyle?.attrs,
+                    color: LINK_TEXT_COLOR,
+                });
+                tr.addMark(from, to, newColorMark);
+            }
+            // Apply bold mark if it existed
+            if (boldType) {
+                const originalBoldMark = originalMarks.find(m => m.type === boldType);
+                if (originalBoldMark) {
+                    tr.addMark(from, to, originalBoldMark);
+                }
+            }
+            // Apply italic mark if it existed
+            if (italicType) {
+                const originalItalicMark = originalMarks.find(m => m.type === italicType);
+                if (originalItalicMark) {
+                    tr.addMark(from, to, originalItalicMark);
+                }
+            }
+        };
+        rangesToProcess.forEach(({ from, to, originalAttrs }) => {
+            const currentTextContent = state.doc.textBetween(from, to);
+            const updatedText = updateFn({
+                currentText: currentTextContent,
+                attrs: originalAttrs,
+            });
+            if (updatedText !== undefined) {
+                hasChanged = true;
+                // Get the marks from the node at the start of the link range
+                const originalMarks = state.doc.resolve(from).marks();
+                // Delete the old content
+                tr.delete(from, to);
+                // Insert the new text node
+                const newTextNode = schema.text(updatedText);
+                tr.insert(from, newTextNode);
+                // Apply the desired marks to the new text range
+                applyLinkMarks(from, from + updatedText.length, originalAttrs, originalMarks);
+            }
+        });
+        if (hasChanged) {
+            view.dispatch(tr);
+        }
+    }, [editor]);
+    const unsetLink = useCallback(() => {
+        if (!editor)
+            return;
+        const { state } = editor;
+        const linkRange = getLinkRange({ state, pos: state.selection.from });
+        if (!linkRange)
+            return;
+        const command = editor
+            .chain()
+            .setTextSelection({
+            from: linkRange.from,
+            to: linkRange.to,
+        })
+            .unsetUnderline()
+            .unsetLink();
+        if (isLinkColor(editor.getAttributes('textStyle').color)) {
+            command.unsetColor();
+        }
+        command.run();
+    }, [editor]);
+    return {
+        setLink,
+        deleteLink,
+        unsetLink,
+        updateLinkAttrsGlobally,
+    };
+}

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

@@ -0,0 +1,26 @@
+import { Editor } from '@tiptap/react';
+import { Mark } from '@tiptap/pm/model';
+export interface MarkSnapshot {
+    marks: Mark[];
+    position: number;
+    timestamp: number;
+    textContent: string;
+}
+export interface UseMarkTrackingOptions {
+    /** Maximum number of snapshots to keep */
+    maxSnapshots?: number;
+    /** Marks to exclude from tracking */
+    excludeMarks?: string[];
+    /** Debounce delay for tracking (ms) */
+    debounceDelay?: number;
+    /** Auto-capture snapshots */
+    autoCapture?: boolean;
+}
+export declare function useMarkTracking(editor: Editor | null, options?: UseMarkTrackingOptions): {
+    snapshots: MarkSnapshot[];
+    currentMarks: Mark[];
+    captureMarkSnapshot: () => void;
+    applySnapshot: (index: number) => void;
+    getSimilarSnapshots: (targetMarks?: Mark[]) => MarkSnapshot[];
+    clearSnapshots: () => void;
+};

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

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useState } from 'react';
+export function useMarkTracking(editor, options = {}) {
+    const { maxSnapshots = 10, excludeMarks = ['link', 'smartTag'], debounceDelay = 500, autoCapture = true, } = options;
+    const [snapshots, setSnapshots] = useState([]);
+    const [currentMarks, setCurrentMarks] = useState([]);
+    // Capture current mark state
+    const captureMarkSnapshot = useCallback(() => {
+        if (!editor)
+            return;
+        const { selection, storedMarks } = editor.state;
+        const { $from } = selection;
+        const marks = (storedMarks || $from.marks()).filter(mark => !excludeMarks.includes(mark.type.name));
+        const snapshot = {
+            marks,
+            position: $from.pos,
+            timestamp: Date.now(),
+            textContent: editor.state.doc.textBetween(Math.max(0, $from.pos - 50), Math.min(editor.state.doc.content.size, $from.pos + 50)),
+        };
+        setSnapshots(prev => {
+            const updated = [snapshot, ...prev];
+            return updated.slice(0, maxSnapshots);
+        });
+        setCurrentMarks(marks);
+    }, [editor, excludeMarks, maxSnapshots]);
+    // Apply marks from snapshot
+    const applySnapshot = useCallback((index) => {
+        if (!editor || !snapshots[index])
+            return;
+        const snapshot = snapshots[index];
+        // Clear current marks
+        editor.chain().unsetAllMarks().run();
+        // Apply snapshot marks
+        snapshot.marks.forEach(mark => {
+            editor.chain().setMark(mark.type.name, mark.attrs).run();
+        });
+    }, [editor, snapshots]);
+    // Get similar snapshots based on marks
+    const getSimilarSnapshots = useCallback((targetMarks = currentMarks) => snapshots.filter(snapshot => {
+        const markNames = snapshot.marks.map(m => m.type.name).sort();
+        const targetNames = targetMarks.map(m => m.type.name).sort();
+        return JSON.stringify(markNames) === JSON.stringify(targetNames);
+    }), [snapshots, currentMarks]);
+    // Auto-capture setup
+    useEffect(() => {
+        if (!editor || !autoCapture)
+            return;
+        let timeoutId;
+        const handleUpdate = () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(captureMarkSnapshot, debounceDelay);
+        };
+        editor.on('selectionUpdate', handleUpdate);
+        editor.on('update', handleUpdate);
+        return () => {
+            clearTimeout(timeoutId);
+            editor.off('selectionUpdate', handleUpdate);
+            editor.off('update', handleUpdate);
+        };
+    }, [editor, autoCapture, debounceDelay, captureMarkSnapshot]);
+    return {
+        snapshots,
+        currentMarks,
+        captureMarkSnapshot,
+        applySnapshot,
+        getSimilarSnapshots,
+        clearSnapshots: () => setSnapshots([]),
+    };
+}

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

@@ -0,0 +1,31 @@
+import { Editor } from '@tiptap/react';
+export interface PersistenceConfig {
+    /** Storage key */
+    key: string;
+    /** Storage type */
+    storage?: 'localStorage' | 'sessionStorage' | 'indexedDB';
+    /** Auto-save delay */
+    autoSaveDelay?: number;
+    /** Version for data migration */
+    version?: number;
+    /** Compression */
+    compress?: boolean;
+    /** Encryption key */
+    encryptionKey?: string;
+}
+export interface PersistentData {
+    content: string;
+    marks: any[];
+    metadata: {
+        timestamp: number;
+        version: number;
+        wordCount: number;
+        characterCount: number;
+    };
+}
+export declare function usePersistence(editor: Editor | null, config: PersistenceConfig): {
+    save: () => Promise<void>;
+    load: () => Promise<boolean>;
+    saveToStorage: (data: PersistentData) => Promise<void>;
+    loadFromStorage: () => Promise<PersistentData | null>;
+};

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

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+// Helper functions (simplified implementations)
+async function compressString(str) {
+    // Implement compression logic
+    return str;
+}
+async function decompressString(str) {
+    // Implement decompression logic
+    return str;
+}
+async function encryptString(str, _key) {
+    // Implement encryption logic
+    return str;
+}
+async function decryptString(str, _key) {
+    // Implement decryption logic
+    return str;
+}
+async function saveToIndexedDB(_key, _data) {
+    // Implement IndexedDB save
+}
+async function loadFromIndexedDB(_key) {
+    // Implement IndexedDB load
+    return null;
+}
+function migrateData(data, _targetVersion) {
+    // Implement data migration logic
+    return data;
+}
+export function usePersistence(editor, config) {
+    const { key, storage = 'localStorage', autoSaveDelay = 2000, version = 1, compress = false, encryptionKey, } = config;
+    const lastSavedContent = useRef('');
+    // Storage operations
+    const saveToStorage = useCallback(async (data) => {
+        try {
+            let serializedData = JSON.stringify(data);
+            // Apply compression if enabled
+            if (compress && 'CompressionStream' in window) {
+                // Use browser compression API if available
+                serializedData = await compressString(serializedData);
+            }
+            // Apply encryption if key provided
+            if (encryptionKey) {
+                serializedData = await encryptString(serializedData, encryptionKey);
+            }
+            switch (storage) {
+                case 'localStorage':
+                    localStorage.setItem(key, serializedData);
+                    break;
+                case 'sessionStorage':
+                    sessionStorage.setItem(key, serializedData);
+                    break;
+                case 'indexedDB':
+                    await saveToIndexedDB(key, serializedData);
+                    break;
+                default:
+                    break;
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to save to storage:', error);
+        }
+    }, [key, storage, compress, encryptionKey]);
+    const loadFromStorage = useCallback(async () => {
+        try {
+            let serializedData = null;
+            switch (storage) {
+                case 'localStorage':
+                    serializedData = localStorage.getItem(key);
+                    break;
+                case 'sessionStorage':
+                    serializedData = sessionStorage.getItem(key);
+                    break;
+                case 'indexedDB':
+                    serializedData = await loadFromIndexedDB(key);
+                    break;
+                default:
+                    break;
+            }
+            if (!serializedData)
+                return null;
+            // Apply decryption if key provided
+            if (encryptionKey) {
+                serializedData = await decryptString(serializedData, encryptionKey);
+            }
+            // Apply decompression if enabled
+            if (compress && 'DecompressionStream' in window) {
+                serializedData = await decompressString(serializedData);
+            }
+            const data = JSON.parse(serializedData);
+            // Handle version migration
+            if (data.metadata.version !== version) {
+                return migrateData(data, version);
+            }
+            return data;
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to load from storage:', error);
+            return null;
+        }
+    }, [key, storage, compress, encryptionKey, version]);
+    // Auto-save debounced function
+    const debouncedSave = useDebouncedCallback(async () => {
+        if (!editor)
+            return;
+        const currentContent = editor.getHTML();
+        // Only save if content changed
+        if (currentContent === lastSavedContent.current)
+            return;
+        const { selection, storedMarks } = editor.state;
+        const marks = storedMarks || selection.$from.marks();
+        const data = {
+            content: currentContent,
+            marks: marks.map(mark => ({
+                type: mark.type.name,
+                attrs: mark.attrs,
+            })),
+            metadata: {
+                timestamp: Date.now(),
+                version,
+                wordCount: editor.state.doc.textContent.split(/\s+/).length,
+                characterCount: editor.state.doc.textContent.length,
+            },
+        };
+        await saveToStorage(data);
+        lastSavedContent.current = currentContent;
+    }, autoSaveDelay);
+    // Manual save
+    const save = useCallback(async () => {
+        debouncedSave.flush();
+    }, [debouncedSave]);
+    // Load data
+    const load = useCallback(async () => {
+        if (!editor)
+            return false;
+        const data = await loadFromStorage();
+        if (!data)
+            return false;
+        // Set content
+        editor.commands.setContent(data.content);
+        // Restore marks if available
+        if (data.marks.length > 0) {
+            data.marks.forEach(({ type, attrs }) => {
+                editor.commands.setMark(type, attrs);
+            });
+        }
+        lastSavedContent.current = data.content;
+        return true;
+    }, [editor, loadFromStorage]);
+    // Auto-save setup
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.on('update', debouncedSave);
+        return () => {
+            editor.off('update', debouncedSave);
+            debouncedSave.flush(); // Save any pending changes
+        };
+    }, [editor, debouncedSave]);
+    return {
+        save,
+        load,
+        saveToStorage,
+        loadFromStorage,
+    };
+}

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

@@ -0,0 +1,6 @@
+import { Editor } from '@tiptap/react';
+export declare function useStyleMemory(editor: Editor | null): {
+    storeCurrentMarks: () => void;
+    clearStoredMarks: () => void;
+    applyStoredMarks: () => void;
+};

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

@@ -0,0 +1,42 @@
+import { useCallback, useEffect } from 'react';
+export function useStyleMemory(editor) {
+    // Store current marks manually
+    const storeCurrentMarks = useCallback(() => {
+        editor?.commands.storeCurrentMarks();
+    }, [editor]);
+    // Clear stored marks
+    const clearStoredMarks = useCallback(() => {
+        editor?.commands.clearStoredMarks();
+    }, [editor]);
+    // Apply stored marks
+    const applyStoredMarks = useCallback(() => {
+        editor?.commands.applyStoredMarks();
+    }, [editor]);
+    // Auto-store marks when selection changes
+    useEffect(() => {
+        if (!editor)
+            return;
+        const handleSelectionUpdate = () => {
+            const { selection, doc } = editor.state;
+            // Only store if editor has content and selection has marks
+            if (doc.content.size > 4 && !selection.empty) {
+                const { $from } = selection;
+                const marks = editor.state.storedMarks || $from.marks();
+                if (marks.length > 0) {
+                    storeCurrentMarks();
+                }
+            }
+        };
+        editor.on('selectionUpdate', handleSelectionUpdate);
+        editor.on('update', handleSelectionUpdate);
+        return () => {
+            editor.off('selectionUpdate', handleSelectionUpdate);
+            editor.off('update', handleSelectionUpdate);
+        };
+    }, [editor, storeCurrentMarks]);
+    return {
+        storeCurrentMarks,
+        clearStoredMarks,
+        applyStoredMarks,
+    };
+}

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

@@ -0,0 +1,34 @@
+import { Editor } from '@tiptap/react';
+export interface StylePreset {
+    id: string;
+    name: string;
+    description?: string;
+    marks: Array<{
+        type: string;
+        attrs: Record<string, any>;
+    }>;
+    textStyle: {
+        fontSize?: string;
+        fontFamily?: string;
+        color?: string;
+        backgroundColor?: string;
+        fontWeight?: string | number;
+    };
+    createdAt: number;
+    usageCount: number;
+}
+export interface UseStylePresetsOptions {
+    /** Storage key for presets */
+    storageKey?: string;
+    /** Maximum number of presets */
+    maxPresets?: number;
+    /** Default presets */
+    defaultPresets?: Omit<StylePreset, 'id' | 'createdAt' | 'usageCount'>[];
+}
+export declare function useStylePresets(editor: Editor | null, options?: UseStylePresetsOptions): {
+    presets: StylePreset[];
+    createPreset: (name: string, description?: string) => StylePreset | undefined;
+    applyPreset: (presetId: string) => void;
+    deletePreset: (presetId: string) => void;
+    getPopularPresets: (limit?: number) => StylePreset[];
+};

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

@@ -0,0 +1,83 @@
+// Use case**: Template systems, corporate branding, user productivity
+import { useCallback } from 'react';
+import { useBroadcastedLocalStorage } from '@antscorp/antsomi-ui/es/hooks/useBroadcastedLocalStorage';
+export function useStylePresets(editor, options = {}) {
+    const { storageKey = 'text-editor-style-presets', maxPresets = 20, defaultPresets = [], } = options;
+    const { value: presets, setValue: setPresets } = useBroadcastedLocalStorage(storageKey, defaultPresets.map((preset, index) => ({
+        ...preset,
+        id: `default-${index}`,
+        createdAt: Date.now(),
+        usageCount: 0,
+    })));
+    // Create preset from current style
+    const createPreset = useCallback((name, description) => {
+        if (!editor)
+            return;
+        const { selection, storedMarks } = editor.state;
+        const { $from } = selection;
+        const marks = (storedMarks || $from.marks()).map(mark => ({
+            type: mark.type.name,
+            attrs: mark.attrs,
+        }));
+        const textStyle = editor.getAttributes('textStyle');
+        const preset = {
+            id: `preset-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+            name,
+            description,
+            marks,
+            textStyle,
+            createdAt: Date.now(),
+            usageCount: 0,
+        };
+        setPresets(prev => {
+            const updated = [preset, ...prev];
+            return updated.slice(0, maxPresets);
+        });
+        return preset;
+    }, [editor, maxPresets, setPresets]);
+    // Apply preset
+    const applyPreset = useCallback((presetId) => {
+        if (!editor)
+            return;
+        const preset = presets.find(p => p.id === presetId);
+        if (!preset)
+            return;
+        // Clear current formatting
+        editor.chain().focus().unsetAllMarks().run();
+        // Apply text style attributes
+        if (preset.textStyle.fontSize) {
+            editor.chain().setFontSize(preset.textStyle.fontSize).run();
+        }
+        if (preset.textStyle.fontFamily) {
+            editor.chain().setFontFamily(preset.textStyle.fontFamily).run();
+        }
+        if (preset.textStyle.color) {
+            editor.chain().setColor(preset.textStyle.color).run();
+        }
+        if (preset.textStyle.backgroundColor) {
+            editor.chain().setBackgroundColor(preset.textStyle.backgroundColor).run();
+        }
+        if (preset.textStyle.fontWeight) {
+            editor.chain().setFontWeight(preset.textStyle.fontWeight).run();
+        }
+        // Apply marks
+        preset.marks.forEach(({ type, attrs }) => {
+            editor.chain().setMark(type, attrs).run();
+        });
+        // Update usage count
+        setPresets(prev => prev.map(p => (p.id === presetId ? { ...p, usageCount: p.usageCount + 1 } : p)));
+    }, [editor, presets, setPresets]);
+    // Delete preset
+    const deletePreset = useCallback((presetId) => {
+        setPresets(prev => prev.filter(p => p.id !== presetId));
+    }, [setPresets]);
+    // Get popular presets
+    const getPopularPresets = useCallback((limit = 5) => [...presets].sort((a, b) => b.usageCount - a.usageCount).slice(0, limit), [presets]);
+    return {
+        presets,
+        createPreset,
+        applyPreset,
+        deletePreset,
+        getPopularPresets,
+    };
+}