@antscorp/antsomi-ui 2.0.110 → 2.0.111

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

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable react/no-array-index-key */
+import { ColorPicker as AntdColorPicker, Button, Col, Flex, Row, Typography } from 'antd';
+import tinycolor from 'tinycolor2';
+import { chunk } from 'lodash';
+import { TEXT_EDITOR_CONSTANTS } from '../../constants';
+import clsx from 'clsx';
+import { forwardRef, useEffect, useState, useImperativeHandle } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { useTextEditorStore } from '../../provider';
+import { ColorBox } from '../../styled';
+import { TextEditorPopover } from '../Popover';
+import { useColorSet } from '../../hooks';
+import { CheckSlimIcon } from '@antscorp/antsomi-ui/es/components/icons';
+const { COLOR_GIRD } = TEXT_EDITOR_CONSTANTS;
+const useUsedColors = (params) => {
+    const { numberOfColors = 10 } = params || {};
+    const { colors: usedColors, setColors: updateColor } = useColorSet();
+    const addColor = (color) => {
+        const updatedColors = [...usedColors];
+        if (!usedColors.includes(color)) {
+            updatedColors.push(color);
+            if (usedColors.length >= numberOfColors) {
+                updatedColors.shift();
+            }
+        }
+        updateColor(updatedColors);
+    };
+    return { usedColors, addColor };
+};
+const CustomColorPicker = (props) => {
+    const { onApply, currentColor } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const [color, setColor] = useState(currentColor || tinycolor('red').toHex());
+    const { addColor: addUsedColor } = useUsedColors();
+    const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
+    useEffect(() => {
+        if (tinycolor(currentColor).isValid()) {
+            setColor(currentColor);
+        }
+    }, [currentColor]);
+    const handleChangeColor = useDebouncedCallback((newColor) => {
+        setColor(newColor);
+    }, 50);
+    const handleClose = () => {
+        if (tinycolor(currentColor).isValid()) {
+            setColor(currentColor);
+        }
+        setIsOpen(false);
+    };
+    const handleOpenChange = (visible) => {
+        if (visible)
+            return setIsOpen(true);
+        handleClose();
+    };
+    const handleApply = () => {
+        addUsedColor(color);
+        onApply?.(color);
+        handleClose();
+    };
+    return (_jsx(AntdColorPicker, { getPopupContainer: () => bubbleMenuContainer || document.body, open: isOpen, value: color, placement: "bottomRight", panelRender: panel => (_jsxs(_Fragment, { children: [panel, _jsxs(Flex, { justify: "end", gap: 8, style: { marginTop: 10 }, children: [_jsx(Button, { type: "text", onClick: handleClose, children: "Cancel" }), _jsx(Button, { type: "primary", onClick: handleApply, children: "Apply" })] })] })), onChange: newColor => {
+            handleChangeColor(newColor.toRgbString());
+        }, onOpenChange: handleOpenChange, children: _jsx(Button, { children: "Customize" }) }));
+};
+const ColorSwatch = (props) => {
+    const { color, isActive, onClick } = props;
+    const handleClick = (e) => {
+        e.stopPropagation();
+        onClick?.(e);
+    };
+    return (_jsx(ColorBox, { "$color": color, className: clsx({
+            'is-active': isActive,
+        }), onClick: handleClick, children: isActive ? _jsx(CheckSlimIcon, { color: tinycolor(color).isDark() ? 'white' : 'black' }) : null }));
+};
+const UsedColors = (props) => {
+    const { onChange, value } = props;
+    const { usedColors, addColor: addUsedColor } = useUsedColors();
+    const rowColorSize = COLOR_GIRD[0].length;
+    const handleClick = (color) => {
+        addUsedColor(color);
+        onChange?.(color);
+    };
+    if (usedColors.length === 0) {
+        return null;
+    }
+    return (_jsxs(Flex, { vertical: true, gap: 2, children: [_jsx(Typography.Text, { children: "Recently used" }), chunk(usedColors, rowColorSize).map((row, rowIndex) => (_jsx(Row, { gutter: [2, 2], children: row.map((color, colIndex) => (_jsx(Col, { span: 24 / rowColorSize, children: _jsx(ColorSwatch, { color: color, isActive: color === value, onClick: () => handleClick(color) }) }, `${rowIndex}-${colIndex}`))) }, rowIndex)))] }));
+};
+const GridColor = (props) => {
+    const { onChange, value, colorGrid = COLOR_GIRD } = props;
+    const rowColorSize = colorGrid[0].length;
+    const { addColor: addUsedColor } = useUsedColors();
+    const handleClick = (color) => {
+        addUsedColor(color);
+        onChange?.(color);
+    };
+    return (_jsx(Flex, { vertical: true, gap: 2, children: colorGrid.map((row, rowIndex) => (_jsx(Row, { gutter: [2, 2], wrap: false, children: row.map((color, colIndex) => (_jsx(Col, { span: 24 / rowColorSize, children: _jsx(ColorSwatch, { color: color, isActive: tinycolor.equals(color, value), onClick: () => handleClick(color) }) }, `${rowIndex}-${colIndex}`))) }, rowIndex))) }));
+};
+export const ColorPicker = forwardRef((props, ref) => {
+    const { value = '', onChange, children, popoverProps } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        if (popoverProps?.open !== undefined) {
+            setIsOpen(popoverProps.open);
+        }
+    }, [popoverProps?.open]);
+    const handleChangeOpen = (open) => {
+        setIsOpen(open);
+        if (popoverProps?.onOpenChange) {
+            popoverProps.onOpenChange(open);
+        }
+    };
+    const handleOnChange = (color) => {
+        onChange?.(tinycolor(color).toRgbString());
+        handleChangeOpen(false);
+    };
+    useImperativeHandle(ref, () => ({
+        setOpen: handleChangeOpen,
+    }));
+    const colorGrid = _jsx(GridColor, { onChange: handleOnChange, value: value });
+    const usedColors = _jsx(UsedColors, { onChange: handleOnChange, value: value });
+    const customColorPicker = _jsx(CustomColorPicker, { currentColor: value, onApply: handleOnChange });
+    let content = (_jsxs(Flex, { vertical: true, gap: 8, children: [colorGrid, usedColors, customColorPicker] }));
+    if (typeof popoverProps?.content === 'function') {
+        content = popoverProps.content({
+            colorGrid,
+            usedColors,
+            customColorPicker,
+        });
+    }
+    return (_jsx(TextEditorPopover, { placement: "bottomLeft", ...popoverProps, open: isOpen, content: content, onOpenChange: handleChangeOpen, children: children }));
+});

package/es/components/organism/TextEditor/ui/ColorPicker/index.d.ts

@@ -0,0 +1 @@
+export { ColorPicker } from './ColorPicker';

package/es/components/organism/TextEditor/ui/ColorPicker/index.js

@@ -0,0 +1 @@
+export { ColorPicker } from './ColorPicker';

package/es/components/organism/TextEditor/ui/DropdownButton/DropdownButton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type TextEditorButtonProps } from '../Button';
+type DropdownButtonProps = {
+    children?: React.ReactNode;
+    value?: string;
+    options?: {
+        value: string;
+        label: React.ReactNode;
+        disabled?: boolean;
+    }[];
+    tooltipProps?: TextEditorButtonProps['tooltipProps'];
+    disabled?: boolean;
+    className?: string;
+    onClickOption?: (key: string) => void;
+};
+export declare const DropdownButton: (props: DropdownButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown } from 'antd';
+import { useState } from 'react';
+import { TextEditorButton } from '../Button';
+import { ArrowDropDownIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import styled from 'styled-components';
+import clsx from 'clsx';
+const StyledTriggerButton = styled(TextEditorButton) `
+  &.antsomi-dropdown-trigger.antsomi-btn {
+    gap: 0;
+    padding: 0;
+    width: 40px;
+    height: 24px;
+  }
+
+  &.is-open {
+    svg.icon-dropdown {
+      transform: rotate(180deg);
+    }
+  }
+`;
+export const DropdownButton = (props) => {
+    const { className, children, disabled, tooltipProps, options = [], value, onClickOption } = props;
+    const selectedOpt = value ? options.filter(opt => opt.value === value) : [];
+    const isSelected = selectedOpt.length > 0;
+    const [isOpen, setIsOpen] = useState(false);
+    const handleOpenChange = (visible) => {
+        if (disabled)
+            return;
+        setIsOpen(visible);
+    };
+    return (_jsx(Dropdown, { trigger: ['click'], className: clsx(className, {
+            'is-active': isSelected,
+            'is-open': isOpen,
+        }), disabled: disabled, placement: "bottomLeft", menu: {
+            style: {
+                maxHeight: 240,
+                overflow: 'auto',
+            },
+            items: options.map(opt => ({
+                key: opt.value,
+                label: opt.label,
+                disabled: opt.disabled,
+            })),
+            selectedKeys: selectedOpt.map(opt => opt.value),
+            onClick: e => {
+                const { key } = e;
+                onClickOption?.(key);
+            },
+        }, open: isOpen, onOpenChange: handleOpenChange, children: _jsxs(StyledTriggerButton, { tooltipProps: tooltipProps, isActive: isSelected, disabled: disabled, children: [children, _jsx(ArrowDropDownIcon, { className: "icon-dropdown", size: 16 })] }) }));
+};

package/es/components/organism/TextEditor/ui/DropdownButton/index.d.ts

@@ -0,0 +1 @@
+export { DropdownButton } from './DropdownButton';

package/es/components/organism/TextEditor/ui/DropdownButton/index.js

@@ -0,0 +1 @@
+export { DropdownButton } from './DropdownButton';

package/es/components/organism/TextEditor/ui/Emoji/EmojiList.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { EmojiNodeAttrs, SuggestionItem } from '../../extensions/Emoji';
+import { SuggestionProps } from '@tiptap/suggestion';
+export declare const ITEM_SIZE = 28;
+export type EmojiListRef = {
+    onKeyDown: (args: {
+        event: KeyboardEvent;
+    }) => boolean;
+};
+export type EmojiListProps = SuggestionProps<SuggestionItem, EmojiNodeAttrs>;
+export declare const EmojiList: import("react").ForwardRefExoticComponent<EmojiListProps & import("react").RefAttributes<EmojiListRef>>;

package/es/components/organism/TextEditor/ui/Emoji/EmojiList.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Typography } from 'antd';
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { COMPONENT_CLS } from '../../constants';
+import { VirtualizedMenu } from '@antscorp/antsomi-ui/es/components/molecules';
+import clsx from 'clsx';
+export const ITEM_SIZE = 28;
+export const EmojiList = forwardRef((props, ref) => {
+    const { items = [] } = props;
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selectItem = (index) => {
+        const item = items[index];
+        if (item) {
+            props.command({ name: item.name });
+        }
+    };
+    const upHandler = () => {
+        setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    };
+    const downHandler = () => {
+        setSelectedIndex((selectedIndex + 1) % props.items.length);
+    };
+    const enterHandler = () => {
+        selectItem(selectedIndex);
+    };
+    useEffect(() => setSelectedIndex(0), [props.items]);
+    useImperativeHandle(ref, () => ({
+        onKeyDown: ({ event }) => {
+            if (event.key === 'ArrowUp') {
+                upHandler();
+                return true;
+            }
+            if (event.key === 'ArrowDown') {
+                downHandler();
+                return true;
+            }
+            if (event.key === 'Enter') {
+                enterHandler();
+                return true;
+            }
+            return false;
+        },
+    }));
+    if (items.length <= 0) {
+        return null;
+    }
+    return (_jsx(VirtualizedMenu, { className: `${COMPONENT_CLS}-emoji-list`, itemSize: ITEM_SIZE, selected: items.at(selectedIndex) ? [items[selectedIndex].slug] : [], focusedKey: items[selectedIndex]?.slug, onClick: item => {
+            const idx = items.findIndex(i => i.slug === item.item.key);
+            if (idx !== -1) {
+                selectItem(idx);
+            }
+        }, items: items.map(i => ({
+            key: i.slug,
+            className: clsx(`${COMPONENT_CLS}-emoji-item`),
+            label: (_jsxs(_Fragment, { children: [_jsx("span", { style: {
+                            lineHeight: 1,
+                            fontSize: ITEM_SIZE - 8,
+                        }, children: i.emoji }), _jsxs(Typography.Text, { ellipsis: {
+                            tooltip: {
+                                title: i.slug,
+                                mouseEnterDelay: 0.3,
+                                placement: 'right',
+                            },
+                        }, children: [":", i.slug] }, i.slug)] })),
+        })) }));
+});

package/es/components/organism/TextEditor/ui/Emoji/index.d.ts

@@ -0,0 +1,2 @@
+export { EmojiList } from './EmojiList';
+export { suggestion as emojiSuggestion } from './suggestion';

package/es/components/organism/TextEditor/ui/Emoji/index.js

@@ -0,0 +1,2 @@
+export { EmojiList } from './EmojiList';
+export { suggestion as emojiSuggestion } from './suggestion';

package/es/components/organism/TextEditor/ui/Emoji/suggestion.d.ts

@@ -0,0 +1,4 @@
+import { EmojiOptions } from '../../extensions/Emoji';
+export declare const suggestion: ({ container, }: {
+    container?: HTMLElement | (() => HTMLElement);
+}) => EmojiOptions['suggestion'];

package/es/components/organism/TextEditor/ui/Emoji/suggestion.js

@@ -0,0 +1,71 @@
+import { posToDOMRect, ReactRenderer } from '@tiptap/react';
+import { LIST_EMOJI } from '../../extensions/Emoji';
+import { EmojiList, ITEM_SIZE } from './EmojiList';
+import { computePosition, flip, shift } from '@floating-ui/dom';
+import { COMPONENT_CLS } from '../../constants';
+import { calInlineListSize } from '@antscorp/antsomi-ui/es/components/molecules/VirtualizedMenu/utils';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+const updatePosition = (editor, element, itemLength) => {
+    const virtualElement = {
+        getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
+    };
+    computePosition(virtualElement, element, {
+        placement: 'bottom-start',
+        strategy: 'absolute',
+        middleware: [shift(), flip()],
+    }).then(({ x, y, strategy }) => {
+        element.style.height = `${calInlineListSize(Math.min(itemLength, 6), ITEM_SIZE)}px`;
+        element.style.position = strategy;
+        element.style.left = `${x}px`;
+        element.style.top = `${y}px`;
+    });
+};
+export const suggestion = ({ container }) => ({
+    items: ({ query }) => LIST_EMOJI.filter(i => searchStringQuery(i.slug, query)),
+    render() {
+        let renderer;
+        const safeGetRenndererEl = () => {
+            if (renderer.element instanceof HTMLElement) {
+                return renderer.element;
+            }
+            throw Error('ReactRenderer element should be HTMLElement');
+        };
+        const destroy = () => {
+            renderer.destroy();
+            safeGetRenndererEl().remove();
+        };
+        return {
+            onStart: props => {
+                renderer = new ReactRenderer(EmojiList, {
+                    props,
+                    editor: props.editor,
+                });
+                if (!props.clientRect) {
+                    return;
+                }
+                const rendererEl = safeGetRenndererEl();
+                rendererEl.classList.add(`${COMPONENT_CLS}-emoji-popover`);
+                ((typeof container === 'function' ? container() : container) || document.body).appendChild(rendererEl);
+                updatePosition(props.editor, rendererEl, props.items.length);
+            },
+            onUpdate(props) {
+                renderer.updateProps(props);
+                const rendererEl = safeGetRenndererEl();
+                if (!props.clientRect) {
+                    return;
+                }
+                updatePosition(props.editor, rendererEl, props.items.length);
+            },
+            onKeyDown(props) {
+                if (props.event.key === 'Escape') {
+                    destroy();
+                    return true;
+                }
+                return renderer.ref?.onKeyDown(props) || false;
+            },
+            onExit() {
+                destroy();
+            },
+        };
+    },
+});

package/es/components/organism/TextEditor/ui/FontPopover/FontItem.d.ts

@@ -0,0 +1,2 @@
+import { FontItemProps } from './types';
+export declare const FontItem: (props: FontItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FONT_WEIGHT_MAP } from '../../constants';
+import clsx from 'clsx';
+import { Flex, Typography } from 'antd';
+import { TextEditorPopover } from '../Popover';
+import { ChevronRightIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { useState } from 'react';
+export const FontItem = (props) => {
+    const { fontConfig, active, onSelectFont, onOpenChange } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const numOfWeight = fontConfig.fontWeight.length;
+    const isActive = active?.font.fontFamily.name === fontConfig.fontFamily.name;
+    const fontNameContent = (_jsxs(Flex, { className: clsx('font-popover-item', { active: isOpen || isActive }), style: { fontFamily: fontConfig.fontFamily.name }, onClick: () => onSelectFont?.(400), align: "center", justify: "space-between", children: [fontConfig.fontFamily.name, numOfWeight > 1 && _jsx(ChevronRightIcon, { size: 14 })] }));
+    const handleOpenChange = (newOpen) => {
+        setIsOpen(newOpen);
+        onOpenChange?.(newOpen);
+    };
+    if (numOfWeight < 2) {
+        return fontNameContent;
+    }
+    return (_jsx(TextEditorPopover, { open: isOpen, onOpenChange: handleOpenChange, placement: "rightTop", trigger: ['hover'], arrow: false, overlayClassName: "font-weight-popover", destroyTooltipOnHide: true, content: _jsx(Flex, { vertical: true, gap: 4, children: fontConfig.fontWeight.map(weight => (_jsx(Typography.Text, { className: clsx('font-weight-item', {
+                    active: active?.weight === weight,
+                }), style: {
+                    fontFamily: fontConfig.fontFamily.name,
+                    fontWeight: weight,
+                }, onClick: () => onSelectFont?.(weight), children: FONT_WEIGHT_MAP[weight] }, weight))) }), children: fontNameContent }));
+};

package/es/components/organism/TextEditor/ui/FontPopover/FontPopover.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { FontConfig, FontGroupingFunction, GroupOrderFunction } from '../../types';
+import { FontPopoverProps } from './types';
+/**
+ * Converts font configurations to menu items with optional grouping
+ * @param fonts Array of font configurations
+ * @param renderLabel Function to render font label
+ * @param fontGroupingFn Optional function to group fonts, or false to disable grouping
+ * @param groupOrder Optional array of group keys or function to define display order
+ * @returns Array of menu items for font selection
+ */
+export declare const createFontMenuItems: (fonts: FontConfig[], renderLabel: (font: FontConfig) => React.ReactNode, fontGroupingFn?: FontGroupingFunction | false, groupOrder?: string[] | GroupOrderFunction) => {
+    key: string;
+    label: React.ReactNode;
+}[];
+export declare const FontPopover: import("react").MemoExoticComponent<(props: FontPopoverProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,102 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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';
+import { calInlineListSize } from '@antscorp/antsomi-ui/es/components/molecules/VirtualizedMenu/utils';
+import { useTextEditorStore } from '../../provider';
+import { groupFonts, sortFontsByName } from '../../utils';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { FontItem } from './FontItem';
+import { useDebounce } from 'use-debounce';
+/**
+ * Converts font configurations to menu items with optional grouping
+ * @param fonts Array of font configurations
+ * @param renderLabel Function to render font label
+ * @param fontGroupingFn Optional function to group fonts, or false to disable grouping
+ * @param groupOrder Optional array of group keys or function to define display order
+ * @returns Array of menu items for font selection
+ */
+export const createFontMenuItems = (fonts, renderLabel, fontGroupingFn, groupOrder) => {
+    const items = [];
+    const mapFontToMenuItem = (font) => ({
+        key: font.fontFamily.name,
+        label: renderLabel(font),
+    });
+    const appendFontGroup = (groupKey, groupLabel, groupFonts) => {
+        if (groupFonts.length <= 0)
+            return;
+        items.push({
+            key: groupKey,
+            displayOnly: true,
+            label: _jsx(FontGroupTitle, { className: "font-popover-item", children: groupLabel }),
+        }, ...groupFonts.map(mapFontToMenuItem));
+    };
+    if (fontGroupingFn !== false) {
+        const groupedFonts = groupFonts(fonts, {
+            fontGroupingFn,
+            groupOrder,
+        });
+        // Use Map.forEach to maintain insertion order
+        groupedFonts.forEach(({ label, fonts: groupFonts }, key) => {
+            appendFontGroup(key, label, groupFonts);
+        });
+    }
+    else {
+        items.push(...fonts.map(mapFontToMenuItem));
+    }
+    return items;
+};
+export const FontPopover = memo((props) => {
+    const { fonts = [], value: fontValue, onChange, fontGrouping, groupOrder } = 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);
+    const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
+    const filteredFonts = useMemo(() => {
+        let results = fonts.filter(font => searchStringQuery(font.fontFamily.name, search));
+        results = sortFontsByName(results);
+        return results;
+    }, [fonts, search]);
+    const handleClose = useCallback(() => {
+        setOpen(false);
+        setSearch('');
+    }, []);
+    const handleChangeFont = useCallback((font, weight = 400) => {
+        onChange?.(font, weight);
+        handleClose();
+    }, [onChange, handleClose]);
+    const handleOpenChange = (newOpen) => {
+        setOpen(newOpen);
+        if (newOpen === false) {
+            handleClose();
+        }
+    };
+    const items = useMemo(() => {
+        const renderLabel = (fontConfig) => (_jsx(FontItem, { fontConfig: fontConfig, active: fontValue ? { font: fontValue.font, weight: fontValue.weight } : undefined, onSelectFont: weight => handleChangeFont(fontConfig, weight) }));
+        return createFontMenuItems(filteredFonts, renderLabel, fontGrouping, groupOrder);
+    }, [filteredFonts, fontGrouping, groupOrder, fontValue, handleChangeFont]);
+    useEffect(() => {
+        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,
+        }, 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/FontPopover/styled.d.ts

@@ -0,0 +1,2 @@
+export declare const PopoverTrigger: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FontGroupTitle: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,36 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const PopoverTrigger = styled.div `
+  &.font-popover-trigger {
+    width: 100px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    padding: 0 7px;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: ${THEME.token?.fontSize || 12}px;
+    border-bottom: 1px solid ${THEME.token?.blue1};
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: ${THEME.token?.blue};
+    }
+  }
+`;
+export const FontGroupTitle = styled.div `
+  color: ${THEME.token?.bw8};
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+
+  &.font-popover-item {
+    cursor: default;
+
+    &:hover {
+      background-color: white;
+    }
+  }
+`;

package/es/components/organism/TextEditor/ui/FontPopover/types.d.ts

@@ -0,0 +1,35 @@
+import { FontConfig, FontGroupingFunction, GroupOrderFunction } from '../../types';
+/**
+ * Props for FontPopover component
+ */
+export type FontPopoverProps = {
+    /** Array of available font configurations */
+    fonts?: FontConfig[];
+    /** Currently selected font and weight */
+    value?: {
+        font: FontConfig;
+        weight: number;
+    };
+    /** Callback when font selection changes */
+    onChange?: (font: FontConfig, weight: number) => void;
+    /** Function to group fonts or false to disable grouping */
+    fontGrouping?: FontGroupingFunction | false;
+    /** Array of group keys or function to define display order. Groups not in this array will appear after ordered groups */
+    groupOrder?: string[] | GroupOrderFunction;
+};
+/**
+ * Props for FontItem component
+ */
+export type FontItemProps = {
+    /** Font configuration to display */
+    fontConfig: FontConfig;
+    /** Currently active font and weight */
+    active?: {
+        font: FontConfig;
+        weight: number;
+    };
+    /** Callback when font weight is selected */
+    onSelectFont?: (fontweight: number) => void;
+    /** Callback when popover open state changes */
+    onOpenChange?: (open: boolean) => void;
+};

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

@@ -0,0 +1 @@
+export {};

package/es/components/organism/TextEditor/ui/LinkInsertForm/LinkInsertForm.d.ts

@@ -0,0 +1,16 @@
+import { Editor } from '@tiptap/core';
+import React from 'react';
+import type { LinkFormData } from '../../types';
+export type LinkInsertFormProps = {
+    /** TipTap editor instance */
+    editor: Editor;
+    /** Form mode: insert or edit */
+    mode: 'insert' | 'edit';
+    /** Initial form data */
+    initialData: LinkFormData;
+    /** Callback when form is submitted */
+    onSubmit: () => void;
+    /** Callback when form is cancelled */
+    onCancel: () => void;
+};
+export declare const LinkInsertForm: React.FC<LinkInsertFormProps>;