@antscorp/antsomi-ui 2.0.82 → 2.0.83-text-editor-beta.1

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

@@ -0,0 +1,83 @@
+// Use case**: Template systems, corporate branding, user productivity
+import { useCallback } from 'react';
+import { useBroadcastedLocalStorage } from '@antscorp/antsomi-ui/es/hooks/useBroadcastedLocalStorage';
+export function useStylePresets(editor, options = {}) {
+    const { storageKey = 'text-editor-style-presets', maxPresets = 20, defaultPresets = [], } = options;
+    const { value: presets, setValue: setPresets } = useBroadcastedLocalStorage(storageKey, defaultPresets.map((preset, index) => ({
+        ...preset,
+        id: `default-${index}`,
+        createdAt: Date.now(),
+        usageCount: 0,
+    })));
+    // Create preset from current style
+    const createPreset = useCallback((name, description) => {
+        if (!editor)
+            return;
+        const { selection, storedMarks } = editor.state;
+        const { $from } = selection;
+        const marks = (storedMarks || $from.marks()).map(mark => ({
+            type: mark.type.name,
+            attrs: mark.attrs,
+        }));
+        const textStyle = editor.getAttributes('textStyle');
+        const preset = {
+            id: `preset-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+            name,
+            description,
+            marks,
+            textStyle,
+            createdAt: Date.now(),
+            usageCount: 0,
+        };
+        setPresets(prev => {
+            const updated = [preset, ...prev];
+            return updated.slice(0, maxPresets);
+        });
+        return preset;
+    }, [editor, maxPresets, setPresets]);
+    // Apply preset
+    const applyPreset = useCallback((presetId) => {
+        if (!editor)
+            return;
+        const preset = presets.find(p => p.id === presetId);
+        if (!preset)
+            return;
+        // Clear current formatting
+        editor.chain().focus().unsetAllMarks().run();
+        // Apply text style attributes
+        if (preset.textStyle.fontSize) {
+            editor.chain().setFontSize(preset.textStyle.fontSize).run();
+        }
+        if (preset.textStyle.fontFamily) {
+            editor.chain().setFontFamily(preset.textStyle.fontFamily).run();
+        }
+        if (preset.textStyle.color) {
+            editor.chain().setColor(preset.textStyle.color).run();
+        }
+        if (preset.textStyle.backgroundColor) {
+            editor.chain().setBackgroundColor(preset.textStyle.backgroundColor).run();
+        }
+        if (preset.textStyle.fontWeight) {
+            editor.chain().setFontWeight(preset.textStyle.fontWeight).run();
+        }
+        // Apply marks
+        preset.marks.forEach(({ type, attrs }) => {
+            editor.chain().setMark(type, attrs).run();
+        });
+        // Update usage count
+        setPresets(prev => prev.map(p => (p.id === presetId ? { ...p, usageCount: p.usageCount + 1 } : p)));
+    }, [editor, presets, setPresets]);
+    // Delete preset
+    const deletePreset = useCallback((presetId) => {
+        setPresets(prev => prev.filter(p => p.id !== presetId));
+    }, [setPresets]);
+    // Get popular presets
+    const getPopularPresets = useCallback((limit = 5) => [...presets].sort((a, b) => b.usageCount - a.usageCount).slice(0, limit), [presets]);
+    return {
+        presets,
+        createPreset,
+        applyPreset,
+        deletePreset,
+        getPopularPresets,
+    };
+}

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

@@ -0,0 +1,5 @@
+import { JSONContent } from '@tiptap/core';
+export { TextEditor } from './TextEditor';
+export type { TextEditorProps, TextEditorRef } from './types';
+export type { JSONContent as TextEditorJSONContent };
+export { TextEditorProvider } from './provider';

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

@@ -0,0 +1,2 @@
+export { TextEditor } from './TextEditor';
+export { TextEditorProvider } from './provider';

package/es/components/organism/TextEditor/index.scss

@@ -0,0 +1,26 @@
+.antsomi-text-editor-bubble-menu {
+  visibility: hidden;
+  position: absolute;
+  pointer-events: auto;
+  z-index: 999;
+}
+
+.antsomi-text-editor-emoji-popover {
+  position: absolute;
+  width: 180px;
+  z-index: 1000;
+
+  .antsomi-text-editor-emoji-list {
+    .antsomi-virtualize-menu-menu-inline {
+      background-color: white;
+      box-shadow: var(--antsomi-box-shadow-secondary);
+      border-radius: 10px;
+
+      .antsomi-virtualize-menu-item-label {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { StoreApi } from 'zustand';
+import type { TextEditorStore } from './store';
+export type TextEditorStoreApi = StoreApi<TextEditorStore>;
+export declare const TextEditorStoreContext: import("react").Context<TextEditorStoreApi | null>;
+export interface TextEditorProviderProps {
+    children: React.ReactNode | ((props: TextEditorStoreApi) => React.ReactNode);
+}
+export declare const TextEditorProvider: React.FC<React.PropsWithChildren<TextEditorProviderProps>>;
+export declare const useTextEditorStore: <T>(selector: (state: TextEditorStore) => T) => T;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import { createContext, useContext, useRef } from 'react';
+import { useStore } from 'zustand';
+// Store
+import { createTextEditorStore } from './store';
+export const TextEditorStoreContext = createContext(null);
+export const TextEditorProvider = ({ children, }) => {
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createTextEditorStore();
+    }
+    return (_jsx(TextEditorStoreContext.Provider, { value: storeRef.current, children: typeof children === 'function' ? children(storeRef.current) : children }));
+};
+export const useTextEditorStore = (selector) => {
+    const store = useContext(TextEditorStoreContext);
+    if (!store)
+        throw new Error('Missing TextEditorStoreContext.Provider in the tree');
+    return useStore(store, selector);
+};

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

@@ -0,0 +1,11 @@
+export type TextEditorState = {
+    bubbleMenuContainer: HTMLDivElement | null;
+    isShowBubbleMenu: boolean;
+};
+export type TextEditorActions = {
+    setBubbleMenuContainer: (container: HTMLDivElement | null) => void;
+    setIsShowBubbleMenu: (isShow: boolean) => void;
+};
+export type TextEditorStore = TextEditorState & TextEditorActions;
+export declare const defaultTextEditorState: TextEditorState;
+export declare const createTextEditorStore: (initState?: Partial<TextEditorState>) => import("zustand").StoreApi<TextEditorStore>;

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

@@ -0,0 +1,12 @@
+// Libraries
+import { createStore } from 'zustand';
+export const defaultTextEditorState = {
+    bubbleMenuContainer: null,
+    isShowBubbleMenu: false,
+};
+export const createTextEditorStore = (initState = {}) => createStore()(set => ({
+    ...defaultTextEditorState,
+    ...initState,
+    setBubbleMenuContainer: container => set(() => ({ bubbleMenuContainer: container })),
+    setIsShowBubbleMenu: isShow => set(() => ({ isShowBubbleMenu: isShow })),
+}));

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledBubbleMenu: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<Partial<Omit<Pick<Partial<import("./extensions/BubbleMenu").BubbleMenuPluginProps>, "pluginKey"> & Omit<import("./extensions/BubbleMenu").BubbleMenuPluginProps, "pluginKey">, "element">>, "editor"> & Omit<Omit<Pick<Partial<import("./extensions/BubbleMenu").BubbleMenuPluginProps>, "pluginKey"> & Omit<import("./extensions/BubbleMenu").BubbleMenuPluginProps, "pluginKey">, "element">, "editor"> & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledEditorContent: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>, any, {}, never>;
+export declare const ColorBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ToolbarWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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

@@ -0,0 +1,69 @@
+import { EditorContent } from '@tiptap/react';
+import styled from 'styled-components';
+import { BubbleMenu } from './ui/BubbleMenu';
+import { SMART_TAG_HIGHLIGHT_BG } from './constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { Flex } from 'antd';
+export const StyledBubbleMenu = styled(BubbleMenu) `
+  background-color: white;
+  border: 1px solid ${THEME.token?.blue1};
+  border-radius: 5px;
+  padding: 8px;
+`;
+export const StyledEditorContent = styled(EditorContent) `
+  .tiptap {
+    outline: none;
+
+    p {
+      cursor: text;
+    }
+
+    .selection {
+      background-color: #d7cac9;
+      background-color: color-mix(in lab, var(--text-style-bg-color, transparent), #d7cac9);
+    }
+
+    .smart-tag {
+      cursor: pointer;
+
+      &.highlight {
+        background-color: ${SMART_TAG_HIGHLIGHT_BG};
+        background-color: color-mix(
+          in lab,
+          var(--text-style-bg-color, transparent),
+          ${SMART_TAG_HIGHLIGHT_BG}
+        );
+
+        &:hover {
+          background-color: ${SMART_TAG_HIGHLIGHT_BG};
+          background-color: color-mix(
+            in lab,
+            var(--text-style-bg-color, transparent),
+            ${SMART_TAG_HIGHLIGHT_BG} 80%
+          );
+        }
+      }
+    }
+  }
+`;
+export const ColorBox = styled.div `
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid #d9d9d9;
+
+  &:hover {
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px;
+  }
+
+  &.active {
+    box-shadow: blue 0px 0px 3px;
+  }
+`;
+export const ToolbarWrapper = styled(Flex) `
+  .antsomi-divider.toolbar-separator {
+    height: 20px;
+    margin: 2px;
+  }
+`;

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import { JSONContent, Editor } from '@tiptap/core';
+import { Attrs } from '@tiptap/pm/model';
+export type HandleSmartTagRef = {
+    setSmartTag: (id: string, content: string) => void;
+    deleteSmartTag: (id: string) => void;
+    updateSmartTagAttrs: (id: string, updatedAttrs: Attrs) => void;
+};
+export type HandleLinkRef = {
+    setLink: (args: {
+        id: string;
+        link: string;
+        title?: string;
+        text?: string;
+        dynamic?: boolean;
+    }) => void;
+    deleteLink: (id: string) => void;
+    updateLinkAttrs: (id: string, updatedAttrs: Attrs) => void;
+    updateLinkText: (id: string, newText: string) => 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;
+    }>;
+    Color: {
+        colorPickerStorageKey: string;
+    };
+    BackgroundColor: {
+        colorPickerStorageKey: string;
+    };
+    FontFamily: {
+        fonts: FontConfig[];
+    };
+}>;
+export type TextStyle = {
+    fontFamily: string;
+    fontSize: string;
+    color: string;
+    backgroundColor: string;
+    lineHeight: string;
+    fontWeight: 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>;
+    onFocus?: (event: FocusEvent) => void;
+    onUpdate?: (args: {
+        html: string;
+        text: string;
+        json: JSONContent;
+    }) => void;
+    onCreate?: (args: {
+        html: string;
+        text: string;
+        json: JSONContent;
+    }) => void;
+};

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

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

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,78 @@
+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 } 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 setIsShowBubbleMenu = useTextEditorStore(state => state.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: () => {
+                setIsShowBubbleMenu(true);
+            },
+            onHide: () => {
+                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,
+        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/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { PopoverProps } from 'antd/lib';
+export interface ColorPickerProps {
+    value?: string;
+    children?: React.ReactNode;
+    usedColorsStorageKey?: string;
+    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;
+    usedColorsStorageKey?: string;
+    onChange?: (value: string) => void;
+}
+export interface GridColorProps {
+    value?: string;
+    usedColorsStorageKey?: string;
+    colorGrid?: string[][];
+    onChange?: (value: string) => void;
+}
+export interface UseUsedColorsParams {
+    key?: string;
+    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,120 @@
+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 { 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 { useBroadcastedLocalStorage } from '@antscorp/antsomi-ui/es/hooks/useBroadcastedLocalStorage';
+import { useTextEditorStore } from '../../provider';
+import { ColorBox } from '../../styled';
+import { TextEditorPopover } from '../Popover';
+const { COLOR_GIRD } = TEXT_EDITOR_CONSTANTS;
+const CustomColorPicker = (props) => {
+    const { onApply, currentColor } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const [color, setColor] = useState(currentColor);
+    const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
+    useEffect(() => {
+        setColor(currentColor);
+    }, [currentColor]);
+    const handleChangeColor = useDebouncedCallback((newColor) => {
+        setColor(newColor);
+    }, 50);
+    const handleClose = () => {
+        setIsOpen(false);
+        handleChangeColor(currentColor);
+    };
+    const handleApply = () => {
+        handleClose();
+        onApply?.(color);
+    };
+    return (_jsx(AntdColorPicker, { getPopupContainer: () => bubbleMenuContainer || document.body, open: isOpen, value: color, onOpenChange: setOpen => setIsOpen(setOpen), onChange: newColor => handleChangeColor(newColor.toRgbString()), placement: "bottomRight", destroyTooltipOnHide: true, panelRender: panel => (_jsxs(_Fragment, { children: [panel, _jsxs(Flex, { justify: "end", gap: 8, style: { marginTop: 10 }, children: [_jsx(Button, { size: "small", type: "default", onClick: handleClose, children: "Cancel" }), _jsx(Button, { size: "small", type: "primary", onClick: handleApply, children: "Apply" })] })] })), children: _jsx(Button, { children: "Custom" }) }));
+};
+const BoxColor = (props) => {
+    const { color, isActive, onClick } = props;
+    const handleClick = (e) => {
+        e.stopPropagation();
+        onClick?.(e);
+    };
+    return (_jsx(ColorBox, { style: { backgroundColor: color }, className: clsx({
+            active: isActive,
+        }), onClick: handleClick }));
+};
+const useUsedColors = (params) => {
+    const { key = 'used-colors', numberOfColors = 10 } = params || {};
+    const { value: usedColors, setValue: setUsedColors } = useBroadcastedLocalStorage(key, []);
+    const addColor = (color) => {
+        const updatedColors = [...usedColors];
+        if (!usedColors.includes(color)) {
+            updatedColors.push(color);
+            if (usedColors.length >= numberOfColors) {
+                updatedColors.shift();
+            }
+        }
+        setUsedColors(updatedColors);
+    };
+    return { usedColors, addColor };
+};
+const UsedColors = (props) => {
+    const { onChange, value, usedColorsStorageKey } = props;
+    const { usedColors, addColor: addUsedColor } = useUsedColors({
+        key: usedColorsStorageKey,
+    });
+    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(BoxColor, { color: color, isActive: color === value, onClick: () => handleClick(color) }) }, `${rowIndex}-${colIndex}`))) }, rowIndex)))] }));
+};
+const GridColor = (props) => {
+    const { onChange, value, usedColorsStorageKey, colorGrid = COLOR_GIRD } = props;
+    const rowColorSize = colorGrid[0].length;
+    const { addColor: addUsedColor } = useUsedColors({
+        key: usedColorsStorageKey,
+    });
+    const handleClick = (color) => {
+        addUsedColor(color);
+        onChange?.(color);
+    };
+    return (_jsx(Flex, { vertical: true, gap: 2, children: colorGrid.map((row, rowIndex) => (_jsx(Row, { gutter: [2, 2], children: row.map((color, colIndex) => (_jsx(Col, { span: 24 / rowColorSize, children: _jsx(BoxColor, { color: color, isActive: color === value, onClick: () => handleClick(color) }) }, `${rowIndex}-${colIndex}`))) }, rowIndex))) }));
+};
+export const ColorPicker = forwardRef((props, ref) => {
+    const { value = '', onChange, children, usedColorsStorageKey = 'used-colors', 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, usedColorsStorageKey: usedColorsStorageKey }));
+    const usedColors = (_jsx(UsedColors, { onChange: handleOnChange, value: value, usedColorsStorageKey: usedColorsStorageKey }));
+    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, { trigger: ['click'], placement: "bottomLeft", ...popoverProps, open: isOpen, onOpenChange: handleChangeOpen, content: content, 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/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>>;