@antscorp/antsomi-ui 2.0.90 → 2.0.91-text-editor-beta.1

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { JSONContent, Editor } from '@tiptap/core';
+import { LinkAttrs } from './extensions/Link';
+import { SmartTagAttrs } from './extensions/SmartTag';
+import { ORDERED_LIST_STYLE_TYPE, UNORDERED_LIST_STYLE_TYPE } from './constants';
+export type HandleSmartTagRef = {
+    setSmartTag: (attrs: SmartTagAttrs) => void;
+    deleteSmartTag: (id: string) => void;
+    updateSmartTagAttrs: (id: string, updatedAttrs: Omit<SmartTagAttrs, 'id'>) => void;
+};
+export type HandleLinkRef = {
+    setLink: (attrs: LinkAttrs) => void;
+    deleteLink: (id: string) => void;
+    updateLinkAttrs: (id: string, updatedAttrs: Omit<LinkAttrs, 'id'>) => void;
+};
+export type TextEditorRef = HandleSmartTagRef & HandleLinkRef & {
+    blur: (perserveSelection?: boolean) => void;
+    style?: CSSStyleDeclaration;
+    readonly editor: Editor | null;
+};
+export type SmartTagHandler = Partial<{
+    edit: (id: string, event: React.MouseEvent) => void;
+    setNew: (args: {
+        selectionText: string;
+    }) => void;
+}>;
+export type LinkHandler = Partial<{
+    setNew: (args: {
+        selectionText: string;
+    }) => void;
+    edit: (args: {
+        id: string;
+        selectionText: string;
+    }) => void;
+}>;
+export type FontConfig = {
+    fontFamily: {
+        name: string;
+        fallback?: string[];
+    };
+    fontWeight: number[];
+};
+export type Config = Partial<{
+    SmartTag: Partial<{
+        highlight: boolean;
+    }>;
+    Link: Partial<{
+        highlightDynamic: boolean;
+    }>;
+    FontFamily: {
+        fonts: FontConfig[];
+    };
+    UnorderedList: {
+        useCustomBullet?: boolean;
+    };
+}>;
+export type TextStyle = {
+    fontFamily: string;
+    fontSize: string;
+    color: string;
+    backgroundColor: string;
+    lineHeight: string;
+    fontWeight: string;
+    letterSpacing: string;
+};
+export type TextEditorProps = {
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    initialContent?: string;
+    config?: Config;
+    smartTagHandler?: SmartTagHandler;
+    linkHandler?: LinkHandler;
+    editable?: boolean;
+    bubbleMenuProps?: {
+        container?: HTMLElement | null;
+    };
+    defaultTextStyle?: Partial<TextStyle>;
+    dataAttributes?: Record<`data-${string}`, unknown>;
+    onUpdateDebounced?: number;
+    onFocus?: (event: FocusEvent) => void;
+    onUpdate?: (args: {
+        html: string;
+        text: string;
+        json: JSONContent;
+    }) => void;
+    onCreate?: (args: {
+        html: string;
+        text: string;
+        json: JSONContent;
+    }) => void;
+};
+export type OrderedListStyleType = (typeof ORDERED_LIST_STYLE_TYPE)[keyof typeof ORDERED_LIST_STYLE_TYPE];
+export type UnorderedListStyleType = (typeof UNORDERED_LIST_STYLE_TYPE)[keyof typeof UNORDERED_LIST_STYLE_TYPE];
+export declare const isOrderedListStyleType: (value: unknown) => value is OrderedListStyleType;
+export declare const isUnorderedListStyleType: (value: unknown) => value is UnorderedListStyleType;

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

@@ -0,0 +1,3 @@
+import { ORDERED_LIST_STYLE_TYPE, UNORDERED_LIST_STYLE_TYPE } from './constants';
+export const isOrderedListStyleType = (value) => typeof value === 'string' && Object.values(ORDERED_LIST_STYLE_TYPE).some(v => v === value);
+export const isUnorderedListStyleType = (value) => typeof value === 'string' && Object.values(UNORDERED_LIST_STYLE_TYPE).some(v => v === value);

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BubbleMenuPluginProps } from '../../extensions/BubbleMenu';
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> & React.HTMLAttributes<HTMLDivElement>;
+export declare const BubbleMenu: React.ForwardRefExoticComponent<Pick<Partial<Omit<Optional<BubbleMenuPluginProps, "pluginKey">, "element">>, "editor"> & Omit<Omit<Optional<BubbleMenuPluginProps, "pluginKey">, "element">, "editor"> & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { useCurrentEditor } from '@tiptap/react';
+import { forwardRef, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { BubbleMenuPlugin } from '../../extensions/BubbleMenu';
+import { useDeepCompareEffect, useIsMounted } from '@antscorp/antsomi-ui/es/hooks';
+import { useTextEditorStore } from '../../provider';
+import clsx from 'clsx';
+import { ANTSOMI_COMPONENT_PREFIX_CLS } from '@antscorp/antsomi-ui/es/constants';
+export const BubbleMenu = forwardRef(({ pluginKey = 'bubbleMenu', editor, updateDelay, resizeDelay, shouldShow = null, options, children, container, className, ...restProps }, ref) => {
+    const menuEl = useRef(document.createElement('div'));
+    const isMounted = useIsMounted();
+    const setIsShowBubbleMenu = useTextEditorStore(state => state.setIsShowBubbleMenu);
+    console.log({ setIsShowBubbleMenu });
+    if (typeof ref === 'function') {
+        ref(menuEl.current);
+    }
+    else if (ref) {
+        ref.current = menuEl.current;
+    }
+    const { editor: currentEditor } = useCurrentEditor();
+    useDeepCompareEffect(() => {
+        const bubbleMenuElement = menuEl.current;
+        bubbleMenuElement.className = clsx(className, `${ANTSOMI_COMPONENT_PREFIX_CLS}-text-editor-bubble-menu`);
+        if (editor?.isDestroyed || currentEditor?.isDestroyed) {
+            return;
+        }
+        const attachToEditor = editor || currentEditor;
+        if (!attachToEditor) {
+            console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.');
+            return;
+        }
+        const plugin = BubbleMenuPlugin({
+            updateDelay,
+            resizeDelay,
+            editor: attachToEditor,
+            element: bubbleMenuElement,
+            container,
+            pluginKey,
+            shouldShow,
+            onShow: () => {
+                if (isMounted()) {
+                    setIsShowBubbleMenu(true);
+                }
+            },
+            onHide: () => {
+                if (isMounted()) {
+                    setIsShowBubbleMenu(false);
+                }
+            },
+            options: {
+                ...options,
+                strategy: options?.strategy || 'absolute',
+                placement: options?.placement || 'top-start',
+                offset: options?.offset || {
+                    alignmentAxis: -20,
+                    mainAxis: 10,
+                },
+            },
+        });
+        attachToEditor.registerPlugin(plugin);
+        return () => {
+            attachToEditor.unregisterPlugin(pluginKey);
+            window.requestAnimationFrame(() => {
+                if (bubbleMenuElement.parentNode) {
+                    bubbleMenuElement.parentNode.removeChild(bubbleMenuElement);
+                }
+            });
+        };
+    }, [
+        editor,
+        container,
+        updateDelay,
+        resizeDelay,
+        pluginKey,
+        options,
+        className,
+        currentEditor,
+        isMounted,
+        shouldShow,
+        setIsShowBubbleMenu,
+    ]);
+    return createPortal(_jsx("div", { ...restProps, children: children }), menuEl.current);
+});

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

@@ -0,0 +1 @@
+export { BubbleMenu, type BubbleMenuProps } from './BubbleMenu';

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

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

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

@@ -0,0 +1 @@
+export declare const BubbleToolbar: () => void;

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

@@ -0,0 +1 @@
+export const BubbleToolbar = () => { };

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

@@ -0,0 +1 @@
+"use strict";

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

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

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Tooltip } from 'antd';
+import clsx from 'clsx';
+import styled from 'styled-components';
+const StyledButton = styled(Button) `
+  &.antsomi-btn.antsomi-btn-text {
+    height: 36px;
+    width: 36px;
+    padding: 0;
+    flex-shrink: 0;
+    border-radius: 4px;
+
+    &.is-active {
+      background-color: #e0ebf7;
+
+      &:hover {
+        background-color: #e0ebf7;
+      }
+    }
+
+    &:hover:not(:disabled, .is-active) {
+      background-color: #ebebeb;
+    }
+  }
+`;
+export const TextEditorButton = (props) => {
+    const { children, isActive, tooltipProps, className, disabled, ...restProps } = props;
+    return (_jsx(Tooltip, { mouseEnterDelay: 0.4, placement: "top", ...tooltipProps, open: disabled ? false : tooltipProps?.open, children: _jsx(StyledButton, { ...restProps, disabled: disabled, type: "text", className: clsx(className, {
+                'is-active': isActive,
+            }), children: children }) }));
+};

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

@@ -0,0 +1,2 @@
+export { TextEditorButton } from './Button';
+export { type TextEditorButtonProps } from './types';

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

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ButtonProps } from 'antd';
+export type TextEditorButtonProps = {
+    isActive?: boolean;
+    children?: React.ReactNode;
+    tooltipProps?: {
+        title?: string;
+        open?: boolean;
+    };
+} & Pick<ButtonProps, 'icon' | 'onClick' | 'className' | 'disabled' | 'className'>;

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

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

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { PopoverProps } from 'antd/lib';
+export interface ColorPickerProps {
+    value?: string;
+    children?: React.ReactNode;
+    onChange?: (value: string) => void;
+    popoverProps?: Omit<PopoverProps, 'content'> & {
+        content?: ((args: {
+            colorGrid: React.ReactNode;
+            usedColors: React.ReactNode;
+            customColorPicker: React.ReactNode;
+        }) => React.ReactNode) | React.ReactNode;
+    };
+}
+export interface ColorPickerRef {
+    setOpen: (open: boolean) => void;
+}
+export interface UsedColorsProps {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export interface GridColorProps {
+    value?: string;
+    colorGrid?: string[][];
+    onChange?: (value: string) => void;
+}
+export interface UseUsedColorsParams {
+    numberOfColors?: number;
+}
+export interface BoxColorProps {
+    color?: string;
+    isActive?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+}
+export interface CustomColorPickerProps {
+    currentColor: string;
+    onApply?: (value: string) => void;
+}
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<ColorPickerRef>>;

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?.(color);
+        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 { 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: 36px;
+  }
+
+  &.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] : [], 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 | null;
+}) => EmojiOptions['suggestion'];