@antscorp/antsomi-ui 2.0.86-text-editor-beta.5 → 2.0.86

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

@@ -1,135 +0,0 @@
-export declare const SMART_TAG_HIGHLIGHT_BG = "rgba(0, 199, 97, 0.2)";
-export declare const DEFAULT_TEXT_STYLE: {
-    fontSize: string;
-    color: string;
-    fontFamily: string;
-    backgroundColor: string;
-    lineHeight: string;
-    fontWeight: string;
-};
-export declare const FONT_WEIGHT_LABELS: {
-    readonly thin: "Thin";
-    readonly extraLight: "Extra Light";
-    readonly light: "Light";
-    readonly normal: "Normal";
-    readonly medium: "Medium";
-    readonly semiBold: "Semi Bold";
-    readonly bold: "Bold";
-    readonly extraBold: "Extra Bold";
-    readonly black: "Black";
-};
-export declare const FONT_WEIGHT_MAP: Record<number, string>;
-export declare const DEFAULT_FONT_CONFIGS: {
-    fontFamily: {
-        name: string;
-    };
-    fontWeight: number[];
-}[];
-export declare const LINK_TEXT_COLOR = "#0066CC";
-export declare const COMPONENT_CLS = "antsomi-text-editor";
-export declare const TEXT_EDITOR_CONSTANTS: {
-    COLOR_GIRD: string[][];
-    TEXT_ALIGN: {
-        TITLE: string;
-        OPTIONS: {
-            LEFT: {
-                LABEL: string;
-                VALUE: string;
-            };
-            CENTER: {
-                LABEL: string;
-                VALUE: string;
-            };
-            RIGHT: {
-                LABEL: string;
-                VALUE: string;
-            };
-            JUSTIFY: {
-                LABEL: string;
-                VALUE: string;
-            };
-        };
-        TOOLTIP: string;
-    };
-    TEXT_TRANSFORM: {
-        PLACEHOLDER: string;
-        OPTIONS: {
-            UPPERCASE: {
-                LABEL: string;
-                VALUE: string;
-            };
-            LOWERCASE: {
-                LABEL: string;
-                VALUE: string;
-            };
-            CAPITALIZE: {
-                LABEL: string;
-                VALUE: string;
-            };
-            NONE: {
-                LABEL: string;
-                VALUE: string;
-            };
-        };
-    };
-    TOOLTIPS: {
-        BOLD: {
-            TITLE: string;
-            SHORTCUT: string;
-        };
-        ITALIC: {
-            TITLE: string;
-            SHORTCUT: string;
-        };
-        UNDERLINE: {
-            TITLE: string;
-            SHORTCUT: string;
-        };
-        STRIKE: {
-            TITLE: string;
-            SHORTCUT: string;
-        };
-        BULLET_LIST: {
-            TITLE: string;
-            SHORTCUT: string;
-        };
-        ORDERED_LIST: {
-            TITLE: string;
-            SHORTCUT: string;
-        };
-        CLEAR_FORMATTING: {
-            TITLE: string;
-        };
-        FONT_FAMILY: {
-            PLACEHOLDER: string;
-        };
-        FONT_SIZE: {
-            PLACEHOLDER: string;
-        };
-        HIGHLIGHT: {
-            TITLE: string;
-        };
-        INDENT: {
-            TITLE: string;
-        };
-        OUTDENT: {
-            TITLE: string;
-        };
-        LINK: {
-            TITLE: string;
-        };
-        SMART_TAG: {
-            TITLE: string;
-        };
-        SUPERSCRIPT: {
-            TITLE: string;
-        };
-        SUBSCRIPT: {
-            TITLE: string;
-        };
-        TEXT_COLOR: {
-            TITLE: string;
-        };
-    };
-    LINK_TEXT_COLOR: string;
-};

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

@@ -1,280 +0,0 @@
-import { ANTSOMI_COMPONENT_PREFIX_CLS } from '@antscorp/antsomi-ui/es/constants';
-const COLOR_GIRD = [
-    // Dòng đầu: màu chuẩn
-    [
-        '#000000',
-        '#434343',
-        '#666666',
-        '#999999',
-        '#B7B7B7',
-        '#CCCCCC',
-        '#D9D9D9',
-        '#EFEFEF',
-        '#F3F3F3',
-        '#FFFFFF',
-    ],
-    // Dòng 2: màu cơ bản
-    [
-        '#980000',
-        '#FF0000',
-        '#FF9900',
-        '#FFFF00',
-        '#00FF00',
-        '#00FFFF',
-        '#4A86E8',
-        '#0000FF',
-        '#9900FF',
-        '#FF00FF',
-    ],
-    // Dòng 3+
-    [
-        '#E6B8AF',
-        '#F4CCCC',
-        '#FCE5CD',
-        '#FFF2CC',
-        '#D9EAD3',
-        '#D0E0E3',
-        '#C9DAF8',
-        '#CFE2F3',
-        '#D9D2E9',
-        '#EAD1DC',
-    ],
-    [
-        '#DD7E6B',
-        '#EA9999',
-        '#F9CB9C',
-        '#FFE599',
-        '#B6D7A8',
-        '#A2C4C9',
-        '#A4C2F4',
-        '#9FC5E8',
-        '#B4A7D6',
-        '#D5A6BD',
-    ],
-    [
-        '#CC4125',
-        '#E06666',
-        '#F6B26B',
-        '#FFD966',
-        '#93C47D',
-        '#76A5AF',
-        '#6D9EEB',
-        '#6FA8DC',
-        '#8E7CC3',
-        '#C27BA0',
-    ],
-    [
-        '#A61C00',
-        '#CC0000',
-        '#E69138',
-        '#F1C232',
-        '#6AA84F',
-        '#45818E',
-        '#3C78D8',
-        '#3D85C6',
-        '#674EA7',
-        '#A64D79',
-    ],
-    [
-        '#85200C',
-        '#990000',
-        '#B45F06',
-        '#BF9000',
-        '#38761D',
-        '#134F5C',
-        '#1155CC',
-        '#0B5394',
-        '#351C75',
-        '#741B47',
-    ],
-    [
-        '#5B0F00',
-        '#660000',
-        '#783F04',
-        '#7F6000',
-        '#274E13',
-        '#0C343D',
-        '#1C4587',
-        '#073763',
-        '#20124D',
-        '#4C1130',
-    ],
-];
-// TextAlignSelect component
-const TEXT_ALIGN = {
-    TITLE: 'Text Align',
-    OPTIONS: {
-        LEFT: {
-            LABEL: 'Left',
-            VALUE: 'left',
-        },
-        CENTER: {
-            LABEL: 'Center',
-            VALUE: 'center',
-        },
-        RIGHT: {
-            LABEL: 'Right',
-            VALUE: 'right',
-        },
-        JUSTIFY: {
-            LABEL: 'Justify',
-            VALUE: 'justify',
-        },
-    },
-    TOOLTIP: 'Align',
-};
-// TextTransformAction component
-const TEXT_TRANSFORM = {
-    PLACEHOLDER: 'Text Transform',
-    OPTIONS: {
-        UPPERCASE: {
-            LABEL: 'UPPERCASE',
-            VALUE: 'uppercase',
-        },
-        LOWERCASE: {
-            LABEL: 'lowercase',
-            VALUE: 'lowercase',
-        },
-        CAPITALIZE: {
-            LABEL: 'Capitalize',
-            VALUE: 'capitalize',
-        },
-        NONE: {
-            LABEL: 'none',
-            VALUE: 'none',
-        },
-    },
-};
-const TOOLTIPS = {
-    BOLD: {
-        TITLE: 'Bold',
-        SHORTCUT: 'B',
-    },
-    ITALIC: {
-        TITLE: 'Italic',
-        SHORTCUT: 'I',
-    },
-    UNDERLINE: {
-        TITLE: 'Underline',
-        SHORTCUT: 'U',
-    },
-    STRIKE: {
-        TITLE: 'Strike',
-        SHORTCUT: 'S',
-    },
-    BULLET_LIST: {
-        TITLE: 'Bullet List',
-        SHORTCUT: '8',
-    },
-    ORDERED_LIST: {
-        TITLE: 'Ordered List',
-        SHORTCUT: '7',
-    },
-    CLEAR_FORMATTING: {
-        TITLE: 'Clear Formatting',
-    },
-    FONT_FAMILY: {
-        PLACEHOLDER: 'Font Family',
-    },
-    FONT_SIZE: {
-        PLACEHOLDER: 'Font Size',
-    },
-    HIGHLIGHT: {
-        TITLE: 'Text Background',
-    },
-    INDENT: {
-        TITLE: 'Indent',
-    },
-    OUTDENT: {
-        TITLE: 'Outdent',
-    },
-    LINK: {
-        TITLE: 'Link',
-    },
-    SMART_TAG: {
-        TITLE: 'Smart Tag',
-    },
-    SUPERSCRIPT: {
-        TITLE: 'Superscript',
-    },
-    SUBSCRIPT: {
-        TITLE: 'Subscript',
-    },
-    TEXT_COLOR: {
-        TITLE: 'Text Color',
-    },
-};
-export const SMART_TAG_HIGHLIGHT_BG = 'rgba(0, 199, 97, 0.2)';
-export const DEFAULT_TEXT_STYLE = {
-    fontSize: '22px',
-    color: '#000',
-    fontFamily: 'inherit',
-    backgroundColor: 'inherit',
-    lineHeight: '1.15',
-    fontWeight: 'inherit',
-};
-export const FONT_WEIGHT_LABELS = {
-    thin: 'Thin',
-    extraLight: 'Extra Light',
-    light: 'Light',
-    normal: 'Normal',
-    medium: 'Medium',
-    semiBold: 'Semi Bold',
-    bold: 'Bold',
-    extraBold: 'Extra Bold',
-    black: 'Black',
-};
-export const FONT_WEIGHT_MAP = {
-    100: FONT_WEIGHT_LABELS.thin,
-    200: FONT_WEIGHT_LABELS.extraLight,
-    300: FONT_WEIGHT_LABELS.light,
-    400: FONT_WEIGHT_LABELS.normal,
-    500: FONT_WEIGHT_LABELS.medium,
-    600: FONT_WEIGHT_LABELS.semiBold,
-    700: FONT_WEIGHT_LABELS.bold,
-    800: FONT_WEIGHT_LABELS.extraBold,
-    900: FONT_WEIGHT_LABELS.black,
-};
-export const DEFAULT_FONT_CONFIGS = [
-    {
-        fontFamily: { name: 'Arial' },
-        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
-    },
-    {
-        fontFamily: { name: 'Roboto' }, // Google Font, not inherently system-wide
-        fontWeight: [100, 300, 400, 500, 700, 900],
-    },
-    {
-        fontFamily: { name: 'Georgia' },
-        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
-    },
-    {
-        fontFamily: { name: 'Helvetica' },
-        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
-    },
-    {
-        fontFamily: { name: 'Lucida Grande' },
-        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
-    },
-    {
-        fontFamily: { name: 'Tahoma' },
-        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
-    },
-    {
-        fontFamily: { name: 'Times New Roman' },
-        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
-    },
-    {
-        fontFamily: { name: 'Verdana' },
-        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
-    },
-];
-export const LINK_TEXT_COLOR = '#0066CC';
-export const COMPONENT_CLS = `${ANTSOMI_COMPONENT_PREFIX_CLS}-text-editor`;
-export const TEXT_EDITOR_CONSTANTS = {
-    COLOR_GIRD,
-    TEXT_ALIGN,
-    TEXT_TRANSFORM,
-    TOOLTIPS,
-    LINK_TEXT_COLOR,
-};

package/es/components/organism/TextEditor/extensions/BackgroundColor.d.ts

@@ -1,25 +0,0 @@
-import { Extension } from '@tiptap/core';
-export type BackgroundColorOptions = {
-    /**
-     * The types where the color can be applied
-     * @default ['textStyle']
-     * @example ['heading', 'paragraph']
-     */
-    types: string[];
-    defaultBackgroundColor: string;
-};
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        backgroundColor: {
-            /**
-             * Set the background color
-             */
-            setBackgroundColor: (color: string) => ReturnType;
-            /**
-             * Unset the background color
-             */
-            unsetBackgroundColor: () => ReturnType;
-        };
-    }
-}
-export declare const BackgroundColor: Extension<BackgroundColorOptions, any>;

package/es/components/organism/TextEditor/extensions/BackgroundColor.js

@@ -1,46 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { DEFAULT_TEXT_STYLE } from '../constants';
-import tinycolor from 'tinycolor2';
-export const BackgroundColor = Extension.create({
-    name: 'backgroundColor',
-    addOptions() {
-        return {
-            types: ['textStyle'],
-            defaultBackgroundColor: DEFAULT_TEXT_STYLE.backgroundColor,
-        };
-    },
-    addGlobalAttributes() {
-        return [
-            {
-                types: this.options.types,
-                attributes: {
-                    backgroundColor: {
-                        default: this.options.defaultBackgroundColor,
-                        parseHTML: element => element.style.backgroundColor?.replace(/['"]+/g, ''),
-                        renderHTML: attributes => {
-                            if (!tinycolor(attributes.backgroundColor).isValid()) {
-                                return {};
-                            }
-                            const hexBgColor = tinycolor(attributes.backgroundColor).toString('hex');
-                            return {
-                                style: `
-                  --text-style-bg-color: ${hexBgColor};
-                  background-color: ${hexBgColor};
-                `,
-                            };
-                        },
-                    },
-                },
-            },
-        ];
-    },
-    addCommands() {
-        return {
-            setBackgroundColor: color => ({ chain }) => chain().setMark('textStyle', { backgroundColor: color }).run(),
-            unsetBackgroundColor: () => ({ chain }) => chain()
-                .setMark('textStyle', { backgroundColor: this.options.defaultBackgroundColor || null })
-                .removeEmptyTextStyle()
-                .run(),
-        };
-    },
-});

package/es/components/organism/TextEditor/extensions/BubbleMenu/bubble-menu-plugin.d.ts

@@ -1,130 +0,0 @@
-import { arrow, autoPlacement, flip, hide, inline, offset, shift, size } from '@floating-ui/dom';
-import type { Editor } from '@tiptap/core';
-import type { EditorState, PluginView } from '@tiptap/pm/state';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import type { EditorView } from '@tiptap/pm/view';
-export interface BubbleMenuPluginProps {
-    /**
-     * The plugin key.
-     * @type {PluginKey | string}
-     * @default 'bubbleMenu'
-     */
-    pluginKey: PluginKey | string;
-    /**
-     * The editor instance.
-     */
-    editor: Editor;
-    /**
-     * The DOM element that contains your menu.
-     * @type {HTMLElement}
-     * @default null
-     */
-    element: HTMLElement;
-    /**
-     * The container element where the bubble menu will be rendered.
-     * If not provided, it will default to document.body
-     * @type {HTMLElement | (() => HTMLElement) | null}
-     * @default document.body
-     */
-    container?: HTMLElement | (() => HTMLElement) | null;
-    /**
-     * The delay in milliseconds before the menu should be updated.
-     * This can be useful to prevent performance issues.
-     * @type {number}
-     * @default 250
-     */
-    updateDelay?: number;
-    /**
-     * The delay in milliseconds before the menu position should be updated on window resize.
-     * This can be useful to prevent performance issues.
-     * @type {number}
-     * @default 60
-     */
-    resizeDelay?: number;
-    /**
-     * A function that determines whether the menu should be shown or not.
-     * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
-     */
-    shouldShow: ((props: {
-        editor: Editor;
-        element: HTMLElement;
-        view: EditorView;
-        state: EditorState;
-        oldState?: EditorState;
-        from: number;
-        to: number;
-    }) => boolean) | null;
-    /**
-     * Callback function when the bubble menu is shown.
-     */
-    onShow?: () => void;
-    /**
-     * Callback function when the bubble menu is hidden.
-     */
-    onHide?: () => void;
-    /**
-     * FloatingUI options.
-     */
-    options?: {
-        strategy?: 'absolute' | 'fixed';
-        placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
-        offset?: Parameters<typeof offset>[0] | boolean;
-        flip?: Parameters<typeof flip>[0] | boolean;
-        shift?: Parameters<typeof shift>[0] | boolean;
-        arrow?: Parameters<typeof arrow>[0] | false;
-        size?: Parameters<typeof size>[0] | boolean;
-        autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
-        hide?: Parameters<typeof hide>[0] | boolean;
-        inline?: Parameters<typeof inline>[0] | boolean;
-    };
-}
-export type BubbleMenuViewProps = BubbleMenuPluginProps & {
-    view: EditorView;
-};
-export declare class BubbleMenuView implements PluginView {
-    editor: Editor;
-    element: HTMLElement;
-    container?: HTMLElement | (() => HTMLElement) | null;
-    view: EditorView;
-    preventHide: boolean;
-    updateDelay: number;
-    resizeDelay: number;
-    onShow?: () => void;
-    onHide?: () => void;
-    private updateDebounceTimer;
-    private resizeDebounceTimer;
-    private floatingUIOptions;
-    shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null>;
-    get middlewares(): {
-        name: string;
-        options?: any;
-        fn: (state: {
-            x: number;
-            y: number;
-            platform: import("@floating-ui/core").Platform;
-            placement: import("@floating-ui/utils").Placement;
-            initialPlacement: import("@floating-ui/utils").Placement;
-            strategy: import("@floating-ui/utils").Strategy;
-            middlewareData: import("@floating-ui/core").MiddlewareData;
-            rects: import("@floating-ui/utils").ElementRects;
-            elements: import("@floating-ui/dom").Elements;
-        }) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
-    }[];
-    constructor({ editor, element, view, updateDelay, resizeDelay, container, shouldShow, options, onShow, onHide, }: BubbleMenuViewProps);
-    mousedownHandler: () => void;
-    dragstartHandler: () => void;
-    focusHandler: () => void;
-    blurHandler: ({ event }: {
-        event: FocusEvent;
-    }) => void;
-    updatePosition(): void;
-    update(view: EditorView, oldState?: EditorState): void;
-    handleDebouncedUpdate: (view: EditorView, oldState?: EditorState) => void;
-    getShouldShow(oldState?: EditorState): boolean;
-    updateHandler: (view: EditorView, selectionChanged: boolean, docChanged: boolean, oldState?: EditorState) => void;
-    private getContainer;
-    show(): void;
-    hide(): void;
-    destroy(): void;
-}
-export declare const BubbleMenuPlugin: (options: BubbleMenuPluginProps) => Plugin<any>;