@antscorp/antsomi-ui 2.0.82 → 2.0.83-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: attributes => {
+                            if (!attributes.fontSize) {
+                                return {};
+                            }
+                            return {
+                                style: `font-size: ${attributes.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,28 @@
+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

@@ -0,0 +1,66 @@
+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: attributes => ({
+                            style: `margin-left: ${attributes.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

@@ -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 || this.options.defaultHeight,
+                        renderHTML: attributes => {
+                            if (!attributes.lineHeight) {
+                                return {};
+                            }
+                            return { style: `line-height: ${attributes.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,3 @@
+import { LinkOptions as TiptapLinkOptions } from '@tiptap/extension-link';
+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,47 @@
+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: '',
+                parseHTML: el => el.title,
+            },
+            dynamic: {
+                default: null,
+                parseHTML: el => el.getAttribute('data-dynamic'),
+                renderHTML: attrs => ({
+                    'data-dynamic': attrs.dynamic,
+                }),
+            },
+        };
+    },
+    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/Selection.d.ts

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

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

@@ -0,0 +1,33 @@
+import { Node } from '@tiptap/core';
+import { Attrs } from '@tiptap/pm/model';
+/**
+ * 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>;