@antscorp/antsomi-ui 2.0.109 → 2.0.111

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,18 @@
+/// <reference types="react" />
+import { JSONContent } from '@tiptap/core';
+export type { TextEditorProps, TextEditorAllProps, TextEditorRef, TextEditorWithProviderRef, TextEditorComponentsRender, LinkAttrs, FontConfig, } from './types';
+export { isLinkMark, isLinkMarkRange } from './types';
+export { CUSTOM_LINK_EXTENSION_NAME } from './constants';
+export type { JSONContent as TextEditorJSONContent };
+export { TextEditorProvider, type TextEditorProviderProps, type TextEditorProviderRefHandler, } from './provider';
+export declare const TextEditor: import("react").ForwardRefExoticComponent<import("./types").TextEditorProps & {
+    colors?: string[] | undefined;
+    onChangeColors?: ((colors: string[]) => void) | undefined;
+} & import("react").RefAttributes<import("./types").TextEditorWithProviderRef>> & {
+    Provider: import("react").ForwardRefExoticComponent<import("./provider").TextEditorProviderProps & import("react").RefAttributes<import("./provider").TextEditorProviderRefHandler>>;
+    Internal: import("react").MemoExoticComponent<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,8 @@
+import { TextEditor as TextEditorComponent } from './TextEditor';
+import { htmlMinifyForEmail } from './utils';
+export { isLinkMark, isLinkMarkRange } from './types';
+export { CUSTOM_LINK_EXTENSION_NAME } from './constants';
+export { TextEditorProvider, } from './provider';
+export const TextEditor = Object.assign(TextEditorComponent, {
+    Utils: { htmlMinifyForEmail },
+});

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

@@ -0,0 +1,65 @@
+.antsomi-text-editor-bubble-menu {
+  visibility: hidden;
+  position: absolute;
+  pointer-events: auto;
+  z-index: 999;
+  background-color: white;
+  border-radius: 4px;
+  padding: 15px;
+  box-shadow: var(--antsomi-box-shadow-secondary);
+}
+
+.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 {
+    children: React.ReactNode | ((props: TextEditorStoreApi) => React.ReactNode);
+    colors?: string[];
+    onChangeColors?: (colors: string[]) => void;
+}
+export declare const TextEditorProvider: import("react").ForwardRefExoticComponent<TextEditorProviderProps & import("react").RefAttributes<TextEditorProviderRefHandler>>;
+export declare const useTextEditorStore: <T>(selector: (state: TextEditorStore) => T) => T;

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef, } from 'react';
+import { useStore } from 'zustand';
+// Store
+import { createTextEditorStore } from './store';
+export const TextEditorStoreContext = createContext(null);
+export const TextEditorProvider = forwardRef(({ children, colors, onChangeColors }, ref) => {
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createTextEditorStore({
+            colors,
+        });
+    }
+    useEffect(() => {
+        storeRef.current?.setState({
+            setColors: colors => {
+                storeRef.current?.getInitialState().setColors(colors);
+                onChangeColors?.(colors);
+            },
+        });
+    }, [onChangeColors]);
+    useImperativeHandle(ref, () => ({
+        updateColors: colors => {
+            // Use getInitialState to bypass the wrapped setColors and avoid triggering onChangeColors
+            storeRef.current?.getInitialState().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,20 @@
+import type { LinkFormData, LinkFormState } from './types';
+export type TextEditorState = {
+    bubbleMenuContainer: HTMLElement | null;
+    colors?: string[];
+    /** Link form state for default link insert/edit UI */
+    linkFormState: LinkFormState;
+};
+export type TextEditorActions = {
+    setBubbleMenuContainer: (container: HTMLElement | null) => void;
+    setColors: (newColorSet: string[]) => void;
+    /** Show link form with initial data */
+    showLinkForm: (mode: 'insert' | 'edit', initialData: LinkFormData) => void;
+    /** Hide link form */
+    hideLinkForm: () => void;
+    /** Update link form data (partial update) */
+    updateLinkFormData: (data: Partial<LinkFormData>) => 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,40 @@
+// Libraries
+import isEqual from 'react-fast-compare';
+import { createStore } from 'zustand';
+export const defaultTextEditorState = {
+    bubbleMenuContainer: null,
+    linkFormState: null,
+};
+export const createTextEditorStore = (initState = {}) => createStore()((set, get) => ({
+    ...defaultTextEditorState,
+    ...initState,
+    setBubbleMenuContainer: container => set(() => ({ bubbleMenuContainer: container })),
+    setColors: newColors => {
+        const currentColors = get().colors;
+        if (isEqual(currentColors, newColors)) {
+            return;
+        }
+        set(() => ({ colors: newColors }));
+    },
+    showLinkForm: (mode, initialData) => set(() => ({
+        linkFormState: {
+            isVisible: true,
+            mode,
+            data: initialData,
+        },
+    })),
+    hideLinkForm: () => set(() => ({ linkFormState: null })),
+    updateLinkFormData: data => set(state => {
+        if (!state.linkFormState)
+            return state;
+        return {
+            linkFormState: {
+                ...state.linkFormState,
+                data: {
+                    ...state.linkFormState.data,
+                    ...data,
+                },
+            },
+        };
+    }),
+}));

package/es/components/organism/TextEditor/stories/WithOldDynAndLink/froala-legacy-format.settings.json

@@ -0,0 +1,95 @@
+{
+  "rawHTML": "<div class=\"fr-element fr-view\" dir=\"auto\" contenteditable=\"true\" aria-disabled=\"false\" spellcheck=\"true\"><p><span style=\"font-family: Montserrat; font-size: 22px; letter-spacing: 0px; color: #000000;\"><a data-link-id=\"j24jwuk2\" target=\"_blank\" href=\"https://ant.design/components/modal\"><span data-dynamic=\"true\" data-dynamic-id=\"i6fapgk6\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\">Last modified by</span></a> Special <a data-link-id=\"rrd48wh5\" target=\"_blank\" href=\"https://ant.design\">Bonus <span data-dynamic=\"true\" data-dynamic-id=\"4ip5g3w4\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\">Created date</span> Has</a> Been <span data-dynamic=\"true\" data-dynamic-id=\"vd3tmfc3\" style=\"direction: unset; unicode-bidi: bidi-override; background-color: rgba(0, 199, 97, 0.2);\"><a data-link-id=\"ir1h7e67\" target=\"_blank\" href=\"https://fireup.pro/news/goodbye-useeffect-exploring-use-in-react-19?ref=dailydev\">Name</a></span>&nbsp;Special <a data-link-id=\"rrd48wh5\" href=\"https://ant.design\" target=\"_blank\" id=\"isPasted\">Bonus</a>&nbsp;fasdfas&nbsp; sdfadf</span></p></div>",
+  "dynamic": {
+    "data": {
+      "4ip5g3w4": {
+        "type": "visitor-attribute",
+        "attribute": {
+          "label": "Created date",
+          "value": "date_created",
+          "status": 1,
+          "dataType": "datetime",
+          "disabled": false,
+          "datetimeFormatSettings": {
+            "type": "datetime",
+            "language": "en",
+            "hasDateFormat": true,
+            "hasTimeFormat": true,
+            "dateParseFormat": "MM/DD/YYYY",
+            "dateParseOption": "medium",
+            "timeParseFormat": "12hour",
+            "timeParseOption": "medium",
+            "dateFormatString": "MMM DD, YYYY h:mm:ss A"
+          }
+        },
+        "mappingKey": "lg5pk39o2qmxyc7oano5-4ip5g3w4",
+        "mappingFields": "visitor.date_created"
+      },
+      "i6fapgk6": {
+        "type": "event-attribute",
+        "event": "226539:17",
+        "source": [556657814],
+        "attribute": {
+          "type": 1,
+          "label": "Last modified by",
+          "value": "ad_zone.u_user_id",
+          "status": 1,
+          "children": [],
+          "dataType": "number",
+          "itemTypeId": -1013,
+          "itemTypeName": "ad_zone",
+          "propertyName": "u_user_id",
+          "eventPropertySyntax": "dims.ad_zone_id",
+          "numberFormatSettings": {
+            "type": "number",
+            "decimal": ".",
+            "grouping": ",",
+            "isCompact": false,
+            "prefixType": "code",
+            "currencyCode": "USD",
+            "decimalPlaces": 2
+          }
+        },
+        "mappingKey": "lg5pk39o2qmxyc7oano5-i6fapgk6",
+        "mappingFields": "event.ad_zone.u_user_id"
+      },
+      "vd3tmfc3": {
+        "type": "customer-attribute",
+        "attribute": {
+          "label": "Name",
+          "value": "name",
+          "status": 1,
+          "dataType": "string",
+          "disabled": false
+        },
+        "mappingKey": "lg5pk39o2qmxyc7oano5-vd3tmfc3",
+        "mappingFields": "customer.name"
+      }
+    },
+    "highlight": true,
+    "selectedId": ""
+  },
+  "link": {
+    "data": {
+      "ir1h7e67": {
+        "url": "https://fireup.pro/news/goodbye-useeffect-exploring-use-in-react-19?ref=dailydev",
+        "text": "Name",
+        "linkType": "static",
+        "openNewTab": true
+      },
+      "j24jwuk2": {
+        "url": "https://ant.design/components/modal",
+        "text": "Your",
+        "linkType": "static",
+        "openNewTab": true
+      },
+      "rrd48wh5": {
+        "url": "https://ant.design",
+        "text": "Bonus Offer Has",
+        "linkType": "static",
+        "openNewTab": true
+      }
+    },
+    "selectedId": ""
+  }
+}

package/es/components/organism/TextEditor/stories/WithOldDynAndLink/shared.d.ts

@@ -0,0 +1,111 @@
+/**
+ * ⚠️ LEGACY FORMAT TYPES
+ * These types represent the OLD format from Froala editor
+ * DO NOT modify unless you understand the legacy compatibility requirements
+ */
+/**
+ * Dynamic tag data structure from Froala editor
+ * Used for backwards compatibility with old HTML format
+ */
+export type DynamicData = {
+    type: string;
+    attribute?: {
+        label: string;
+        value: string;
+        dataType?: string;
+        [key: string]: any;
+    };
+    event?: string;
+    source?: number[];
+    mappingKey: string;
+    mappingFields: string;
+};
+/**
+ * Link data structure from Froala editor
+ * Used for backwards compatibility with old HTML format
+ */
+export type LinkData = {
+    url: string;
+    text: string;
+    linkType: string;
+    openNewTab: boolean;
+};
+/**
+ * State management for old format demo
+ */
+export type State = {
+    link: {
+        data: Record<string, LinkData>;
+        selectedId: string;
+    };
+    dynamic: {
+        data: Record<string, DynamicData>;
+        selectedId: string;
+        highlight: boolean;
+    };
+};
+/**
+ * Actions for state reducer
+ */
+export type Action = {
+    type: 'add_smart_tag';
+    payload: {
+        selectionText: string;
+    };
+} | {
+    type: 'edit_smart_tag';
+    payload: {
+        id: string;
+    };
+} | {
+    type: 'delete_smart_tag';
+    payload: {
+        id: string;
+    };
+} | {
+    type: 'save_smart_tag';
+    payload: {
+        id: string;
+        data: DynamicData;
+    };
+} | {
+    type: 'add_link';
+    payload: {
+        selectionText: string;
+    };
+} | {
+    type: 'edit_link';
+    payload: {
+        id: string;
+        data?: Partial<LinkData>;
+    };
+} | {
+    type: 'delete_link';
+    payload: {
+        id: string;
+    };
+} | {
+    type: 'close_smart_tag_modal';
+} | {
+    type: 'close_link_modal';
+} | {
+    type: 'toggle_highlight';
+};
+/**
+ * Reducer for managing old format demo state
+ */
+export declare const reducer: (state: State, action: Action) => State;
+/**
+ * Constants for dynamic tag types
+ */
+export declare const DYNAMIC_TAG_TYPES: {
+    label: string;
+    value: string;
+}[];
+/**
+ * Constants for data types
+ */
+export declare const DATA_TYPES: {
+    label: string;
+    value: string;
+}[];

package/es/components/organism/TextEditor/stories/WithOldDynAndLink/shared.js

@@ -0,0 +1,82 @@
+import { produce } from 'immer';
+import uniqid from 'uniqid';
+/**
+ * Reducer for managing old format demo state
+ */
+export const reducer = (state, action) => produce(state, draft => {
+    switch (action.type) {
+        case 'add_smart_tag': {
+            draft.dynamic.selectedId = uniqid();
+            break;
+        }
+        case 'edit_smart_tag': {
+            draft.dynamic.selectedId = action.payload.id;
+            break;
+        }
+        case 'delete_smart_tag': {
+            delete draft.dynamic.data[action.payload.id];
+            break;
+        }
+        case 'save_smart_tag': {
+            draft.dynamic.data[action.payload.id] = action.payload.data;
+            draft.dynamic.selectedId = '';
+            break;
+        }
+        case 'close_smart_tag_modal': {
+            draft.dynamic.selectedId = '';
+            break;
+        }
+        case 'add_link': {
+            const newLinkId = uniqid();
+            draft.link.selectedId = newLinkId;
+            draft.link.data[newLinkId] = {
+                url: '',
+                text: action.payload.selectionText,
+                linkType: 'static',
+                openNewTab: true,
+            };
+            break;
+        }
+        case 'edit_link': {
+            draft.link.selectedId = action.payload.id;
+            if (action.payload.data) {
+                draft.link.data[action.payload.id] = {
+                    ...state.link.data[action.payload.id],
+                    ...action.payload.data,
+                };
+            }
+            break;
+        }
+        case 'delete_link': {
+            delete draft.link.data[action.payload.id];
+            break;
+        }
+        case 'close_link_modal': {
+            draft.link.selectedId = '';
+            break;
+        }
+        case 'toggle_highlight': {
+            draft.dynamic.highlight = !draft.dynamic.highlight;
+            break;
+        }
+        default:
+            break;
+    }
+});
+/**
+ * Constants for dynamic tag types
+ */
+export const DYNAMIC_TAG_TYPES = [
+    { label: 'Customer Attribute', value: 'customer-attribute' },
+    { label: 'Visitor Attribute', value: 'visitor-attribute' },
+    { label: 'Event Attribute', value: 'event-attribute' },
+];
+/**
+ * Constants for data types
+ */
+export const DATA_TYPES = [
+    { label: 'String', value: 'string' },
+    { label: 'Number', value: 'number' },
+    { label: 'Datetime', value: 'datetime' },
+    { label: 'Boolean', value: 'boolean' },
+];

package/es/components/organism/TextEditor/stories/shared.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Parse HTML content from mock data
+ */
+export declare const htmlContent: string;
+/**
+ * State type for TextBlock component
+ */
+export type State = {
+    link: {
+        data: Record<string, {
+            url: string;
+            text: string;
+            title: string;
+        }>;
+        selectedId: string;
+    };
+    dynamic: {
+        data: Record<string, unknown>;
+        selectedId: string;
+    };
+};
+/**
+ * Action types for TextBlock reducer
+ */
+export type Action = {
+    type: 'add_smart_tag';
+    payload: {
+        selectionText: string;
+    };
+} | {
+    type: 'edit_smart_tag';
+    payload: {
+        id: string;
+    };
+} | {
+    type: 'add_link';
+    payload: {
+        selectionText: string;
+    };
+} | {
+    type: 'edit_link';
+    payload: {
+        id: string;
+        data?: Partial<{
+            url: string;
+            text: string;
+            title: string;
+        }>;
+    };
+} | {
+    type: 'close_smart_tag_modal';
+} | {
+    type: 'close_link_modal';
+};
+/**
+ * Reducer for TextBlock component state management
+ */
+export declare const reducer: (state: State, action: Action) => State;
+/**
+ * Props for TextBlock component
+ */
+export type TextBlockProps = {
+    defaultValue?: string;
+};