@antscorp/antsomi-ui 2.0.86-text-editor-beta.5 → 2.0.86

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

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { JSONContent } from '@tiptap/core';
-export type { TextEditorProps, TextEditorRef } from './types';
-export type { JSONContent as TextEditorJSONContent };
-export { TextEditorProvider } from './provider';
-export declare const TextEditor: import("react").NamedExoticComponent<Omit<import("./types").TextEditorProps & import("react").RefAttributes<import("./types").TextEditorRef>, "ref"> & {
-    ref?: ((instance: import("./types").TextEditorRef | null) => void) | import("react").RefObject<import("./types").TextEditorRef> | null | undefined;
-}> & {
-    readonly type: import("react").ForwardRefExoticComponent<import("./types").TextEditorProps & import("react").RefAttributes<import("./types").TextEditorRef>>;
-} & {
-    Utils: {
-        htmlMinifyForEmail: (htmlEditorContent: string) => string;
-    };
-};

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

@@ -1,6 +0,0 @@
-import { TextEditor as TextEditorComponent } from './TextEditor';
-import { htmlMinifyForEmail } from './utils';
-export { TextEditorProvider } from './provider';
-export const TextEditor = Object.assign(TextEditorComponent, {
-    Utils: { htmlMinifyForEmail },
-});

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

@@ -1,61 +0,0 @@
-.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;
-      }
-    }
-  }
-}
-
-.font-popover-overlay {
-  padding: 0;
-
-  .font-popover-item {
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    padding-left: 10px;
-    padding-right: 8px;
-
-    &:hover,
-    &.active {
-      background-color: #f2f9ff;
-    }
-  }
-}
-
-.font-weight-popover {
-  &.antsomi-popover {
-    .antsomi-popover-inner {
-      padding: 10px 0px;
-
-      .font-weight-item {
-        padding: 4px 10px;
-        cursor: pointer;
-
-        &:hover,
-        &.active {
-          background-color: #f2f9ff;
-        }
-      }
-    }
-  }
-}

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

@@ -1,12 +0,0 @@
-/// <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 {
-    colors?: string[];
-    children: React.ReactNode | ((props: TextEditorStoreApi) => React.ReactNode);
-    onChangeColors?: (colors: string[]) => void;
-}
-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

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Libraries
-import { createContext, useContext, useEffect, useRef } from 'react';
-import { useStore } from 'zustand';
-// Store
-import { createTextEditorStore } from './store';
-import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
-export const TextEditorStoreContext = createContext(null);
-export const TextEditorProvider = ({ colors, children, onChangeColors, }) => {
-    const storeRef = useRef();
-    if (!storeRef.current) {
-        storeRef.current = createTextEditorStore({ colors });
-    }
-    useDeepCompareEffect(() => {
-        if (!colors)
-            return;
-        storeRef.current?.getState().setColors(colors);
-    }, [colors]);
-    useEffect(() => {
-        storeRef.current?.setState({
-            setColors: colors => {
-                storeRef.current?.getInitialState().setColors(colors);
-                onChangeColors?.(colors);
-            },
-        });
-    }, [onChangeColors]);
-    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

@@ -1,13 +0,0 @@
-export type TextEditorState = {
-    bubbleMenuContainer: HTMLDivElement | null;
-    isShowBubbleMenu: boolean;
-    colors?: string[];
-};
-export type TextEditorActions = {
-    setBubbleMenuContainer: (container: HTMLDivElement | null) => void;
-    setIsShowBubbleMenu: (isShow: boolean) => void;
-    setColors: (newColorSet: string[]) => 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

@@ -1,20 +0,0 @@
-// Libraries
-import isEqual from 'react-fast-compare';
-import { createStore } from 'zustand';
-export const defaultTextEditorState = {
-    bubbleMenuContainer: null,
-    isShowBubbleMenu: false,
-};
-export const createTextEditorStore = (initState = {}) => createStore()((set, get) => ({
-    ...defaultTextEditorState,
-    ...initState,
-    setBubbleMenuContainer: container => set(() => ({ bubbleMenuContainer: container })),
-    setIsShowBubbleMenu: isShow => set(() => ({ isShowBubbleMenu: isShow })),
-    setColors: newColors => {
-        const currentColors = get().colors;
-        if (isEqual(currentColors, newColors)) {
-            return;
-        }
-        set(() => ({ colors: newColors }));
-    },
-}));

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { TextStyle } from './types';
-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").NamedExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, any, {
-    $textStyle: TextStyle;
-}, 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

@@ -1,90 +0,0 @@
-import { EditorContent } from '@tiptap/react';
-import styled, { css } 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;
-`;
-const dynContentStyles = css `
-  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 StyledEditorContent = styled(EditorContent) `
-  .tiptap {
-    outline: none;
-
-    p {
-      margin: 0;
-      padding: 0;
-
-      line-height: ${p => p.$textStyle.lineHeight};
-      font-family: ${p => p.$textStyle.fontFamily};
-      font-size: ${p => p.$textStyle.fontSize};
-      color: ${p => p.$textStyle.color};
-    }
-
-    &:not([contenteditable='false']) {
-      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 {
-          ${dynContentStyles}
-        }
-      }
-
-      .link {
-        &.highlight > span {
-          ${dynContentStyles}
-        }
-      }
-    }
-  }
-`;
-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

@@ -1,92 +0,0 @@
-import React from 'react';
-import { JSONContent, Editor } from '@tiptap/core';
-import { LinkAttrs } from './extensions/Link';
-import { SmartTagAttrs } from './extensions/SmartTag';
-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;
-    }>;
-    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

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

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

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

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

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

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

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

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

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

@@ -1,132 +0,0 @@
-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, useCallback } 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';
-import { useColorSet } from '../../hooks';
-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 { colors: textEditorStoreColors, setColors: updateTextEditorColorSet } = useColorSet();
-    const updateColor = useCallback((colors) => {
-        setUsedColors(colors);
-        updateTextEditorColorSet(colors);
-    }, [setUsedColors, updateTextEditorColorSet]);
-    useEffect(() => {
-        if (!textEditorStoreColors) {
-            return;
-        }
-        updateColor(textEditorStoreColors);
-    }, [textEditorStoreColors, updateColor]);
-    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 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

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

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

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

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

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