@antscorp/antsomi-ui 2.0.110 → 2.0.112

package/es/components/organism/TextEditor/ui/Toolbar/FormattingToolbar.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from 'antd';
+import { useMemo } from 'react';
+import { ToolbarWrapper } from '../../styled';
+import { BoldAction, BulletListAction, ClearFormattingAction, EmoijiAction, FontFamilyAction, FontSizeAction, HistoryAction, IndentAction, ItalicAction, LetterSpacingAction, LinkAction, OrderedListAction, OutdentAction, SmartTagAction, LineSpacingAction, StrikeAction, SubscriptAction, SuperscriptAction, TextAlignAction, TextBackColorAction, TextColorAction, TextTransformAction, UnderlineAction, } from './actions';
+import { ALL_TOOLBAR_ACTIONS, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_GROUPING } from '../../constants';
+import { useElementSize } from '@antscorp/antsomi-ui/es/hooks';
+export const FormattingToolbar = (props) => {
+    const { editor, smartTagHandler, linkHanlder, config, defaultTextStyle = DEFAULT_TEXT_STYLE, onChangeFont, } = props;
+    const [ref] = useElementSize();
+    // Determine visible actions based on config
+    const visibleActions = useMemo(() => {
+        const toolbarConfig = config?.Toolbar;
+        // If items is false, hide toolbar entirely
+        if (toolbarConfig?.items === false) {
+            return [];
+        }
+        // If items is an array, use it (user-specified order)
+        if (Array.isArray(toolbarConfig?.items)) {
+            return toolbarConfig.items;
+        }
+        // Default: show all actions except excluded ones
+        const excludeSet = new Set(toolbarConfig?.exclude || []);
+        return ALL_TOOLBAR_ACTIONS.filter(action => !excludeSet.has(action));
+    }, [config?.Toolbar]);
+    // Map action names to React components
+    const actionComponentMap = useMemo(() => ({
+        fontFamily: (_jsx(FontFamilyAction, { editor: editor, fonts: config?.FontFamily?.fonts, onChange: (font, weight) => onChangeFont?.({ font, weight }), fontGroupingFn: config?.FontFamily?.fontGroupingFn, groupOrder: config?.FontFamily?.groupOrder, defaultFontFamily: defaultTextStyle.fontFamily }, "fontFamily")),
+        fontSize: (_jsx(FontSizeAction, { editor: editor, defaultFontSize: defaultTextStyle.fontSize }, "fontSize")),
+        bold: _jsx(BoldAction, { editor: editor }, "bold"),
+        italic: _jsx(ItalicAction, { editor: editor }, "italic"),
+        underline: _jsx(UnderlineAction, { editor: editor }, "underline"),
+        link: _jsx(LinkAction, { editor: editor, onClick: linkHanlder?.onUpsert }, "link"),
+        strike: _jsx(StrikeAction, { editor: editor }, "strike"),
+        superscript: _jsx(SuperscriptAction, { editor: editor }, "superscript"),
+        subscript: _jsx(SubscriptAction, { editor: editor }, "subscript"),
+        textTransform: _jsx(TextTransformAction, { editor: editor }, "textTransform"),
+        textColor: _jsx(TextColorAction, { editor: editor }, "textColor"),
+        backgroundColor: _jsx(TextBackColorAction, { editor: editor }, "backgroundColor"),
+        emoji: _jsx(EmoijiAction, { editor: editor }, "emoji"),
+        smartTag: (_jsx(SmartTagAction, { editor: editor, onClick: smartTagHandler?.onUpsert }, "smartTag")),
+        bulletList: (_jsx(BulletListAction, { editor: editor, useCustomBullet: config?.UnorderedList?.useCustomBullet }, "bulletList")),
+        orderedList: _jsx(OrderedListAction, { editor: editor }, "orderedList"),
+        textAlign: _jsx(TextAlignAction, { editor: editor }, "textAlign"),
+        lineSpacing: (_jsx(LineSpacingAction, { editor: editor, defaultValue: defaultTextStyle?.lineHeight }, "lineSpacing")),
+        letterSpacing: _jsx(LetterSpacingAction, { editor: editor }, "letterSpacing"),
+        indent: _jsx(IndentAction, { editor: editor }, "indent"),
+        outdent: _jsx(OutdentAction, { editor: editor }, "outdent"),
+        history: _jsx(HistoryAction, { editor: editor }, "history"),
+        clearFormatting: _jsx(ClearFormattingAction, { editor: editor }, "clearFormatting"),
+    }), [
+        editor,
+        config?.FontFamily,
+        config?.UnorderedList,
+        defaultTextStyle,
+        linkHanlder,
+        smartTagHandler,
+        onChangeFont,
+    ]);
+    // Group actions into rows
+    const actionGroups = useMemo(() => {
+        if (visibleActions.length === 0) {
+            return [];
+        }
+        // Use default grouping to determine which row each action belongs to
+        const row1Actions = DEFAULT_TOOLBAR_GROUPING[0];
+        const row2Actions = DEFAULT_TOOLBAR_GROUPING[1];
+        const row1 = [];
+        const row2 = [];
+        visibleActions.forEach(action => {
+            if (row1Actions.includes(action)) {
+                row1.push(action);
+            }
+            else if (row2Actions.includes(action)) {
+                row2.push(action);
+            }
+        });
+        return [row1, row2].filter(row => row.length > 0);
+    }, [visibleActions]);
+    // If no visible actions, don't render toolbar
+    if (visibleActions.length === 0) {
+        return null;
+    }
+    return (_jsx(ToolbarWrapper, { ref: ref, vertical: true, gap: 20, children: actionGroups.map((group, groupIdx) => (_jsx(Flex, { gap: 15, justify: "flex-start", align: "center", children: group.map(actionName => actionComponentMap[actionName]) }, groupIdx))) }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/LinkPreviewToolbar.d.ts

@@ -0,0 +1,10 @@
+import { Editor } from '@tiptap/core';
+import { TextEditorComponentsRender } from '../../types';
+export type LinkPreviewToolbarProps = {
+    editor: Editor;
+    linkHanlder?: {
+        onUpsert?: () => void;
+    };
+    render?: Partial<Pick<TextEditorComponentsRender, 'renderLinkToolbar'>>;
+};
+export declare const LinkPreviewToolbar: (props: LinkPreviewToolbarProps) => import("react/jsx-runtime").JSX.Element | null;

package/es/components/organism/TextEditor/ui/Toolbar/LinkPreviewToolbar.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyDuplicateIcon, EditIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { useEditorState } from '@tiptap/react';
+import { Typography } from 'antd';
+import { ToolbarWrapper } from '../../styled';
+import { isShowLinkToolbar } from '../../utils';
+import { TextEditorButton } from '../Button';
+import { UnsetLinkAction } from './actions';
+import { CUSTOM_LINK_EXTENSION_NAME } from '../../constants';
+export const LinkPreviewToolbar = (props) => {
+    const { editor, linkHanlder, render } = props;
+    const { showLinkMenu, linkAttrs } = useEditorState({
+        editor,
+        selector: ctx => ({
+            showLinkMenu: isShowLinkToolbar(ctx.editor.state),
+            linkAttrs: editor.getAttributes(CUSTOM_LINK_EXTENSION_NAME),
+        }),
+    });
+    if (!showLinkMenu) {
+        return null;
+    }
+    const href = String(linkAttrs?.href);
+    const goToLinkEl = (_jsx(Typography.Link, { style: { maxWidth: 150 }, ellipsis: true, href: href, children: href }));
+    const copyLinkEl = (_jsx(TextEditorButton, { icon: _jsx(CopyDuplicateIcon, { size: 18 }), tooltipProps: { title: 'Copy' }, onClick: () => {
+            navigator.clipboard.writeText(href);
+        } }));
+    const editLinkEl = (_jsx(TextEditorButton, { icon: _jsx(EditIcon, { size: 18 }), tooltipProps: { title: 'Edit' }, onClick: () => linkHanlder?.onUpsert?.() }));
+    const unsetLinkEl = _jsx(UnsetLinkAction, { editor: editor });
+    let linkTools = (_jsxs(_Fragment, { children: [goToLinkEl, copyLinkEl, editLinkEl, unsetLinkEl] }));
+    if (render?.renderLinkToolbar && linkAttrs) {
+        linkTools = render.renderLinkToolbar(linkAttrs, linkTools, {
+            copy: copyLinkEl,
+            edit: editLinkEl,
+            gotoLink: goToLinkEl,
+            unlink: unsetLinkEl,
+        });
+    }
+    return (_jsx(ToolbarWrapper, { wrap: "wrap", gap: 8, align: "center", children: linkTools }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/actions/BoldAction.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Editor } from '@tiptap/core';
+export interface BoldActionProps {
+    editor: Editor;
+}
+export declare const BoldAction: import("react").MemoExoticComponent<({ editor }: BoldActionProps) => import("react/jsx-runtime").JSX.Element>;

package/es/components/organism/TextEditor/ui/Toolbar/actions/BoldAction.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import { TextEditorButton } from '../../Button';
+import { useEditorState } from '@tiptap/react';
+import { memo } from 'react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+const BoldIcon = ({ size }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M5 22V2H12.9687C14.5312 2 15.9736 2.47619 17.2957 3.42857C18.6178 4.38095 19.2788 5.70238 19.2788 7.39286C19.2788 8.60714 19.0024 9.54167 18.4495 10.1964C17.8966 10.8512 17.3798 11.3214 16.899 11.6071C17.5 11.869 18.1671 12.3571 18.9002 13.0714C19.6334 13.7857 20 14.8571 20 16.2857C20 18.4048 19.2187 19.8869 17.6562 20.7321C16.0937 21.5774 14.6274 22 13.2572 22H5ZM9.36298 18H13.113C14.2668 18 14.97 17.7083 15.2224 17.125C15.4748 16.5417 15.601 16.119 15.601 15.8571C15.601 15.5952 15.4748 15.1726 15.2224 14.5893C14.97 14.006 14.2308 13.7143 13.0048 13.7143H9.36298V18ZM9.36298 9.85714H12.7163C13.5096 9.85714 14.0865 9.65476 14.4471 9.25C14.8077 8.84524 14.988 8.39286 14.988 7.89286C14.988 7.32143 14.7837 6.85714 14.375 6.5C13.9663 6.14286 13.4375 5.96429 12.7885 5.96429H9.36298V9.85714Z", fill: "currentColor" }) }));
+export const BoldAction = memo(({ editor }) => {
+    const { disabled, isBold } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            isBold: editorInstance.isActive('bold'),
+            disabled: !editorInstance.can().chain().focus().toggleBold().run(),
+        }),
+    });
+    return (_jsx(TextEditorButton, { disabled: disabled, onClick: () => editor.chain().focus().toggleBold().run(), isActive: isBold, icon: _jsx(BoldIcon, { size: 18 }), tooltipProps: {
+            title: `${TOOLTIPS.BOLD.TITLE} (${TOOLTIPS.BOLD.SHORTCUT})`,
+        } }));
+});

package/es/components/organism/TextEditor/ui/Toolbar/actions/BulletListAction.d.ts

@@ -0,0 +1,6 @@
+import { Editor } from '@tiptap/core';
+export interface BulletListActionProps {
+    editor: Editor;
+    useCustomBullet?: boolean;
+}
+export declare const BulletListAction: ({ editor, useCustomBullet }: BulletListActionProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/TextEditor/ui/Toolbar/actions/BulletListAction.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TEXT_EDITOR_CONSTANTS, UNORDERED_LIST_STYLE_TYPE } from '../../../constants';
+import { isUnorderedListStyleType } from '../../../types';
+import { CustomUnorderedList } from '../../../extensions/UnorderedList';
+import { SplitButtonDropdown } from '../../SplitButtonDropdown';
+import { useEditorState } from '@tiptap/react';
+import { useMemo } from 'react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+const UnorderListIcon = ({ size }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M3.57895 11C2.73684 11 2 11.7 2 12.5C2 13.3 2.73684 14 3.57895 14C4.42105 14 5.15789 13.3 5.15789 12.5C5.15789 11.7 4.42105 11 3.57895 11ZM3.57895 6C2.73684 6 2 6.7 2 7.5C2 8.3 2.73684 9 3.57895 9C4.42105 9 5.15789 8.3 5.15789 7.5C5.15789 6.7 4.42105 6 3.57895 6ZM3.57895 16C2.73684 16 2 16.7 2 17.5C2 18.3 2.73684 19 3.57895 19C4.42105 19 5.15789 18.3 5.15789 17.5C5.15789 16.7 4.42105 16 3.57895 16ZM7.26316 6.5V8.5H22V6.5H7.26316ZM7.26316 18.5H22V16.5H7.26316V18.5ZM7.26316 13.5H22V11.5H7.26316V13.5Z", fill: "currentColor" }) }));
+const CUSTOM_BULLET_OPTIONS = [
+    {
+        label: '+',
+        value: `${UNORDERED_LIST_STYLE_TYPE.custom}_+`,
+    },
+    {
+        label: '→',
+        value: `${UNORDERED_LIST_STYLE_TYPE.custom}_→`,
+    },
+    {
+        label: '➤',
+        value: `${UNORDERED_LIST_STYLE_TYPE.custom}_➤`,
+    },
+    {
+        label: '★',
+        value: `${UNORDERED_LIST_STYLE_TYPE.custom}_★`,
+    },
+    {
+        label: '☆',
+        value: `${UNORDERED_LIST_STYLE_TYPE.custom}_☆`,
+    },
+];
+const OPTIONS = [
+    {
+        label: '•',
+        value: UNORDERED_LIST_STYLE_TYPE.disc,
+    },
+    {
+        label: '○',
+        value: UNORDERED_LIST_STYLE_TYPE.circle,
+    },
+    {
+        label: '■',
+        value: UNORDERED_LIST_STYLE_TYPE.square,
+    },
+];
+export const BulletListAction = ({ editor, useCustomBullet = false }) => {
+    const { value, disabled, isSelected } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => {
+            let value = editorInstance.getAttributes(CustomUnorderedList.name).listStyleType;
+            const disabled = !editorInstance.can().chain().focus().toggleCustomUnorderedList().run();
+            const isSelected = editorInstance.isActive(CustomUnorderedList.name);
+            if (isUnorderedListStyleType(value) && value === UNORDERED_LIST_STYLE_TYPE.custom) {
+                const bulletChar = editorInstance.getAttributes(CustomUnorderedList.name).customBulletChar;
+                value = `${UNORDERED_LIST_STYLE_TYPE.custom}_${bulletChar}`;
+            }
+            return {
+                value,
+                disabled,
+                isSelected,
+            };
+        },
+    });
+    const options = useMemo(() => (useCustomBullet ? [...OPTIONS, ...CUSTOM_BULLET_OPTIONS] : OPTIONS), [useCustomBullet]);
+    return (_jsx(SplitButtonDropdown, { disabled: disabled, value: value, options: options, onClickOption: v => {
+            const [listStyleType, customBulletChar] = v.split('_');
+            if (!isUnorderedListStyleType(listStyleType))
+                return;
+            if (isSelected) {
+                editor
+                    .chain()
+                    .focus()
+                    .setUnorderedListStyle({
+                    listStyleType,
+                    customBulletChar,
+                })
+                    .run();
+                return;
+            }
+            editor
+                .chain()
+                .focus()
+                .toggleCustomUnorderedList({
+                listStyleType,
+                customBulletChar,
+            })
+                .run();
+        }, onClick: () => {
+            editor.chain().focus().toggleCustomUnorderedList().run();
+        }, tooltipProps: {
+            title: `${TOOLTIPS.BULLET_LIST.TITLE} (${TOOLTIPS.BULLET_LIST.SHORTCUT})`,
+        }, children: _jsx(UnorderListIcon, { size: 18 }) }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/actions/ClearFormattingAction.d.ts

@@ -0,0 +1,5 @@
+import { Editor } from '@tiptap/core';
+export interface ClearFormattingActionProps {
+    editor: Editor;
+}
+export declare const ClearFormattingAction: ({ editor }: ClearFormattingActionProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/TextEditor/ui/Toolbar/actions/ClearFormattingAction.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextEditorButton } from '../../Button';
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import { useEditorState } from '@tiptap/react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+const RemoveFormattingIcon = ({ size }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M3.41111 3L2 4.42875L9.74445 12.27L7 18.75H10.3333L12.0778 14.6325L18.3667 21L19.7778 19.5712L3.72222 3.30375L3.41111 3ZM6.44444 3V3.2025L9.57778 6.375H12.2444L11.4444 8.265L13.7778 10.6275L15.5667 6.375H22V3H6.44444Z", fill: "currentColor" }) }));
+export const ClearFormattingAction = ({ editor }) => {
+    const { disabled } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            disabled: !editorInstance.can().chain().focus().run(),
+        }),
+    });
+    const clearFormatting = () => {
+        editor?.chain().focus().clearFormatting().run();
+    };
+    return (_jsx(TextEditorButton, { onClick: clearFormatting, disabled: disabled, icon: _jsx(RemoveFormattingIcon, { size: 18 }), tooltipProps: {
+            title: `${TOOLTIPS.CLEAR_FORMATTING.TITLE} (${TOOLTIPS.CLEAR_FORMATTING.SHORTCUT})`,
+        } }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/actions/EmojiAction.d.ts

@@ -0,0 +1,4 @@
+import { Editor } from '@tiptap/core';
+export declare const EmoijiAction: ({ editor }: {
+    editor: Editor | null;
+}) => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/TextEditor/ui/Toolbar/actions/EmojiAction.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { EmojiSmileIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { EMOJI_COLLECTIONS } from '@antscorp/antsomi-ui/es/components/molecules/TagifyInput';
+import { EmojiPopover } from '@antscorp/antsomi-ui/es/components/molecules/EmojiPopover';
+import { TextEditorButton } from '../../Button';
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import { useTextEditorStore } from '../../../provider';
+import { useEditorState } from '@tiptap/react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+export const EmoijiAction = ({ editor }) => {
+    const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
+    const { disabled } = useEditorState({
+        editor: editor,
+        selector: ({ editor: editorInstance }) => ({
+            disabled: !editorInstance.can().chain().focus().run(),
+        }),
+    });
+    const getPopupContainer = useCallback(() => bubbleMenuContainer || document.body, [bubbleMenuContainer]);
+    return (_jsx(EmojiPopover, { isForceHide: true, collections: [
+            {
+                key: EMOJI_COLLECTIONS.COMMON,
+                label: _jsx(EmojiSmileIcon, {}),
+            },
+        ], onEmojiClick: emoji => {
+            if (typeof emoji !== 'string')
+                return;
+            editor?.chain().insertEmoji(emoji);
+        }, getPopupContainer: getPopupContainer, destroyTooltipOnHide: true, children: _jsx(TextEditorButton, { disabled: disabled, tooltipProps: {
+                title: TOOLTIPS.EMOJI.TITLE,
+            }, icon: _jsx(EmojiSmileIcon, { size: 18 }) }) }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/actions/FontFamilyAction.d.ts

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/core';
+import { FontConfig, FontGroupingFunction, GroupOrderFunction } from '../../../types';
+/**
+ * Props for FontFamilyAction component
+ */
+export interface FontFamilyActionProps {
+    /** TipTap editor instance */
+    editor: Editor;
+    /** 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;
+    /** Callback when font selection changes */
+    onChange?: (font: FontConfig, weight: number) => void;
+    defaultFontFamily?: string;
+}
+export declare const FontFamilyAction: (props: FontFamilyActionProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/TextEditor/ui/Toolbar/actions/FontFamilyAction.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_FONT_CONFIGS } from '../../../constants';
+import { FontPopover } from '../../FontPopover/FontPopover';
+import { getPrimaryFontFamily } from '@antscorp/antsomi-ui/es/utils';
+import { useEditorState } from '@tiptap/react';
+import { useCallback, useEffect, useRef } from 'react';
+export const FontFamilyAction = (props) => {
+    const { editor, fonts = DEFAULT_FONT_CONFIGS, onChange, fontGroupingFn, groupOrder, defaultFontFamily, } = props;
+    const onChangeRef = useRef();
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const { fontValue, fontWeight } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => {
+            const { fontWeight, fontFamily } = editorInstance.getAttributes('textStyle') || {};
+            return {
+                fontValue: getPrimaryFontFamily(fontFamily || defaultFontFamily),
+                fontWeight: Number(fontWeight),
+            };
+        },
+    });
+    const activeFont = fonts.find(font => font.fontFamily.name === fontValue);
+    const handleChangeFont = useCallback((font, weight) => {
+        const done = editor
+            .chain()
+            .focus()
+            .setFontFamily([font.fontFamily.name, ...(font.fontFamily.fallback || [])].join(', '))
+            .setFontWeight(weight)
+            .run();
+        if (done) {
+            onChangeRef.current?.(font, weight);
+        }
+    }, [editor]);
+    return (_jsx(FontPopover, { fonts: fonts, value: activeFont
+            ? {
+                font: activeFont,
+                weight: fontWeight,
+            }
+            : undefined, onChange: handleChangeFont, fontGrouping: fontGroupingFn, groupOrder: groupOrder }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/actions/FontSizeAction.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Editor } from '@tiptap/core';
+export interface FontSizeActionProps {
+    editor: Editor;
+    throttled?: number;
+    defaultFontSize?: string;
+}
+export declare const FontSizeAction: import("react").MemoExoticComponent<({ editor, throttled, defaultFontSize, }: FontSizeActionProps) => import("react/jsx-runtime").JSX.Element>;

package/es/components/organism/TextEditor/ui/Toolbar/actions/FontSizeAction.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTextEditorStore } from '../../../provider';
+import { FontSizeInput, } from '@antscorp/antsomi-ui/es/components/molecules';
+import styled from 'styled-components';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useThrottledCallback } from 'use-debounce';
+import { useEditorState } from '@tiptap/react';
+import { toString } from 'lodash';
+import { DEFAULT_TEXT_STYLE } from '../../../constants';
+const StyledFontSizeInput = styled(FontSizeInput) `
+  &.antsomi-input-number {
+    width: 36px;
+
+    input.antsomi-input-number-input {
+      text-align: center;
+      height: 30px;
+      padding-inline: 0;
+      font-size: 12px;
+    }
+  }
+`;
+export const FontSizeAction = memo(({ editor, throttled = 100, defaultFontSize = DEFAULT_TEXT_STYLE.fontSize, }) => {
+    const inputRef = useRef(null);
+    const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
+    const { numberFontSize } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => {
+            const { fontSize } = editorInstance.getAttributes('textStyle');
+            return { numberFontSize: +toString(fontSize || defaultFontSize).replace('px', '') };
+        },
+    });
+    const [currentFontSize, setCurrentFontSize] = useState(numberFontSize);
+    useEffect(() => {
+        if (numberFontSize) {
+            setCurrentFontSize(numberFontSize);
+        }
+    }, [numberFontSize]);
+    const updateEditorFontSize = useThrottledCallback((v) => {
+        if (v === numberFontSize)
+            return;
+        editor.chain().focus().setFontSize(`${v}px`).run();
+    }, throttled);
+    const handleFontSizeChange = useCallback((value) => {
+        setCurrentFontSize(+value);
+        updateEditorFontSize(+value);
+    }, [updateEditorFontSize]);
+    const dropdownProps = useMemo(() => ({
+        getPopupContainer: () => bubbleMenuContainer,
+    }), [bubbleMenuContainer]);
+    return (_jsx(StyledFontSizeInput, { ref: inputRef, placeholder: "Font Size", value: currentFontSize, onChange: handleFontSizeChange, dropdownProps: dropdownProps }));
+});

package/es/components/organism/TextEditor/ui/Toolbar/actions/HistoryAction.d.ts

@@ -0,0 +1,5 @@
+import { Editor } from '@tiptap/core';
+export interface HistoryActionProps {
+    editor: Editor;
+}
+export declare const HistoryAction: ({ editor }: HistoryActionProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/TextEditor/ui/Toolbar/actions/HistoryAction.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextEditorButton } from '../../Button';
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import { useEditorState } from '@tiptap/react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+const UndoIcon = ({ size }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M10.1768 9.02857C8.29834 9.37143 6.64088 10.0571 5.09392 11.3143L2 8V16H9.73481L6.75138 12.9143C10.8398 9.94286 16.4751 10.8571 19.4586 15.0857C19.6796 15.4286 19.9006 15.6571 20.011 16L22 14.9714C19.5691 10.6286 14.9282 8.22857 10.1768 9.02857Z", fill: "currentColor" }) }));
+const RedoIcon = ({ size }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M13.8232 9.02857C15.7017 9.37143 17.3591 10.0571 18.9061 11.3143L22 8V16H14.2652L17.2486 12.9143C13.1602 9.94286 7.52486 10.8571 4.54144 15.0857C4.32044 15.4286 4.09945 15.6571 3.98895 16L2 14.9714C4.43094 10.6286 9.07182 8.22857 13.8232 9.02857Z", fill: "currentColor" }) }));
+export const HistoryAction = ({ editor }) => {
+    const { disabledUndo, disabledRedo } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            disabledUndo: !editorInstance.can().chain().focus().undo().run(),
+            disabledRedo: !editorInstance.can().chain().focus().redo().run(),
+        }),
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(TextEditorButton, { disabled: disabledUndo, onClick: () => editor.chain().focus().undo().run(), icon: _jsx(UndoIcon, { size: 18 }), tooltipProps: {
+                    title: `${TOOLTIPS.UNDO.TITLE} (${TOOLTIPS.UNDO.SHORTCUT})`,
+                } }), _jsx(TextEditorButton, { disabled: disabledRedo, onClick: () => editor.chain().focus().redo().run(), icon: _jsx(RedoIcon, { size: 18 }), tooltipProps: {
+                    title: `${TOOLTIPS.REDO.TITLE} (${TOOLTIPS.REDO.SHORTCUT})`,
+                } })] }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/actions/IndentAction.d.ts

@@ -0,0 +1,5 @@
+import { Editor } from '@tiptap/core';
+export interface IndentActionProps {
+    editor: Editor;
+}
+export declare const IndentAction: ({ editor }: IndentActionProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/TextEditor/ui/Toolbar/actions/IndentAction.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextEditorButton } from '../../Button';
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import { useEditorState } from '@tiptap/react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+const IndentIcon = ({ size }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M2 22H22V19.7778H2V22ZM2 7.55556V16.4444L6.44444 12L2 7.55556ZM10.8889 17.5556H22V15.3333H10.8889V17.5556ZM2 2V4.22222H22V2H2ZM10.8889 8.66667H22V6.44444H10.8889V8.66667ZM10.8889 13.1111H22V10.8889H10.8889V13.1111Z", fill: "currentColor" }) }));
+export const IndentAction = ({ editor }) => {
+    const { disabled } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            disabled: !editorInstance.can().chain().focus().indent().run(),
+        }),
+    });
+    return (_jsx(TextEditorButton, { disabled: disabled, icon: _jsx(IndentIcon, { size: 18 }), onClick: () => editor.chain().focus().indent().run(), tooltipProps: {
+            title: `${TOOLTIPS.INDENT.TITLE} (${TOOLTIPS.INDENT.SHORTCUT})`,
+        } }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/actions/ItalicAction.d.ts

@@ -0,0 +1,5 @@
+import { Editor } from '@tiptap/core';
+export interface ItalicActionProps {
+    editor: Editor;
+}
+export declare const ItalicAction: ({ editor }: ItalicActionProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/TextEditor/ui/Toolbar/actions/ItalicAction.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import { TextEditorButton } from '../../Button';
+import { useEditorState } from '@tiptap/react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+const ItalicIcon = ({ size }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M3 22V18.4286H8.84615L13.2308 5.57143H7.38462V2H22V5.57143H16.8846L12.5 18.4286H17.6154V22H3Z", fill: "currentColor" }) }));
+export const ItalicAction = ({ editor }) => {
+    const { isItalic, disabled } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            isItalic: editorInstance.isActive('italic'),
+            disabled: !editorInstance.can().chain().focus().toggleItalic().run(),
+        }),
+    });
+    return (_jsx(TextEditorButton, { onClick: () => editor.chain().focus().toggleItalic().run(), disabled: disabled, isActive: isItalic, icon: _jsx(ItalicIcon, { size: 18 }), tooltipProps: {
+            title: `${TOOLTIPS.ITALIC.TITLE} (${TOOLTIPS.ITALIC.SHORTCUT})`,
+        } }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/actions/LetterSpacing.d.ts

@@ -0,0 +1,5 @@
+import { Editor } from '@tiptap/core';
+export interface LetterSpacingActionProps {
+    editor: Editor;
+}
+export declare const LetterSpacingAction: ({ editor }: LetterSpacingActionProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/organism/TextEditor/ui/Toolbar/actions/LetterSpacing.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SplitButtonDropdown } from '../../SplitButtonDropdown';
+import { range } from 'lodash';
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import { useEditorState } from '@tiptap/react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+const LetterSpacingIcon = ({ size }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M14.4 10.1053H18.5L16.5 4.42105L14.4 10.1053ZM15.6 2H17.3L22 14.6316H20.1L19.1 11.8947H13.7L12.7 14.6316H10.8L15.6 2ZM11.2 2H13.1L8.4 14.6316H6.7L2 2H3.9L7.5 12.2105M19 22V19.8947H5V22L2 18.8421L5 15.6842V17.7895H19V15.6842L22 18.8421L19 22Z", fill: "currentColor" }) }));
+const LETTER_SPACING_VALUES = range(-10, 11);
+export const LetterSpacingAction = ({ editor }) => {
+    const { letterSpacing } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            letterSpacing: editorInstance.getAttributes('textStyle').letterSpacing,
+        }),
+    });
+    return (_jsx(SplitButtonDropdown, { tooltipProps: {
+            title: TOOLTIPS.LETTER_SPACING.TITLE,
+        }, value: letterSpacing, options: LETTER_SPACING_VALUES.map(value => ({
+            value: `${value}px`,
+            label: `${value} px`,
+        })), onClickOption: v => {
+            editor.chain().focus().setLetterSpacing(v).run();
+        }, onClick: (_, isSelected) => {
+            if (isSelected) {
+                editor.chain().focus().unsetLetterSpacing().run();
+            }
+        }, children: _jsx(LetterSpacingIcon, { size: 18 }) }));
+};

package/es/components/organism/TextEditor/ui/Toolbar/actions/LineSpacingAction.d.ts

@@ -0,0 +1,10 @@
+import { Editor } from '@tiptap/core';
+interface SpacingActionProps {
+    editor: Editor;
+    defaultValue?: string;
+}
+export declare const LineSpacingIcon: (props: React.SVGProps<SVGSVGElement> & {
+    size?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const LineSpacingAction: (props: SpacingActionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/organism/TextEditor/ui/Toolbar/actions/LineSpacingAction.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_TEXT_STYLE, TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import { DropdownButton } from '../../DropdownButton';
+import { range, round } from 'lodash';
+import { Tooltip } from 'antd';
+import { useEditorState } from '@tiptap/react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+export const LineSpacingIcon = (props) => {
+    const { size = 24, ...restProps } = props;
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...restProps, children: _jsx("path", { d: "M21 10H13M21 6H13M21 14H13M21 18H13M6 20L6 4M6 20L3 17M6 20L9 17M6 4L3 7M6 4L9 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+const OPTIONS = [
+    { value: '1', label: 'Single' },
+    { value: '2', label: 'Double' },
+    ...range(1.1, 3.1, 0.1).map(spacing => {
+        const roundValue = round(spacing, 1);
+        return {
+            value: `${roundValue}`,
+            label: `${roundValue}`,
+        };
+    }),
+];
+export const LineSpacingAction = (props) => {
+    const { editor, defaultValue = DEFAULT_TEXT_STYLE.lineHeight } = props;
+    const { selectedLineHeight } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            selectedLineHeight: OPTIONS.find(opt => {
+                const { value } = opt;
+                return +editorInstance.getAttributes('textStyle').lineHeight === +value;
+            }),
+        }),
+    });
+    return (_jsx(DropdownButton, { value: selectedLineHeight?.value, options: [
+            {
+                label: (_jsx(Tooltip, { mouseEnterDelay: 0.4, title: defaultValue, arrow: false, children: "Default" })),
+                value: defaultValue,
+            },
+            ...OPTIONS,
+        ], onClickOption: value => {
+            editor.chain().focus().setLineHeight(value).run();
+        }, tooltipProps: {
+            title: TOOLTIPS.LINE_SPACING.TITLE,
+        }, children: _jsx(LineSpacingIcon, { size: 18 }) }));
+};