@antscorp/antsomi-ui 2.0.92-text-editor-beta.6 → 2.0.93

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

@@ -1,193 +0,0 @@
-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.scss

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

package/es/hooks/useBroadcastedLocalStorage.d.ts

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

@@ -1,71 +0,0 @@
-/* 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

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

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

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

package/es/hooks/useEyedropper/attach.js

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

@@ -1,69 +0,0 @@
-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;
-}

package/es/hooks/useEyedropper/eyedropper.js

@@ -1,205 +0,0 @@
-/* eslint-disable no-bitwise */
-import html2canvas from 'html2canvas-pro';
-import { errors, px } from './utils';
-/** Global `isOpen` state */
-const isOpenState = {
-    value: false,
-};
-/**
- * EyeDropper API polyfill
- * https://wicg.github.io/eyedropper-api/#dom-colorselectionoptions
- */
-export class EyeDropperPolyfill {
-    constructor() {
-        this.magnification = {
-            size: 4,
-            scale: 12,
-        };
-        this.onMouseMove = this.onMouseMove.bind(this);
-        this.onClick = this.onClick.bind(this);
-    }
-    /**
-     * Opens the polyfilled eyedropper
-     *
-     * §3.3 EyeDropper interface ► `open()`
-     */
-    async open(options = {}) {
-        // §3.3 EyeDropper interface ► `open()` ► p.2
-        // Prevent opening if already open
-        if (isOpenState.value) {
-            return Promise.reject(new DOMException('Invalid state', 'InvalidStateError'));
-        }
-        // §3.3 EyeDropper interface ► `open()` ► p.3
-        // Create a promise to handle the color selection
-        const result = new Promise((resolve, reject) => {
-            // §3.3 EyeDropper interface ► `open()` ► p.4
-            // Handle possible signal abortion
-            if (options.signal) {
-                if (options.signal.aborted) {
-                    this.stop();
-                    reject(options.signal.reason || new DOMException('Aborted', 'AbortError'));
-                }
-                const abortListener = () => {
-                    this.stop();
-                    if (options.signal) {
-                        reject(options.signal.reason || new DOMException('Aborted', 'AbortError'));
-                    }
-                };
-                options.signal.addEventListener('abort', abortListener);
-            }
-            // §3.3 EyeDropper interface ► `open()` ► p.5
-            // Store the resolve function and start the eyedropper
-            this.resolve = resolve;
-            this.start();
-        });
-        return result;
-    }
-    /**
-     * Starting eyedropper mode
-     */
-    async start() {
-        document.body.style.overflow = 'hidden';
-        this.setWaitingCursor();
-        await this.createScreenshot();
-        this.revertWaitingCursor();
-        this.bindEvents();
-    }
-    /**
-     * Stopping eyedropper mode
-     */
-    stop() {
-        document.body.style.overflow = '';
-        this.unbindEvents();
-        this.removeScreenshot();
-        this.colorSelectionResult = undefined;
-        this.lastPoint = undefined;
-        isOpenState.value = false;
-    }
-    /**
-     * Creates fake screenshot of page and assign it to the body
-     */
-    async createScreenshot() {
-        this.canvas = await html2canvas(document.body, {
-            allowTaint: true,
-            useCORS: true,
-            height: document.body.scrollHeight,
-            width: document.body.scrollWidth,
-        });
-        this.addCanvasStyle(this.canvas);
-        this.canvasCtx = this.canvas.getContext('2d', {
-            willReadFrequently: true,
-        });
-        document.body.appendChild(this.canvas);
-    }
-    /**
-     * Removes screenshot from page
-     */
-    removeScreenshot() {
-        if (!this.canvas) {
-            throw new Error(errors.canvasError);
-        }
-        document.body.removeChild(this.canvas);
-        this.canvas = undefined;
-        this.canvasCtx = undefined;
-    }
-    /**
-     * Sets waiting cursor
-     */
-    setWaitingCursor() {
-        this.previousDocumentCursor = document.documentElement.style.cursor;
-        document.documentElement.style.cursor = 'wait';
-    }
-    /**
-     * Removes waiting cursor
-     */
-    revertWaitingCursor() {
-        if (this.previousDocumentCursor) {
-            document.documentElement.style.cursor = this.previousDocumentCursor;
-        }
-        else {
-            document.documentElement.style.cursor = '';
-        }
-        this.previousDocumentCursor = undefined;
-    }
-    /**
-     * Binds events
-     */
-    bindEvents() {
-        window.addEventListener('mousemove', this.onMouseMove);
-        window.addEventListener('click', this.onClick);
-    }
-    /**
-     * Unbinds `mousemove` events
-     */
-    unbindEvents() {
-        window.removeEventListener('mousemove', this.onMouseMove);
-        window.removeEventListener('click', this.onClick);
-    }
-    /**
-     * `click` handler
-     */
-    onClick() {
-        if (!this.lastPoint) {
-            throw new Error(errors.color);
-        }
-        this.detectColor(this.lastPoint);
-        const newValue = this.colorSelectionResult;
-        this.stop();
-        if (newValue && this.resolve) {
-            this.resolve(newValue);
-        }
-    }
-    /**
-     * `mousemove` handler
-     */
-    onMouseMove(event) {
-        if (!this.canvas || !this.canvasCtx) {
-            throw new Error(errors.canvasError);
-        }
-        const dpr = window.devicePixelRatio;
-        this.lastPoint = {
-            x: (event.clientX + window.scrollX) * dpr,
-            y: (event.clientY + window.scrollY) * dpr,
-        };
-        // Move magnifier
-        // const position = `${this.lastPoint.x / dpr} ${this.lastPoint.y / dpr}px`;
-        const position = [px(this.lastPoint.x / dpr), px(this.lastPoint.y / dpr)].join(' ');
-        Object.assign(this.canvas.style, {
-            opacity: 1,
-            transformOrigin: position,
-            clipPath: `circle(${px(this.magnification.size)} at ${position})`,
-        });
-    }
-    /**
-     * Detects color from canvas data
-     */
-    detectColor(point) {
-        if (!this.canvasCtx) {
-            throw new Error(errors.canvasError);
-        }
-        const pixelData = this.canvasCtx.getImageData(point.x, point.y, 1, 1).data;
-        const red = pixelData[0];
-        const green = pixelData[1];
-        const blue = pixelData[2];
-        const hex = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1);
-        this.colorSelectionResult = {
-            sRGBHex: `#${hex}`,
-        };
-    }
-    /**
-     * Canvas styles creator
-     */
-    addCanvasStyle(canvas) {
-        Object.assign(canvas.style, {
-            position: 'fixed',
-            top: '0px',
-            marginTop: `${-window.scrollY}px`,
-            left: '0px',
-            zIndex: 999999,
-            opacity: 0,
-            transform: `scale(${this.magnification.scale})`,
-            imageRendering: 'pixelated',
-            border: '1px solid #000000',
-        });
-    }
-}

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

@@ -1,2 +0,0 @@
-export * from './types';
-export { useEyedropper } from './useEyedropper';

package/es/hooks/useEyedropper/index.js

@@ -1,7 +0,0 @@
-import { attachPolyfill } from './attach';
-import { isEyeDropperSupported } from './support';
-if (!isEyeDropperSupported()) {
-    attachPolyfill();
-}
-export * from './types';
-export { useEyedropper } from './useEyedropper';

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

@@ -1 +0,0 @@
-export declare function isEyeDropperSupported(): boolean;

package/es/hooks/useEyedropper/support.js

@@ -1,3 +0,0 @@
-export function isEyeDropperSupported() {
-    return 'EyeDropper' in window;
-}

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

@@ -1,9 +0,0 @@
-export interface ColorSelectionOptions {
-    signal?: AbortSignal;
-}
-export interface ColorSelectionResult {
-    sRGBHex: string;
-}
-export interface EyeDropper {
-    open(options?: ColorSelectionOptions): Promise<ColorSelectionResult>;
-}

package/es/hooks/useEyedropper/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,8 +0,0 @@
-export interface UseEyedropperResult {
-    pickedColor: string | null;
-    isLoading: boolean;
-    apiSupported: boolean;
-    pickColor: () => Promise<string | null>;
-    copyToClipboard: (color: string) => Promise<boolean>;
-}
-export declare const useEyedropper: (defaultColor?: string) => UseEyedropperResult;