@antscorp/antsomi-ui 2.0.89 → 2.0.91-text-editor-beta.1

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+export declare const useColorSet: () => {
+    colors: string[];
+    setColors: (newColors: string[]) => void;
+};

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

@@ -0,0 +1,22 @@
+import { useBroadcastedLocalStorage, useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { useTextEditorStore } from '../provider';
+import { ANTSOMI_COMPONENT_PREFIX_CLS } from '@antscorp/antsomi-ui/es/constants';
+import { useCallback } from 'react';
+export const useColorSet = () => {
+    const colors = useTextEditorStore(s => s.colors);
+    const setColors = useTextEditorStore(s => s.setColors);
+    const { value: storageColors, setValue: setStorageColors } = useBroadcastedLocalStorage(`${ANTSOMI_COMPONENT_PREFIX_CLS}_text-editor`, undefined);
+    useDeepCompareEffect(() => {
+        if (storageColors === undefined && colors !== undefined) {
+            setStorageColors(colors);
+        }
+        if (colors === undefined && storageColors !== undefined) {
+            setColors(storageColors);
+        }
+    }, [colors, storageColors, setColors, setStorageColors]);
+    const composeSetColors = useCallback((newColors) => {
+        setColors(newColors);
+        setStorageColors(newColors);
+    }, [setColors, setStorageColors]);
+    return { colors: colors || [], setColors: composeSetColors };
+};

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

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

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

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

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

@@ -0,0 +1,125 @@
+import { useCallback } from 'react';
+import { TextSelection } from '@tiptap/pm/state';
+import { getLinkMarkRanges, getLinkRange, isLinkColor } from '../utils';
+import { TEXT_EDITOR_CONSTANTS } from '../constants';
+const { LINK_TEXT_COLOR } = TEXT_EDITOR_CONSTANTS;
+export function useLinkHandler(params) {
+    const { editor, highlight } = 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,
+            class: highlight ? 'highlight' : undefined,
+        })
+            .command(({ tr }) => {
+            const endPos = tr.selection.to;
+            tr.setSelection(TextSelection.create(tr.doc, endPos, endPos));
+            return true;
+        })
+            .run();
+    }, [editor, highlight]);
+    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 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>;
+};