@antscorp/antsomi-ui 2.0.110 → 2.0.112

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

@@ -0,0 +1,321 @@
+import { isTextSelection } from '@tiptap/core';
+import { isNoSelection } from './selection';
+import { isCursorInLink } from './link';
+import { textBetween } from './documentState';
+/**
+ * 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));
+        // Check if selection is an atom node (like emoji)
+        const isAtomNode = from + 1 === to && doc.nodeAt(from)?.isAtom;
+        // 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.
+        // BUT: if it's an atom node, we should still show the bubble menu
+        const isEmptyTextBlock = !textBetween(state, from, to).length && isTextSelection(state.selection) && !isAtomNode;
+        // 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();
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+import { EditorState } from '@tiptap/pm/state';
+/**
+ * Kiểm tra xem có selection nào trong tài liệu hay không
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true nếu không có selection, false nếu có selection
+ */
+export declare const isNoSelection: (state: EditorState) => boolean;
+/**
+ * Gets the text content of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selected text content
+ */
+export declare const getSelectionText: (state: EditorState) => string;
+/**
+ * Checks if selection spans multiple nodes
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true if selection spans multiple nodes
+ */
+export declare const isMultiNodeSelection: (state: EditorState) => boolean;
+/**
+ * Gets the depth of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selection depth
+ */
+export declare const getSelectionDepth: (state: EditorState) => number;

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

@@ -0,0 +1,58 @@
+import { isNodeSelection, isTextSelection } from '@tiptap/core';
+import { textBetween } from './documentState';
+/**
+ * Kiểm tra xem có selection nào trong tài liệu hay không
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true nếu không có selection, false nếu có selection
+ */
+export const isNoSelection = (state) => {
+    const { selection } = state;
+    if (selection.empty)
+        return true;
+    // Kiểm tra trường hợp text selection không có nội dung
+    if (isTextSelection(selection)) {
+        const { from, to } = selection;
+        if (from === to)
+            return true;
+        const selectedText = textBetween(state, from, to);
+        return selectedText.length === 0;
+    }
+    // Nếu là node selection, thì có selection
+    if (isNodeSelection(selection))
+        return false;
+    return false;
+};
+/**
+ * Gets the text content of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selected text content
+ */
+export const getSelectionText = (state) => {
+    const { selection } = state;
+    const { from, to } = selection;
+    return textBetween(state, from, to);
+};
+/**
+ * Checks if selection spans multiple nodes
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true if selection spans multiple nodes
+ */
+export const isMultiNodeSelection = (state) => {
+    const { selection } = state;
+    if (selection.empty)
+        return false;
+    const { from, to } = selection;
+    const $from = state.doc.resolve(from);
+    const $to = state.doc.resolve(to);
+    return $from.parent !== $to.parent;
+};
+/**
+ * Gets the depth of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selection depth
+ */
+export const getSelectionDepth = (state) => {
+    const { selection } = state;
+    const { $from } = selection;
+    return $from.depth;
+};

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

@@ -0,0 +1,13 @@
+import { Range } from '@tiptap/core';
+export declare function clamp(val: number, min: number, max: number): number;
+/**
+ * Merges adjacent or overlapping ranges based on a custom merge condition
+ * @param ranges - Array of ranges to merge (will be sorted by 'from' position)
+ * @param shouldMerge - Function to determine if ranges should be merged
+ * @returns Array of merged ranges with combined data
+ */
+export declare function mergeAdjacentRanges<T extends Range>(ranges: T[], shouldMerge: (existingRangeData: T[], candidateRange: T) => boolean): {
+    from: number;
+    to: number;
+    data: T[];
+}[];

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

@@ -0,0 +1,52 @@
+export function clamp(val, min, max) {
+    if (val < min) {
+        return min;
+    }
+    if (val > max) {
+        return max;
+    }
+    return val;
+}
+/**
+ * Merges adjacent or overlapping ranges based on a custom merge condition
+ * @param ranges - Array of ranges to merge (will be sorted by 'from' position)
+ * @param shouldMerge - Function to determine if ranges should be merged
+ * @returns Array of merged ranges with combined data
+ */
+export function mergeAdjacentRanges(ranges, shouldMerge) {
+    // Return empty array if no ranges provided
+    if (ranges.length === 0)
+        return [];
+    // Sort ranges by starting position to process them in order
+    ranges.sort((a, b) => a.from - b.from);
+    // Initialize with the first range
+    const mergedRanges = [
+        {
+            from: ranges[0].from,
+            to: ranges[0].to,
+            data: [ranges[0]],
+        },
+    ];
+    // Process remaining ranges
+    for (let i = 1; i < ranges.length; i++) {
+        const currentRange = ranges[i];
+        const lastMergedRange = mergedRanges[mergedRanges.length - 1];
+        // Check if current range overlaps with last merged range and should be merged
+        const rangesOverlap = currentRange.from <= lastMergedRange.to;
+        const canMergeRanges = shouldMerge(lastMergedRange.data, currentRange);
+        if (rangesOverlap && canMergeRanges) {
+            // Extend the last merged range to include current range
+            lastMergedRange.to = Math.max(lastMergedRange.to, currentRange.to);
+            lastMergedRange.data.push(currentRange);
+        }
+        else {
+            // Create a new merged range for current range
+            mergedRanges.push({
+                from: currentRange.from,
+                to: currentRange.to,
+                data: [currentRange],
+            });
+        }
+    }
+    return mergedRanges;
+}

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

@@ -0,0 +1,49 @@
+import { EditorView } from '@tiptap/pm/view';
+import { SmartTagHandler } from '../types';
+/**
+ * Handles smart tag actions (create or edit)
+ * @param event Mouse event from the action
+ * @param view EditorView instance
+ * @param smartTagHandler Smart tag handler callbacks
+ */
+export declare const handleSmartTagAction: (event: React.MouseEvent, view: EditorView, smartTagHandler?: SmartTagHandler) => void;
+/**
+ * Gets smart tag node at a specific position
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns Smart tag node or null
+ */
+export declare const getSmartTagAtPosition: (view: EditorView, pos: number) => import("prosemirror-model").Node | null;
+/**
+ * Gets all smart tags in the document
+ * @param view EditorView instance
+ * @returns Array of smart tag nodes with their positions
+ */
+export declare const getAllSmartTags: (view: EditorView) => {
+    node: any;
+    pos: number;
+}[];
+/**
+ * Finds smart tag by ID
+ * @param view EditorView instance
+ * @param id Smart tag ID to find
+ * @returns Smart tag node and position or null
+ */
+export declare const findSmartTagById: (view: EditorView, id: string) => null;
+/**
+ * Checks if position is inside a smart tag
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns true if position is inside a smart tag
+ */
+export declare const isPositionInSmartTag: (view: EditorView, pos: number) => boolean;
+/**
+ * Gets smart tag content at cursor position
+ * @param view EditorView instance
+ * @returns Smart tag content or null
+ */
+export declare const getSmartTagAtCursor: (view: EditorView) => {
+    id: any;
+    content: any;
+    node: import("prosemirror-model").Node;
+} | null;

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

@@ -0,0 +1,90 @@
+import { textBetween } from './documentState';
+/**
+ * Handles smart tag actions (create or edit)
+ * @param event Mouse event from the action
+ * @param view EditorView instance
+ * @param smartTagHandler Smart tag handler callbacks
+ */
+export const handleSmartTagAction = (event, view, smartTagHandler) => {
+    const { state } = view;
+    const { from, to } = state.selection;
+    const smartTagNode = state.doc.nodeAt(from);
+    const smartTagId = smartTagNode?.attrs.id;
+    if (smartTagId) {
+        smartTagHandler?.edit?.(smartTagId, event);
+    }
+    else {
+        const selectedText = textBetween(state, from, to);
+        if (selectedText) {
+            smartTagHandler?.setNew?.({
+                selectionText: selectedText,
+            });
+        }
+    }
+};
+/**
+ * Gets smart tag node at a specific position
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns Smart tag node or null
+ */
+export const getSmartTagAtPosition = (view, pos) => {
+    const node = view.state.doc.nodeAt(pos);
+    if (node && node.type.name === 'smartTag') {
+        return node;
+    }
+    return null;
+};
+/**
+ * Gets all smart tags in the document
+ * @param view EditorView instance
+ * @returns Array of smart tag nodes with their positions
+ */
+export const getAllSmartTags = (view) => {
+    const smartTags = [];
+    view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'smartTag') {
+            smartTags.push({ node, pos });
+        }
+    });
+    return smartTags;
+};
+/**
+ * Finds smart tag by ID
+ * @param view EditorView instance
+ * @param id Smart tag ID to find
+ * @returns Smart tag node and position or null
+ */
+export const findSmartTagById = (view, id) => {
+    let result = null;
+    view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'smartTag' && node.attrs.id === id) {
+            result = { node, pos };
+            return false; // Stop traversal
+        }
+    });
+    return result;
+};
+/**
+ * Checks if position is inside a smart tag
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns true if position is inside a smart tag
+ */
+export const isPositionInSmartTag = (view, pos) => getSmartTagAtPosition(view, pos) !== null;
+/**
+ * Gets smart tag content at cursor position
+ * @param view EditorView instance
+ * @returns Smart tag content or null
+ */
+export const getSmartTagAtCursor = (view) => {
+    const { selection } = view.state;
+    const node = getSmartTagAtPosition(view, selection.from);
+    return node
+        ? {
+            id: node.attrs.id,
+            content: node.attrs.content,
+            node,
+        }
+        : null;
+};

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

@@ -0,0 +1,78 @@
+import { TextStyle } from '../types';
+/**
+ * Extracts text style from element's computed style
+ * @param style CSSStyleDeclaration from element
+ * @returns Partial TextStyle object
+ */
+export declare const textStyleFromElStyle: <T extends CSSStyleDeclaration>(style: T, defaultStyle: TextStyle) => Partial<TextStyle>;
+/**
+ * Applies text style to HTML element
+ * @param el HTML element to apply styles to
+ * @param style TextStyle object
+ */
+export declare const appendTextStyleToEl: (el: HTMLElement, style: Partial<TextStyle>) => void;
+/**
+ * Converts a style object to a CSS string representation
+ * @param styleObj The style object to convert
+ * @returns The CSS string representation
+ * @example
+ * styleObjectToString({ color: 'red', fontSize: '16px' })
+ * // returns "color: red; font-size: 16px"
+ */
+export declare function styleObjectToString(styleObj: Record<string, unknown>): string;
+/**
+ * Normalizes a font-family string by adding quotes when needed
+ * @param fontFamily The font-family string to normalize
+ * @returns The normalized font-family string
+ * @description
+ * - Preserves existing quoted names
+ * - Doesn't quote generic families (e.g. sans-serif)
+ * - Quotes names containing spaces or special characters
+ * @example
+ * normalizeFontFamily('Arial, Helvetica, sans-serif')
+ * // returns 'Arial, Helvetica, sans-serif'
+ *
+ * normalizeFontFamily('Times New Roman, serif')
+ * // returns '"Times New Roman", serif'
+ */
+export declare function normalizeFontFamily(fontFamily: string): string;
+/**
+ * Creates font-family string with fallback
+ * @param fontFamily Primary font family
+ * @param defaultFont Default fallback font
+ * @returns Normalized font-family string with fallback
+ */
+export declare const fontWithFallback: (fontFamily: string, defaultFont?: string) => string;
+/**
+ * Checks if a color matches the link color
+ * @param color Color to check
+ * @returns true if color matches link color
+ */
+export declare const isLinkColor: (color: string) => boolean;
+/**
+ * Extracts CSS variables from a style object
+ * @param styleObj Style object that may contain CSS variables
+ * @returns Object with CSS variables and regular styles separated
+ */
+export declare function extractCSSVariables(styleObj: Record<string, unknown>): {
+    cssVariables: Record<string, unknown>;
+    regularStyles: Record<string, unknown>;
+};
+/**
+ * Merges multiple text styles with priority
+ * @param styles Array of text styles to merge
+ * @returns Merged text style
+ */
+export declare function mergeTextStyles(...styles: Partial<TextStyle>[]): Partial<TextStyle>;
+/**
+ * Validates if a text style is complete
+ * @param style Text style to validate
+ * @returns true if all required properties are present
+ */
+export declare function isCompleteTextStyle(style: Partial<TextStyle>): style is TextStyle;
+/**
+ * Converts text style to CSS style object
+ * @param textStyle Text style object
+ * @returns CSS style object
+ */
+export declare function textStyleToCSSStyle(textStyle: Partial<TextStyle>): React.CSSProperties;