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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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