@antscorp/antsomi-ui 2.0.92-text-editor-beta.6 → 2.0.93

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

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Libraries
-import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef, } from 'react';
-import { useStore } from 'zustand';
-// Store
-import { createTextEditorStore } from './store';
-export const TextEditorStoreContext = createContext(null);
-export const TextEditorProvider = forwardRef(({ children, onChangeColors }, ref) => {
-    const storeRef = useRef();
-    if (!storeRef.current) {
-        storeRef.current = createTextEditorStore();
-    }
-    useEffect(() => {
-        storeRef.current?.setState({
-            setColors: colors => {
-                storeRef.current?.getInitialState().setColors(colors);
-                onChangeColors?.(colors);
-            },
-        });
-    }, [onChangeColors]);
-    useImperativeHandle(ref, () => ({
-        updateColors: colors => {
-            storeRef.current?.getState().setColors(colors);
-        },
-    }));
-    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,10 +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").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>, any, {
-    $textStyle: TextStyle;
-}, never>;
-export declare const ColorBox: import("styled-components").StyledComponent<"div", any, {
-    $color?: string | undefined;
-}, 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,94 +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 { Flex } from 'antd';
-import tinycolor from 'tinycolor2';
-export const StyledBubbleMenu = styled(BubbleMenu) `
-  background-color: white;
-  border-radius: 5px;
-  padding: 8px;
-  box-shadow: var(--antsomi-box-shadow-secondary);
-`;
-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;
-
-      // Some apps have global p styles, so we need to override it
-      line-height: ${p => p.$textStyle.lineHeight};
-      font-family: ${p => p.$textStyle.fontFamily};
-      color: ${p => p.$textStyle.color};
-      letter-spacing: ${p => p.$textStyle.letterSpacing};
-    }
-
-    &: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%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px;
-  transition: box-shadow 0.3s ease-in-out;
-  border: 1px solid #d9d9d9;
-  background-color: ${p => p.$color};
-
-  &:hover {
-    box-shadow: 0 0 5px ${p => tinycolor(p.$color).setAlpha(0.45).toRgbString()};
-    cursor: pointer;
-  }
-`;
-export const ToolbarWrapper = styled(Flex) `
-  .antsomi-divider.toolbar-separator {
-    height: 28px;
-    margin: 2px;
-  }
-`;

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

@@ -1,139 +0,0 @@
-import type React from 'react';
-import type { JSONContent, Editor, MarkRange } from '@tiptap/core';
-import type { Mark } from '@tiptap/pm/model';
-import type { SmartTagAttrs } from './extensions/SmartTag';
-import { ORDERED_LIST_STYLE_TYPE, UNORDERED_LIST_STYLE_TYPE } from './constants';
-import type { OverrideProperties } from 'type-fest';
-export type HandleSmartTagRef = {
-    setSmartTag: (attrs: SmartTagAttrs) => void;
-    deleteSmartTag: (id: string) => void;
-    updateSmartTagAttrs: (id: string, updatedAttrs: Omit<SmartTagAttrs, 'id'>) => void;
-};
-export type HandleLinkRef = {
-    setLink: (params: {
-        attrs: LinkAttrs;
-        content?: string;
-    }) => void;
-    deleteLink: (predicate: (attrs: LinkAttrs) => boolean) => void;
-    updateLinkAttrs: (predicate: (currentAttrs: LinkAttrs) => boolean, updateFn: (params: {
-        currentAttrs: LinkAttrs;
-        currentContent: string;
-    }) => {
-        attrs?: LinkAttrs;
-        content?: string;
-    } | false) => 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: {
-        attrs: LinkAttrs;
-        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 TextEditorComponentsRender = {
-    renderLinkToolbar: (linkAttrs: LinkAttrs, defaultNode: React.ReactNode, defaultToolNodes: {
-        gotoLink: React.ReactNode;
-        copy: React.ReactNode;
-        edit: React.ReactNode;
-        unlink: React.ReactNode;
-    }) => React.ReactNode;
-};
-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;
-    render?: Partial<TextEditorComponentsRender>;
-    onFocus?: (event: FocusEvent) => void;
-    onUpdate?: (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;
-export type LinkAttrs = {
-    href: string;
-} & Partial<{
-    target: string | null;
-    rel: string | null;
-    class: string | null;
-    title: string | null;
-    data: DOMStringMap;
-}>;
-export type LinkMark = OverrideProperties<Mark, {
-    attrs: LinkAttrs;
-}>;
-export type LinkMarkRange = OverrideProperties<MarkRange, {
-    mark: LinkMark;
-}>;
-export declare const isLinkMark: (mark: Mark) => mark is {
-    readonly type: import("prosemirror-model").MarkType;
-    addToSet: (set: readonly Mark[]) => readonly Mark[];
-    removeFromSet: (set: readonly Mark[]) => readonly Mark[];
-    isInSet: (set: readonly Mark[]) => boolean;
-    eq: (other: Mark) => boolean;
-    toJSON: () => any;
-    attrs: LinkAttrs;
-};
-export declare const isLinkMarkRange: (markRange: MarkRange) => markRange is {
-    from: number;
-    to: number;
-    mark: LinkMark;
-};

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

@@ -1,5 +0,0 @@
-import { CUSTOM_LINK_EXTENSION_NAME, 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);
-export const isLinkMark = (mark) => mark.type.name === CUSTOM_LINK_EXTENSION_NAME;
-export const isLinkMarkRange = (markRange) => isLinkMark(markRange.mark);

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,84 +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, 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);
-    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,
-            options: {
-                ...options,
-                strategy: options?.strategy || 'absolute',
-                placement: options?.placement || 'top-start',
-                offset: options?.offset || {
-                    alignmentAxis: -20,
-                    mainAxis: 10,
-                },
-                onShow: () => {
-                    if (isMounted()) {
-                        setIsShowBubbleMenu(true);
-                    }
-                },
-                onHide: () => {
-                    if (isMounted()) {
-                        setIsShowBubbleMenu(false);
-                    }
-                },
-            },
-            shouldShow,
-        });
-        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

@@ -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/BubbleToolbar/BubbleToolbar.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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