@antscorp/antsomi-ui 2.0.110 → 2.0.112

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, defaultStyle) => ({
+    color: style.color || defaultStyle.color || 'inherit',
+    fontFamily: style.fontFamily || defaultStyle.fontFamily || 'inherit',
+    fontSize: style.fontSize || defaultStyle.fontSize || 'inherit',
+    lineHeight: style.lineHeight || defaultStyle.lineHeight || '1.15',
+    backgroundColor: style.backgroundColor,
+});
+/**
+ * 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

@@ -16,5 +16,6 @@ export * from './Login';
 export * from './BasicLogin';
 export * from './Filter';
 export { ActivityTimeline, type ActivityTimeLineProps } from './ActivityTimeline';
+export { TextEditor, TextEditorProvider, type TextEditorWithProviderRef, type TextEditorAllProps, type TextEditorProps, type TextEditorRef, type TextEditorJSONContent, type TextEditorProviderProps, type TextEditorProviderRefHandler, type TextEditorComponentsRender, type FontConfig, CUSTOM_LINK_EXTENSION_NAME, } from './TextEditor';
 export { SQLGeneration, SQLGenerationIntegrations, SQLGenerationProvider, useSQLGenerationStore, type SQLGenerationProps, type SQLGenerationProviderProps, } from './SQLGeneration';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.js

@@ -16,5 +16,6 @@ export * from './Login';
 export * from './BasicLogin';
 export * from './Filter';
 export { ActivityTimeline } from './ActivityTimeline';
+export { TextEditor, TextEditorProvider, CUSTOM_LINK_EXTENSION_NAME, } from './TextEditor';
 export { SQLGeneration, SQLGenerationIntegrations, SQLGenerationProvider, useSQLGenerationStore, } from './SQLGeneration';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.scss

@@ -1 +1,2 @@
+@use './TextEditor';
 @use './SQLGeneration';

package/es/constants/index.d.ts

@@ -12,4 +12,5 @@ export * from './theme';
 export * from './postMessage';
 export * from './condition';
 export * from './portal';
+export * from './web';
 export * from './unsubscribe';

package/es/constants/index.js

@@ -12,4 +12,5 @@ export * from './theme';
 export * from './postMessage';
 export * from './condition';
 export * from './portal';
+export * from './web';
 export * from './unsubscribe';

package/es/constants/web.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Generic font families that are CSS keywords, not specific fonts
+ */
+export declare const GENERIC_FONT_FAMILIES: readonly ["serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded"];
+/**
+ * List of web safe fonts that are commonly available across different operating systems
+ */
+export declare const WEB_SAFE_FONTS: readonly ["times new roman", "times", "georgia", "garamond", "book antiqua", "palatino linotype", "palatino", "arial", "helvetica", "arial black", "impact", "lucida sans unicode", "tahoma", "verdana", "ms sans serif", "geneva", "lucida console", "lucida sans", "trebuchet ms", "courier new", "courier", "monaco", "menlo", "consolas", "lucida console", "comic sans ms", "brush script mt", "papyrus", "copperplate", "fantasy", "system ui"];

package/es/constants/web.js

@@ -0,0 +1,57 @@
+/**
+ * Generic font families that are CSS keywords, not specific fonts
+ */
+export const GENERIC_FONT_FAMILIES = [
+    'serif',
+    'sans-serif',
+    'monospace',
+    'cursive',
+    'fantasy',
+    'system-ui',
+    'ui-serif',
+    'ui-sans-serif',
+    'ui-monospace',
+    'ui-rounded',
+];
+/**
+ * List of web safe fonts that are commonly available across different operating systems
+ */
+export const WEB_SAFE_FONTS = [
+    // Serif fonts
+    'times new roman',
+    'times',
+    'georgia',
+    'garamond',
+    'book antiqua',
+    'palatino linotype',
+    'palatino',
+    // Sans-serif fonts
+    'arial',
+    'helvetica',
+    'arial black',
+    'impact',
+    'lucida sans unicode',
+    'tahoma',
+    'verdana',
+    'ms sans serif',
+    'geneva',
+    'lucida console',
+    'lucida sans',
+    'trebuchet ms', // Added: Microsoft font since Windows 2000, but use carefully
+    // Monospace fonts
+    'courier new',
+    'courier',
+    'monaco',
+    'menlo',
+    'consolas',
+    'lucida console',
+    // Cursive fonts
+    'comic sans ms',
+    'brush script mt',
+    // Fantasy fonts
+    'papyrus',
+    'copperplate',
+    'fantasy',
+    // Unknown
+    'system ui',
+];

package/es/hooks/index.d.ts

@@ -26,5 +26,9 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
+export * from './useElementSize';
+export * from './useIsMounted';
+export * from './useBroadcastedLocalStorage';
+export * from './useEyedropper';
 export * from './useFocusManagement';
 export * from './useCountdown';

package/es/hooks/index.js

@@ -45,5 +45,9 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
+export * from './useElementSize';
+export * from './useIsMounted';
+export * from './useBroadcastedLocalStorage';
+export * from './useEyedropper';
 export * from './useFocusManagement';
 export * from './useCountdown';

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/hooks/useElementSize.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useElementSize: <T extends HTMLElement>(options?: {
+    type: string;
+}) => readonly [import("react").RefObject<T>, {
+    width: number;
+    height: number;
+}];

package/es/hooks/useElementSize.js

@@ -0,0 +1,56 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+export const useElementSize = (options = { type: 'offset' }) => {
+    const { type = 'offset' } = options;
+    const [size, setSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    const ref = useRef(null);
+    const updateSize = useCallback(() => {
+        if (ref.current) {
+            let width;
+            let height;
+            switch (type) {
+                case 'client':
+                    width = ref.current.clientWidth; // excludes padding, border, scrollbar
+                    height = ref.current.clientHeight;
+                    break;
+                case 'scroll':
+                    width = ref.current.scrollWidth; // includes all scrollable content
+                    height = ref.current.scrollHeight;
+                    break;
+                case 'offset':
+                default:
+                    width = ref.current.offsetWidth; // includes padding and border
+                    height = ref.current.offsetHeight;
+                    break;
+            }
+            setSize({ width, height });
+        }
+    }, [type]);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        // Set initial size
+        updateSize();
+        // Use ResizeObserver if available
+        if (typeof ResizeObserver !== 'undefined') {
+            const resizeObserver = new ResizeObserver(() => {
+                // Always use the same measurement method as updateSize
+                updateSize();
+            });
+            resizeObserver.observe(element);
+            return () => {
+                resizeObserver.unobserve(element);
+            };
+        }
+        // Fallback to window resize event
+        const handleResize = () => updateSize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [updateSize]);
+    return [ref, size];
+};

package/es/hooks/useEyedropper/attach.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Attaches polyfill to the current window
+ */
+export declare function attachPolyfill(): void;

package/es/hooks/useEyedropper/attach.js

@@ -0,0 +1,9 @@
+import { EyeDropperPolyfill } from './eyedropper';
+/**
+ * Attaches polyfill to the current window
+ */
+export function attachPolyfill() {
+    if (!Reflect.defineProperty(window, 'EyeDropper', { value: EyeDropperPolyfill })) {
+        throw Error("Error attaching `EyeDropper` polyfill: couldn't attach `EyeDropper` to `window`");
+    }
+}

package/es/hooks/useEyedropper/eyedropper.d.ts

@@ -0,0 +1,69 @@
+import type { EyeDropper, ColorSelectionOptions, ColorSelectionResult } from './types';
+/**
+ * EyeDropper API polyfill
+ * https://wicg.github.io/eyedropper-api/#dom-colorselectionoptions
+ */
+export declare class EyeDropperPolyfill implements EyeDropper {
+    private colorSelectionResult?;
+    private previousDocumentCursor?;
+    private canvas?;
+    private canvasCtx?;
+    private resolve?;
+    private lastPoint?;
+    private magnification;
+    constructor();
+    /**
+     * Opens the polyfilled eyedropper
+     *
+     * §3.3 EyeDropper interface ► `open()`
+     */
+    open(options?: ColorSelectionOptions): Promise<ColorSelectionResult>;
+    /**
+     * Starting eyedropper mode
+     */
+    private start;
+    /**
+     * Stopping eyedropper mode
+     */
+    private stop;
+    /**
+     * Creates fake screenshot of page and assign it to the body
+     */
+    private createScreenshot;
+    /**
+     * Removes screenshot from page
+     */
+    private removeScreenshot;
+    /**
+     * Sets waiting cursor
+     */
+    private setWaitingCursor;
+    /**
+     * Removes waiting cursor
+     */
+    private revertWaitingCursor;
+    /**
+     * Binds events
+     */
+    private bindEvents;
+    /**
+     * Unbinds `mousemove` events
+     */
+    private unbindEvents;
+    /**
+     * `click` handler
+     */
+    private onClick;
+    /**
+     * `mousemove` handler
+     */
+    private onMouseMove;
+    /**
+     * Detects color from canvas data
+     */
+    private detectColor;
+    /**
+     * Canvas styles creator
+     */
+    private addCanvasStyle;
+}