@antscorp/antsomi-ui 2.0.110 → 2.0.112

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

@@ -0,0 +1,34 @@
+import { Color as TiptapColorExtension, } from '@tiptap/extension-text-style';
+import tinycolor from 'tinycolor2';
+export const Color = TiptapColorExtension.extend({
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    color: {
+                        default: null,
+                        parseHTML: element => element.style.color?.replace(/['"]+/g, ''),
+                        renderHTML: attrs => {
+                            if (!attrs.color || tinycolor.equals(attrs.color, this.options.defaultColor)) {
+                                return {};
+                            }
+                            return {
+                                style: `color: ${attrs.color}`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            ...this.parent?.(),
+            unsetColor: () => ({ chain }) => chain()
+                .setMark('textStyle', { color: this.options.defaultColor || null })
+                .removeEmptyTextStyle()
+                .run(),
+        };
+    },
+});

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

@@ -0,0 +1,57 @@
+import { Node } from '@tiptap/core';
+import { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model';
+import { SuggestionOptions } from '@tiptap/suggestion';
+export declare const LIST_EMOJI: ({
+    emoji: string;
+    skin_tone_support: boolean;
+    name: string;
+    slug: string;
+    unicode_version: string;
+    emoji_version: string;
+    skin_tone_support_unicode_version?: undefined;
+} | {
+    emoji: string;
+    skin_tone_support: boolean;
+    skin_tone_support_unicode_version: string;
+    name: string;
+    slug: string;
+    unicode_version: string;
+    emoji_version: string;
+})[];
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        emoji: {
+            insertEmoji: (emojiName: string) => ReturnType;
+        };
+    }
+}
+export interface SuggestionItem {
+    emoji: string;
+    skin_tone_support: boolean;
+    name: string;
+    slug: string;
+    unicode_version: string;
+    emoji_version: string;
+}
+export interface EmojiNodeAttrs {
+    name?: string | null;
+}
+export type EmojiOptions<Attrs extends Record<string, any> = EmojiNodeAttrs> = {
+    HTMLAttributes: Record<string, any>;
+    renderLabel?: (props: {
+        options: EmojiOptions<Attrs>;
+        node: ProseMirrorNode;
+    }) => string;
+    renderText: (props: {
+        options: EmojiOptions<Attrs>;
+        node: ProseMirrorNode;
+    }) => string;
+    renderHTML: (props: {
+        options: EmojiOptions<Attrs>;
+        node: ProseMirrorNode;
+    }) => DOMOutputSpec;
+    deleteTriggerWithBackspace: boolean;
+    suggestion: Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>;
+};
+export declare const EXTENSION_NAME = "emoji";
+export declare const Emoji: Node<EmojiOptions<EmojiNodeAttrs>, any>;

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

@@ -0,0 +1,184 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { PluginKey } from '@tiptap/pm/state';
+import Suggestion from '@tiptap/suggestion';
+import { ICON_EMOJI_COMMON } from '@antscorp/antsomi-ui/es/components/molecules';
+import { memoize } from 'lodash';
+export const LIST_EMOJI = ICON_EMOJI_COMMON.flatMap(group => group.emojis);
+const findEmojiByName = memoize((name) => LIST_EMOJI.find(i => i.name === name)?.emoji);
+export const EXTENSION_NAME = 'emoji';
+export const Emoji = Node.create({
+    name: EXTENSION_NAME,
+    priority: 102,
+    group: 'inline',
+    inline: true,
+    atom: true,
+    selectable: true,
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+            deleteTriggerWithBackspace: false,
+            renderText({ node }) {
+                return findEmojiByName(node.attrs.name) || node.attrs.name;
+            },
+            renderHTML({ options, node }) {
+                const emoji = findEmojiByName(node.attrs.name);
+                return [
+                    'span',
+                    mergeAttributes(this.HTMLAttributes, options.HTMLAttributes),
+                    emoji || node.attrs.name,
+                ];
+            },
+            suggestion: {
+                char: ':',
+                pluginKey: new PluginKey('emoji'),
+                command: ({ editor, range, props }) => {
+                    const { name } = props;
+                    // increase range.to by one when the next node is of type "text"
+                    // and starts with a space character
+                    const { nodeAfter } = editor.view.state.selection.$to;
+                    const overrideSpace = nodeAfter?.text?.startsWith(' ');
+                    if (overrideSpace) {
+                        range.to++;
+                    }
+                    const nodeBeforeMarks = editor.state.doc
+                        .resolve(range.from)
+                        .marks()
+                        .map(i => ({
+                        type: i.type.name,
+                        attrs: i.attrs,
+                    }));
+                    editor
+                        .chain()
+                        .focus()
+                        .insertContentAt(range, [
+                        {
+                            type: this.name,
+                            attrs: { name },
+                            marks: nodeBeforeMarks,
+                        },
+                        {
+                            type: 'text',
+                            text: ' ',
+                            marks: nodeBeforeMarks,
+                        },
+                    ])
+                        .run();
+                    // get reference to `window` object from editor element, to support cross-frame JS usage
+                    editor.view.dom.ownerDocument.defaultView?.getSelection()?.collapseToEnd();
+                },
+                allow: ({ state, range }) => {
+                    const $from = state.doc.resolve(range.from);
+                    const type = state.schema.nodes[this.name];
+                    const allow = !!$from.parent.type.contentMatch.matchType(type);
+                    return allow;
+                },
+            },
+        };
+    },
+    addAttributes() {
+        return {
+            name: {
+                default: null,
+                parseHTML: element => element.getAttribute('data-name'),
+                renderHTML: attributes => {
+                    if (!attributes.name) {
+                        return {};
+                    }
+                    return { 'data-name': attributes.name };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: `span[data-type="${this.name}"]`,
+            },
+        ];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        const mergedOptions = { ...this.options };
+        mergedOptions.HTMLAttributes = mergeAttributes({
+            'data-type': this.name,
+        }, this.options.HTMLAttributes, HTMLAttributes);
+        const html = this.options.renderHTML({
+            options: mergedOptions,
+            node,
+        });
+        if (typeof html === 'string') {
+            return [
+                'span',
+                mergeAttributes({
+                    'data-type': this.name,
+                }, this.options.HTMLAttributes, HTMLAttributes),
+                html,
+            ];
+        }
+        return html;
+    },
+    renderText({ node }) {
+        return this.options.renderText({
+            options: this.options,
+            node,
+        });
+    },
+    addKeyboardShortcuts() {
+        return {
+            Backspace: () => this.editor.commands.command(({ tr, state }) => {
+                let isEmoji = false;
+                const { selection } = state;
+                const { empty, anchor } = selection;
+                if (!empty) {
+                    return false;
+                }
+                state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+                    if (node.type.name === this.name) {
+                        isEmoji = true;
+                        tr.insertText(this.options.deleteTriggerWithBackspace ? '' : this.options.suggestion.char || '', pos, pos + node.nodeSize);
+                        return false;
+                    }
+                });
+                return isEmoji;
+            }),
+        };
+    },
+    addCommands() {
+        return {
+            insertEmoji: emojiName => ({ editor, state }) => {
+                const { selection } = state;
+                const nodeBeforeMarks = selection.$from.marks().map(i => ({
+                    type: i.type.name,
+                    attrs: i.attrs,
+                }));
+                // Chèn emoji node
+                editor
+                    .chain()
+                    .focus()
+                    .insertContent([
+                    {
+                        type: this.name,
+                        attrs: { name: emojiName },
+                        marks: nodeBeforeMarks,
+                    },
+                    {
+                        type: 'text',
+                        text: ' ',
+                        marks: nodeBeforeMarks,
+                    },
+                ])
+                    .run();
+                // Đưa con trỏ về cuối emoji
+                editor.view.dom.ownerDocument.defaultView?.getSelection()?.collapseToEnd();
+                return true;
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                ...this.options.suggestion,
+            }),
+        ];
+    },
+});

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

@@ -0,0 +1,6 @@
+import { FontFamilyOptions as TiptapFontFamilyOptions } from '@tiptap/extension-text-style';
+interface FontFamilyOptions extends TiptapFontFamilyOptions {
+    defaultFontFamily: string;
+}
+export declare const FontFamily: import("@tiptap/core").Extension<FontFamilyOptions, any>;
+export {};

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

@@ -0,0 +1,36 @@
+import { FontFamily as TiptapFontFamilyExtension, } from '@tiptap/extension-text-style';
+export const FontFamily = TiptapFontFamilyExtension.extend({
+    addCommands() {
+        return {
+            ...this.parent?.(),
+            unsetFontFamily: () => ({ chain }) => chain()
+                .setMark('textStyle', {
+                fontFamily: this.options.defaultFontFamily || null,
+            })
+                .removeEmptyTextStyle()
+                .run(),
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            ...(this.parent?.() || []),
+            {
+                types: this.options.types,
+                attributes: {
+                    fontFamily: {
+                        default: this.options.defaultFontFamily,
+                        renderHTML: attrs => {
+                            if (!attrs.fontFamily || attrs.fontFamily === this.options.defaultFontFamily) {
+                                return {};
+                            }
+                            return {
+                                style: `font-family: ${attrs.fontFamily}`,
+                            };
+                        },
+                        parseHTML: element => element.style.fontFamily || this.options.defaultFontFamily,
+                    },
+                },
+            },
+        ];
+    },
+});

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

@@ -0,0 +1,31 @@
+import { Extension } from '@tiptap/core';
+export type FontSizeOptions = {
+    /**
+     * A list of node names where the font size can be applied.
+     * @default ['textStyle']
+     * @example ['heading', 'paragraph']
+     */
+    types: string[];
+    defaultFontSize: string;
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Set the font size
+             * @param fontSize The font size
+             * @example editor.commands.setFontSize('16px')
+             */
+            setFontSize: (fontSize: string) => ReturnType;
+            /**
+             * Unset the font size
+             * @example editor.commands.unsetFontSize()
+             */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+/**
+ * This extension allows you to set a font size for text.
+ */
+export declare const FontSize: Extension<FontSizeOptions, any>;

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

@@ -0,0 +1,46 @@
+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/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>;