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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { Extension } from '@tiptap/core';
+export interface IndentOptions {
+    types: string[];
+    minIndent: number;
+    maxIndent: number;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        indent: {
+            /**
+             * Set the indent attribute
+             */
+            indent: () => ReturnType;
+            /**
+             * Set the outdent attribute
+             */
+            outdent: () => ReturnType;
+        };
+    }
+}
+export declare const Indent: Extension<IndentOptions, any>;

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

@@ -0,0 +1,63 @@
+import { Extension } from '@tiptap/core';
+import { createIndentCommand } from '../utils/indent';
+export const Indent = Extension.create({
+    name: 'indent',
+    addOptions() {
+        return {
+            types: ['paragraph', 'heading', 'blockquote'],
+            minIndent: 0 /* IndentProps.min */,
+            maxIndent: 7 /* IndentProps.max */,
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    indent: {
+                        default: 0,
+                        parseHTML: element => {
+                            const identAttr = element.getAttribute('data-indent');
+                            return (identAttr ? parseInt(identAttr, 10) : 0) || 0;
+                        },
+                        renderHTML: attributes => {
+                            if (!attributes.indent) {
+                                return {};
+                            }
+                            return {
+                                'data-indent': attributes.indent,
+                                style: `padding-left: ${attributes.indent * 1}em`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            indent: () => createIndentCommand({
+                delta: 1 /* IndentProps.more */,
+                types: this.options.types,
+            }),
+            outdent: () => createIndentCommand({
+                delta: -1 /* IndentProps.less */,
+                types: this.options.types,
+            }),
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            Tab: () => {
+                if (!(this.editor.isActive('bulletList') || this.editor.isActive('orderedList')))
+                    return this.editor.commands.indent();
+                return this.editor.commands.sinkListItem('listItem');
+            },
+            'Shift-Tab': () => {
+                if (!(this.editor.isActive('bulletList') || this.editor.isActive('orderedList')))
+                    return this.editor.commands.outdent();
+                return this.editor.commands.sinkListItem('listItem');
+            },
+        };
+    },
+});

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

@@ -0,0 +1,32 @@
+import '@tiptap/extension-text-style';
+import { Extension } from '@tiptap/core';
+export type LetterSpacingOptions = {
+    /**
+     * A list of node names where the letter spacing can be applied.
+     * @default ['textStyle']
+     * @example ['heading', 'paragraph']
+     */
+    types: string[];
+    defaultLetterSpacing?: string;
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        letterSpacing: {
+            /**
+             * Set the letter spacing
+             * @param letterSpacing The letter spacing
+             * @example editor.commands.setLetterSpacing('1px')
+             */
+            setLetterSpacing: (letterSpacing: string) => ReturnType;
+            /**
+             * Unset the letter spacing
+             * @example editor.commands.unsetLetterSpacing()
+             */
+            unsetLetterSpacing: () => ReturnType;
+        };
+    }
+}
+/**
+ * This extension allows you to set a letter spacing for text.
+ */
+export declare const LetterSpacing: Extension<LetterSpacingOptions, any>;

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

@@ -0,0 +1,48 @@
+import '@tiptap/extension-text-style';
+import { Extension } from '@tiptap/core';
+import { DEFAULT_TEXT_STYLE } from '../constants';
+/**
+ * This extension allows you to set a letter spacing for text.
+ */
+export const LetterSpacing = Extension.create({
+    name: 'letterSpacing',
+    addOptions() {
+        return {
+            defaultWeight: DEFAULT_TEXT_STYLE.letterSpacing,
+            types: ['textStyle'],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    letterSpacing: {
+                        default: this.options.defaultLetterSpacing,
+                        parseHTML: el => el.style.letterSpacing || this.options.defaultLetterSpacing,
+                        renderHTML: attrs => {
+                            const { letterSpacing } = attrs;
+                            if (!letterSpacing || letterSpacing === this.options.defaultLetterSpacing) {
+                                return {};
+                            }
+                            return {
+                                style: `letter-spacing: ${attrs.letterSpacing}`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setLetterSpacing: letterSpacing => ({ chain }) => chain().setMark('textStyle', { letterSpacing }).run(),
+            unsetLetterSpacing: () => ({ chain }) => chain()
+                .setMark('textStyle', {
+                letterSpacing: null,
+            })
+                .removeEmptyTextStyle()
+                .run(),
+        };
+    },
+});

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

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

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

@@ -0,0 +1,16 @@
+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: string | null;
+    elementName: string | null;
+}>;
+export type LinkOptions = TiptapLinkOptions & {};
+export declare const Link: import("@tiptap/core").Mark<TiptapLinkOptions, any>;

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

@@ -0,0 +1,48 @@
+import TiptapLinkExtension from '@tiptap/extension-link';
+import { LINK_TEXT_COLOR } from '../constants';
+export const Link = TiptapLinkExtension.extend({
+    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),
+            },
+            elementName: {
+                default: null,
+                parseHTML: el => el.getAttribute('data-el-name'),
+                renderHTML: attrs => (attrs.elementName ? { 'data-el-name': attrs.elementName } : 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

@@ -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 {};