@antscorp/antsomi-ui 2.0.85 → 2.0.86-text-editor-beta.1

package/es/components/organism/TextEditor/extensions/BubbleMenu/bubble-menu-plugin.js

@@ -0,0 +1,247 @@
+import { arrow, autoPlacement, computePosition, flip, hide, inline, offset, shift, size, } from '@floating-ui/dom';
+import { isTextSelection, posToDOMRect } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+export class BubbleMenuView {
+    get middlewares() {
+        const middlewares = [];
+        if (this.floatingUIOptions.flip) {
+            middlewares.push(flip(typeof this.floatingUIOptions.flip !== 'boolean'
+                ? this.floatingUIOptions.flip
+                : undefined));
+        }
+        if (this.floatingUIOptions.shift) {
+            middlewares.push(shift(typeof this.floatingUIOptions.shift !== 'boolean'
+                ? this.floatingUIOptions.shift
+                : undefined));
+        }
+        if (this.floatingUIOptions.offset) {
+            middlewares.push(offset(typeof this.floatingUIOptions.offset !== 'boolean'
+                ? this.floatingUIOptions.offset
+                : undefined));
+        }
+        if (this.floatingUIOptions.arrow) {
+            middlewares.push(arrow(this.floatingUIOptions.arrow));
+        }
+        if (this.floatingUIOptions.size) {
+            middlewares.push(size(typeof this.floatingUIOptions.size !== 'boolean'
+                ? this.floatingUIOptions.size
+                : undefined));
+        }
+        if (this.floatingUIOptions.autoPlacement) {
+            middlewares.push(autoPlacement(typeof this.floatingUIOptions.autoPlacement !== 'boolean'
+                ? this.floatingUIOptions.autoPlacement
+                : undefined));
+        }
+        if (this.floatingUIOptions.hide) {
+            middlewares.push(hide(typeof this.floatingUIOptions.hide !== 'boolean'
+                ? this.floatingUIOptions.hide
+                : undefined));
+        }
+        if (this.floatingUIOptions.inline) {
+            middlewares.push(inline(typeof this.floatingUIOptions.inline !== 'boolean'
+                ? this.floatingUIOptions.inline
+                : undefined));
+        }
+        return middlewares;
+    }
+    constructor({ editor, element, view, updateDelay = 250, resizeDelay = 60, container, shouldShow, options, onShow, onHide, }) {
+        this.preventHide = false;
+        this.floatingUIOptions = {
+            strategy: 'absolute',
+            placement: 'top',
+            offset: 8,
+            flip: {},
+            shift: {},
+            arrow: false,
+            size: false,
+            autoPlacement: false,
+            hide: false,
+            inline: false,
+        };
+        this.shouldShow = ({ view, state, from, to, }) => {
+            const { doc, selection } = state;
+            const { empty } = selection;
+            // Sometime check for `empty` is not enough.
+            // Doubleclick an empty paragraph returns a node size of 2.
+            // So we check also for an empty text size.
+            const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
+            // When clicking on a element inside the bubble menu the editor "blur" event
+            // is called and the bubble menu item is focussed. In this case we should
+            // consider the menu as part of the editor and keep showing the menu
+            const isChildOfMenu = this.element.contains(document.activeElement);
+            const hasEditorFocus = view.hasFocus() || isChildOfMenu;
+            if (!hasEditorFocus || empty || isEmptyTextBlock || !this.editor.isEditable) {
+                return false;
+            }
+            return true;
+        };
+        this.mousedownHandler = () => {
+            this.preventHide = true;
+        };
+        this.dragstartHandler = () => {
+            this.hide();
+        };
+        this.focusHandler = () => {
+            // we use `setTimeout` to make sure `selection` is already updated
+            setTimeout(() => this.update(this.editor.view));
+        };
+        this.blurHandler = ({ event }) => {
+            if (this.preventHide) {
+                this.preventHide = false;
+                return;
+            }
+            if (event?.relatedTarget && this.element.parentNode?.contains(event.relatedTarget)) {
+                return;
+            }
+            if (event?.relatedTarget === this.editor.view.dom) {
+                return;
+            }
+            this.hide();
+        };
+        this.handleDebouncedUpdate = (view, oldState) => {
+            const selectionChanged = !oldState?.selection.eq(view.state.selection);
+            const docChanged = !oldState?.doc.eq(view.state.doc);
+            if (!selectionChanged && !docChanged) {
+                return;
+            }
+            if (this.updateDebounceTimer) {
+                clearTimeout(this.updateDebounceTimer);
+            }
+            this.updateDebounceTimer = window.setTimeout(() => {
+                this.updateHandler(view, selectionChanged, docChanged, oldState);
+            }, this.updateDelay);
+        };
+        this.updateHandler = (view, selectionChanged, docChanged, oldState) => {
+            const { composing } = view;
+            const isSame = !selectionChanged && !docChanged;
+            if (composing || isSame) {
+                return;
+            }
+            const shouldShow = this.getShouldShow(oldState);
+            if (!shouldShow) {
+                this.hide();
+                return;
+            }
+            this.show();
+            this.updatePosition();
+        };
+        this.editor = editor;
+        this.element = element;
+        this.view = view;
+        this.updateDelay = updateDelay;
+        this.resizeDelay = resizeDelay;
+        this.container = container;
+        this.onShow = onShow;
+        this.onHide = onHide;
+        this.floatingUIOptions = {
+            ...this.floatingUIOptions,
+            ...options,
+        };
+        if (shouldShow) {
+            this.shouldShow = shouldShow;
+        }
+        const containerElement = this.getContainer();
+        if (containerElement === document.body) {
+            this.element.style.zIndex = '9999';
+        }
+        this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true });
+        this.view.dom.addEventListener('dragstart', this.dragstartHandler);
+        this.editor.on('focus', this.focusHandler);
+        this.editor.on('blur', this.blurHandler);
+        window.addEventListener('resize', () => {
+            if (this.resizeDebounceTimer) {
+                clearTimeout(this.resizeDebounceTimer);
+            }
+            this.resizeDebounceTimer = window.setTimeout(() => {
+                this.updatePosition();
+            }, this.resizeDelay);
+        });
+        this.update(view, view.state);
+        if (this.getShouldShow()) {
+            this.show();
+        }
+    }
+    updatePosition() {
+        const { selection } = this.editor.state;
+        const virtualElement = {
+            getBoundingClientRect: () => posToDOMRect(this.view, selection.from, selection.to),
+        };
+        const strategy = this.container === document.body ? 'fixed' : this.floatingUIOptions.strategy;
+        computePosition(virtualElement, this.element, {
+            placement: this.floatingUIOptions.placement,
+            strategy,
+            middleware: this.middlewares,
+        }).then(({ x, y, strategy }) => {
+            this.element.style.width = 'max-content';
+            this.element.style.position = strategy;
+            this.element.style.left = `${x}px`;
+            this.element.style.top = `${y}px`;
+        });
+    }
+    update(view, oldState) {
+        const { state } = view;
+        const hasValidSelection = state.selection.from !== state.selection.to;
+        if (this.updateDelay > 0 && hasValidSelection) {
+            this.handleDebouncedUpdate(view, oldState);
+            return;
+        }
+        const selectionChanged = !oldState?.selection.eq(view.state.selection);
+        const docChanged = !oldState?.doc.eq(view.state.doc);
+        this.updateHandler(view, selectionChanged, docChanged, oldState);
+    }
+    getShouldShow(oldState) {
+        const { state } = this.view;
+        const { selection } = state;
+        // support for CellSelections
+        const { ranges } = selection;
+        const from = Math.min(...ranges.map(range => range.$from.pos));
+        const to = Math.max(...ranges.map(range => range.$to.pos));
+        const shouldShow = this.shouldShow?.({
+            editor: this.editor,
+            element: this.element,
+            view: this.view,
+            state,
+            oldState,
+            from,
+            to,
+        });
+        return shouldShow;
+    }
+    getContainer() {
+        if (!this.container) {
+            return this.view.dom.parentElement;
+        }
+        if (typeof this.container === 'function') {
+            return this.container();
+        }
+        return this.container;
+    }
+    show() {
+        this.element.style.visibility = 'visible';
+        this.element.style.opacity = '1';
+        // attach to editor's parent element
+        const container = this.getContainer();
+        if (container) {
+            container.appendChild(this.element);
+            this.onShow?.();
+        }
+    }
+    hide() {
+        this.element.style.visibility = 'hidden';
+        this.element.style.opacity = '0';
+        // remove from the parent element
+        this.element.remove();
+        this.onHide?.();
+    }
+    destroy() {
+        this.hide();
+        this.element.removeEventListener('mousedown', this.mousedownHandler, { capture: true });
+        this.view.dom.removeEventListener('dragstart', this.dragstartHandler);
+        this.editor.off('focus', this.focusHandler);
+        this.editor.off('blur', this.blurHandler);
+    }
+}
+export const BubbleMenuPlugin = (options) => new Plugin({
+    key: typeof options.pluginKey === 'string' ? new PluginKey(options.pluginKey) : options.pluginKey,
+    view: view => new BubbleMenuView({ view, ...options }),
+});

package/es/components/organism/TextEditor/extensions/BubbleMenu/bubble-menu.d.ts

@@ -0,0 +1,15 @@
+import { Extension } from '@tiptap/core';
+import type { BubbleMenuPluginProps } from './bubble-menu-plugin';
+export type BubbleMenuOptions = Omit<BubbleMenuPluginProps, 'editor' | 'element'> & {
+    /**
+     * The DOM element that contains your menu.
+     * @type {HTMLElement}
+     * @default null
+     */
+    element: HTMLElement | null;
+};
+/**
+ * This extension allows you to create a bubble menu.
+ * @see https://tiptap.dev/api/extensions/bubble-menu
+ */
+export declare const BubbleMenu: Extension<BubbleMenuOptions, any>;

package/es/components/organism/TextEditor/extensions/BubbleMenu/bubble-menu.js

@@ -0,0 +1,31 @@
+import { Extension } from '@tiptap/core';
+import { BubbleMenuPlugin } from './bubble-menu-plugin';
+/**
+ * This extension allows you to create a bubble menu.
+ * @see https://tiptap.dev/api/extensions/bubble-menu
+ */
+export const BubbleMenu = Extension.create({
+    name: 'bubbleMenu',
+    addOptions() {
+        return {
+            element: null,
+            pluginKey: 'bubbleMenu',
+            updateDelay: undefined,
+            shouldShow: null,
+        };
+    },
+    addProseMirrorPlugins() {
+        if (!this.options.element) {
+            return [];
+        }
+        return [
+            BubbleMenuPlugin({
+                pluginKey: this.options.pluginKey,
+                editor: this.editor,
+                element: this.options.element,
+                updateDelay: this.options.updateDelay,
+                shouldShow: this.options.shouldShow,
+            }),
+        ];
+    },
+});

package/es/components/organism/TextEditor/extensions/BubbleMenu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './bubble-menu-plugin';
+export * from './bubble-menu';

package/es/components/organism/TextEditor/extensions/BubbleMenu/index.js

@@ -0,0 +1,2 @@
+export * from './bubble-menu-plugin';
+export * from './bubble-menu';

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

@@ -0,0 +1,6 @@
+import { ColorOptions as TiptapColorOptions } from '@tiptap/extension-color';
+interface ColorOptions extends TiptapColorOptions {
+    defaultColor: string;
+}
+export declare const Color: import("@tiptap/core").Extension<ColorOptions, any>;
+export {};

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

@@ -0,0 +1,41 @@
+import { Color as TiptapColorExtension, } from '@tiptap/extension-color';
+import { DEFAULT_TEXT_STYLE } from '../constants';
+import tinycolor from 'tinycolor2';
+export const Color = TiptapColorExtension.extend({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            defaultColor: DEFAULT_TEXT_STYLE.color,
+        };
+    },
+    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-font-family';
+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,43 @@
+import { FontFamily as TiptapFontFamilyExtension, } from '@tiptap/extension-font-family';
+import { DEFAULT_TEXT_STYLE } from '../constants';
+export const FontFamily = TiptapFontFamilyExtension.extend({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            defaultFontFamily: DEFAULT_TEXT_STYLE.fontFamily,
+        };
+    },
+    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,32 @@
+import '@tiptap/extension-text-style';
+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>;