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

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

@@ -1,187 +0,0 @@
-import TiptapLinkExtension from '@tiptap/extension-link';
-import { CUSTOM_LINK_EXTENSION_NAME, LINK_TEXT_COLOR } from '../constants';
-import { TextSelection } from '@tiptap/pm/state';
-import { dataAttrArrayToObject } from '@antscorp/antsomi-ui/es/utils';
-import { isEmpty, kebabCase, toString } from 'lodash';
-import { getLinkMarkRanges, getLinkRange, isLinkColor } from '../utils';
-export const CustomLink = TiptapLinkExtension.extend({
-    name: CUSTOM_LINK_EXTENSION_NAME,
-    addOptions() {
-        return {
-            ...this.parent(),
-            openOnClick: false,
-            highlight: false,
-        };
-    },
-    addStorage() {
-        return {
-            highlight: this.options.highlight,
-        };
-    },
-    addAttributes() {
-        return {
-            ...this.parent?.(),
-            title: {
-                default: null,
-                parseHTML: el => el.title,
-            },
-            data: {
-                default: [],
-                parseHTML: el => el.dataset,
-                renderHTML: attrs => {
-                    const dataAttrs = Object.entries(attrs.data).map(([key, value]) => ({
-                        key: `data-${kebabCase(key)}`,
-                        value: toString(value),
-                    }));
-                    return dataAttrArrayToObject(dataAttrs);
-                },
-            },
-        };
-    },
-    addCommands() {
-        return {
-            ...this.parent?.(),
-            setCustomLink: ({ attrs, content }) => ({ editor, chain }) => {
-                const { selection } = editor?.state;
-                const { from, to } = selection;
-                let linkContent = editor.state.doc.textBetween(from, to);
-                if (content && linkContent !== content) {
-                    linkContent = content;
-                }
-                return chain()
-                    .focus()
-                    .deleteSelection()
-                    .insertContent(linkContent)
-                    .command(({ tr }) => {
-                    const endPos = tr.selection.from;
-                    const startPos = endPos - linkContent.length;
-                    tr.setSelection(TextSelection.create(tr.doc, startPos, endPos));
-                    return true;
-                })
-                    .setUnderline()
-                    .setColor(LINK_TEXT_COLOR)
-                    .setLink({
-                    ...attrs,
-                    href: attrs?.href || './',
-                    class: this.storage.highlight ? 'highlight' : undefined,
-                })
-                    .command(({ tr }) => {
-                    const endPos = tr.selection.to;
-                    tr.setSelection(TextSelection.create(tr.doc, endPos, endPos));
-                    return true;
-                })
-                    .run();
-            },
-            deleteCustomLink: predicate => ({ editor }) => {
-                const { state } = editor;
-                const { doc } = state;
-                let linkMark;
-                doc.descendants((node, pos) => {
-                    if (linkMark)
-                        return;
-                    linkMark = getLinkMarkRanges({
-                        state,
-                        from: pos,
-                        to: pos + node.nodeSize,
-                    }).find(range => predicate(range.mark.attrs));
-                });
-                if (!linkMark)
-                    return false;
-                return editor
-                    .chain()
-                    .deleteRange({
-                    from: linkMark.from,
-                    to: linkMark.to,
-                })
-                    .run();
-            },
-            unsetCustomLink: () => ({ editor }) => {
-                const { state } = editor;
-                const linkRange = getLinkRange({ state, pos: state.selection.from });
-                if (!linkRange)
-                    return false;
-                const command = editor
-                    .chain()
-                    .setTextSelection({
-                    from: linkRange.from,
-                    to: linkRange.to,
-                })
-                    .unsetUnderline()
-                    .unsetLink();
-                if (isLinkColor(editor.getAttributes('textStyle').color)) {
-                    command.unsetColor();
-                }
-                return command.run();
-            },
-            updateCustomLinkAttrsGlobally: (predicate, updateFn) => ({ editor, tr, dispatch }) => {
-                const { state } = editor;
-                const { doc, schema } = state;
-                if (!dispatch)
-                    return true;
-                const linkType = schema.marks[CustomLink.name];
-                let somethingChanged = false;
-                doc.descendants((node, pos) => {
-                    // Get all link mark ranges within this node
-                    const linkMarkRanges = getLinkMarkRanges({
-                        state,
-                        from: pos,
-                        to: pos + node.nodeSize,
-                    });
-                    linkMarkRanges.forEach(markRange => {
-                        const currentLinkAttrs = markRange.mark.attrs;
-                        const currentLinkContent = doc.textBetween(markRange.from, markRange.to);
-                        const isMatched = predicate(currentLinkAttrs);
-                        if (!isMatched)
-                            return;
-                        const updated = updateFn({
-                            currentAttrs: currentLinkAttrs,
-                            currentContent: currentLinkContent,
-                        });
-                        if (!updated || isEmpty(updated))
-                            return;
-                        const from = tr.mapping.map(markRange.from);
-                        const to = tr.mapping.map(markRange.to);
-                        if (!isEmpty(updated.attrs)) {
-                            somethingChanged = true;
-                            // Remove the old mark
-                            tr.removeMark(from, to, linkType);
-                            // Create a new mark with updated attributes and add it
-                            const newMark = linkType.create({
-                                ...markRange.mark.attrs,
-                                ...updated.attrs,
-                            });
-                            tr.addMark(from, to, newMark);
-                        }
-                        if (updated.content && updated.content !== currentLinkContent) {
-                            somethingChanged = true;
-                            tr.insertText(updated.content, from, to);
-                        }
-                    });
-                });
-                return somethingChanged;
-            },
-            updateCustomLinkHighlight: enabled => ({ tr }) => {
-                // Update the storage value
-                this.storage.highlight = enabled;
-                // Set metadata on the transaction to trigger the plugin to update decorations
-                tr.setMeta('updateCustomLinkHighlight', {
-                    highlight: enabled,
-                });
-                return true;
-            },
-        };
-    },
-    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/OrderedList.d.ts

@@ -1,56 +0,0 @@
-import { Node } from '@tiptap/core';
-import { OrderedListStyleType } from '../types';
-type ListStyleType = OrderedListStyleType;
-export interface CustomOrderedListOptions {
-    /**
-     * The node type name for list items.
-     * @default 'listItem'
-     */
-    itemTypeName: string;
-    /**
-     * The HTML attributes for an ordered list node.
-     * @default {}
-     */
-    HTMLAttributes: Record<string, any>;
-    /**
-     * Keep the marks when splitting a list item.
-     * @default false
-     */
-    keepMarks: boolean;
-    /**
-     * Keep the attributes when splitting a list item.
-     * @default false
-     */
-    keepAttributes: boolean;
-    /**
-     * Default list style type
-     * @default 'decimal'
-     */
-    defaultListStyleType: ListStyleType;
-    /**
-     * Available list style types
-     * @default ['decimal', 'lower-alpha', 'upper-alpha', 'lower-roman', 'upper-roman']
-     */
-    availableListStyleTypes: ListStyleType[];
-}
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        customOrderedList: {
-            /**
-             * Toggle a custom ordered list
-             */
-            toggleCustomOrderedList: (options?: {
-                listStyleType?: ListStyleType;
-            }) => ReturnType;
-            /**
-             * Set list style type for current ordered list
-             */
-            setOrderedListStyleType: (listStyleType: ListStyleType) => ReturnType;
-        };
-    }
-}
-/**
- * This extension allows you to create ordered lists with custom list-style-type.
- */
-export declare const CustomOrderedList: Node<CustomOrderedListOptions, any>;
-export {};

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

@@ -1,187 +0,0 @@
-import { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core';
-import { ORDERED_LIST_STYLE_TYPE } from '../constants';
-const ListItemName = 'listItem';
-const TextStyleName = 'textStyle';
-/**
- * Input regex patterns for different list styles
- */
-const inputRegexPatterns = {
-    decimal: /^(\d+)\.\s$/,
-    'lower-alpha': /^([a-z])\.\s$/,
-    'upper-alpha': /^([A-Z])\.\s$/,
-    'lower-roman': /^(i{1,3}|iv|v|vi{0,3}|ix|x)\.\s$/,
-    'upper-roman': /^(I{1,3}|IV|V|VI{0,3}|IX|X)\.\s$/,
-    'lower-greek': /^(α|β|γ|δ|ε|ζ|η|θ|ι|κ)\.\s$/,
-    'decimal-leading-zero': /^(0\d+)\.\s$/,
-};
-/**
- * Convert roman numerals to numbers
- */
-function romanToNumber(roman) {
-    const romanNumerals = {
-        i: 1,
-        v: 5,
-        x: 10,
-    };
-    let result = 0;
-    for (let i = 0; i < roman.length; i++) {
-        const current = romanNumerals[roman[i]];
-        const next = romanNumerals[roman[i + 1]];
-        if (next && current < next) {
-            result += next - current;
-            i++;
-        }
-        else {
-            result += current;
-        }
-    }
-    return result;
-}
-/**
- * Helper function to convert different formats to numeric start value
- */
-function getStartValue(match, listStyleType) {
-    switch (listStyleType) {
-        case ORDERED_LIST_STYLE_TYPE.decimal:
-        case ORDERED_LIST_STYLE_TYPE.decimalLeadingZero:
-            return parseInt(match, 10);
-        case ORDERED_LIST_STYLE_TYPE.lowerAlpha:
-            return match.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0) + 1;
-        case ORDERED_LIST_STYLE_TYPE.upperAlpha:
-            return match.toUpperCase().charCodeAt(0) - 'A'.charCodeAt(0) + 1;
-        case ORDERED_LIST_STYLE_TYPE.lowerRoman:
-        case ORDERED_LIST_STYLE_TYPE.upperRoman:
-            return romanToNumber(match.toLowerCase());
-        case ORDERED_LIST_STYLE_TYPE.lowerGreek: {
-            const greekLetters = 'αβγδεζηθικ';
-            return greekLetters.indexOf(match) + 1;
-        }
-        default:
-            return 1;
-    }
-}
-/**
- * This extension allows you to create ordered lists with custom list-style-type.
- */
-export const CustomOrderedList = Node.create({
-    name: 'customOrderedList',
-    addOptions() {
-        return {
-            itemTypeName: ListItemName,
-            HTMLAttributes: {
-                style: 'margin:0.5em 0;padding-inline-start:1.2em',
-            },
-            keepMarks: false,
-            keepAttributes: false,
-            defaultListStyleType: ORDERED_LIST_STYLE_TYPE.decimal,
-            availableListStyleTypes: [
-                ORDERED_LIST_STYLE_TYPE.decimal,
-                ORDERED_LIST_STYLE_TYPE.lowerAlpha,
-                ORDERED_LIST_STYLE_TYPE.upperAlpha,
-                ORDERED_LIST_STYLE_TYPE.lowerRoman,
-                ORDERED_LIST_STYLE_TYPE.upperRoman,
-            ],
-        };
-    },
-    group: 'block list',
-    content() {
-        return `${this.options.itemTypeName}+`;
-    },
-    addAttributes() {
-        return {
-            start: {
-                default: 1,
-                parseHTML: element => element.hasAttribute('start') ? parseInt(element.getAttribute('start') || '', 10) : 1,
-            },
-            type: {
-                default: null,
-                parseHTML: element => element.getAttribute('type'),
-            },
-            listStyleType: {
-                default: this.options.defaultListStyleType,
-                parseHTML: element => {
-                    const style = element.getAttribute('style');
-                    const listStyleType = style?.match(/list-style-type:\s*([^;]+)/)?.[1]?.trim();
-                    return listStyleType || this.options.defaultListStyleType;
-                },
-                renderHTML: attributes => ({
-                    style: `list-style-type: ${attributes.listStyleType}`,
-                }),
-            },
-        };
-    },
-    parseHTML() {
-        return [
-            {
-                tag: 'ol',
-            },
-        ];
-    },
-    renderHTML({ HTMLAttributes }) {
-        const { start, ...attributesWithoutStart } = HTMLAttributes;
-        return start === 1
-            ? ['ol', mergeAttributes(this.options.HTMLAttributes, attributesWithoutStart), 0]
-            : ['ol', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-    },
-    addCommands() {
-        return {
-            toggleCustomOrderedList: (options = {}) => ({ chain }) => {
-                const { listStyleType = this.options.defaultListStyleType } = options;
-                if (this.options.keepAttributes) {
-                    return chain()
-                        .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
-                        .updateAttributes(ListItemName, this.editor.getAttributes(TextStyleName))
-                        .updateAttributes(this.name, { listStyleType })
-                        .run();
-                }
-                return chain()
-                    .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
-                    .updateAttributes(this.name, { listStyleType })
-                    .run();
-            },
-            setOrderedListStyleType: (listStyleType) => ({ commands }) => commands.updateAttributes(this.name, { listStyleType }),
-        };
-    },
-    addKeyboardShortcuts() {
-        return {
-            'Mod-Shift-7': () => this.editor.commands.toggleCustomOrderedList(),
-        };
-    },
-    addInputRules() {
-        const inputRules = this.options.availableListStyleTypes.map(listStyleType => {
-            const regex = inputRegexPatterns[listStyleType];
-            let inputRule = wrappingInputRule({
-                find: regex,
-                type: this.type,
-                getAttributes: match => ({
-                    start: getStartValue(match[1], listStyleType),
-                    listStyleType,
-                }),
-                joinPredicate: (match, node) => {
-                    const startValue = getStartValue(match[1], listStyleType);
-                    return node.childCount + node.attrs.start === startValue;
-                },
-            });
-            if (this.options.keepMarks || this.options.keepAttributes) {
-                inputRule = wrappingInputRule({
-                    find: regex,
-                    type: this.type,
-                    keepMarks: this.options.keepMarks,
-                    keepAttributes: this.options.keepAttributes,
-                    getAttributes: match => ({
-                        start: getStartValue(match[1], listStyleType),
-                        listStyleType,
-                        ...this.editor.getAttributes(TextStyleName),
-                    }),
-                    joinPredicate: (match, node) => {
-                        const startValue = getStartValue(match[1], listStyleType);
-                        return node.childCount + node.attrs.start === startValue;
-                    },
-                    editor: this.editor,
-                });
-            }
-            return inputRule;
-        });
-        return inputRules;
-    },
-});

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>;