@antscorp/antsomi-ui 2.0.89 → 2.0.91-text-editor-beta.1

package/es/components/organism/TextEditor/utils/link.d.ts

@@ -0,0 +1,100 @@
+import { EditorState } from '@tiptap/pm/state';
+import { MarkRange } from '@tiptap/core';
+import { EditorView } from '@tiptap/pm/view';
+import { LinkHandler } from '../types';
+/**
+ * Kiểm tra xem cursor có đang nằm trong một đoạn text có mark là link hay không
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true nếu cursor đang nằm trong link, false nếu không
+ */
+export declare const isCursorInLink: (state: EditorState) => boolean;
+/**
+ * Gets all link mark ranges within a specified range
+ * @param params Object containing state, from and to positions
+ * @returns Array of MarkRange objects for links
+ */
+export declare const getLinkMarkRanges: (params: {
+    state: EditorState;
+    from: number;
+    to: number;
+}) => MarkRange[];
+/**
+ * Gets the range of a link mark at a specific position
+ * @param params Object containing state and optional position
+ * @returns Link mark range or undefined
+ */
+export declare const getLinkRange: (params: {
+    state: EditorState;
+    pos?: number;
+}) => void | import("@tiptap/core").Range;
+/**
+ * Gets the first link mark in a range
+ * @param params Object containing state, optional from and to positions
+ * @returns Link mark or undefined
+ */
+export declare const getLinkMark: (params: {
+    state: EditorState;
+    from?: number;
+    to?: number;
+}) => import("prosemirror-model").Mark | undefined;
+/**
+ * Gets all link marks in a range
+ * @param params Object containing state, from and to positions
+ * @returns Array of link marks
+ */
+export declare const getLinkMarks: (params: {
+    state: EditorState;
+    from: number;
+    to: number;
+}) => import("prosemirror-model").Mark[];
+/**
+ * Gets all link IDs from a range
+ * @param params Object containing state, optional from and to positions
+ * @returns Array of link IDs
+ */
+export declare const getLinkIdsFromRange: (params: {
+    state: EditorState;
+    from?: number;
+    to?: number;
+}) => string[];
+/**
+ * Gets the active link ID and inactive links from a range
+ * @param params Object containing state, optional from and to positions
+ * @returns Object with activeId and inactiveLinks or undefined
+ */
+export declare const getActiveLinkIdFromRange: (params: {
+    state: EditorState;
+    from?: number;
+    to?: number;
+}) => {
+    activeId: string;
+    inactiveLinks: string[];
+} | undefined;
+/**
+ * Extends selection to include full link marks
+ * @param state EditorState
+ * @param from Start position
+ * @param to End position
+ * @returns Object with extended from, to positions and linkId
+ */
+export declare const extendSelectionToFullLinks: (state: EditorState, from: number, to: number) => {
+    from: number;
+    to: number;
+    linkId?: undefined;
+} | {
+    from: number;
+    to: number;
+    linkId: string;
+};
+/**
+ * Handles link actions (create or edit)
+ * @param view EditorView instance
+ * @param linkHandler Link handler callbacks
+ */
+export declare function handleLinkAction(view: EditorView, linkHandler: LinkHandler | undefined): void;
+/**
+ * Checks if the link menu should be shown
+ * @param state EditorState
+ * @returns true if link menu should be shown
+ */
+export declare const isShowLinkMenu: (state: EditorState) => boolean;

package/es/components/organism/TextEditor/utils/link.js

@@ -0,0 +1,149 @@
+import { TextSelection } from '@tiptap/pm/state';
+import { getMarkRange, getMarksBetween, isMarkActive } from '@tiptap/core';
+import { isNoSelection } from './selection';
+/**
+ * Kiểm tra xem cursor có đang nằm trong một đoạn text có mark là link hay không
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true nếu cursor đang nằm trong link, false nếu không
+ */
+export const isCursorInLink = (state) => isMarkActive(state, 'link');
+/**
+ * Gets all link mark ranges within a specified range
+ * @param params Object containing state, from and to positions
+ * @returns Array of MarkRange objects for links
+ */
+export const getLinkMarkRanges = (params) => {
+    const { state } = params;
+    const from = params.from ?? state.selection.from;
+    const to = params.to ?? state.selection.to;
+    return getMarksBetween(from, to, state.doc).filter(({ mark }) => mark.type.name === 'link');
+};
+/**
+ * Gets the range of a link mark at a specific position
+ * @param params Object containing state and optional position
+ * @returns Link mark range or undefined
+ */
+export const getLinkRange = (params) => {
+    const { state } = params;
+    const { schema } = state;
+    const $pos = state.doc.resolve(params?.pos || state.selection.from);
+    return getMarkRange($pos, schema.marks.link);
+};
+/**
+ * Gets the first link mark in a range
+ * @param params Object containing state, optional from and to positions
+ * @returns Link mark or undefined
+ */
+export const getLinkMark = (params) => {
+    const { state } = params;
+    const from = params.from ?? state.selection.from;
+    const to = params.to ?? state.selection.to;
+    return getLinkMarkRanges({ state, from, to }).at(0)?.mark;
+};
+/**
+ * Gets all link marks in a range
+ * @param params Object containing state, from and to positions
+ * @returns Array of link marks
+ */
+export const getLinkMarks = (params) => {
+    const { state, from, to } = params;
+    return getMarksBetween(from, to, state.doc)
+        .filter(({ mark }) => mark.type.name === 'link')
+        .map(range => range.mark);
+};
+/**
+ * Gets all link IDs from a range
+ * @param params Object containing state, optional from and to positions
+ * @returns Array of link IDs
+ */
+export const getLinkIdsFromRange = (params) => {
+    const { state } = params;
+    const from = params.from ?? state.selection.from;
+    const to = params.to ?? state.selection.to;
+    return getLinkMarkRanges({ state, from, to })
+        .map(r => r.mark.attrs.id)
+        .filter((id) => typeof id === 'string');
+};
+/**
+ * Gets the active link ID and inactive links from a range
+ * @param params Object containing state, optional from and to positions
+ * @returns Object with activeId and inactiveLinks or undefined
+ */
+export const getActiveLinkIdFromRange = (params) => {
+    const { state } = params;
+    const from = params.from ?? state.selection.from;
+    const to = params.to ?? state.selection.to;
+    const linkIds = getLinkIdsFromRange({ state, from, to });
+    if (linkIds.length === 0)
+        return undefined;
+    const activeId = linkIds[0];
+    return {
+        activeId,
+        inactiveLinks: linkIds.filter(id => id !== activeId),
+    };
+};
+/**
+ * Extends selection to include full link marks
+ * @param state EditorState
+ * @param from Start position
+ * @param to End position
+ * @returns Object with extended from, to positions and linkId
+ */
+export const extendSelectionToFullLinks = (state, from, to) => {
+    const { activeId } = getActiveLinkIdFromRange({ state, from, to }) || {};
+    const linkMarkRanges = getLinkMarkRanges({ state, from, to });
+    if (linkMarkRanges.length === 0 || !activeId)
+        return { from, to };
+    // Tính toán range mới
+    const newFrom = Math.min(...linkMarkRanges.map(range => range.from), from);
+    const newTo = Math.max(...linkMarkRanges.map(range => range.to), to);
+    return {
+        from: newFrom,
+        to: newTo,
+        linkId: activeId,
+    };
+};
+/**
+ * Handles link actions (create or edit)
+ * @param view EditorView instance
+ * @param linkHandler Link handler callbacks
+ */
+export function handleLinkAction(view, linkHandler) {
+    const { state } = view;
+    const { tr } = state;
+    const { from, to, empty } = state.selection;
+    if (empty && isMarkActive(state, 'link')) {
+        const linkRange = getLinkRange({ state, pos: from });
+        const linkMark = getLinkMark({ state });
+        if (linkRange && linkMark) {
+            // Update selection to include full link
+            view.dispatch(tr.setSelection(TextSelection.create(tr.doc, linkRange.from, linkRange.to)));
+            linkHandler?.edit?.({
+                id: linkMark.attrs.id,
+                selectionText: state.doc.textBetween(linkRange.from, linkRange.to),
+            });
+            return;
+        }
+    }
+    const { from: newFrom, to: newTo, linkId } = extendSelectionToFullLinks(state, from, to);
+    // Update selection to include full links
+    view.dispatch(tr.setSelection(TextSelection.create(tr.doc, newFrom, newTo)));
+    const selectedText = state.doc.textBetween(newFrom, newTo);
+    if (linkId) {
+        linkHandler?.edit?.({
+            id: linkId,
+            selectionText: selectedText,
+        });
+    }
+    else {
+        linkHandler?.setNew?.({
+            selectionText: selectedText,
+        });
+    }
+}
+/**
+ * Checks if the link menu should be shown
+ * @param state EditorState
+ * @returns true if link menu should be shown
+ */
+export const isShowLinkMenu = (state) => isNoSelection(state) && isCursorInLink(state);

package/es/components/organism/TextEditor/utils/menu.d.ts

@@ -0,0 +1,134 @@
+import { EditorState } from '@tiptap/pm/state';
+import { Editor } from '@tiptap/core';
+import { EditorView } from '@tiptap/pm/view';
+/**
+ * Default function to determine if bubble menu should be shown
+ * @param params Object containing editor state and view information
+ * @returns true if bubble menu should be shown
+ */
+export declare const defaultShouldShowBubbleMenu: (params: {
+    state: EditorState;
+    view: EditorView;
+    element: HTMLElement;
+    editor: Editor;
+}) => boolean;
+/**
+ * Checks if link menu should be shown
+ * @param state EditorState
+ * @returns true if link menu should be shown
+ */
+export declare const shouldShowLinkMenu: (state: EditorState) => boolean;
+/**
+ * Calculates optimal menu position relative to selection
+ * @param view EditorView instance
+ * @param menuElement Menu element to position
+ * @returns Position coordinates
+ */
+export declare function calculateMenuPosition(view: EditorView, menuElement: HTMLElement): {
+    top: number;
+    left: number;
+};
+/**
+ * Checks if menu should be hidden based on editor state
+ * @param editor Editor instance
+ * @returns true if menu should be hidden
+ */
+export declare function shouldHideMenu(editor: Editor): boolean;
+/**
+ * Gets the active menu type based on current selection
+ * @param state EditorState
+ * @returns Menu type identifier
+ */
+export declare function getActiveMenuType(state: EditorState): 'default' | 'link' | 'smartTag' | null;
+/**
+ * Menu visibility manager class
+ */
+export declare class MenuVisibilityManager {
+    private visibleMenus;
+    private callbacks;
+    /**
+     * Shows a menu with given ID
+     * @param menuId Menu identifier
+     * @param onShow Optional callback when menu is shown
+     */
+    showMenu(menuId: string, onShow?: () => void): void;
+    /**
+     * Hides a specific menu
+     * @param menuId Menu identifier
+     */
+    hideMenu(menuId: string): void;
+    /**
+     * Hides all visible menus
+     */
+    hideAllMenus(): void;
+    /**
+     * Checks if a menu is visible
+     * @param menuId Menu identifier
+     * @returns true if menu is visible
+     */
+    isMenuVisible(menuId: string): boolean;
+    /**
+     * Gets all visible menu IDs
+     * @returns Array of visible menu IDs
+     */
+    getVisibleMenus(): string[];
+}
+/**
+ * Menu positioning utilities
+ */
+export declare class MenuPositioner {
+    private container;
+    constructor(container?: HTMLElement);
+    /**
+     * Positions menu relative to a DOM element
+     * @param menuElement Menu element to position
+     * @param targetElement Target element to position relative to
+     * @param placement Placement preference
+     */
+    positionRelativeToElement(menuElement: HTMLElement, targetElement: HTMLElement, placement?: 'top' | 'bottom' | 'left' | 'right'): void;
+    /**
+     * Positions menu at specific coordinates
+     * @param menuElement Menu element to position
+     * @param x X coordinate
+     * @param y Y coordinate
+     */
+    positionAtCoordinates(menuElement: HTMLElement, x: number, y: number): void;
+}
+/**
+ * Menu keyboard navigation handler
+ */
+export declare class MenuKeyboardHandler {
+    private menuElement;
+    private focusableElements;
+    private currentIndex;
+    constructor(menuElement: HTMLElement);
+    /**
+     * Updates the list of focusable elements
+     */
+    updateFocusableElements(): void;
+    /**
+     * Handles keyboard events for menu navigation
+     * @param event Keyboard event
+     */
+    handleKeyDown(event: KeyboardEvent): boolean;
+    /**
+     * Focuses the next focusable element
+     */
+    focusNext(): void;
+    /**
+     * Focuses the previous focusable element
+     */
+    focusPrevious(): void;
+    /**
+     * Focuses the first focusable element
+     */
+    focusFirst(): void;
+    /**
+     * Focuses the last focusable element
+     */
+    focusLast(): void;
+    /**
+     * Removes focus from menu
+     */
+    blur(): void;
+}

package/es/components/organism/TextEditor/utils/menu.js

@@ -0,0 +1,317 @@
+import { isTextSelection } from '@tiptap/core';
+import { isNoSelection } from './selection';
+import { isCursorInLink } from './link';
+/**
+ * Default function to determine if bubble menu should be shown
+ * @param params Object containing editor state and view information
+ * @returns true if bubble menu should be shown
+ */
+export const defaultShouldShowBubbleMenu = (params) => {
+    const { element, editor, state, view } = params;
+    const shouldShow = () => {
+        const { doc, selection } = state;
+        const { empty, ranges } = selection;
+        const from = Math.min(...ranges.map(range => range.$from.pos));
+        const to = Math.max(...ranges.map(range => range.$to.pos));
+        // 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 = element.contains(document.activeElement);
+        const hasEditorFocus = view.hasFocus() || isChildOfMenu;
+        if (!hasEditorFocus || empty || isEmptyTextBlock || !editor.isEditable) {
+            return false;
+        }
+        return true;
+    };
+    const show = shouldShow();
+    return show;
+};
+/**
+ * Checks if link menu should be shown
+ * @param state EditorState
+ * @returns true if link menu should be shown
+ */
+export const shouldShowLinkMenu = (state) => isNoSelection(state) && isCursorInLink(state);
+/**
+ * Calculates optimal menu position relative to selection
+ * @param view EditorView instance
+ * @param menuElement Menu element to position
+ * @returns Position coordinates
+ */
+export function calculateMenuPosition(view, menuElement) {
+    const { selection } = view.state;
+    const { from, to } = selection;
+    // Get DOM coordinates of selection
+    const start = view.coordsAtPos(from);
+    const end = view.coordsAtPos(to);
+    // Calculate menu dimensions
+    const menuRect = menuElement.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    // const viewportHeight = window.innerHeight;
+    // Calculate optimal position
+    let top = start.top - menuRect.height - 10; // 10px gap above selection
+    let left = (start.left + end.left) / 2 - menuRect.width / 2; // Center horizontally
+    // Adjust if menu would go off-screen
+    if (top < 0) {
+        top = end.bottom + 10; // Show below if no space above
+    }
+    if (left < 0) {
+        left = 10; // 10px from left edge
+    }
+    else if (left + menuRect.width > viewportWidth) {
+        left = viewportWidth - menuRect.width - 10; // 10px from right edge
+    }
+    return { top, left };
+}
+/**
+ * Checks if menu should be hidden based on editor state
+ * @param editor Editor instance
+ * @returns true if menu should be hidden
+ */
+export function shouldHideMenu(editor) {
+    if (!editor.isEditable)
+        return true;
+    if (!editor.isFocused)
+        return true;
+    const { selection } = editor.state;
+    if (selection.empty)
+        return true;
+    return false;
+}
+/**
+ * Gets the active menu type based on current selection
+ * @param state EditorState
+ * @returns Menu type identifier
+ */
+export function getActiveMenuType(state) {
+    if (shouldShowLinkMenu(state)) {
+        return 'link';
+    }
+    const { selection } = state;
+    if (selection.empty)
+        return null;
+    // Check if smart tag is selected
+    const node = state.doc.nodeAt(selection.from);
+    if (node && node.type.name === 'smartTag') {
+        return 'smartTag';
+    }
+    return 'default';
+}
+/**
+ * Menu visibility manager class
+ */
+export class MenuVisibilityManager {
+    constructor() {
+        this.visibleMenus = new Set();
+        this.callbacks = new Map();
+    }
+    /**
+     * Shows a menu with given ID
+     * @param menuId Menu identifier
+     * @param onShow Optional callback when menu is shown
+     */
+    showMenu(menuId, onShow) {
+        this.hideAllMenus();
+        this.visibleMenus.add(menuId);
+        if (onShow) {
+            this.callbacks.set(menuId, onShow);
+            onShow();
+        }
+    }
+    /**
+     * Hides a specific menu
+     * @param menuId Menu identifier
+     */
+    hideMenu(menuId) {
+        this.visibleMenus.delete(menuId);
+        this.callbacks.delete(menuId);
+    }
+    /**
+     * Hides all visible menus
+     */
+    hideAllMenus() {
+        this.visibleMenus.clear();
+        this.callbacks.clear();
+    }
+    /**
+     * Checks if a menu is visible
+     * @param menuId Menu identifier
+     * @returns true if menu is visible
+     */
+    isMenuVisible(menuId) {
+        return this.visibleMenus.has(menuId);
+    }
+    /**
+     * Gets all visible menu IDs
+     * @returns Array of visible menu IDs
+     */
+    getVisibleMenus() {
+        return Array.from(this.visibleMenus);
+    }
+}
+/**
+ * Menu positioning utilities
+ */
+export class MenuPositioner {
+    constructor(container = document.body) {
+        this.container = container;
+    }
+    /**
+     * Positions menu relative to a DOM element
+     * @param menuElement Menu element to position
+     * @param targetElement Target element to position relative to
+     * @param placement Placement preference
+     */
+    positionRelativeToElement(menuElement, targetElement, placement = 'top') {
+        const targetRect = targetElement.getBoundingClientRect();
+        const menuRect = menuElement.getBoundingClientRect();
+        const containerRect = this.container.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        switch (placement) {
+            case 'top':
+                top = targetRect.top - menuRect.height - 5;
+                left = targetRect.left + (targetRect.width - menuRect.width) / 2;
+                break;
+            case 'bottom':
+                top = targetRect.bottom + 5;
+                left = targetRect.left + (targetRect.width - menuRect.width) / 2;
+                break;
+            case 'left':
+                top = targetRect.top + (targetRect.height - menuRect.height) / 2;
+                left = targetRect.left - menuRect.width - 5;
+                break;
+            case 'right':
+                top = targetRect.top + (targetRect.height - menuRect.height) / 2;
+                left = targetRect.right + 5;
+                break;
+            default:
+                // Default to 'top' placement
+                top = targetRect.top - menuRect.height - 5;
+                left = targetRect.left + (targetRect.width - menuRect.width) / 2;
+                break;
+        }
+        // Adjust for container offset
+        top -= containerRect.top;
+        left -= containerRect.left;
+        // Ensure menu stays within container bounds
+        top = Math.max(0, Math.min(top, containerRect.height - menuRect.height));
+        left = Math.max(0, Math.min(left, containerRect.width - menuRect.width));
+        menuElement.style.position = 'absolute';
+        menuElement.style.top = `${top}px`;
+        menuElement.style.left = `${left}px`;
+    }
+    /**
+     * Positions menu at specific coordinates
+     * @param menuElement Menu element to position
+     * @param x X coordinate
+     * @param y Y coordinate
+     */
+    positionAtCoordinates(menuElement, x, y) {
+        const containerRect = this.container.getBoundingClientRect();
+        // Adjust coordinates relative to container
+        const relativeX = x - containerRect.left;
+        const relativeY = y - containerRect.top;
+        menuElement.style.position = 'absolute';
+        menuElement.style.left = `${relativeX}px`;
+        menuElement.style.top = `${relativeY}px`;
+    }
+}
+/**
+ * Menu keyboard navigation handler
+ */
+export class MenuKeyboardHandler {
+    constructor(menuElement) {
+        this.focusableElements = [];
+        this.currentIndex = -1;
+        this.menuElement = menuElement;
+        this.updateFocusableElements();
+    }
+    /**
+     * Updates the list of focusable elements
+     */
+    updateFocusableElements() {
+        const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+        this.focusableElements = Array.from(this.menuElement.querySelectorAll(focusableSelector));
+    }
+    /**
+     * Handles keyboard events for menu navigation
+     * @param event Keyboard event
+     */
+    handleKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusNext();
+                return true;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusPrevious();
+                return true;
+            case 'Home':
+                event.preventDefault();
+                this.focusFirst();
+                return true;
+            case 'End':
+                event.preventDefault();
+                this.focusLast();
+                return true;
+            case 'Escape':
+                event.preventDefault();
+                this.blur();
+                return true;
+            default:
+                return false;
+        }
+    }
+    /**
+     * Focuses the next focusable element
+     */
+    focusNext() {
+        if (this.focusableElements.length === 0)
+            return;
+        this.currentIndex = (this.currentIndex + 1) % this.focusableElements.length;
+        this.focusableElements[this.currentIndex].focus();
+    }
+    /**
+     * Focuses the previous focusable element
+     */
+    focusPrevious() {
+        if (this.focusableElements.length === 0)
+            return;
+        this.currentIndex =
+            this.currentIndex <= 0 ? this.focusableElements.length - 1 : this.currentIndex - 1;
+        this.focusableElements[this.currentIndex].focus();
+    }
+    /**
+     * Focuses the first focusable element
+     */
+    focusFirst() {
+        if (this.focusableElements.length === 0)
+            return;
+        this.currentIndex = 0;
+        this.focusableElements[this.currentIndex].focus();
+    }
+    /**
+     * Focuses the last focusable element
+     */
+    focusLast() {
+        if (this.focusableElements.length === 0)
+            return;
+        this.currentIndex = this.focusableElements.length - 1;
+        this.focusableElements[this.currentIndex].focus();
+    }
+    /**
+     * Removes focus from menu
+     */
+    blur() {
+        this.currentIndex = -1;
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+    }
+}