@antscorp/antsomi-ui 2.0.90 → 2.0.91-text-editor-beta.1

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

@@ -0,0 +1,321 @@
+import { ANTSOMI_COMPONENT_PREFIX_CLS } from '@antscorp/antsomi-ui/es/constants';
+import { formatHotkey } from '@antscorp/antsomi-ui/es/utils';
+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: formatHotkey('B'),
+    },
+    ITALIC: {
+        TITLE: 'Italic',
+        SHORTCUT: formatHotkey('I'),
+    },
+    UNDERLINE: {
+        TITLE: 'Underline',
+        SHORTCUT: formatHotkey('U'),
+    },
+    STRIKE: {
+        TITLE: 'Strike',
+        SHORTCUT: formatHotkey('S'),
+    },
+    BULLET_LIST: {
+        TITLE: 'Unordered List',
+        SHORTCUT: formatHotkey('8'),
+    },
+    ORDERED_LIST: {
+        TITLE: 'Ordered List',
+        SHORTCUT: formatHotkey('7'),
+    },
+    CLEAR_FORMATTING: {
+        TITLE: 'Clear Formatting',
+    },
+    FONT_FAMILY: {
+        PLACEHOLDER: 'Font Family',
+    },
+    FONT_SIZE: {
+        PLACEHOLDER: 'Font Size',
+    },
+    HIGHLIGHT: {
+        TITLE: 'Text Background',
+    },
+    INDENT: {
+        TITLE: 'Indent',
+        SHORTCUT: 'Tab',
+    },
+    OUTDENT: {
+        TITLE: 'Outdent',
+        SHORTCUT: 'Shift+Tab',
+    },
+    LINK: {
+        TITLE: 'Link',
+    },
+    SMART_TAG: {
+        TITLE: 'Smart Tag',
+    },
+    SUPERSCRIPT: {
+        TITLE: 'Superscript',
+        SHORTCUT: formatHotkey('.'),
+    },
+    SUBSCRIPT: {
+        TITLE: 'Subscript',
+        SHORTCUT: formatHotkey(','),
+    },
+    TEXT_COLOR: {
+        TITLE: 'Text Color',
+    },
+    UNDO: {
+        TITLE: 'Undo',
+        SHORTCUT: formatHotkey('Z'),
+    },
+    REDO: {
+        TITLE: 'Redo',
+        SHORTCUT: formatHotkey('Y'),
+    },
+    LETTER_SPACING: {
+        TITLE: 'Letter Spacing',
+    },
+    LINE_SPACING: {
+        TITLE: 'Line Spacing',
+    },
+    EMOJI: {
+        TITLE: 'Emoji',
+    },
+    TEXT_TRANSFORM: {
+        TITLE: 'Text Transform',
+    },
+};
+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',
+    letterSpacing: '0px',
+};
+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,
+};
+export const ORDERED_LIST_STYLE_TYPE = {
+    decimal: 'decimal', // 1, 2, 3, ...
+    lowerAlpha: 'lower-alpha', // a, b, c, ...
+    upperAlpha: 'upper-alpha', // A, B, C, ...
+    lowerRoman: 'lower-roman', // i, ii, iii, ...
+    upperRoman: 'upper-roman', // I, II, III, ...
+    lowerGreek: 'lower-greek', // α, β, γ, ...
+    decimalLeadingZero: 'decimal-leading-zero', // 01, 02, 03, ...
+};
+export const UNORDERED_LIST_STYLE_TYPE = {
+    disc: 'disc', // •
+    circle: 'circle', // ○
+    square: 'square', // ■
+    custom: 'custom',
+};

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

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

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

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