@antscorp/antsomi-ui 1.3.7-beta.24 → 1.3.7-beta.26

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useItemInteraction.js

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+/**
+ * Custom hook to handle user interactions with menu items
+ * Manages click events and mouse down state
+ */
+export const useItemInteraction = (props) => {
+    const { normalizeTreeItems, handleSelectItem, handleToggleExpandItem, setFocusId, onClick, isMouseDownRef, } = props;
+    const handleClickItem = useCallback((args) => {
+        const { item, elKey, domEvent } = args;
+        const node = normalizeTreeItems.get(item.id);
+        if (!node || node.data.displayOnly)
+            return;
+        const hasChilren = node.childIds.length > 0;
+        handleSelectItem(node);
+        if (hasChilren) {
+            handleToggleExpandItem(node);
+        }
+        setFocusId(node.id);
+        onClick?.({ item: node.data, elKey, domEvent });
+    }, [normalizeTreeItems, handleSelectItem, handleToggleExpandItem, setFocusId, onClick]);
+    const handleMouseDown = useCallback(() => {
+        isMouseDownRef.current = true;
+        // Reset flag after a short delay to handle the focus event
+        setTimeout(() => {
+            isMouseDownRef.current = false;
+        }, 0);
+    }, [isMouseDownRef]);
+    return {
+        handleClickItem,
+        handleMouseDown,
+    };
+};

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
+import { ItemType, MenuInlineProps } from '../../../types';
+export interface UseKeyboardNavigationReturn {
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+}
+export interface UseKeyboardNavigationProps {
+    visibleItems: NormalizedNode<ItemType>[];
+    focusId: string | null;
+    expandedKeys: Set<string>;
+    normalizeTreeItems: Map<string, NormalizedNode<ItemType>>;
+    setFocusId: (id: string | null) => void;
+    handleExpandItems: (items: NormalizedNode<ItemType>[]) => void;
+    handleCollapseItems: (items: NormalizedNode<ItemType>[]) => void;
+    handleSelectItem: (item: NormalizedNode<ItemType>) => void;
+    handleToggleExpandItem: (item: NormalizedNode<ItemType>) => void;
+    findNextFocusableItem: (startIndex: number, direction: 'next' | 'prev') => number;
+    findFirstFocusableItem: () => number;
+    findLastFocusableItem: () => number;
+    onClick?: MenuInlineProps['onClick'];
+}
+/**
+ * Custom hook to handle keyboard navigation for tree menu
+ * Implements ARIA-compliant keyboard interaction patterns
+ */
+export declare const useKeyboardNavigation: (props: UseKeyboardNavigationProps) => UseKeyboardNavigationReturn;

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useKeyboardNavigation.js

@@ -0,0 +1,93 @@
+import { useCallback } from 'react';
+/**
+ * Custom hook to handle keyboard navigation for tree menu
+ * Implements ARIA-compliant keyboard interaction patterns
+ */
+export const useKeyboardNavigation = (props) => {
+    const { visibleItems, focusId, expandedKeys, normalizeTreeItems, setFocusId, handleExpandItems, handleCollapseItems, handleSelectItem, handleToggleExpandItem, findNextFocusableItem, findFirstFocusableItem, findLastFocusableItem, onClick, } = props;
+    const handleKeyDown = useCallback((e) => {
+        if (visibleItems.length === 0)
+            return;
+        e.preventDefault();
+        const currentFocusIndex = visibleItems.findIndex(item => item.id === focusId);
+        if (currentFocusIndex === -1) {
+            const firstFocusableIndex = findFirstFocusableItem();
+            setFocusId(visibleItems[firstFocusableIndex]?.id ?? null);
+            return;
+        }
+        const currentFocusItem = visibleItems[currentFocusIndex];
+        switch (e.key) {
+            case 'ArrowDown': {
+                const nextFocusIndex = findNextFocusableItem(currentFocusIndex, 'next');
+                setFocusId(visibleItems[nextFocusIndex].id);
+                break;
+            }
+            case 'ArrowUp': {
+                const nextFocusIndex = findNextFocusableItem(currentFocusIndex, 'prev');
+                setFocusId(visibleItems[nextFocusIndex].id);
+                break;
+            }
+            case 'ArrowRight': {
+                if (currentFocusItem.childIds.length > 0 && !expandedKeys.has(currentFocusItem.id)) {
+                    handleExpandItems([currentFocusItem]);
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                if (currentFocusItem.childIds.length > 0 && expandedKeys.has(currentFocusItem.id)) {
+                    handleCollapseItems([currentFocusItem]);
+                }
+                else if (currentFocusItem?.parentId) {
+                    // Find parent and ensure it's focusable
+                    const parentItem = normalizeTreeItems.get(currentFocusItem.parentId);
+                    if (parentItem && !parentItem.data.displayOnly) {
+                        setFocusId(currentFocusItem.parentId);
+                    }
+                }
+                break;
+            }
+            case 'Home': {
+                const firstFocusableIndex = findFirstFocusableItem();
+                setFocusId(visibleItems[firstFocusableIndex].id);
+                break;
+            }
+            case 'End': {
+                const lastFocusableIndex = findLastFocusableItem();
+                setFocusId(visibleItems[lastFocusableIndex].id);
+                break;
+            }
+            case 'Enter': {
+                if (currentFocusItem && !currentFocusItem.data.displayOnly) {
+                    handleSelectItem(currentFocusItem);
+                    if (currentFocusItem.childIds.length > 0) {
+                        handleToggleExpandItem(currentFocusItem);
+                    }
+                    onClick?.({
+                        item: currentFocusItem.data,
+                        elKey: 'item',
+                    });
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }, [
+        visibleItems,
+        focusId,
+        expandedKeys,
+        normalizeTreeItems,
+        setFocusId,
+        handleExpandItems,
+        handleCollapseItems,
+        handleSelectItem,
+        handleToggleExpandItem,
+        findNextFocusableItem,
+        findFirstFocusableItem,
+        findLastFocusableItem,
+        onClick,
+    ]);
+    return {
+        handleKeyDown,
+    };
+};

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useTreeState.d.ts

@@ -0,0 +1,24 @@
+import { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
+import { ItemType } from '../../../types';
+export interface UseTreeStateReturn {
+    normalizeTreeItems: Map<string, NormalizedNode<ItemType>>;
+    rootItemIds: Set<string>;
+    rootNodes: NormalizedNode<ItemType>[];
+    expandedKeys: Set<string>;
+    selectedKeys: Set<string>;
+    handleExpandItems: (items: NormalizedNode<ItemType>[], deep?: number) => void;
+    handleCollapseItems: (items: NormalizedNode<ItemType>[]) => void;
+    handleToggleExpandItem: (item: NormalizedNode<ItemType>) => void;
+    handleSelectItem: (item: NormalizedNode<ItemType>) => void;
+    expandAll: () => void;
+}
+export interface UseTreeStateProps {
+    items: ItemType[];
+    expanded: string[];
+    selected: string | string[];
+    selectable: boolean;
+}
+/**
+ * Custom hook to manage tree state including expansion, selection, and normalization
+ */
+export declare const useTreeState: (props: UseTreeStateProps) => UseTreeStateReturn;

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useTreeState.js

@@ -0,0 +1,94 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { findNodes, getChildrenRecursively, } from '@antscorp/antsomi-ui/es/utils/tree';
+import { serializeItems } from '../../../utils';
+/**
+ * Custom hook to manage tree state including expansion, selection, and normalization
+ */
+export const useTreeState = (props) => {
+    const { items: itemsProp, expanded: expandedProp, selected: selectedProp, selectable } = props;
+    const [expandedKeys, setExpandedKeys] = useState(new Set());
+    const [selectedKeys, setSelectedKeys] = useState(new Set());
+    const [{ items: normalizeTreeItems, rootItemIds }, setTreeState] = useState({
+        items: new Map(),
+        rootItemIds: new Set(),
+    });
+    // Sync external selectedProp with internal state
+    useDeepCompareEffect(() => {
+        setSelectedKeys(new Set(selectedProp));
+    }, [selectedProp]);
+    // Sync external expandedProp with internal state
+    useDeepCompareEffect(() => {
+        setExpandedKeys(new Set(expandedProp));
+    }, [expandedProp]);
+    // Serialize items into normalized tree structure
+    useEffect(() => {
+        setTreeState(serializeItems({
+            items: itemsProp,
+        }));
+    }, [itemsProp]);
+    // Compute root nodes
+    const rootNodes = useMemo(() => findNodes(node => rootItemIds.has(node.id), normalizeTreeItems), [normalizeTreeItems, rootItemIds]);
+    // Handler to collapse items
+    const handleCollapseItems = useCallback((items) => {
+        setExpandedKeys(prev => {
+            const newOpenKeys = new Set(prev);
+            items.forEach(({ data }) => {
+                if (prev.has(data.key)) {
+                    newOpenKeys.delete(data.key);
+                }
+            });
+            return newOpenKeys;
+        });
+    }, []);
+    // Handler to expand items with optional deep expansion
+    const handleExpandItems = useCallback((items, deep = 0) => {
+        setExpandedKeys(prev => {
+            const updatedExpandedKeys = new Set(prev);
+            items.forEach(item => {
+                const normalizeItem = normalizeTreeItems.get(item.data.key);
+                if (normalizeItem) {
+                    updatedExpandedKeys.add(normalizeItem.id);
+                    if (deep > 0) {
+                        getChildrenRecursively(normalizeItem.id, normalizeTreeItems, normalizeItem.level + deep).forEach(v => updatedExpandedKeys.add(v.id));
+                    }
+                }
+            });
+            return updatedExpandedKeys;
+        });
+    }, [normalizeTreeItems]);
+    // Handler to toggle expansion state of an item
+    const handleToggleExpandItem = useCallback((item) => {
+        const { key } = item.data;
+        const isExpanded = expandedKeys.has(key);
+        if (isExpanded) {
+            handleCollapseItems([item]);
+        }
+        else {
+            handleExpandItems([item]);
+        }
+    }, [expandedKeys, handleCollapseItems, handleExpandItems]);
+    // Handler to select an item
+    const handleSelectItem = useCallback((item) => {
+        const { key } = item.data;
+        if (!selectable || selectedKeys.has(key) || item.data.displayOnly)
+            return;
+        setSelectedKeys(new Set([key]));
+    }, [selectable, selectedKeys]);
+    // Handler to expand all items
+    const expandAll = useCallback(() => {
+        handleExpandItems(rootNodes, Infinity);
+    }, [handleExpandItems, rootNodes]);
+    return {
+        normalizeTreeItems,
+        rootItemIds,
+        rootNodes,
+        expandedKeys,
+        selectedKeys,
+        handleExpandItems,
+        handleCollapseItems,
+        handleToggleExpandItem,
+        handleSelectItem,
+        expandAll,
+    };
+};

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useVisibleItems.d.ts

@@ -0,0 +1,7 @@
+import { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
+import { ItemType } from '../../../types';
+/**
+ * Custom hook to compute and optimize visible items in a tree structure
+ * Automatically selects the best strategy based on tree characteristics
+ */
+export declare const useVisibleItems: (normalizeTreeItems: Map<string, NormalizedNode<ItemType>>, rootItemIds: Set<string>, expandedKeys: Set<string>) => NormalizedNode<ItemType>[];

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useVisibleItems.js

@@ -0,0 +1,132 @@
+import { useMemo, useEffect } from 'react';
+import { getPathToNode } from '@antscorp/antsomi-ui/es/utils/tree';
+/**
+ * Optimized function to compute visible items using breadth-first traversal
+ * instead of filtering all items
+ */
+const computeVisibleItemsOptimized = (normalizeTreeItems, rootItemIds, expandedKeys) => {
+    const visibleItems = [];
+    const queue = Array.from(rootItemIds);
+    // Process queue in breadth-first manner
+    let index = 0;
+    while (index < queue.length) {
+        const itemId = queue[index++];
+        const item = normalizeTreeItems.get(itemId);
+        if (!item)
+            continue;
+        visibleItems.push(item);
+        // Add children to queue only if this item is expanded
+        if (expandedKeys.has(item.id) && item.childIds.length > 0) {
+            queue.push(...item.childIds);
+        }
+    }
+    return visibleItems;
+};
+/**
+ * Alternative: Path-based optimization with memoization
+ * Caches path calculations to avoid redundant work
+ */
+const computeVisibleItemsWithPathCache = (normalizeTreeItems, expandedKeys, pathCache) => {
+    const visibleItems = [];
+    for (const item of normalizeTreeItems.values()) {
+        const isRootItem = item.level === 0;
+        if (isRootItem) {
+            visibleItems.push(item);
+            continue;
+        }
+        if (!item.parentId)
+            continue;
+        // Use cached path or compute and cache
+        let pathToParent = pathCache.get(item.parentId);
+        if (!pathToParent) {
+            pathToParent = getPathToNode(item.parentId, normalizeTreeItems);
+            pathCache.set(item.parentId, pathToParent);
+        }
+        // Check if all parents are expanded
+        const allParentExpanded = pathToParent.every(parent => expandedKeys.has(parent.id));
+        if (allParentExpanded) {
+            visibleItems.push(item);
+        }
+    }
+    return visibleItems;
+};
+/**
+ * Level-based optimization: Process items level by level
+ * More efficient for deep trees with many collapsed branches
+ */
+const computeVisibleItemsByLevel = (normalizeTreeItems, rootItemIds, expandedKeys) => {
+    const visibleItems = [];
+    const expandedParents = new Set();
+    // Add root items and track expanded ones
+    for (const rootId of rootItemIds) {
+        const rootItem = normalizeTreeItems.get(rootId);
+        if (rootItem) {
+            visibleItems.push(rootItem);
+            if (expandedKeys.has(rootId)) {
+                expandedParents.add(rootId);
+            }
+        }
+    }
+    // Process each level
+    let currentLevelParents = expandedParents;
+    let currentLevel = 1;
+    while (currentLevelParents.size > 0) {
+        const nextLevelParents = new Set();
+        // Process all items at current level
+        for (const parentId of currentLevelParents) {
+            const parent = normalizeTreeItems.get(parentId);
+            if (!parent)
+                continue;
+            // Add all children of this expanded parent
+            for (const childId of parent.childIds) {
+                const child = normalizeTreeItems.get(childId);
+                if (child && child.level === currentLevel) {
+                    visibleItems.push(child);
+                    // Track if this child is expanded for next level
+                    if (expandedKeys.has(childId)) {
+                        nextLevelParents.add(childId);
+                    }
+                }
+            }
+        }
+        currentLevelParents = nextLevelParents;
+        currentLevel++;
+    }
+    return visibleItems;
+};
+/**
+ * Custom hook to compute and optimize visible items in a tree structure
+ * Automatically selects the best strategy based on tree characteristics
+ */
+export const useVisibleItems = (normalizeTreeItems, rootItemIds, expandedKeys) => {
+    // Cache for path calculations to avoid redundant work
+    const pathCache = useMemo(() => new Map(), []);
+    // Clear path cache when tree structure changes
+    useEffect(() => {
+        pathCache.clear();
+    }, [normalizeTreeItems, pathCache]);
+    // Optimized visible items calculation with strategy selection
+    const visibleItems = useMemo(() => {
+        if (normalizeTreeItems.size === 0)
+            return [];
+        // Choose optimization strategy based on tree characteristics
+        const treeDepth = Math.max(...Array.from(normalizeTreeItems.values()).map(item => item.level));
+        const totalItems = normalizeTreeItems.size;
+        const expandedCount = expandedKeys.size;
+        // Strategy selection heuristics:
+        // - For shallow trees with many expanded items: use breadth-first
+        // - For deep trees with few expanded items: use level-based
+        // - For medium trees: use path-cache optimization
+        if (treeDepth <= 3 && expandedCount > totalItems * 0.3) {
+            // Shallow tree with many expanded items
+            return computeVisibleItemsOptimized(normalizeTreeItems, rootItemIds, expandedKeys);
+        }
+        if (treeDepth > 5 && expandedCount < totalItems * 0.2) {
+            // Deep tree with few expanded items
+            return computeVisibleItemsByLevel(normalizeTreeItems, rootItemIds, expandedKeys);
+        }
+        // Medium complexity - use cached path approach
+        return computeVisibleItemsWithPathCache(normalizeTreeItems, expandedKeys, pathCache);
+    }, [expandedKeys, normalizeTreeItems, rootItemIds, pathCache]);
+    return visibleItems;
+};

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

@@ -9,7 +9,7 @@ import { Selection, Focus } from '@tiptap/extensions';
 import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import clsx from 'clsx';
-import { isBoolean, omit } from 'lodash';
+import { isBoolean } from 'lodash';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import { DEFAULT_TEXT_STYLE } from './constants';
@@ -23,6 +23,7 @@ import { Indent } from './extensions/Indent';
 import { LetterSpacing } from './extensions/LetterSpacing';
 import { LineHeight } from './extensions/LineHeight';
 import { CustomLink } from './extensions/Link';
+import { CustomListItem } from './extensions/ListItem';
 import { CustomOrderedList } from './extensions/OrderedList';
 import { SmartTag } from './extensions/SmartTag';
 import { TextTransform } from './extensions/TextTransform';
@@ -104,15 +105,12 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
                 link: false,
                 bulletList: false,
                 orderedList: false,
-                listItem: {
-                    HTMLAttributes: {
-                        style: 'line-height:normal;',
-                    },
-                },
+                listItem: false,
                 undoRedo: {
                     depth: 100,
                 },
             }),
+            CustomListItem,
             CustomUnorderedList,
             CustomOrderedList,
             FontWeight.configure({
@@ -307,7 +305,7 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
     }
     return (_jsxs(_Fragment, { children: [_jsx(StyledEditorContent, { className: clsx(`${ANTSOMI_COMPONENT_PREFIX_CLS}-text-editor`, className), "$textStyle": defaultTextStyle, style: {
                     // Inline styles apply to inner html elements (support email client)
-                    ...omit(defaultTextStyle, ['fontSize']),
+                    ...defaultTextStyle,
                     ...style,
                 }, id: id, ref: contentRef, editor: editor, ...dataAttributes }), _jsx(LinkPopover, { editor: editor }), !linkFormVisible && (_jsxs(_Fragment, { children: [_jsx(BubbleMenu, { pluginKey: "linkPreviewBubbleMenu", ...bubbleMenuProps, appendTo: bubbleMenuContainer.current, editor: editor, shouldShow: shouldShowLinkPreview, children: _jsx(LinkPreviewToolbar, { editor: editor, linkHanlder: {
                                 onUpsert: () => {

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

@@ -0,0 +1,10 @@
+/**
+ * Custom ListItem extension that extends the default TipTap ListItem
+ * with custom Backspace behavior to prevent merging paragraphs into lists
+ *
+ * This extension only overrides keyboard shortcuts while maintaining
+ * all other default ListItem functionality (HTML parsing, rendering, etc.)
+ *
+ * @see https://www.tiptap.dev/api/nodes/list-item
+ */
+export declare const CustomListItem: import("@tiptap/core").Node<import("@tiptap/extension-list").ListItemOptions, any>;

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

@@ -0,0 +1,93 @@
+import { ListItem } from '@tiptap/extension-list-item';
+/**
+ * Custom ListItem extension that extends the default TipTap ListItem
+ * with custom Backspace behavior to prevent merging paragraphs into lists
+ *
+ * This extension only overrides keyboard shortcuts while maintaining
+ * all other default ListItem functionality (HTML parsing, rendering, etc.)
+ *
+ * @see https://www.tiptap.dev/api/nodes/list-item
+ */
+export const CustomListItem = ListItem.extend({
+    addOptions() {
+        return {
+            HTMLAttributes: {
+                style: 'line-height:normal;',
+            },
+            bulletListTypeName: 'customUnorderedList',
+            orderedListTypeName: 'customOrderedList',
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            // Keep default keyboard shortcuts from parent ListItem
+            Enter: () => this.editor.commands.splitListItem(this.name),
+            Tab: () => this.editor.commands.sinkListItem(this.name),
+            'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
+            /**
+             * Custom Backspace handler to prevent merging empty paragraphs into lists
+             *
+             * Behavior:
+             * 1. Check if cursor is at the start of a paragraph
+             * 2. Check if the node before is a list (ordered or unordered)
+             * 3. If both conditions are true and paragraph is empty, delete the paragraph
+             * 4. Otherwise, use default backspace behavior
+             */
+            Backspace: () => {
+                const { state } = this.editor;
+                const { selection } = state;
+                const { $from, empty } = selection;
+                // Only handle if selection is empty (cursor position, not text selection)
+                if (!empty) {
+                    return false;
+                }
+                // Check if cursor is at the start of current node
+                const isAtStart = $from.parentOffset === 0;
+                if (!isAtStart) {
+                    return false;
+                }
+                // Get current node (should be a paragraph)
+                const currentNode = $from.parent;
+                // Only handle paragraphs
+                if (currentNode.type.name !== 'paragraph') {
+                    return false;
+                }
+                // Get the index of current paragraph in its parent (usually doc)
+                const paragraphDepth = $from.depth;
+                const indexInParent = $from.index(paragraphDepth - 1);
+                // Check if there's a node before (index > 0)
+                if (indexInParent === 0) {
+                    return false;
+                }
+                // Get parent node (usually doc) and the node before current paragraph
+                const parent = $from.node(paragraphDepth - 1);
+                const nodeBefore = parent.child(indexInParent - 1);
+                if (!nodeBefore) {
+                    return false;
+                }
+                // Check if the node before is a list (ordered or unordered)
+                const isListBefore = nodeBefore.type.name === this.options.orderedListTypeName ||
+                    nodeBefore.type.name === this.options.bulletListTypeName;
+                if (!isListBefore) {
+                    return false;
+                }
+                // Check if current paragraph is empty
+                const isParagraphEmpty = currentNode.content.size === 0;
+                if (!isParagraphEmpty) {
+                    // If paragraph has content, allow default backspace to handle
+                    return false;
+                }
+                // Calculate the exact positions of the paragraph node
+                // We need to delete from the position before the paragraph open tag
+                // to the position after the paragraph close tag
+                const paragraphPos = $from.before();
+                const paragraphEndPos = $from.after();
+                // Delete the entire paragraph node using deleteRange
+                return this.editor.commands.deleteRange({
+                    from: paragraphPos,
+                    to: paragraphEndPos,
+                });
+            },
+        };
+    },
+});

package/es/components/organism/TextEditor/styled.js

@@ -12,6 +12,7 @@ export const StyledEditorContent = styled(EditorContent) `
 
       // Some apps have global p styles, so we need to override it
 
+      font-size: ${p => p.$textStyle.fontSize};
       line-height: ${p => p.$textStyle.lineHeight};
       font-family: ${p => p.$textStyle.fontFamily};
       color: ${p => p.$textStyle.color};

package/es/components/organism/TextEditor/ui/FontPopover/FontPopover.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Typography } from 'antd';
 import { SearchPopover, VirtualizedMenu } from '@antscorp/antsomi-ui/es/components/molecules';
 import { FontGroupTitle, PopoverTrigger } from './styled';
@@ -52,6 +52,7 @@ export const FontPopover = memo((props) => {
     const itemSize = 30;
     const itemSpacing = 4;
     const activeFontName = fontValue?.font.fontFamily.name;
+    const inputSearchRef = useRef(null);
     const [search, setSearch] = useState('');
     const [open, setOpen] = useState(false);
     const [fontItemsSize, setFontItemSize] = useDebounce(0, 200);
@@ -83,10 +84,19 @@ export const FontPopover = memo((props) => {
         const listSize = calInlineListSize(Math.min(items.length, 6), itemSize, itemSpacing);
         setFontItemSize(listSize);
     }, [items.length, setFontItemSize]);
+    useEffect(() => {
+        if (open) {
+            // Use setTimeout to ensure the popover content is fully mounted in the DOM
+            const timeoutId = setTimeout(() => {
+                inputSearchRef.current?.focus();
+            }, 0);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [open]);
     return (_jsx(SearchPopover, { open: open, placement: "bottomLeft", onOpenChange: handleOpenChange, getPopupContainer: () => bubbleMenuContainer || document.body, inputSearchProps: {
             value: search,
             onAfterChange: setSearch,
-        }, overlayClassName: "font-popover-overlay", content: _jsx("div", { className: "list-font-root", style: {
+        }, inputSearchRef: inputSearchRef, overlayClassName: "font-popover-overlay", content: _jsx("div", { className: "list-font-root", style: {
                 height: `${fontItemsSize}px`,
             }, children: _jsx(VirtualizedMenu, { itemSize: itemSize, inlinePadding: 0, itemSpacing: itemSpacing, selectable: false, items: items }) }), children: _jsx(PopoverTrigger, { className: "font-popover-trigger", children: _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: activeFontName }) }) }));
 });

package/es/components/organism/TextEditor/ui/TextAlignSelect/TextAlignSelect.js

@@ -52,9 +52,7 @@ export const TextAlignSelect = (props) => {
         editor: editor,
         selector: ({ editor: editorInstance }) => {
             const alignment = ['left', 'center', 'right', 'justify'].find(alignment => editorInstance?.isActive({ textAlign: alignment }));
-            return {
-                currentAlignment: alignment || 'left',
-            };
+            return { currentAlignment: alignment };
         },
     });
     const selectedOption = useMemo(() => textAlignOptions.find(option => option.value === currentAlignment), [currentAlignment]);

package/es/components/organism/TextEditor/ui/Toolbar/actions/FontSizeAction.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useTextEditorStore } from '../../../provider';
 import { FontSizeInput, } from '@antscorp/antsomi-ui/es/components/molecules';
 import styled from 'styled-components';
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useThrottledCallback } from 'use-debounce';
 import { useEditorState } from '@tiptap/react';
 import { toString } from 'lodash';
@@ -30,6 +30,11 @@ export const FontSizeAction = memo(({ editor, throttled = 100, defaultFontSize =
         },
     });
     const [currentFontSize, setCurrentFontSize] = useState(numberFontSize);
+    useEffect(() => {
+        if (numberFontSize) {
+            setCurrentFontSize(numberFontSize);
+        }
+    }, [numberFontSize]);
     const updateEditorFontSize = useThrottledCallback((v) => {
         if (v === numberFontSize)
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.7-beta.24",
+  "version": "1.3.7-beta.26",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",