@antscorp/antsomi-ui 2.0.83-text-editor-beta.10 → 2.0.84

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

@@ -1,47 +0,0 @@
-import '@tiptap/extension-text-style';
-import { Extension } from '@tiptap/core';
-import { DEFAULT_TEXT_STYLE } from '../constants';
-/**
- * This extension allows you to set a font size for text.
- */
-export const FontSize = Extension.create({
-    name: 'fontSize',
-    addOptions() {
-        return {
-            types: ['textStyle'],
-            defaultFontSize: DEFAULT_TEXT_STYLE.fontSize,
-        };
-    },
-    addGlobalAttributes() {
-        return [
-            {
-                types: this.options.types,
-                attributes: {
-                    fontSize: {
-                        default: this.options.defaultFontSize,
-                        parseHTML: element => element.style.fontSize || this.options.defaultFontSize,
-                        renderHTML: attrs => {
-                            if (!attrs.fontSize || attrs.fontSize === this.options.defaultFontSize) {
-                                return {};
-                            }
-                            return {
-                                style: `font-size: ${attrs.fontSize}`,
-                            };
-                        },
-                    },
-                },
-            },
-        ];
-    },
-    addCommands() {
-        return {
-            setFontSize: fontSize => ({ chain }) => chain().setMark('textStyle', { fontSize }).run(),
-            unsetFontSize: () => ({ chain }) => chain()
-                .setMark('textStyle', {
-                fontSize: this.options.defaultFontSize || null,
-            })
-                .removeEmptyTextStyle()
-                .run(),
-        };
-    },
-});

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

@@ -1,23 +0,0 @@
-import { Extension } from '@tiptap/core';
-export interface FontWeightOptions {
-    types: string[];
-    defaultWeight: string | number;
-}
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        fontWeight: {
-            /**
-             * Set the font weight
-             * @param fontWeight The font weight
-             * @example editor.commands.setFontWeight('bold')
-             */
-            setFontWeight: (fontWeight: string | number) => ReturnType;
-            /**
-             * Unset the font weight
-             * @example editor.commands.unsetFontWeight()
-             */
-            unsetFontWeight: () => ReturnType;
-        };
-    }
-}
-export declare const FontWeight: Extension<any, any>;

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

@@ -1,41 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { DEFAULT_TEXT_STYLE } from '../constants';
-export const FontWeight = Extension.create({
-    name: 'fontWeight',
-    addOptions() {
-        return {
-            types: ['textStyle'],
-            defaultWeight: DEFAULT_TEXT_STYLE.fontWeight,
-        };
-    },
-    addGlobalAttributes() {
-        return [
-            {
-                types: this.options.types,
-                attributes: {
-                    fontWeight: {
-                        default: this.options.defaultWeight,
-                        renderHTML: attributes => {
-                            if (!attributes.fontWeight) {
-                                return {};
-                            }
-                            return {
-                                style: `font-weight: ${attributes.fontWeight}`,
-                            };
-                        },
-                        parseHTML: element => element.style.fontWeight,
-                    },
-                },
-            },
-        ];
-    },
-    addCommands() {
-        return {
-            setFontWeight: fontWeight => ({ chain }) => chain().setMark('textStyle', { fontWeight }).run(),
-            unsetFontWeight: () => ({ chain }) => chain()
-                .setMark('textStyle', { fontWeight: this.options.defaultWeight })
-                .removeEmptyTextStyle()
-                .run(),
-        };
-    },
-});

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

@@ -1 +0,0 @@
-export declare const Highlight: import("@tiptap/core").Mark<import("@tiptap/extension-highlight").HighlightOptions, any>;

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

@@ -1,14 +0,0 @@
-import { Highlight as TiptapHighlightExtension } from '@tiptap/extension-highlight';
-export const Highlight = TiptapHighlightExtension.extend({
-    parseHTML() {
-        return [
-            {
-                tag: 'mark',
-            },
-            {
-                tag: 'span',
-                getAttrs: node => node.style.backgroundColor !== undefined && null,
-            },
-        ];
-    },
-});

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

@@ -1,28 +0,0 @@
-import { Extension } from '@tiptap/core';
-export interface IndentOptions {
-    /**
-     * Maximum indentation level
-     * @default 8
-     */
-    maxIndent: number;
-    /**
-     * Types of nodes that can be indented
-     * @default ['paragraph', 'heading']
-     */
-    types: string[];
-}
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        indent: {
-            /**
-             * Increase indent
-             */
-            indent: () => ReturnType;
-            /**
-             * Decrease indent
-             */
-            outdent: () => ReturnType;
-        };
-    }
-}
-export declare const Indent: Extension<IndentOptions, any>;

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

@@ -1,68 +0,0 @@
-import { Extension } from '@tiptap/core';
-export const Indent = Extension.create({
-    name: 'indent',
-    addOptions() {
-        return {
-            maxIndent: 8,
-            types: ['paragraph', 'heading'],
-        };
-    },
-    addGlobalAttributes() {
-        return [
-            {
-                types: this.options.types,
-                attributes: {
-                    indent: {
-                        default: 0,
-                        renderHTML: attrs => attrs.indent
-                            ? {
-                                style: `margin-left: ${attrs.indent}em;`,
-                            }
-                            : {},
-                        parseHTML: element => {
-                            const indent = element.style.marginLeft;
-                            if (indent) {
-                                return parseInt(indent) || 0;
-                            }
-                            return 0;
-                        },
-                    },
-                },
-            },
-        ];
-    },
-    addCommands() {
-        return {
-            indent: () => ({ commands }) => {
-                // Lấy giá trị indent hiện tại
-                const currentIndent = this.editor.getAttributes('paragraph').indent || 0;
-                // Giới hạn mức indent tối đa từ options
-                if (currentIndent >= this.options.maxIndent)
-                    return false;
-                return this.options.types
-                    .map(type => commands.updateAttributes(type, {
-                    indent: currentIndent + 1,
-                }))
-                    .every(reponse => reponse);
-            },
-            outdent: () => ({ commands }) => {
-                // Lấy giá trị indent hiện tại
-                const currentIndent = this.editor.getAttributes('paragraph').indent || 0;
-                // Không thể outdent khi indent = 0
-                if (currentIndent <= 0)
-                    return false;
-                return this.options.types
-                    .map(type => commands.updateAttributes(type, {
-                    indent: currentIndent - 1,
-                }))
-                    .every(reponse => reponse);
-            },
-        };
-    },
-    addKeyboardShortcuts() {
-        return {
-            Tab: () => this.editor.commands.indent(),
-            'Shift-Tab': () => this.editor.commands.outdent(),
-        };
-    },
-});

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

@@ -1,20 +0,0 @@
-import { Extension } from '@tiptap/core';
-export interface LineHeightOptions {
-    types: string[];
-    defaultHeight: string;
-}
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        lineHeight: {
-            /**
-             * Set the line height attribute
-             */
-            setLineHeight: (height: string) => ReturnType;
-            /**
-             * Unset the text align attribute
-             */
-            unsetLineHeight: () => ReturnType;
-        };
-    }
-}
-export declare const LineHeight: Extension<LineHeightOptions, any>;

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

@@ -1,36 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { DEFAULT_TEXT_STYLE } from '../constants';
-export const LineHeight = Extension.create({
-    name: 'lineHeight',
-    addOptions() {
-        return {
-            defaultHeight: DEFAULT_TEXT_STYLE.lineHeight,
-            types: ['heading', 'paragraph'],
-        };
-    },
-    addGlobalAttributes() {
-        return [
-            {
-                types: this.options.types,
-                attributes: {
-                    lineHeight: {
-                        default: this.options.defaultHeight,
-                        parseHTML: element => element.style.lineHeight || this.options.defaultHeight,
-                        renderHTML: attrs => {
-                            if (!attrs.lineHeight || attrs.lineHeight === this.options.defaultHeight) {
-                                return {};
-                            }
-                            return { style: `line-height: ${attrs.lineHeight}` };
-                        },
-                    },
-                },
-            },
-        ];
-    },
-    addCommands() {
-        return {
-            setLineHeight: (height) => ({ commands }) => this.options.types.every(type => commands.updateAttributes(type, { lineHeight: height })),
-            unsetLineHeight: () => ({ commands }) => this.options.types.every(type => commands.resetAttributes(type, 'lineHeight')),
-        };
-    },
-});

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

@@ -1,15 +0,0 @@
-import { LinkOptions as TiptapLinkOptions } from '@tiptap/extension-link';
-export type LinkAttrs = {
-    id: string;
-    href: string;
-} & Partial<{
-    content: string;
-    target: string | null;
-    rel: string | null;
-    class: string | null;
-    title: string | null;
-    dynamic: boolean | null;
-    tag: boolean | null;
-}>;
-export type LinkOptions = TiptapLinkOptions & {};
-export declare const Link: import("@tiptap/core").Mark<TiptapLinkOptions, any>;

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

@@ -1,50 +0,0 @@
-import TiptapLinkExtension from '@tiptap/extension-link';
-import { LINK_TEXT_COLOR } from '../constants';
-export const Link = TiptapLinkExtension.extend({
-    addOptions() {
-        return {
-            ...this.parent?.(),
-            openOnClick: false,
-            autolink: false,
-        };
-    },
-    addAttributes() {
-        return {
-            ...this.parent?.(),
-            id: {
-                default: null,
-                parseHTML: el => el.getAttribute('data-link-id'),
-                renderHTML: attrs => ({
-                    'data-link-id': attrs.id,
-                }),
-            },
-            title: {
-                default: null,
-                parseHTML: el => el.title,
-            },
-            dynamic: {
-                default: null,
-                parseHTML: el => el.getAttribute('data-dynamic') === 'true',
-                renderHTML: attrs => (attrs.dynamic ? { 'data-dynamic': attrs.dynamic } : null),
-            },
-            tag: {
-                default: null,
-                parseHTML: el => el.getAttribute('data-tag'),
-                renderHTML: attrs => (attrs.tag ? { 'data-tag': attrs.tag } : null),
-            },
-        };
-    },
-    addKeyboardShortcuts() {
-        return {
-            ...this.parent?.(),
-            Enter: ({ editor }) => {
-                editor.chain().unsetUnderline().run();
-                const currentColor = editor.getAttributes('textStyle').color;
-                if (currentColor === LINK_TEXT_COLOR) {
-                    editor.chain().unsetColor().run();
-                }
-                return false;
-            },
-        };
-    },
-});

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

@@ -1,13 +0,0 @@
-import { Extension } from '@tiptap/core';
-export interface ListItemMarkerOptions {
-    paddingRight: number;
-    defaultFontSize: string;
-    defaultFontFamily: string;
-}
-/**
- * Extension tạo marker tùy chỉnh cho danh sách trong p
- *
- * Extension này thay thế marker mặc định của danh sách bằng các marker
- * có thể kế thừa style (font, size, color...) từ text node đầu tiên.
- */
-export declare const ListItemMarker: Extension<ListItemMarkerOptions, any>;

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

@@ -1,174 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { Decoration, DecorationSet } from '@tiptap/pm/view';
-import { kebabCase } from 'lodash';
-function getMaxMarkerWidth(markers, font = '16px Arial') {
-    let max = 0;
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    if (!ctx)
-        return max;
-    ctx.font = font;
-    for (const m of markers) {
-        const w = ctx.measureText(m).width;
-        if (w > max)
-            max = w;
-    }
-    return max;
-}
-/**
- * Tạo các marker tùy chỉnh cho danh sách (bullet và ordered) với style kế thừa từ text node
- *
- * @param doc - ProseMirror document node
- * @returns DecorationSet chứa tất cả các widget decoration cho marker
- */
-const styleMarker = (doc, options) => {
-    const decorations = [];
-    doc.descendants((listNode, listNodePos) => {
-        const isBulletList = listNode.type.name === 'bulletList';
-        const isOrderedList = listNode.type.name === 'orderedList';
-        if (!isBulletList && !isOrderedList) {
-            return;
-        }
-        // Khởi tạo marker dựa trên loại danh sách
-        const getMarker = (isOrderedList, index) => isOrderedList ? `${index + 1}.` : '•';
-        const markers = [];
-        const listItems = [];
-        listNode.descendants((listItem, listItemPos) => {
-            if (listItem.type.name !== 'listItem') {
-                return;
-            }
-            const itemInfo = {
-                node: listItem,
-                pos: listItemPos,
-                isEmpty: true,
-            };
-            listItems.push(itemInfo);
-            // Tìm paragraph đầu tiên và text node đầu tiên
-            let foundText = false;
-            let foundParagraph = false;
-            listItem.descendants((node, nodePos) => {
-                if (!foundParagraph && node.type.name === 'paragraph') {
-                    foundParagraph = true;
-                    itemInfo.paragraphPos = nodePos;
-                    itemInfo.paragraphNode = node;
-                }
-                if (!foundText && node.type.name === 'text') {
-                    foundText = true;
-                    itemInfo.isEmpty = false;
-                    itemInfo.textNode = node;
-                    itemInfo.textNodePos = nodePos;
-                    const textStyleMark = node.marks.find(nodeMark => nodeMark.type.name === 'textStyle');
-                    if (textStyleMark) {
-                        itemInfo.textStyleMark = textStyleMark;
-                    }
-                }
-            });
-            const index = listItems.length;
-            const marker = getMarker(isOrderedList, index - 1);
-            markers.push(marker);
-        });
-        for (let i = 0; i < listItems.length; i++) {
-            const item = listItems[i];
-            if (!item.textStyleMark) {
-                for (let j = i - 1; j >= 0; j--) {
-                    if (listItems[j].textStyleMark) {
-                        item.textStyleMark = listItems[j].textStyleMark;
-                        break;
-                    }
-                }
-            }
-        }
-        let font = `${options.defaultFontSize} ${options.defaultFontFamily}`;
-        for (const item of listItems) {
-            if (item.textStyleMark) {
-                const { fontSize, fontFamily } = item.textStyleMark.attrs;
-                if (fontSize && fontFamily) {
-                    font = `${fontSize} ${fontFamily}`;
-                    break;
-                }
-            }
-        }
-        const maxWidth = getMaxMarkerWidth(markers, font);
-        const { paddingRight } = options;
-        const totalWidth = maxWidth + paddingRight;
-        listItems.forEach((item, index) => {
-            if (item.paragraphPos === undefined) {
-                return;
-            }
-            const marker = getMarker(isOrderedList, index);
-            const widget = document.createElement('span');
-            widget.innerHTML = marker;
-            // Đặt các thuộc tính style cơ bản
-            widget.style.setProperty('user-select', 'none');
-            widget.style.setProperty('text-decoration', 'none');
-            widget.style.setProperty('display', 'inline-block');
-            widget.style.setProperty('width', `${totalWidth}px`);
-            widget.style.setProperty('text-align', 'left');
-            // Sao chép tất cả các thuộc tính style từ mark textStyle
-            if (item.textStyleMark) {
-                for (const styleProp in item.textStyleMark.attrs) {
-                    widget.style.setProperty(kebabCase(styleProp), String(item.textStyleMark.attrs[styleProp]));
-                }
-            }
-            // Tính toán vị trí chính xác cho marker
-            const absoluteListItemPos = listNodePos + item.pos + 1;
-            const absoluteParagraphPos = absoluteListItemPos + item.paragraphPos;
-            const markerPos = absoluteParagraphPos + 1;
-            // Đặt marker widget tại vị trí đã tính toán (bên trong paragraph)
-            // Decoration.widget sẽ tạo một widget tại vị trí markerPos
-            decorations.push(Decoration.widget(markerPos, widget, {
-                ignoreSelection: true,
-            }));
-            if (item.paragraphNode) {
-                // Tính toán vị trí bắt đầu và kết thúc của paragraph
-                const paragraphStart = absoluteParagraphPos;
-                const paragraphEnd = paragraphStart + item.paragraphNode.nodeSize;
-                // Thêm decoration cho paragraph với style inline-block
-                decorations.push(Decoration.node(paragraphStart + 1, paragraphEnd + 1, {
-                    style: 'display: inline;',
-                }));
-            }
-        });
-    });
-    return DecorationSet.create(doc, decorations);
-};
-/**
- * Extension tạo marker tùy chỉnh cho danh sách trong p
- *
- * Extension này thay thế marker mặc định của danh sách bằng các marker
- * có thể kế thừa style (font, size, color...) từ text node đầu tiên.
- */
-export const ListItemMarker = Extension.create({
-    name: 'list-item-marker',
-    addOptions() {
-        return {
-            ...this.parent?.(),
-            paddingRight: 10,
-            defaultFontSize: '16px',
-            defaultFontFamily: 'Arial',
-        };
-    },
-    addProseMirrorPlugins() {
-        const { options } = this;
-        return [
-            new Plugin({
-                key: new PluginKey('custom-list-item-marker'),
-                state: {
-                    init(_, { doc }) {
-                        return styleMarker(doc, options);
-                    },
-                    // Chỉ tính toán lại nếu document thay đổi
-                    apply(tr, oldState) {
-                        return tr.docChanged ? styleMarker(tr.doc, options) : oldState;
-                    },
-                },
-                props: {
-                    decorations(state) {
-                        return this.getState(state);
-                    },
-                },
-            }),
-        ];
-    },
-});

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

@@ -1,6 +0,0 @@
-import { Extension } from '@tiptap/core';
-interface SelectionDecorationOptions {
-    className: string;
-}
-export declare const SelectionDecoration: Extension<SelectionDecorationOptions, any>;
-export {};

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

@@ -1,40 +0,0 @@
-import { Extension, isNodeSelection } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { Decoration, DecorationSet } from '@tiptap/pm/view';
-const EXTENSION_NAME = 'selectionDecoration';
-export const SelectionDecoration = Extension.create({
-    name: EXTENSION_NAME,
-    addOptions() {
-        return {
-            className: 'selection',
-        };
-    },
-    addProseMirrorPlugins() {
-        return [
-            new Plugin({
-                key: new PluginKey(EXTENSION_NAME),
-                props: {
-                    decorations: () => {
-                        const { state, isFocused, isEditable } = this.editor;
-                        const { selection } = state;
-                        const { from, to } = selection;
-                        if (state.selection.empty) {
-                            return null;
-                        }
-                        if (isFocused === true || !isEditable) {
-                            return null;
-                        }
-                        if (isNodeSelection(state.selection)) {
-                            return null;
-                        }
-                        return DecorationSet.create(state.doc, [
-                            Decoration.inline(from, to, {
-                                class: this.options.className,
-                            }),
-                        ]);
-                    },
-                },
-            }),
-        ];
-    },
-});

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

@@ -1,39 +0,0 @@
-import { Node } from '@tiptap/core';
-import { Attrs } from '@tiptap/pm/model';
-export type SmartTagAttrs = {
-    id: string;
-} & Partial<{
-    content: string;
-    tag: string;
-}>;
-/**
- * Represents the options for the SmartTag node.
- */
-export interface SmartTagOptions {
-    HTMLAttributes: Record<string, unknown>;
-    highlight: boolean;
-}
-export interface SmartTagStorage {
-    highlight: boolean;
-}
-/**
- * Represents the options for the SmartTag node.
- */
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        smartTag: {
-            setSmartTag: (attrs: {
-                id: string;
-                content?: string;
-            }) => ReturnType;
-            deleteSmartTagGlobally: (predicate: (attrs: Attrs) => boolean) => ReturnType;
-            updateSmartTagAttrsGlobally: (updateFn: (attrs: Attrs) => Attrs | undefined) => ReturnType;
-            updateSmartTagHighlight: (enabled: boolean) => ReturnType;
-        };
-    }
-}
-export declare const EXTENSION_NAME = "smartTag";
-/**
- * Represents a dynamic tag node in the editor.
- */
-export declare const SmartTag: Node<SmartTagOptions, SmartTagStorage>;