@antscorp/antsomi-ui 2.0.82 → 2.0.83-text-editor-beta.1

package/es/components/organism/TextEditor/utils/selection.d.ts

@@ -0,0 +1,25 @@
+import { EditorState } from '@tiptap/pm/state';
+/**
+ * Kiểm tra xem có selection nào trong tài liệu hay không
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true nếu không có selection, false nếu có selection
+ */
+export declare const isNoSelection: (state: EditorState) => boolean;
+/**
+ * Gets the text content of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selected text content
+ */
+export declare const getSelectionText: (state: EditorState) => string;
+/**
+ * Checks if selection spans multiple nodes
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true if selection spans multiple nodes
+ */
+export declare const isMultiNodeSelection: (state: EditorState) => boolean;
+/**
+ * Gets the depth of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selection depth
+ */
+export declare const getSelectionDepth: (state: EditorState) => number;

package/es/components/organism/TextEditor/utils/selection.js

@@ -0,0 +1,57 @@
+import { isNodeSelection, isTextSelection } from '@tiptap/core';
+/**
+ * Kiểm tra xem có selection nào trong tài liệu hay không
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true nếu không có selection, false nếu có selection
+ */
+export const isNoSelection = (state) => {
+    const { selection } = state;
+    if (selection.empty)
+        return true;
+    // Kiểm tra trường hợp text selection không có nội dung
+    if (isTextSelection(selection)) {
+        const { from, to } = selection;
+        if (from === to)
+            return true;
+        const selectedText = state.doc.textBetween(from, to);
+        return selectedText.length === 0;
+    }
+    // Nếu là node selection, thì có selection
+    if (isNodeSelection(selection))
+        return false;
+    return false;
+};
+/**
+ * Gets the text content of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selected text content
+ */
+export const getSelectionText = (state) => {
+    const { selection } = state;
+    const { from, to } = selection;
+    return state.doc.textBetween(from, to);
+};
+/**
+ * Checks if selection spans multiple nodes
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true if selection spans multiple nodes
+ */
+export const isMultiNodeSelection = (state) => {
+    const { selection } = state;
+    if (selection.empty)
+        return false;
+    const { from, to } = selection;
+    const $from = state.doc.resolve(from);
+    const $to = state.doc.resolve(to);
+    return $from.parent !== $to.parent;
+};
+/**
+ * Gets the depth of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selection depth
+ */
+export const getSelectionDepth = (state) => {
+    const { selection } = state;
+    const { $from } = selection;
+    return $from.depth;
+};

package/es/components/organism/TextEditor/utils/smartTag.d.ts

@@ -0,0 +1,49 @@
+import { EditorView } from '@tiptap/pm/view';
+import { SmartTagHandler } from '../types';
+/**
+ * Handles smart tag actions (create or edit)
+ * @param event Mouse event from the action
+ * @param view EditorView instance
+ * @param smartTagHandler Smart tag handler callbacks
+ */
+export declare const handleSmartTagAction: (event: React.MouseEvent, view: EditorView, smartTagHandler?: SmartTagHandler) => void;
+/**
+ * Gets smart tag node at a specific position
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns Smart tag node or null
+ */
+export declare const getSmartTagAtPosition: (view: EditorView, pos: number) => import("prosemirror-model").Node | null;
+/**
+ * Gets all smart tags in the document
+ * @param view EditorView instance
+ * @returns Array of smart tag nodes with their positions
+ */
+export declare const getAllSmartTags: (view: EditorView) => {
+    node: any;
+    pos: number;
+}[];
+/**
+ * Finds smart tag by ID
+ * @param view EditorView instance
+ * @param id Smart tag ID to find
+ * @returns Smart tag node and position or null
+ */
+export declare const findSmartTagById: (view: EditorView, id: string) => null;
+/**
+ * Checks if position is inside a smart tag
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns true if position is inside a smart tag
+ */
+export declare const isPositionInSmartTag: (view: EditorView, pos: number) => boolean;
+/**
+ * Gets smart tag content at cursor position
+ * @param view EditorView instance
+ * @returns Smart tag content or null
+ */
+export declare const getSmartTagAtCursor: (view: EditorView) => {
+    id: any;
+    content: any;
+    node: import("prosemirror-model").Node;
+} | null;

package/es/components/organism/TextEditor/utils/smartTag.js

@@ -0,0 +1,89 @@
+/**
+ * Handles smart tag actions (create or edit)
+ * @param event Mouse event from the action
+ * @param view EditorView instance
+ * @param smartTagHandler Smart tag handler callbacks
+ */
+export const handleSmartTagAction = (event, view, smartTagHandler) => {
+    const { state } = view;
+    const { from, to } = state.selection;
+    const smartTagNode = state.doc.nodeAt(from);
+    const smartTagId = smartTagNode?.attrs.id;
+    if (smartTagId) {
+        smartTagHandler?.edit?.(smartTagId, event);
+    }
+    else {
+        const selectedText = state.doc.textBetween(from, to);
+        if (selectedText) {
+            smartTagHandler?.setNew?.({
+                selectionText: selectedText,
+            });
+        }
+    }
+};
+/**
+ * Gets smart tag node at a specific position
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns Smart tag node or null
+ */
+export const getSmartTagAtPosition = (view, pos) => {
+    const node = view.state.doc.nodeAt(pos);
+    if (node && node.type.name === 'smartTag') {
+        return node;
+    }
+    return null;
+};
+/**
+ * Gets all smart tags in the document
+ * @param view EditorView instance
+ * @returns Array of smart tag nodes with their positions
+ */
+export const getAllSmartTags = (view) => {
+    const smartTags = [];
+    view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'smartTag') {
+            smartTags.push({ node, pos });
+        }
+    });
+    return smartTags;
+};
+/**
+ * Finds smart tag by ID
+ * @param view EditorView instance
+ * @param id Smart tag ID to find
+ * @returns Smart tag node and position or null
+ */
+export const findSmartTagById = (view, id) => {
+    let result = null;
+    view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'smartTag' && node.attrs.id === id) {
+            result = { node, pos };
+            return false; // Stop traversal
+        }
+    });
+    return result;
+};
+/**
+ * Checks if position is inside a smart tag
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns true if position is inside a smart tag
+ */
+export const isPositionInSmartTag = (view, pos) => getSmartTagAtPosition(view, pos) !== null;
+/**
+ * Gets smart tag content at cursor position
+ * @param view EditorView instance
+ * @returns Smart tag content or null
+ */
+export const getSmartTagAtCursor = (view) => {
+    const { selection } = view.state;
+    const node = getSmartTagAtPosition(view, selection.from);
+    return node
+        ? {
+            id: node.attrs.id,
+            content: node.attrs.content,
+            node,
+        }
+        : null;
+};

package/es/components/organism/TextEditor/utils/style.d.ts

@@ -0,0 +1,78 @@
+import { TextStyle } from '../types';
+/**
+ * Extracts text style from element's computed style
+ * @param style CSSStyleDeclaration from element
+ * @returns Partial TextStyle object
+ */
+export declare const textStyleFromElStyle: <T extends CSSStyleDeclaration>(style: T) => Partial<TextStyle>;
+/**
+ * Applies text style to HTML element
+ * @param el HTML element to apply styles to
+ * @param style TextStyle object
+ */
+export declare const appendTextStyleToEl: (el: HTMLElement, style: Partial<TextStyle>) => void;
+/**
+ * Converts a style object to a CSS string representation
+ * @param styleObj The style object to convert
+ * @returns The CSS string representation
+ * @example
+ * styleObjectToString({ color: 'red', fontSize: '16px' })
+ * // returns "color: red; font-size: 16px"
+ */
+export declare function styleObjectToString(styleObj: Record<string, unknown>): string;
+/**
+ * Normalizes a font-family string by adding quotes when needed
+ * @param fontFamily The font-family string to normalize
+ * @returns The normalized font-family string
+ * @description
+ * - Preserves existing quoted names
+ * - Doesn't quote generic families (e.g. sans-serif)
+ * - Quotes names containing spaces or special characters
+ * @example
+ * normalizeFontFamily('Arial, Helvetica, sans-serif')
+ * // returns 'Arial, Helvetica, sans-serif'
+ *
+ * normalizeFontFamily('Times New Roman, serif')
+ * // returns '"Times New Roman", serif'
+ */
+export declare function normalizeFontFamily(fontFamily: string): string;
+/**
+ * Creates font-family string with fallback
+ * @param fontFamily Primary font family
+ * @param defaultFont Default fallback font
+ * @returns Normalized font-family string with fallback
+ */
+export declare const fontWithFallback: (fontFamily: string, defaultFont?: string) => string;
+/**
+ * Checks if a color matches the link color
+ * @param color Color to check
+ * @returns true if color matches link color
+ */
+export declare const isLinkColor: (color: string) => boolean;
+/**
+ * Extracts CSS variables from a style object
+ * @param styleObj Style object that may contain CSS variables
+ * @returns Object with CSS variables and regular styles separated
+ */
+export declare function extractCSSVariables(styleObj: Record<string, unknown>): {
+    cssVariables: Record<string, unknown>;
+    regularStyles: Record<string, unknown>;
+};
+/**
+ * Merges multiple text styles with priority
+ * @param styles Array of text styles to merge
+ * @returns Merged text style
+ */
+export declare function mergeTextStyles(...styles: Partial<TextStyle>[]): Partial<TextStyle>;
+/**
+ * Validates if a text style is complete
+ * @param style Text style to validate
+ * @returns true if all required properties are present
+ */
+export declare function isCompleteTextStyle(style: Partial<TextStyle>): style is TextStyle;
+/**
+ * Converts text style to CSS style object
+ * @param textStyle Text style object
+ * @returns CSS style object
+ */
+export declare function textStyleToCSSStyle(textStyle: Partial<TextStyle>): React.CSSProperties;

package/es/components/organism/TextEditor/utils/style.js

@@ -0,0 +1,193 @@
+import { DEFAULT_TEXT_STYLE, LINK_TEXT_COLOR } from '../constants';
+import { uniqBy } from 'lodash';
+import tinycolor from 'tinycolor2';
+/**
+ * Extracts text style from element's computed style
+ * @param style CSSStyleDeclaration from element
+ * @returns Partial TextStyle object
+ */
+export const textStyleFromElStyle = (style) => ({
+    color: style.color || DEFAULT_TEXT_STYLE.color,
+    fontFamily: style.fontFamily || DEFAULT_TEXT_STYLE.fontFamily,
+    fontSize: style.fontSize || DEFAULT_TEXT_STYLE.fontSize,
+    backgroundColor: style.backgroundColor,
+    lineHeight: style.lineHeight || DEFAULT_TEXT_STYLE.lineHeight,
+});
+/**
+ * Applies text style to HTML element
+ * @param el HTML element to apply styles to
+ * @param style TextStyle object
+ */
+export const appendTextStyleToEl = (el, style) => {
+    if (style.color) {
+        el.style.color = style.color;
+    }
+    if (style.fontSize) {
+        el.style.fontSize = style.fontSize;
+    }
+    if (style.fontFamily) {
+        el.style.fontFamily = style.fontFamily;
+    }
+    if (style.backgroundColor) {
+        el.style.backgroundColor = style.backgroundColor;
+    }
+    if (style.lineHeight) {
+        el.style.lineHeight = style.lineHeight;
+    }
+    if (style.fontWeight) {
+        el.style.fontWeight = style.fontWeight;
+    }
+};
+/**
+ * Converts a style object to a CSS string representation
+ * @param styleObj The style object to convert
+ * @returns The CSS string representation
+ * @example
+ * styleObjectToString({ color: 'red', fontSize: '16px' })
+ * // returns "color: red; font-size: 16px"
+ */
+export function styleObjectToString(styleObj) {
+    return Object.entries(styleObj)
+        .map(([key, value]) => {
+        // Nếu key đã là kebab-case hoặc bắt đầu bằng dấu '-', giữ nguyên
+        const isPrefixed = key.startsWith('-');
+        const kebabKey = isPrefixed ? key : key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+        return `${kebabKey}: ${value}`;
+    })
+        .join('; ');
+}
+/**
+ * Normalizes a font-family string by adding quotes when needed
+ * @param fontFamily The font-family string to normalize
+ * @returns The normalized font-family string
+ * @description
+ * - Preserves existing quoted names
+ * - Doesn't quote generic families (e.g. sans-serif)
+ * - Quotes names containing spaces or special characters
+ * @example
+ * normalizeFontFamily('Arial, Helvetica, sans-serif')
+ * // returns 'Arial, Helvetica, sans-serif'
+ *
+ * normalizeFontFamily('Times New Roman, serif')
+ * // returns '"Times New Roman", serif'
+ */
+export function normalizeFontFamily(fontFamily) {
+    if (!fontFamily || typeof fontFamily !== 'string')
+        return '';
+    const genericFamilies = new Set([
+        'serif',
+        'sans-serif',
+        'monospace',
+        'cursive',
+        'fantasy',
+        'system-ui',
+        'ui-serif',
+        'ui-sans-serif',
+        'ui-monospace',
+        'ui-rounded',
+        'math',
+        'emoji',
+        'fangsong',
+    ]);
+    return uniqBy(fontFamily.split(','), name => name.trim())
+        .map(name => {
+        const trimmed = name.trim();
+        // Preserve already quoted names
+        const isQuoted = (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+            (trimmed.startsWith("'") && trimmed.endsWith("'"));
+        if (isQuoted)
+            return trimmed;
+        // Do not quote generic family names
+        if (genericFamilies.has(trimmed))
+            return trimmed;
+        // Quote if contains whitespace or special characters
+        const needsQuotes = /[^\w-]/.test(trimmed);
+        return needsQuotes ? `"${trimmed}"` : trimmed;
+    })
+        .join(', ');
+}
+/**
+ * Creates font-family string with fallback
+ * @param fontFamily Primary font family
+ * @param defaultFont Default fallback font
+ * @returns Normalized font-family string with fallback
+ */
+export const fontWithFallback = (fontFamily, defaultFont = DEFAULT_TEXT_STYLE.fontFamily) => normalizeFontFamily(fontFamily ? `${fontFamily}, ${defaultFont}` : defaultFont);
+/**
+ * Checks if a color matches the link color
+ * @param color Color to check
+ * @returns true if color matches link color
+ */
+export const isLinkColor = (color) => tinycolor.equals(color, LINK_TEXT_COLOR);
+/**
+ * Extracts CSS variables from a style object
+ * @param styleObj Style object that may contain CSS variables
+ * @returns Object with CSS variables and regular styles separated
+ */
+export function extractCSSVariables(styleObj) {
+    const cssVariables = {};
+    const regularStyles = {};
+    Object.entries(styleObj).forEach(([key, value]) => {
+        if (key.startsWith('--')) {
+            cssVariables[key] = value;
+        }
+        else {
+            regularStyles[key] = value;
+        }
+    });
+    return { cssVariables, regularStyles };
+}
+/**
+ * Merges multiple text styles with priority
+ * @param styles Array of text styles to merge
+ * @returns Merged text style
+ */
+export function mergeTextStyles(...styles) {
+    return styles.reduce((merged, style) => ({
+        ...merged,
+        ...Object.fromEntries(Object.entries(style).filter(([_, value]) => value !== undefined && value !== null)),
+    }), {});
+}
+/**
+ * Validates if a text style is complete
+ * @param style Text style to validate
+ * @returns true if all required properties are present
+ */
+export function isCompleteTextStyle(style) {
+    const requiredProps = [
+        'fontFamily',
+        'fontSize',
+        'color',
+        'backgroundColor',
+        'lineHeight',
+        'fontWeight',
+    ];
+    return requiredProps.every(prop => style[prop] !== undefined);
+}
+/**
+ * Converts text style to CSS style object
+ * @param textStyle Text style object
+ * @returns CSS style object
+ */
+export function textStyleToCSSStyle(textStyle) {
+    const cssStyle = {};
+    if (textStyle.fontFamily) {
+        cssStyle.fontFamily = textStyle.fontFamily;
+    }
+    if (textStyle.fontSize) {
+        cssStyle.fontSize = textStyle.fontSize;
+    }
+    if (textStyle.color) {
+        cssStyle.color = textStyle.color;
+    }
+    if (textStyle.backgroundColor) {
+        cssStyle.backgroundColor = textStyle.backgroundColor;
+    }
+    if (textStyle.lineHeight) {
+        cssStyle.lineHeight = textStyle.lineHeight;
+    }
+    if (textStyle.fontWeight) {
+        cssStyle.fontWeight = textStyle.fontWeight;
+    }
+    return cssStyle;
+}

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

@@ -15,4 +15,5 @@ export { AccountProfile, type AccountSettingProps } from './AccountProfile';
 export * from './Login';
 export * from './Filter';
 export { ActivityTimeline, type ActivityTimeLineProps } from './ActivityTimeline';
+export { TextEditor, TextEditorProvider, type TextEditorProps, type TextEditorRef, type TextEditorJSONContent, } from './TextEditor';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.js

@@ -15,4 +15,5 @@ export { AccountProfile } from './AccountProfile';
 export * from './Login';
 export * from './Filter';
 export { ActivityTimeline } from './ActivityTimeline';
+export { TextEditor, TextEditorProvider, } from './TextEditor';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.scss

@@ -0,0 +1 @@
+@import url('./TextEditor/index.scss');

package/es/hooks/useBroadcastedLocalStorage.d.ts

@@ -0,0 +1,5 @@
+export declare function useBroadcastedLocalStorage<T>(key: string, initialValue: T): {
+    readonly value: T;
+    readonly setValue: (next: T | ((prev: T) => T)) => void;
+    readonly remove: () => void;
+};

package/es/hooks/useBroadcastedLocalStorage.js

@@ -0,0 +1,71 @@
+/* eslint-disable no-console */
+import { useEffect, useState, useRef } from 'react';
+import { useDeepCompareEffect } from './useDeepCompareEffect';
+export function useBroadcastedLocalStorage(key, initialValue) {
+    const [value, setValue] = useState(() => {
+        if (typeof window === 'undefined')
+            return initialValue;
+        try {
+            const saved = window.localStorage.getItem(key);
+            return saved != null ? JSON.parse(saved) : initialValue;
+        }
+        catch {
+            return initialValue;
+        }
+    });
+    // We keep a ref to avoid re-creating the channel on every render
+    const channelRef = useRef(null);
+    // Initialize BroadcastChannel once
+    useEffect(() => {
+        if (typeof window === 'undefined' || !('BroadcastChannel' in window)) {
+            console.warn('BroadcastChannel not supported in this environment');
+            return;
+        }
+        const channel = new BroadcastChannel(`localstorage_${key}`);
+        channelRef.current = channel;
+        // Listen for incoming messages
+        const onMessage = (event) => {
+            setValue(event.data.value);
+        };
+        channel.addEventListener('message', onMessage);
+        return () => {
+            channel.removeEventListener('message', onMessage);
+            channel.close();
+        };
+    }, [key]);
+    // Whenever `value` changes, persist and broadcast
+    useDeepCompareEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            window.localStorage.setItem(key, JSON.stringify(value));
+        }
+        catch (err) {
+            console.error('Failed to write to localStorage:', err);
+        }
+        if (channelRef.current) {
+            channelRef.current.postMessage({ value });
+        }
+    }, [key, value]);
+    // Expose setter that mirrors functional API of useState
+    const setValueAndBroadcast = (next) => {
+        setValue(prev => {
+            const computed = next instanceof Function ? next(prev) : next;
+            return computed;
+        });
+    };
+    // Optional: a remove function
+    const remove = () => {
+        try {
+            window.localStorage.removeItem(key);
+            setValue(initialValue);
+            if (channelRef.current) {
+                channelRef.current.postMessage({ value: initialValue });
+            }
+        }
+        catch (err) {
+            console.error('Failed to remove localStorage item:', err);
+        }
+    };
+    return { value, setValue: setValueAndBroadcast, remove };
+}

package/es/utils/common.d.ts

@@ -66,17 +66,14 @@ export declare const searchParamsToObject: (searchParams?: string) => Record<str
 export declare const getShuffleArray: <T>(array: T[]) => T[];
 export declare const snakeCaseToCamelCase: <T = Record<string, any>>(object: Record<string, any> | Record<string, any>[], recursive?: boolean) => T;
 export declare const camelCaseToSnakeCase: <T = Record<string, any>>(object: Record<string, any>, recursive?: boolean) => T;
-export declare function generateKey(): any;
+export declare function generateKey(): string;
 export declare const formatUserId: (userId?: number) => string;
 /**
- * Function to remove accent
- * @param str - String want to remove accent
- * @returns {string} - Result after remove accent
- */
-export declare const removeAccent: (str: string) => string;
-/** Remove all accents and convert string to lower case, remove leading and trailing white space */
-export declare const simplifyString: (str: string) => string;
-/**
+ * Checks string matching based on a query, supporting fuzzy matching,
+ * where the query characters must appear in order within the target string.
+ * Allows for missing characters in the query relative to the target,
+ * and ignores case, diacritics, and spaces.
+ *
  * @param str target string
  * @param queryStr search query
  * @returns true if target string includes search query