@antscorp/antsomi-ui 2.0.109 → 2.0.111

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

@@ -0,0 +1,101 @@
+import { Extension } from '@tiptap/core';
+import { DEFAULT_TEXT_STYLE } from '../constants';
+import { convertPxToNumber } from '@antscorp/antsomi-ui/es/utils';
+function convertLineHeight(lineHeight, fontSize = 22) {
+    // Handle null/undefined cases
+    if (lineHeight == null) {
+        return 1.2; // Default line-height in most browsers
+    }
+    if (typeof lineHeight === 'number') {
+        return lineHeight;
+    }
+    const value = String(lineHeight).trim();
+    // Handle percentage values (e.g., "150%" -> 1.5)
+    if (value.endsWith('%')) {
+        const percentValue = parseFloat(value.slice(0, -1));
+        if (isNaN(percentValue)) {
+            throw new Error(`Invalid percentage value: ${lineHeight}`);
+        }
+        return percentValue / 100;
+    }
+    // Handle pixel values (e.g., "24px" -> 1.5 with 16px font)
+    if (value.endsWith('px') && fontSize) {
+        const pixelValue = parseFloat(value.slice(0, -2));
+        if (isNaN(pixelValue)) {
+            throw new Error(`Invalid pixel value: ${lineHeight}`);
+        }
+        if (fontSize <= 0) {
+            throw new Error(`Invalid font size for px conversion: ${fontSize}`);
+        }
+        return pixelValue / fontSize;
+    }
+    // Handle em/rem values (e.g., "1.5em" -> 1.5)
+    if (value.endsWith('em') || value.endsWith('rem')) {
+        const numValue = parseFloat(value.slice(0, -2));
+        if (isNaN(numValue)) {
+            throw new Error(`Invalid em/rem value: ${lineHeight}`);
+        }
+        return numValue;
+    }
+    const numValue = parseFloat(value);
+    if (isNaN(numValue)) {
+        throw new Error(`Cannot convert line-height value "${lineHeight}" to number!`);
+    }
+    return numValue;
+}
+function canConvertLineHeight(lineHeight, fontSize = 16) {
+    try {
+        // Try to convert, if no error thrown then it's convertible
+        convertLineHeight(lineHeight, fontSize);
+        return true;
+    }
+    catch (error) {
+        return false;
+    }
+}
+export const LineHeight = Extension.create({
+    name: 'lineHeight',
+    addOptions() {
+        return {
+            types: ['textStyle'],
+            defaultHeight: DEFAULT_TEXT_STYLE.lineHeight,
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    lineHeight: {
+                        default: this.options.defaultHeight,
+                        parseHTML: element => {
+                            const pxFontSize = convertPxToNumber(element.style.fontSize);
+                            let { lineHeight } = element.style;
+                            if (element.parentElement instanceof HTMLParagraphElement) {
+                                const { lineHeight: parentParagraphLineHeight } = element.parentElement.style;
+                                if (canConvertLineHeight(parentParagraphLineHeight)) {
+                                    lineHeight = parentParagraphLineHeight;
+                                }
+                            }
+                            if (!canConvertLineHeight(lineHeight))
+                                return null;
+                            return convertLineHeight(lineHeight, pxFontSize);
+                        },
+                        renderHTML: attrs => {
+                            if (!attrs.lineHeight || attrs.lineHeight === this.options.defaultHeight) {
+                                return {};
+                            }
+                            return { style: `line-height: ${attrs.lineHeight}` };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setLineHeight: lineHeight => ({ chain }) => chain().setMark('textStyle', { lineHeight }).run(),
+            unsetLineHeight: () => ({ chain }) => chain().setMark('textStyle', { lineHeight: null }).removeEmptyTextStyle().run(),
+        };
+    },
+});

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

@@ -0,0 +1,22 @@
+import { LinkAttrs } from '../types';
+import { LinkOptions as TiptapLinkOptions } from '@tiptap/extension-link';
+export type LinkOptions = TiptapLinkOptions;
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        customLink: {
+            setCustomLink: (params: {
+                attrs?: LinkAttrs;
+                content?: string;
+            }) => ReturnType;
+            deleteCustomLink: (predicate: (attrs: LinkAttrs) => boolean) => ReturnType;
+            unsetCustomLink: () => ReturnType;
+            updateCustomLinkAttrsGlobally: (predicate: (currentAttrs: LinkAttrs) => boolean, updateFn: (currentAttrs: LinkAttrs) => LinkAttrs | false) => ReturnType;
+            updateCustomLinkText: (params: {
+                predicate: (attrs: LinkAttrs) => boolean;
+                updated: (currentText: string) => string;
+                mergeAdjacentEqualFn?: (currentAttrs: LinkAttrs, candidateAttrs: LinkAttrs) => boolean;
+            }) => ReturnType;
+        };
+    }
+}
+export declare const CustomLink: import("@tiptap/core").Mark<TiptapLinkOptions, any>;

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

@@ -0,0 +1,178 @@
+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, isEqual, map, toString } from 'lodash';
+import { getLinkMarkRanges, getLinkRange, isLinkColor, textBetween } from '../utils';
+import { mergeAdjacentRanges } from '../utils/shared';
+export const CustomLink = TiptapLinkExtension.extend({
+    name: CUSTOM_LINK_EXTENSION_NAME,
+    inclusive: false,
+    addOptions() {
+        return {
+            ...this.parent(),
+            openOnClick: false,
+        };
+    },
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            title: { default: null, parseHTML: el => el.title },
+            data: {
+                default: null,
+                parseHTML: el => {
+                    const { dataset } = el;
+                    return { ...dataset };
+                },
+                renderHTML: (attrs) => {
+                    const dataAttrs = map(attrs.data || {}, (value, key) => ({
+                        key: `data-${key}`,
+                        value: toString(value),
+                    }));
+                    return dataAttrArrayToObject(dataAttrs);
+                },
+            },
+        };
+    },
+    addCommands() {
+        return {
+            ...this.parent?.(),
+            setCustomLink: ({ attrs, content }) => ({ state, chain }) => {
+                const { selection } = state;
+                const { from, to } = selection;
+                let linkContent = textBetween(state, 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 || './',
+                })
+                    .command(({ tr }) => {
+                    const endPos = tr.selection.to;
+                    tr.setSelection(TextSelection.create(tr.doc, endPos, endPos));
+                    return true;
+                })
+                    .run());
+            },
+            deleteCustomLink: predicate => ({ state, chain }) => {
+                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 chain()
+                    .deleteRange({
+                    from: linkMark.from,
+                    to: linkMark.to,
+                })
+                    .run();
+            },
+            unsetCustomLink: () => ({ editor, state, chain }) => {
+                const linkRange = getLinkRange({ state, pos: state.selection.from });
+                if (!linkRange)
+                    return false;
+                const command = chain()
+                    .setTextSelection({
+                    from: linkRange.from,
+                    to: linkRange.to,
+                })
+                    .unsetLink()
+                    .unsetUnderline();
+                if (isLinkColor(editor.getAttributes('textStyle').color)) {
+                    command.unsetColor();
+                }
+                return command.run();
+            },
+            updateCustomLinkAttrsGlobally: (predicate, updateFn) => ({ state, tr, dispatch }) => {
+                const { doc, schema } = state;
+                if (!dispatch)
+                    return true;
+                const linkType = schema.marks[CustomLink.name];
+                let somethingChanged = false;
+                const linkMarkRanges = getLinkMarkRanges({
+                    state,
+                    from: 0,
+                    to: doc.content.size,
+                });
+                linkMarkRanges.forEach(markRange => {
+                    const currentLinkAttrs = markRange.mark.attrs;
+                    const from = () => tr.mapping.map(markRange.from);
+                    const to = () => tr.mapping.map(markRange.to);
+                    const isMatched = predicate(currentLinkAttrs);
+                    if (!isMatched)
+                        return;
+                    const updated = updateFn(currentLinkAttrs);
+                    if (!updated || isEmpty(updated))
+                        return;
+                    if (!isEmpty(updated)) {
+                        somethingChanged = true;
+                        // Create a new mark with updated attributes and add it
+                        const newMark = linkType.create({
+                            ...markRange.mark.attrs,
+                            ...updated,
+                        });
+                        tr.addMark(from(), to(), newMark);
+                    }
+                });
+                return somethingChanged;
+            },
+            updateCustomLinkText: ({ predicate, updated, mergeAdjacentEqualFn = isEqual }) => ({ state, tr, dispatch }) => {
+                if (!dispatch)
+                    return true;
+                const linkMarkRanges = getLinkMarkRanges({
+                    state,
+                    from: 0,
+                    to: state.doc.content.size,
+                }).filter(range => predicate(range.mark.attrs));
+                mergeAdjacentRanges(linkMarkRanges, (existingRanges, candidateRange) => existingRanges.some(range => mergeAdjacentEqualFn(range.mark.attrs, candidateRange.mark.attrs))).forEach(range => {
+                    const currentText = textBetween(state, range.from, range.to);
+                    const updatedText = updated(currentText);
+                    if (currentText === updatedText)
+                        return;
+                    const previousLinkMark = range.data.at(0)?.mark;
+                    if (!previousLinkMark)
+                        return;
+                    const from = () => tr.mapping.map(range.from);
+                    const to = () => tr.mapping.map(range.to);
+                    tr.insertText(updatedText, from(), to());
+                    tr.addMark(from(), from() + updatedText.length, previousLinkMark);
+                });
+                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/ListItem.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Custom ListItem extension that extends the default TipTap ListItem
+ * with custom Backspace behavior to prevent merging paragraphs into lists
+ *
+ * This extension only overrides keyboard shortcuts while maintaining
+ * all other default ListItem functionality (HTML parsing, rendering, etc.)
+ *
+ * @see https://www.tiptap.dev/api/nodes/list-item
+ */
+export declare const CustomListItem: import("@tiptap/core").Node<import("@tiptap/extension-list").ListItemOptions, any>;

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

@@ -0,0 +1,93 @@
+import { ListItem } from '@tiptap/extension-list-item';
+/**
+ * Custom ListItem extension that extends the default TipTap ListItem
+ * with custom Backspace behavior to prevent merging paragraphs into lists
+ *
+ * This extension only overrides keyboard shortcuts while maintaining
+ * all other default ListItem functionality (HTML parsing, rendering, etc.)
+ *
+ * @see https://www.tiptap.dev/api/nodes/list-item
+ */
+export const CustomListItem = ListItem.extend({
+    addOptions() {
+        return {
+            HTMLAttributes: {
+                style: 'line-height:normal;',
+            },
+            bulletListTypeName: 'customUnorderedList',
+            orderedListTypeName: 'customOrderedList',
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            // Keep default keyboard shortcuts from parent ListItem
+            Enter: () => this.editor.commands.splitListItem(this.name),
+            Tab: () => this.editor.commands.sinkListItem(this.name),
+            'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
+            /**
+             * Custom Backspace handler to prevent merging empty paragraphs into lists
+             *
+             * Behavior:
+             * 1. Check if cursor is at the start of a paragraph
+             * 2. Check if the node before is a list (ordered or unordered)
+             * 3. If both conditions are true and paragraph is empty, delete the paragraph
+             * 4. Otherwise, use default backspace behavior
+             */
+            Backspace: () => {
+                const { state } = this.editor;
+                const { selection } = state;
+                const { $from, empty } = selection;
+                // Only handle if selection is empty (cursor position, not text selection)
+                if (!empty) {
+                    return false;
+                }
+                // Check if cursor is at the start of current node
+                const isAtStart = $from.parentOffset === 0;
+                if (!isAtStart) {
+                    return false;
+                }
+                // Get current node (should be a paragraph)
+                const currentNode = $from.parent;
+                // Only handle paragraphs
+                if (currentNode.type.name !== 'paragraph') {
+                    return false;
+                }
+                // Get the index of current paragraph in its parent (usually doc)
+                const paragraphDepth = $from.depth;
+                const indexInParent = $from.index(paragraphDepth - 1);
+                // Check if there's a node before (index > 0)
+                if (indexInParent === 0) {
+                    return false;
+                }
+                // Get parent node (usually doc) and the node before current paragraph
+                const parent = $from.node(paragraphDepth - 1);
+                const nodeBefore = parent.child(indexInParent - 1);
+                if (!nodeBefore) {
+                    return false;
+                }
+                // Check if the node before is a list (ordered or unordered)
+                const isListBefore = nodeBefore.type.name === this.options.orderedListTypeName ||
+                    nodeBefore.type.name === this.options.bulletListTypeName;
+                if (!isListBefore) {
+                    return false;
+                }
+                // Check if current paragraph is empty
+                const isParagraphEmpty = currentNode.content.size === 0;
+                if (!isParagraphEmpty) {
+                    // If paragraph has content, allow default backspace to handle
+                    return false;
+                }
+                // Calculate the exact positions of the paragraph node
+                // We need to delete from the position before the paragraph open tag
+                // to the position after the paragraph close tag
+                const paragraphPos = $from.before();
+                const paragraphEndPos = $from.after();
+                // Delete the entire paragraph node using deleteRange
+                return this.editor.commands.deleteRange({
+                    from: paragraphPos,
+                    to: paragraphEndPos,
+                });
+            },
+        };
+    },
+});

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

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

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

@@ -0,0 +1,56 @@
+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 {};