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

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,
+    };
+}

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { JSONContent } from '@tiptap/core';
+export type { TextEditorProps, TextEditorRef } from './types';
+export type { JSONContent as TextEditorJSONContent };
+export { TextEditorProvider, type TextEditorProviderProps, type TextEditorProviderRefHandler, } from './provider';
+export declare const TextEditor: import("react").NamedExoticComponent<Omit<import("./types").TextEditorProps & import("react").RefAttributes<import("./types").TextEditorRef>, "ref"> & {
+    ref?: ((instance: import("./types").TextEditorRef | null) => void) | import("react").RefObject<import("./types").TextEditorRef> | null | undefined;
+}> & {
+    readonly type: import("react").ForwardRefExoticComponent<import("./types").TextEditorProps & import("react").RefAttributes<import("./types").TextEditorRef>>;
+} & {
+    Utils: {
+        htmlMinifyForEmail: (htmlEditorContent: string) => string;
+    };
+};

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

@@ -0,0 +1,6 @@
+import { TextEditor as TextEditorComponent } from './TextEditor';
+import { htmlMinifyForEmail } from './utils';
+export { TextEditorProvider, } from './provider';
+export const TextEditor = Object.assign(TextEditorComponent, {
+    Utils: { htmlMinifyForEmail },
+});

package/es/components/organism/TextEditor/index.scss

@@ -0,0 +1,61 @@
+.antsomi-text-editor-bubble-menu {
+  visibility: hidden;
+  position: absolute;
+  pointer-events: auto;
+  z-index: 999;
+}
+
+.antsomi-text-editor-emoji-popover {
+  position: absolute;
+  width: 180px;
+  z-index: 1000;
+
+  .antsomi-text-editor-emoji-list {
+    .antsomi-virtualize-menu-menu-inline {
+      background-color: white;
+      box-shadow: var(--antsomi-box-shadow-secondary);
+      border-radius: 10px;
+
+      .antsomi-virtualize-menu-item-label {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+    }
+  }
+}
+
+.font-popover-overlay {
+  padding: 0;
+
+  .font-popover-item {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    padding-left: 10px;
+    padding-right: 8px;
+
+    &:hover,
+    &.active {
+      background-color: #f2f9ff;
+    }
+  }
+}
+
+.font-weight-popover {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      padding: 10px 0px;
+
+      .font-weight-item {
+        padding: 4px 10px;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+          background-color: #f2f9ff;
+        }
+      }
+    }
+  }
+}

package/es/components/organism/TextEditor/provider.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { StoreApi } from 'zustand';
+import type { TextEditorStore } from './store';
+export type TextEditorStoreApi = StoreApi<TextEditorStore>;
+export declare const TextEditorStoreContext: import("react").Context<TextEditorStoreApi | null>;
+export interface TextEditorProviderRefHandler {
+    updateColors?: (colors: string[]) => void;
+}
+export interface TextEditorProviderProps {
+    ref?: React.RefObject<TextEditorProviderRefHandler>;
+    children: React.ReactNode | ((props: TextEditorStoreApi) => React.ReactNode);
+    onChangeColors?: (colors: string[]) => void;
+}
+export declare const TextEditorProvider: React.FC<React.PropsWithChildren<TextEditorProviderProps>>;
+export declare const useTextEditorStore: <T>(selector: (state: TextEditorStore) => T) => T;

package/es/components/organism/TextEditor/provider.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import { createContext, useContext, useEffect, useImperativeHandle, useRef } from 'react';
+import { useStore } from 'zustand';
+// Store
+import { createTextEditorStore } from './store';
+export const TextEditorStoreContext = createContext(null);
+export const TextEditorProvider = ({ ref, children, onChangeColors, }) => {
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createTextEditorStore();
+    }
+    useEffect(() => {
+        storeRef.current?.setState({
+            setColors: colors => {
+                storeRef.current?.getInitialState().setColors(colors);
+                onChangeColors?.(colors);
+            },
+        });
+    }, [onChangeColors]);
+    useImperativeHandle(ref, () => ({
+        updateColors: colors => {
+            storeRef.current?.getState().setColors(colors);
+        },
+    }));
+    return (_jsx(TextEditorStoreContext.Provider, { value: storeRef.current, children: typeof children === 'function' ? children(storeRef.current) : children }));
+};
+export const useTextEditorStore = (selector) => {
+    const store = useContext(TextEditorStoreContext);
+    if (!store)
+        throw new Error('Missing TextEditorStoreContext.Provider in the tree');
+    return useStore(store, selector);
+};

package/es/components/organism/TextEditor/store.d.ts

@@ -0,0 +1,13 @@
+export type TextEditorState = {
+    bubbleMenuContainer: HTMLDivElement | null;
+    isShowBubbleMenu: boolean;
+    colors?: string[];
+};
+export type TextEditorActions = {
+    setBubbleMenuContainer: (container: HTMLDivElement | null) => void;
+    setIsShowBubbleMenu: (isShow: boolean) => void;
+    setColors: (newColorSet: string[]) => void;
+};
+export type TextEditorStore = TextEditorState & TextEditorActions;
+export declare const defaultTextEditorState: TextEditorState;
+export declare const createTextEditorStore: (initState?: Partial<TextEditorState>) => import("zustand").StoreApi<TextEditorStore>;

package/es/components/organism/TextEditor/store.js

@@ -0,0 +1,20 @@
+// Libraries
+import isEqual from 'react-fast-compare';
+import { createStore } from 'zustand';
+export const defaultTextEditorState = {
+    bubbleMenuContainer: null,
+    isShowBubbleMenu: false,
+};
+export const createTextEditorStore = (initState = {}) => createStore()((set, get) => ({
+    ...defaultTextEditorState,
+    ...initState,
+    setBubbleMenuContainer: container => set(() => ({ bubbleMenuContainer: container })),
+    setIsShowBubbleMenu: isShow => set(() => ({ isShowBubbleMenu: isShow })),
+    setColors: newColors => {
+        const currentColors = get().colors;
+        if (isEqual(currentColors, newColors)) {
+            return;
+        }
+        set(() => ({ colors: newColors }));
+    },
+}));

package/es/components/organism/TextEditor/styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TextStyle } from './types';
+export declare const StyledBubbleMenu: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<Partial<Omit<Pick<Partial<import("./extensions/BubbleMenu").BubbleMenuPluginProps>, "pluginKey"> & Omit<import("./extensions/BubbleMenu").BubbleMenuPluginProps, "pluginKey">, "element">>, "editor"> & Omit<Omit<Pick<Partial<import("./extensions/BubbleMenu").BubbleMenuPluginProps>, "pluginKey"> & Omit<import("./extensions/BubbleMenu").BubbleMenuPluginProps, "pluginKey">, "element">, "editor"> & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledEditorContent: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>, any, {
+    $textStyle: TextStyle;
+}, never>;
+export declare const ColorBox: import("styled-components").StyledComponent<"div", any, {
+    $color?: string | undefined;
+}, never>;
+export declare const ToolbarWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/organism/TextEditor/styled.js

@@ -0,0 +1,94 @@
+import { EditorContent } from '@tiptap/react';
+import styled, { css } from 'styled-components';
+import { BubbleMenu } from './ui/BubbleMenu';
+import { SMART_TAG_HIGHLIGHT_BG } from './constants';
+import { Flex } from 'antd';
+import tinycolor from 'tinycolor2';
+export const StyledBubbleMenu = styled(BubbleMenu) `
+  background-color: white;
+  border-radius: 5px;
+  padding: 8px;
+  box-shadow: var(--antsomi-box-shadow-secondary);
+`;
+const dynContentStyles = css `
+  background-color: ${SMART_TAG_HIGHLIGHT_BG};
+  background-color: color-mix(
+    in lab,
+    var(--text-style-bg-color, transparent),
+    ${SMART_TAG_HIGHLIGHT_BG}
+  );
+
+  &:hover {
+    background-color: ${SMART_TAG_HIGHLIGHT_BG};
+    background-color: color-mix(
+      in lab,
+      var(--text-style-bg-color, transparent),
+      ${SMART_TAG_HIGHLIGHT_BG} 80%
+    );
+  }
+`;
+export const StyledEditorContent = styled(EditorContent) `
+  .tiptap {
+    outline: none;
+
+    p {
+      margin: 0;
+      padding: 0;
+
+      line-height: ${p => p.$textStyle.lineHeight};
+      font-family: ${p => p.$textStyle.fontFamily};
+      font-size: ${p => p.$textStyle.fontSize};
+      color: ${p => p.$textStyle.color};
+      letter-spacing: ${p => p.$textStyle.letterSpacing};
+    }
+
+    &:not([contenteditable='false']) {
+      p {
+        cursor: text;
+      }
+
+      .selection {
+        background-color: #d7cac9;
+        background-color: color-mix(in lab, var(--text-style-bg-color, transparent), #d7cac9);
+      }
+
+      .smart-tag {
+        cursor: pointer;
+
+        &.highlight {
+          ${dynContentStyles}
+        }
+      }
+
+      .link {
+        &.highlight > span {
+          ${dynContentStyles}
+        }
+      }
+    }
+  }
+`;
+export const ColorBox = styled.div `
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  transition: box-shadow 0.3s ease-in-out;
+  border: 1px solid #d9d9d9;
+  background-color: ${p => p.$color};
+
+  &:hover {
+    box-shadow: 0 0 5px ${p => tinycolor(p.$color).setAlpha(0.45).toRgbString()};
+    cursor: pointer;
+  }
+`;
+export const ToolbarWrapper = styled(Flex) `
+  .antsomi-divider.toolbar-separator {
+    height: 28px;
+    margin: 2px;
+  }
+`;