@antscorp/antsomi-ui 2.0.92-text-editor-beta.6 → 2.0.93

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

@@ -1,366 +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';
-import { CellSelection } from '@tiptap/pm/tables';
-function combineDOMRects(rect1, rect2) {
-    const top = Math.min(rect1.top, rect2.top);
-    const bottom = Math.max(rect1.bottom, rect2.bottom);
-    const left = Math.min(rect1.left, rect2.left);
-    const right = Math.max(rect1.right, rect2.right);
-    const width = right - left;
-    const height = bottom - top;
-    const x = left;
-    const y = top;
-    return new DOMRect(x, y, width, height);
-}
-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, }) {
-        this.preventHide = false;
-        this.isVisible = false;
-        this.floatingUIOptions = {
-            strategy: 'absolute',
-            placement: 'top',
-            offset: 8,
-            flip: {},
-            shift: {},
-            arrow: false,
-            size: false,
-            autoPlacement: false,
-            hide: false,
-            inline: false,
-            onShow: undefined,
-            onHide: undefined,
-            onUpdate: undefined,
-            onDestroy: undefined,
-        };
-        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();
-        };
-        /**
-         * Handles the window resize event and element resize event to update the position of the bubble menu.
-         * It uses a debounce mechanism to prevent excessive updates.
-         * The delay is defined by the `resizeDelay` property.
-         */
-        this.resizeHandler = (delay = this.resizeDelay) => {
-            if (this.resizeDebounceTimer) {
-                clearTimeout(this.resizeDebounceTimer);
-            }
-            this.resizeDebounceTimer = window.setTimeout(() => {
-                this.updatePosition();
-            }, delay);
-        };
-        /**
-         * Window resize handler that uses the default resize delay.
-         * This is a separate function to maintain the same reference for addEventListener/removeEventListener.
-         */
-        this.windowResizeHandler = () => {
-            this.resizeHandler();
-        };
-        /**
-         * Sets up ResizeObserver to watch for bubble menu element size changes.
-         * This ensures the bubble menu position is updated when the element resizes
-         * due to React component rendering different children, not just when the window resizes.
-         */
-        this.setupResizeObserver = () => {
-            if (typeof ResizeObserver === 'undefined') {
-                // ResizeObserver is not supported in this environment
-                return;
-            }
-            // Timer for debouncing the visibility restoration after resize
-            let resizeTimer = null;
-            // Time to wait before showing the element again after resize stops
-            const DEBOUNCE_TIME = 100;
-            this.resizeObserver = new ResizeObserver(entries => {
-                for (const entry of entries) {
-                    // Only handle resize events for the bubble menu element itself
-                    if (entry.target === this.element) {
-                        // Temporarily hide the element to prevent visual glitches during resize
-                        // This prevents the bubble menu from "jumping" or flickering while repositioning
-                        this.element.style.visibility = 'hidden';
-                        this.element.style.opacity = '0';
-                        // Clear any existing timer to reset the debounce period
-                        if (resizeTimer) {
-                            clearTimeout(resizeTimer);
-                        }
-                        // Immediately update the position with no delay for responsive positioning
-                        this.resizeHandler(0);
-                        // Set up a debounced timer to restore visibility after resize activity stops
-                        resizeTimer = setTimeout(() => {
-                            // Use requestAnimationFrame to ensure the position update is complete
-                            // before making the element visible again
-                            requestAnimationFrame(() => {
-                                this.element.style.visibility = 'visible';
-                                this.element.style.opacity = '1';
-                                resizeTimer = null;
-                            });
-                        }, DEBOUNCE_TIME);
-                    }
-                }
-            });
-            // Observe the bubble menu element itself - this is where React components are rendered
-            // When React renders different children, the element size may change
-            this.resizeObserver.observe(this.element);
-            // Also observe the editor view DOM element for editor size changes
-            this.resizeObserver.observe(this.view.dom);
-        };
-        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.floatingUIOptions = {
-            ...this.floatingUIOptions,
-            ...options,
-        };
-        this.element.tabIndex = 0;
-        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', this.windowResizeHandler);
-        this.setupResizeObserver();
-        this.update(view, view.state);
-        if (this.getShouldShow()) {
-            this.show();
-        }
-    }
-    updatePosition() {
-        const { selection } = this.editor.state;
-        const domRect = posToDOMRect(this.view, selection.from, selection.to);
-        let virtualElement = {
-            getBoundingClientRect: () => domRect,
-            getClientRects: () => [domRect],
-        };
-        // this is a special case for cell selections
-        if (selection instanceof CellSelection) {
-            const { $anchorCell, $headCell } = selection;
-            const from = $anchorCell ? $anchorCell.pos : $headCell.pos;
-            const to = $headCell ? $headCell.pos : $anchorCell.pos;
-            const fromDOM = this.view.nodeDOM(from);
-            const toDOM = this.view.nodeDOM(to);
-            if (!fromDOM || !toDOM) {
-                return;
-            }
-            const clientRect = fromDOM === toDOM
-                ? fromDOM.getBoundingClientRect()
-                : combineDOMRects(fromDOM.getBoundingClientRect(), toDOM.getBoundingClientRect());
-            virtualElement = {
-                getBoundingClientRect: () => clientRect,
-                getClientRects: () => [clientRect],
-            };
-        }
-        computePosition(virtualElement, this.element, {
-            placement: this.floatingUIOptions.placement,
-            strategy: this.floatingUIOptions.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`;
-            if (this.isVisible && this.floatingUIOptions.onUpdate) {
-                this.floatingUIOptions.onUpdate();
-            }
-        });
-    }
-    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() {
-        if (this.isVisible) {
-            return;
-        }
-        this.element.style.visibility = 'visible';
-        this.element.style.opacity = '1';
-        const container = this.getContainer();
-        if (container) {
-            container.appendChild(this.element);
-        }
-        if (this.floatingUIOptions.onShow) {
-            this.floatingUIOptions.onShow();
-        }
-        this.isVisible = true;
-    }
-    hide() {
-        if (!this.isVisible) {
-            return;
-        }
-        this.element.style.visibility = 'hidden';
-        this.element.style.opacity = '0';
-        // remove from the parent element
-        this.element.remove();
-        if (this.floatingUIOptions.onHide) {
-            this.floatingUIOptions.onHide();
-        }
-        this.isVisible = false;
-    }
-    destroy() {
-        this.hide();
-        this.element.removeEventListener('mousedown', this.mousedownHandler, { capture: true });
-        this.view.dom.removeEventListener('dragstart', this.dragstartHandler);
-        window.removeEventListener('resize', this.windowResizeHandler);
-        this.editor.off('focus', this.focusHandler);
-        this.editor.off('blur', this.blurHandler);
-        // Cleanup ResizeObserver
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = undefined;
-        }
-        if (this.floatingUIOptions.onDestroy) {
-            this.floatingUIOptions.onDestroy();
-        }
-    }
-}
-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/ClearFormatting.d.ts

@@ -1,16 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { TextStyle } from '../types';
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        clearFormatting: {
-            /**
-             * Clear all formatting
-             */
-            clearFormatting: () => ReturnType;
-        };
-    }
-}
-export type ClearFormattingOptions = {
-    defaultTextStyle?: TextStyle;
-};
-export declare const ClearFormatting: Extension<any, any>;

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

@@ -1,26 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { DEFAULT_TEXT_STYLE } from '../constants';
-export const ClearFormatting = Extension.create({
-    name: 'clearFormatting',
-    addOptions() {
-        return {
-            defaultTextStyle: DEFAULT_TEXT_STYLE,
-        };
-    },
-    addCommands() {
-        return {
-            clearFormatting: () => ({ chain }) => chain()
-                .unsetAllMarks()
-                .clearNodes()
-                .unsetTextAlign()
-                .unsetTextTransform()
-                .updateAttributes('textStyle', this.options.defaultTextStyle)
-                .run(),
-        };
-    },
-    addKeyboardShortcuts() {
-        return {
-            'Mod-\\': () => this.editor.commands.clearFormatting(),
-        };
-    },
-});

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

@@ -1,6 +0,0 @@
-import { ColorOptions as TiptapColorOptions } from '@tiptap/extension-text-style';
-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,34 +0,0 @@
-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

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