@antscorp/antsomi-ui 2.0.109 → 2.0.111

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

@@ -0,0 +1,304 @@
+import { TextSelection } from '@tiptap/pm/state';
+import { getMarkRange, getMarksBetween, isMarkActive } from '@tiptap/core';
+import { isNoSelection } from './selection';
+import { isEmpty } from 'lodash';
+import { isLinkMarkRange } from '../types';
+import { CUSTOM_LINK_EXTENSION_NAME } from '../constants';
+import { textBetween } from './documentState';
+/**
+ * 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, CUSTOM_LINK_EXTENSION_NAME);
+/**
+ * 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(isLinkMarkRange);
+};
+/**
+ * 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[CUSTOM_LINK_EXTENSION_NAME]);
+};
+/**
+ * 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(isLinkMarkRange)
+        .map(range => range.mark);
+};
+/**
+ * Gets all link attrs from a range
+ * @param params Object containing state, optional from and to positions
+ * @returns Array of link attrs
+ */
+export const getLinkAttrsFromRange = (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);
+};
+/**
+ * Gets the active link attrs and inactive links from a range
+ * @param params Object containing state, optional from and to positions
+ * @returns Object with active link Attrs and inactiveLink Attrs or undefined
+ */
+export const getActiveLinkAttrsFromRange = (params) => {
+    const { state } = params;
+    const from = params.from ?? state.selection.from;
+    const to = params.to ?? state.selection.to;
+    const linkAttrs = getLinkAttrsFromRange({ state, from, to });
+    if (linkAttrs.length === 0)
+        return undefined;
+    const [activeAttrs, ...inactiveLinks] = linkAttrs;
+    return {
+        activeAttrs,
+        inactiveLinks,
+    };
+};
+/**
+ * Builds lookup maps for adjacent link search by position
+ * @param allLinks All link ranges in document
+ * @returns Maps of links indexed by their start/end positions
+ */
+const buildLinkLookupMaps = (allLinks) => {
+    const linkEndingAt = new Map();
+    const linkStartingAt = new Map();
+    allLinks.forEach(link => {
+        if (!linkEndingAt.has(link.to)) {
+            linkEndingAt.set(link.to, []);
+        }
+        linkEndingAt.get(link.to).push(link);
+        if (!linkStartingAt.has(link.from)) {
+            linkStartingAt.set(link.from, []);
+        }
+        linkStartingAt.get(link.from).push(link);
+    });
+    return { linkEndingAt, linkStartingAt };
+};
+/**
+ * Finds all adjacent link ranges with the same href
+ * @param linkRange Current link range to check
+ * @param targetHref Target href to match
+ * @param linkEndingAt Map of links ending at each position
+ * @param linkStartingAt Map of links starting at each position
+ * @param doc Document node
+ * @returns Array of adjacent link ranges with same href (includes the input linkRange)
+ */
+const findAdjacentLinksWithSameHref = (linkRange, targetHref, linkEndingAt, linkStartingAt, doc) => {
+    const adjacentLinks = [linkRange];
+    // Find adjacent links before (links ending where current link starts)
+    let currentFrom = linkRange.from;
+    while (currentFrom > 0) {
+        const linksEndingHere = linkEndingAt.get(currentFrom) || [];
+        const adjacentBefore = linksEndingHere.find(range => range.mark.attrs.href === targetHref);
+        if (!adjacentBefore)
+            break;
+        adjacentLinks.unshift(adjacentBefore);
+        currentFrom = adjacentBefore.from;
+    }
+    // Find adjacent links after (links starting where current link ends)
+    let currentTo = linkRange.to;
+    while (currentTo < doc.content.size) {
+        const linksStartingHere = linkStartingAt.get(currentTo) || [];
+        const adjacentAfter = linksStartingHere.find(range => range.mark.attrs.href === targetHref);
+        if (!adjacentAfter)
+            break;
+        adjacentLinks.push(adjacentAfter);
+        currentTo = adjacentAfter.to;
+    }
+    return adjacentLinks;
+};
+/**
+ * Extends selection to include full link marks and adjacent links with same href
+ * @param state EditorState
+ * @param from Start position
+ * @param to End position
+ * @returns Object with extended from, to positions and link attrs
+ */
+export const extendSelectionToFullLinks = (state, from, to) => {
+    const { activeAttrs } = getActiveLinkAttrsFromRange({ state, from, to }) || {};
+    const linkMarkRanges = getLinkMarkRanges({ state, from, to });
+    if (linkMarkRanges.length === 0 || isEmpty(activeAttrs)) {
+        return { from, to };
+    }
+    // Get all document links and build lookup maps for adjacent search
+    const allDocLinks = getLinkMarkRanges({
+        state,
+        from: 0,
+        to: state.doc.content.size,
+    });
+    const { linkEndingAt, linkStartingAt } = buildLinkLookupMaps(allDocLinks);
+    // Check if single link has adjacents with same href
+    if (linkMarkRanges.length === 1) {
+        const singleLink = linkMarkRanges[0];
+        const { href } = singleLink.mark.attrs;
+        if (href) {
+            const hasAdjacentBefore = linkEndingAt
+                .get(singleLink.from)
+                ?.some(range => range.mark.attrs.href === href);
+            const hasAdjacentAfter = linkStartingAt
+                .get(singleLink.to)
+                ?.some(range => range.mark.attrs.href === href);
+            if (!hasAdjacentBefore && !hasAdjacentAfter) {
+                return {
+                    from: singleLink.from,
+                    to: singleLink.to,
+                    linkAttrs: singleLink.mark.attrs,
+                };
+            }
+        }
+    }
+    // Collect all link ranges including adjacent ones with same href
+    const allLinkRanges = [];
+    const processedRanges = new Set();
+    for (const linkRange of linkMarkRanges) {
+        const rangeKey = `${linkRange.from}-${linkRange.to}`;
+        if (processedRanges.has(rangeKey))
+            continue;
+        const { href } = linkRange.mark.attrs;
+        if (!href) {
+            allLinkRanges.push(linkRange);
+            processedRanges.add(rangeKey);
+            continue;
+        }
+        // Find all adjacent links with same href
+        const adjacentLinks = findAdjacentLinksWithSameHref(linkRange, href, linkEndingAt, linkStartingAt, state.doc);
+        adjacentLinks.forEach(range => {
+            const key = `${range.from}-${range.to}`;
+            if (!processedRanges.has(key)) {
+                allLinkRanges.push(range);
+                processedRanges.add(key);
+            }
+        });
+    }
+    // Calculate final range from all collected links
+    const newFrom = Math.min(...allLinkRanges.map(range => range.from), from);
+    const newTo = Math.max(...allLinkRanges.map(range => range.to), to);
+    return {
+        from: newFrom,
+        to: newTo,
+        linkAttrs: activeAttrs,
+    };
+};
+/**
+ * Gets all full link groups in the document (adjacent links with same href are grouped)
+ * @param state EditorState
+ * @returns Array of link groups with attrs and content
+ */
+export const getAllFullLinkGroups = (state) => {
+    const { doc } = state;
+    // Get all link ranges in document
+    const allLinks = getLinkMarkRanges({
+        state,
+        from: 0,
+        to: doc.content.size,
+    });
+    if (allLinks.length === 0)
+        return [];
+    // Build lookup maps for adjacent link search
+    const { linkEndingAt, linkStartingAt } = buildLinkLookupMaps(allLinks);
+    // Track processed ranges to avoid duplicates
+    const processedRanges = new Set();
+    const linkGroups = [];
+    // Process each link and find adjacent links with same href
+    for (const link of allLinks) {
+        const rangeKey = `${link.from}-${link.to}`;
+        if (processedRanges.has(rangeKey))
+            continue;
+        const { href } = link.mark.attrs;
+        if (!href) {
+            // Link without href, process individually
+            const content = textBetween(state, link.from, link.to);
+            linkGroups.push({ attrs: link.mark.attrs, content });
+            processedRanges.add(rangeKey);
+            continue;
+        }
+        // Find all adjacent links with same href
+        const adjacentLinks = findAdjacentLinksWithSameHref(link, href, linkEndingAt, linkStartingAt, doc);
+        // Mark all adjacent links as processed
+        adjacentLinks.forEach(adjLink => {
+            processedRanges.add(`${adjLink.from}-${adjLink.to}`);
+        });
+        // Calculate full link range
+        const fullFrom = adjacentLinks[0].from;
+        const fullTo = adjacentLinks[adjacentLinks.length - 1].to;
+        // Get content from full link range
+        const content = textBetween(state, fullFrom, fullTo);
+        // Add link group with attrs from first link and full content
+        linkGroups.push({ attrs: adjacentLinks[0].mark.attrs, content });
+    }
+    return linkGroups;
+};
+/**
+ * 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, CUSTOM_LINK_EXTENSION_NAME)) {
+        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?.({
+                attrs: linkMark.attrs,
+                selectionText: textBetween(state, linkRange.from, linkRange.to),
+            });
+            return;
+        }
+    }
+    const { from: newFrom, to: newTo, linkAttrs } = extendSelectionToFullLinks(state, from, to);
+    // Update selection to include full links
+    view.dispatch(tr.setSelection(TextSelection.create(tr.doc, newFrom, newTo)));
+    const selectedText = textBetween(state, newFrom, newTo);
+    if (linkAttrs) {
+        linkHandler?.edit?.({
+            attrs: linkAttrs,
+            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 isShowLinkToolbar = (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;
+}