@antscorp/antsomi-ui 2.0.109 → 2.0.111

package/es/components/organism/TextEditor/stories/shared.js

@@ -0,0 +1,57 @@
+import { produce } from 'immer';
+import uniqid from 'uniqid';
+import { HTML_DOM } from '../__mocks__/text-contennt';
+/**
+ * Parse HTML content from mock data
+ */
+export const htmlContent = (() => {
+    const dom = new DOMParser().parseFromString(HTML_DOM, 'text/html');
+    const body = dom.querySelector('body');
+    if (body) {
+        return body.innerHTML;
+    }
+    return '';
+})();
+/**
+ * Reducer for TextBlock component state management
+ */
+export const reducer = (state, action) => produce(state, draft => {
+    switch (action.type) {
+        case 'add_smart_tag': {
+            draft.dynamic.selectedId = uniqid();
+            break;
+        }
+        case 'edit_smart_tag': {
+            draft.dynamic.selectedId = action.payload.id;
+            break;
+        }
+        case 'close_smart_tag_modal': {
+            draft.dynamic.selectedId = '';
+            break;
+        }
+        case 'add_link': {
+            const newLinkId = uniqid();
+            draft.link.selectedId = newLinkId;
+            draft.link.data[newLinkId] = {
+                title: '',
+                url: '',
+                text: action.payload.selectionText,
+            };
+            break;
+        }
+        case 'edit_link': {
+            draft.link.selectedId = action.payload.id;
+            draft.link.data[action.payload.id] = {
+                ...state.link.data[action.payload.id],
+                ...action.payload.data,
+            };
+            break;
+        }
+        case 'close_link_modal': {
+            draft.link.selectedId = '';
+            break;
+        }
+        default:
+            break;
+    }
+});

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TextStyle } from './types';
+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, {
+    $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

@@ -0,0 +1,61 @@
+import { EditorContent } from '@tiptap/react';
+import styled from 'styled-components';
+import { Flex } from 'antd';
+import tinycolor from 'tinycolor2';
+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
+
+      font-size: ${p => p.$textStyle.fontSize};
+      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;
+      }
+    }
+  }
+`;
+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

@@ -0,0 +1,311 @@
+import type React from 'react';
+import type { JSONContent, Editor, MarkRange } from '@tiptap/core';
+import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+import type { Mark, Node } from '@tiptap/pm/model';
+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: (currentAttrs: LinkAttrs) => LinkAttrs | false) => void;
+    updateLinkText: (params: {
+        predicate: (attrs: LinkAttrs) => boolean;
+        updated: (currentText: string) => string;
+        mergeAdjacentEqualFn?: (currentAttrs: LinkAttrs, candidateAttrs: LinkAttrs) => boolean;
+    }) => void;
+    eachLinkGroup: (callback: (params: {
+        attrs: LinkAttrs;
+        content: string;
+    }) => void) => void;
+    eachSmartag: (callback: (attrs: SmartTagAttrs) => void) => 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;
+}>;
+/**
+ * Link form data structure
+ */
+export type LinkFormData = {
+    /** The URL/href of the link */
+    url: string;
+    /** The text content to display */
+    text: string;
+    /** Whether to open link in new tab */
+    openInNewTab: boolean;
+};
+/**
+ * Link form state in store
+ */
+export type LinkFormState = {
+    /** Whether the link form is visible */
+    isVisible: boolean;
+    /** Mode: insert new link or edit existing link */
+    mode: 'insert' | 'edit';
+    /** Form data */
+    data: LinkFormData;
+} | null;
+export type FontConfig = {
+    fontFamily: {
+        name: string;
+        fallback?: string[];
+    };
+    fontWeight: number[];
+    category?: string;
+};
+/**
+ * Function type for grouping fonts into categories
+ * @param font - The font configuration to categorize
+ * @returns Object with group key and display label, or void to skip grouping
+ */
+export type FontGroupingFunction = (font: FontConfig) => {
+    key: string;
+    label: string;
+} | void;
+/**
+ * Result of font grouping operation
+ */
+export type FontGroupResult = {
+    label: string;
+    fonts: FontConfig[];
+};
+/**
+ * Function type for determining group display order
+ * @param groups - Array of group keys that were generated
+ * @returns Array of group keys in desired display order
+ */
+export type GroupOrderFunction = (groups: string[]) => string[];
+/**
+ * Toolbar action names - union type for type safety
+ */
+export type ToolbarActionName = 'bold' | 'italic' | 'underline' | 'strike' | 'superscript' | 'subscript' | 'fontFamily' | 'fontSize' | 'textColor' | 'backgroundColor' | 'textTransform' | 'bulletList' | 'orderedList' | 'indent' | 'outdent' | 'textAlign' | 'lineSpacing' | 'letterSpacing' | 'link' | 'smartTag' | 'emoji' | 'history' | 'clearFormatting';
+/**
+ * Toolbar configuration options
+ */
+export type ToolbarConfig = {
+    /**
+     * Which toolbar actions to show
+     * - Array: Show only specified actions in given order
+     * - 'all': Show all available actions (default)
+     * - false: Hide toolbar entirely
+     */
+    items?: ToolbarActionName[] | 'all' | false;
+    /**
+     * Which toolbar actions to hide (ignored if items is an array)
+     * Useful when you want to show most items but exclude a few
+     * @example
+     * config={{ Toolbar: { exclude: ['smartTag', 'emoji'] } }}
+     */
+    exclude?: ToolbarActionName[];
+};
+/**
+ * Configuration options for TextEditor components
+ */
+export type Config = Partial<{
+    /** Font family configuration */
+    FontFamily: {
+        /** Array of available font configurations */
+        fonts?: FontConfig[];
+        /** Function to group fonts or false to disable grouping */
+        fontGroupingFn?: FontGroupingFunction | false;
+        /** Array of group keys or function to define display order. Groups not in this array will appear after ordered groups */
+        groupOrder?: string[] | GroupOrderFunction;
+    };
+    /** Unordered list configuration */
+    UnorderedList: {
+        /** Whether to use custom bullet styles */
+        useCustomBullet?: boolean;
+    };
+    /** Toolbar configuration */
+    Toolbar: ToolbarConfig;
+}>;
+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?: Pick<BubbleMenuPluginProps, 'options' | 'appendTo'>;
+    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;
+    onChangeFont?: (changeInfo: {
+        font: FontConfig;
+        weight: number;
+        analysis: {
+            isFullyWebSafe: boolean;
+            isPrimaryFontWebSafe: boolean;
+        };
+    }) => void;
+};
+export type TextEditorAllProps = TextEditorProps & {
+    colors?: string[];
+    onChangeColors?: (colors: string[]) => void;
+};
+export type TextEditorWithProviderRef = TextEditorRef & {
+    updateColors?: (colors: string[]) => 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: Record<string, string>;
+}>;
+export type SmartTagAttrs = {
+    id: string;
+} & Partial<{
+    content: string;
+    tag: string;
+}>;
+export type LinkMark = OverrideProperties<Mark, {
+    attrs: LinkAttrs;
+}>;
+export type SmartTagNode = OverrideProperties<Node, {
+    attrs: SmartTagAttrs;
+}>;
+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;
+};
+type ProtocolOptions = {
+    /**
+     * The protocol scheme to be registered.
+     * @default '''
+     * @example 'ftp'
+     * @example 'git'
+     */
+    scheme: string;
+    /**
+     * If enabled, it allows optional slashes after the protocol.
+     * @default false
+     * @example true
+     */
+    optionalSlashes?: boolean;
+};
+export type ProtocolConfig = Array<ProtocolOptions | string>;
+export declare const isSmartTagNode: (node: Node) => node is {
+    toString: () => string;
+    readonly type: import("prosemirror-model").NodeType;
+    readonly marks: readonly Mark[];
+    readonly content: import("prosemirror-model").Fragment;
+    readonly children: readonly Node[];
+    readonly text: string | undefined;
+    readonly nodeSize: number;
+    readonly childCount: number;
+    child: (index: number) => Node;
+    maybeChild: (index: number) => Node | null;
+    forEach: (f: (node: Node, offset: number, index: number) => void) => void;
+    nodesBetween: (from: number, to: number, f: (node: Node, pos: number, parent: Node | null, index: number) => boolean | void, startPos?: number | undefined) => void;
+    descendants: (f: (node: Node, pos: number, parent: Node | null, index: number) => boolean | void) => void;
+    readonly textContent: string;
+    textBetween: (from: number, to: number, blockSeparator?: string | null | undefined, leafText?: string | ((leafNode: Node) => string) | null | undefined) => string;
+    readonly firstChild: Node | null;
+    readonly lastChild: Node | null;
+    eq: (other: Node) => boolean;
+    sameMarkup: (other: Node) => boolean;
+    hasMarkup: (type: import("prosemirror-model").NodeType, attrs?: import("prosemirror-model").Attrs | null | undefined, marks?: readonly Mark[] | undefined) => boolean;
+    copy: (content?: import("prosemirror-model").Fragment | null | undefined) => Node;
+    mark: (marks: readonly Mark[]) => Node;
+    cut: (from: number, to?: number | undefined) => Node;
+    slice: (from: number, to?: number | undefined, includeParents?: boolean | undefined) => import("prosemirror-model").Slice;
+    replace: (from: number, to: number, slice: import("prosemirror-model").Slice) => Node;
+    nodeAt: (pos: number) => Node | null;
+    childAfter: (pos: number) => {
+        node: Node | null;
+        index: number;
+        offset: number;
+    };
+    childBefore: (pos: number) => {
+        node: Node | null;
+        index: number;
+        offset: number;
+    };
+    resolve: (pos: number) => import("prosemirror-model").ResolvedPos;
+    rangeHasMark: (from: number, to: number, type: import("prosemirror-model").MarkType | Mark) => boolean;
+    readonly isBlock: boolean;
+    readonly isTextblock: boolean;
+    readonly inlineContent: boolean;
+    readonly isInline: boolean;
+    readonly isText: boolean;
+    readonly isLeaf: boolean;
+    readonly isAtom: boolean;
+    contentMatchAt: (index: number) => import("prosemirror-model").ContentMatch;
+    canReplace: (from: number, to: number, replacement?: import("prosemirror-model").Fragment | undefined, start?: number | undefined, end?: number | undefined) => boolean;
+    canReplaceWith: (from: number, to: number, type: import("prosemirror-model").NodeType, marks?: readonly Mark[] | undefined) => boolean;
+    canAppend: (other: Node) => boolean;
+    check: () => void;
+    toJSON: () => any;
+    attrs: SmartTagAttrs;
+};
+export declare const isLinkMarkRange: (markRange: MarkRange) => markRange is {
+    from: number;
+    to: number;
+    mark: LinkMark;
+};
+export {};

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

@@ -0,0 +1,6 @@
+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 isSmartTagNode = (node) => node.type.name === 'smartTag';
+export const isLinkMarkRange = (markRange) => isLinkMark(markRange.mark);

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+export declare const BubbleMenu: import("react").ForwardRefExoticComponent<Pick<Partial<Omit<Pick<Partial<BubbleMenuPluginProps>, "pluginKey"> & Omit<BubbleMenuPluginProps, "pluginKey">, "element">>, "editor"> & Omit<Omit<Pick<Partial<BubbleMenuPluginProps>, "pluginKey"> & Omit<BubbleMenuPluginProps, "pluginKey">, "element">, "editor"> & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,114 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCurrentEditor } from '@tiptap/react';
+import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { BubbleMenuPlugin } from '../../extensions/BubbleMenu';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { ANTSOMI_COMPONENT_PREFIX_CLS } from '@antscorp/antsomi-ui/es/constants';
+export const BubbleMenu = forwardRef(({ pluginKey = 'bubbleMenu', editor, updateDelay, resizeDelay, shouldShow = null, getReferencedVirtualElement, appendTo, options, children, ...restProps }, ref) => {
+    const menuEl = useRef(document.createElement('div'));
+    menuEl.current.classList.add(`${ANTSOMI_COMPONENT_PREFIX_CLS}-text-editor-bubble-menu`);
+    const { editor: currentEditor } = useCurrentEditor();
+    /**
+     * Tracks whether the bubble menu has been shown at least once.
+     * Used for lazy mounting optimization - children are only mounted after first show.
+     */
+    const [hasShown, setHasShown] = useState(false);
+    /**
+     * Ref to track hasShown synchronously (since state updates are async).
+     */
+    const hasShownRef = useRef(false);
+    /**
+     * Tracks whether we're in the first show process (to prevent empty flash).
+     * After first show completes, this flag is no longer used.
+     */
+    const isFirstShowRef = useRef(false);
+    /**
+     * The editor instance where the bubble menu plugin will be registered.
+     */
+    const pluginEditor = editor || currentEditor;
+    useEffect(() => {
+        if (typeof ref === 'function') {
+            ref(menuEl.current);
+        }
+        else if (ref) {
+            ref.current = menuEl.current;
+        }
+    }, [ref]);
+    const bubbleMenuPluginProps = {
+        updateDelay,
+        resizeDelay,
+        pluginKey,
+        shouldShow,
+        getReferencedVirtualElement,
+        options: {
+            ...options,
+            strategy: options?.strategy || 'absolute',
+            placement: options?.placement || 'bottom',
+            offset: options?.offset || 10,
+            onHide: () => {
+                options?.onHide?.();
+            },
+            onShow: () => {
+                if (!hasShownRef.current) {
+                    // First show: mark as first show and force hide until children mount
+                    hasShownRef.current = true;
+                    isFirstShowRef.current = true;
+                    menuEl.current.style.visibility = 'hidden';
+                    setHasShown(true);
+                }
+                options?.onShow?.();
+            },
+        },
+    };
+    const bubbleMenuPluginPropsRef = useRef(bubbleMenuPluginProps);
+    bubbleMenuPluginPropsRef.current = bubbleMenuPluginProps;
+    useLayoutEffect(() => {
+        // After children mount in first show, make menuEl visible
+        if (isFirstShowRef.current) {
+            menuEl.current.style.visibility = 'visible';
+            isFirstShowRef.current = false;
+        }
+    });
+    useDeepCompareEffect(() => {
+        if (pluginEditor?.isDestroyed) {
+            return;
+        }
+        if (!pluginEditor) {
+            // eslint-disable-next-line no-console
+            console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.');
+            return;
+        }
+        const bubbleMenuElement = menuEl.current;
+        bubbleMenuElement.style.visibility = 'hidden';
+        bubbleMenuElement.style.position = 'absolute';
+        const plugin = BubbleMenuPlugin({
+            ...bubbleMenuPluginPropsRef.current,
+            appendTo,
+            editor: pluginEditor,
+            element: bubbleMenuElement,
+        });
+        pluginEditor.registerPlugin(plugin);
+        const createdPluginKey = bubbleMenuPluginPropsRef.current.pluginKey;
+        return () => {
+            pluginEditor.unregisterPlugin(createdPluginKey);
+            window.requestAnimationFrame(() => {
+                if (bubbleMenuElement.parentNode) {
+                    bubbleMenuElement.parentNode.removeChild(bubbleMenuElement);
+                }
+            });
+        };
+    }, [appendTo, pluginEditor]);
+    /**
+     * Lazy mounting optimization: only mount children after the bubble menu
+     * has been shown at least once. This significantly improves performance
+     * when many TextEditor instances exist (e.g., in lists).
+     *
+     * After first show, children remain mounted and the tiptap plugin
+     * handles visibility automatically via CSS, avoiding flash effects.
+     */
+    if (!hasShown) {
+        return null;
+    }
+    return createPortal(_jsx("div", { ...restProps, children: children }), menuEl.current);
+});

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

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

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const TextEditorButton: import("react").ForwardRefExoticComponent<{
+    isActive?: boolean | undefined;
+    children?: import("react").ReactNode;
+    tooltipProps?: {
+        title?: string | undefined;
+        open?: boolean | undefined;
+    } | undefined;
+} & Pick<import("antd").ButtonProps, "className" | "onClick" | "disabled" | "icon"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Tooltip } from 'antd';
+import clsx from 'clsx';
+import styled from 'styled-components';
+import { forwardRef } from 'react';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const StyledButton = styled(Button) `
+  &.antsomi-btn.antsomi-btn-text {
+    height: 24px;
+    width: 24px;
+    padding: 0;
+    flex-shrink: 0;
+    border-radius: 2px;
+    color: ${THEME.token?.bw8};
+
+    &.is-active {
+      color: ${THEME.token?.colorPrimary};
+      background-color: #e0ebf7;
+
+      &:hover {
+        background-color: #e0ebf7;
+      }
+    }
+
+    &:hover:not(:disabled, .is-active) {
+      color: ${THEME.token?.colorPrimary};
+    }
+  }
+`;
+export const TextEditorButton = forwardRef((props, ref) => {
+    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, { ref: ref, ...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>>;