@antscorp/antsomi-ui 2.0.110 → 2.0.111

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

@@ -0,0 +1,398 @@
+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',
+        SHORTCUT: formatHotkey('\\'),
+    },
+    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 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', fallback: ['Helvetica', 'sans-serif'] },
+        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    },
+    {
+        fontFamily: { name: 'Roboto', fallback: ['Helvetica', 'sans-serif'] }, // Google Font, not inherently system-wide
+        fontWeight: [100, 300, 400, 500, 700, 900],
+    },
+    {
+        fontFamily: { name: 'Georgia', fallback: ['serif'] },
+        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    },
+    {
+        fontFamily: { name: 'Helvetica', fallback: ['Arial', 'sans-serif'] },
+        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    },
+    {
+        fontFamily: { name: 'Lucida Grande', fallback: ['Lucida Sans Unicode', 'sans-serif'] },
+        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    },
+    {
+        fontFamily: { name: 'Tahoma', fallback: ['Helvetica', 'sans-serif'] },
+        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    },
+    {
+        fontFamily: { name: 'Times New Roman', fallback: ['Times', 'serif'] },
+        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    },
+    {
+        fontFamily: { name: 'Verdana', fallback: ['Helvetica', 'sans-serif'] },
+        fontWeight: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    },
+];
+export const LINK_TEXT_COLOR = 'rgb(0, 102, 204)';
+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',
+};
+export const CUSTOM_LINK_EXTENSION_NAME = 'custom_link';
+export const DEFAULT_FONT_GROUPING = {
+    standard: {
+        key: 'web_safe_fonts',
+        label: 'Standard',
+    },
+    nonStandard: {
+        key: 'custom_fonts',
+        label: 'Non-standard',
+    },
+};
+/**
+ * All available toolbar actions in default order
+ */
+export const ALL_TOOLBAR_ACTIONS = [
+    // Row 1: Text formatting and styling
+    'fontFamily',
+    'fontSize',
+    'bold',
+    'italic',
+    'underline',
+    'link',
+    'strike',
+    'superscript',
+    'subscript',
+    'textTransform',
+    'textColor',
+    'backgroundColor',
+    'emoji',
+    'smartTag',
+    // Row 2: Lists, alignment, and utilities
+    'bulletList',
+    'orderedList',
+    'textAlign',
+    'lineSpacing',
+    'letterSpacing',
+    'indent',
+    'outdent',
+    'history',
+    'clearFormatting',
+];
+/**
+ * Default grouping of toolbar actions into rows
+ */
+export const DEFAULT_TOOLBAR_GROUPING = [
+    // Row 1
+    [
+        'fontFamily',
+        'fontSize',
+        'bold',
+        'italic',
+        'underline',
+        'link',
+        'strike',
+        'superscript',
+        'subscript',
+        'textTransform',
+        'textColor',
+        'backgroundColor',
+        'emoji',
+        'smartTag',
+    ],
+    // Row 2
+    [
+        'bulletList',
+        'orderedList',
+        'textAlign',
+        'lineSpacing',
+        'letterSpacing',
+        'indent',
+        'outdent',
+        'history',
+        'clearFormatting',
+    ],
+];
+// eslint-disable-next-line no-control-regex
+export const ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;

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,43 @@
+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 { backgroundColor } = attributes;
+                            return {
+                                style: `--text-style-bg-color: ${backgroundColor}; background-color: ${backgroundColor};`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    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,18 @@
+import type { EditorState } from '@tiptap/pm/state';
+import { BubbleMenuView as TiptapBubbleMenuView } from '@tiptap/extension-bubble-menu';
+import { Plugin } from '@tiptap/pm/state';
+import type { EditorView } from '@tiptap/pm/view';
+import type { BubbleMenuPluginProps, BubbleMenuViewProps } from '@tiptap/extension-bubble-menu';
+export declare class BubbleMenuView extends TiptapBubbleMenuView {
+    private resizeObserver;
+    constructor(props: BubbleMenuViewProps);
+    /**
+     * Sets up ResizeObserver to watch for bubble menu element size changes.
+     * This ensures the bubble menu position is updated when the element resizes
+     * due to React component rendering different children, not just when the window resizes.
+     */
+    setupResizeObserver: () => void;
+    updateHandler: (view: EditorView, selectionChanged: boolean, docChanged: boolean, oldState?: EditorState) => void;
+    destroy(): void;
+}
+export declare const BubbleMenuPlugin: (options: BubbleMenuPluginProps) => Plugin<any>;

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

@@ -0,0 +1,81 @@
+import { BubbleMenuView as TiptapBubbleMenuView } from '@tiptap/extension-bubble-menu';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+export class BubbleMenuView extends TiptapBubbleMenuView {
+    constructor(props) {
+        super(props);
+        /**
+         * Sets up ResizeObserver to watch for bubble menu element size changes.
+         * This ensures the bubble menu position is updated when the element resizes
+         * due to React component rendering different children, not just when the window resizes.
+         */
+        this.setupResizeObserver = () => {
+            if (typeof ResizeObserver === 'undefined') {
+                // ResizeObserver is not supported in this environment
+                return;
+            }
+            // Timer for debouncing the visibility restoration after resize
+            let resizeTimer = null;
+            // Time to wait before showing the element again after resize stops
+            const DEBOUNCE_TIME = this.resizeDelay + 50;
+            this.resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    // Only handle resize events for the bubble menu element itself
+                    if (entry.target === this.element) {
+                        // Temporarily hide the element to prevent visual glitches during resize
+                        // This prevents the bubble menu from "jumping" or flickering while repositioning
+                        this.element.style.visibility = 'hidden';
+                        this.element.style.opacity = '0';
+                        // Clear any existing timer to reset the debounce period
+                        if (resizeTimer) {
+                            clearTimeout(resizeTimer);
+                        }
+                        // Immediately update the position with no delay for responsive positioning
+                        this.resizeHandler();
+                        // Set up a debounced timer to restore visibility after resize activity stops
+                        resizeTimer = setTimeout(() => {
+                            // Use requestAnimationFrame to ensure the position update is complete
+                            // before making the element visible again
+                            requestAnimationFrame(() => {
+                                this.element.style.visibility = 'visible';
+                                this.element.style.opacity = '1';
+                                resizeTimer = null;
+                            });
+                        }, DEBOUNCE_TIME);
+                    }
+                }
+            });
+            // Observe the bubble menu element itself - this is where React components are rendered
+            // When React renders different children, the element size may change
+            this.resizeObserver.observe(this.element);
+            // Also observe the editor view DOM element for editor size changes
+            this.resizeObserver.observe(this.view.dom);
+        };
+        this.updateHandler = (view, selectionChanged, docChanged, oldState) => {
+            const { composing } = view;
+            const isSame = !selectionChanged && !docChanged;
+            if (composing || isSame) {
+                return;
+            }
+            const shouldShow = this.getShouldShow(oldState);
+            if (!shouldShow) {
+                this.hide();
+                return;
+            }
+            this.show();
+            this.updatePosition();
+        };
+        this.setupResizeObserver();
+    }
+    destroy() {
+        super.destroy();
+        // Cleanup ResizeObserver
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+}
+export const BubbleMenuPlugin = (options) => new Plugin({
+    key: typeof options.pluginKey === 'string' ? new PluginKey(options.pluginKey) : options.pluginKey,
+    view: view => new BubbleMenuView({ view, ...options }),
+});

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

@@ -0,0 +1,15 @@
+import { Extension } from '@tiptap/core';
+import { type BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+export type BubbleMenuOptions = Omit<BubbleMenuPluginProps, 'editor' | 'element'> & {
+    /**
+     * The DOM element that contains your menu.
+     * @type {HTMLElement}
+     * @default null
+     */
+    element: HTMLElement | null;
+};
+/**
+ * This extension allows you to create a bubble menu.
+ * @see https://tiptap.dev/api/extensions/bubble-menu
+ */
+export declare const BubbleMenu: Extension<BubbleMenuOptions, any>;

package/es/components/organism/TextEditor/extensions/BubbleMenu/bubble-menu.js

@@ -0,0 +1,35 @@
+import { Extension } from '@tiptap/core';
+import { BubbleMenuPlugin } from './bubble-menu-plugin';
+/**
+ * This extension allows you to create a bubble menu.
+ * @see https://tiptap.dev/api/extensions/bubble-menu
+ */
+export const BubbleMenu = Extension.create({
+    name: 'bubbleMenu',
+    addOptions() {
+        return {
+            element: null,
+            pluginKey: 'bubbleMenu',
+            updateDelay: undefined,
+            appendTo: undefined,
+            shouldShow: null,
+        };
+    },
+    addProseMirrorPlugins() {
+        if (!this.options.element) {
+            return [];
+        }
+        return [
+            BubbleMenuPlugin({
+                pluginKey: this.options.pluginKey,
+                editor: this.editor,
+                element: this.options.element,
+                updateDelay: this.options.updateDelay,
+                options: this.options.options,
+                appendTo: this.options.appendTo,
+                getReferencedVirtualElement: this.options.getReferencedVirtualElement,
+                shouldShow: this.options.shouldShow,
+            }),
+        ];
+    },
+});

package/es/components/organism/TextEditor/extensions/BubbleMenu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './bubble-menu-plugin';
+export * from './bubble-menu';

package/es/components/organism/TextEditor/extensions/BubbleMenu/index.js

@@ -0,0 +1,2 @@
+export * from './bubble-menu-plugin';
+export * from './bubble-menu';

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

@@ -0,0 +1,16 @@
+import { Extension } from '@tiptap/core';
+import { TextStyle } from '../types';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        clearFormatting: {
+            /**
+             * Clear all formatting
+             */
+            clearFormatting: () => ReturnType;
+        };
+    }
+}
+export type ClearFormattingOptions = {
+    defaultTextStyle?: TextStyle;
+};
+export declare const ClearFormatting: Extension<any, any>;

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

@@ -0,0 +1,30 @@
+import { Extension } from '@tiptap/core';
+import { DEFAULT_TEXT_STYLE } from '../constants';
+import { isEntireParagraphSelected } from '../utils';
+export const ClearFormatting = Extension.create({
+    name: 'clearFormatting',
+    addOptions() {
+        return {
+            defaultTextStyle: DEFAULT_TEXT_STYLE,
+        };
+    },
+    addCommands() {
+        return {
+            clearFormatting: () => ({ editor, chain }) => {
+                const command = chain()
+                    .unsetAllMarks()
+                    .unsetTextTransform()
+                    .updateAttributes('textStyle', this.options.defaultTextStyle);
+                if (isEntireParagraphSelected(editor)) {
+                    command.unsetTextAlign();
+                }
+                return command.run();
+            },
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            'Mod-\\': () => this.editor.commands.clearFormatting(),
+        };
+    },
+});

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

@@ -0,0 +1,6 @@
+import { ColorOptions as TiptapColorOptions } from '@tiptap/extension-text-style';
+interface ColorOptions extends TiptapColorOptions {
+    defaultColor: string;
+}
+export declare const Color: import("@tiptap/core").Extension<ColorOptions, any>;
+export {};