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

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

@@ -1,317 +0,0 @@
-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();
-        }
-    }
-}

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

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

@@ -1,57 +0,0 @@
-import { isNodeSelection, isTextSelection } from '@tiptap/core';
-/**
- * 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 = state.doc.textBetween(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 state.doc.textBetween(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

@@ -1 +0,0 @@
-export declare function clamp(val: number, min: number, max: number): number;

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

@@ -1,9 +0,0 @@
-export function clamp(val, min, max) {
-    if (val < min) {
-        return min;
-    }
-    if (val > max) {
-        return max;
-    }
-    return val;
-}

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

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

@@ -1,89 +0,0 @@
-/**
- * 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 = state.doc.textBetween(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

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