@antscorp/antsomi-ui 2.0.90 → 2.0.91-text-editor-beta.1

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

@@ -0,0 +1,84 @@
+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 }) => ({
+            disabled: !editorInstance.can().chain().focus().toggleCustomUnorderedList().run(),
+            value: editorInstance.getAttributes(CustomUnorderedList.name).listStyleType,
+            isSelected: editorInstance.isActive(CustomUnorderedList.name),
+        }),
+    });
+    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,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextEditorButton } from '../../Button';
+import { DEFAULT_TEXT_STYLE, 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()
+            .updateAttributes('textStyle', DEFAULT_TEXT_STYLE)
+            .unsetAllMarks()
+            .clearNodes()
+            .unsetTextAlign()
+            .unsetTextTransform()
+            .run();
+    };
+    return (_jsx(TextEditorButton, { onClick: clearFormatting, disabled: disabled, icon: _jsx(RemoveFormattingIcon, { size: 18 }), tooltipProps: {
+            title: TOOLTIPS.CLEAR_FORMATTING.TITLE,
+        } }));
+};

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,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { EmojiSmileIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { EMOJI_COLLECTIONS, EmojiPopover } from '@antscorp/antsomi-ui/es/components/molecules';
+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, { collections: [
+            {
+                key: EMOJI_COLLECTIONS.COMMON,
+                label: _jsx(EmojiSmileIcon, {}),
+            },
+        ], onEmojiClick: emoji => {
+            if (typeof emoji !== 'string')
+                return;
+            editor?.chain().insertEmoji(emoji);
+        }, getPopupContainer: getPopupContainer, 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,7 @@
+import { Editor } from '@tiptap/core';
+import { FontConfig } from '../../../types';
+export interface FontFamilyActionProps {
+    editor: Editor;
+    fonts?: FontConfig[];
+}
+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,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toString } from 'lodash';
+import { DEFAULT_FONT_CONFIGS } from '../../../constants';
+import { FontPopover } from '../../FontPopover/FontPopover';
+import { useEditorState } from '@tiptap/react';
+export const FontFamilyAction = (props) => {
+    const { editor, fonts = DEFAULT_FONT_CONFIGS } = props;
+    const { fontValue, fontWeight } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => {
+            const { fontWeight, fontFamily } = editorInstance.getAttributes('textStyle') || {};
+            let fontValue = toString(fontFamily);
+            if (fontValue.split(',').length > 0) {
+                [fontValue] = fontValue.split(',');
+            }
+            return {
+                fontValue,
+                fontWeight: Number(fontWeight),
+            };
+        },
+    });
+    return (_jsx(FontPopover, { fonts: fonts, value: {
+            font: fonts.find(font => font.fontFamily.name === fontValue) || fonts[0],
+            weight: fontWeight,
+        }, onChange: (font, weight) => {
+            editor.chain().focus().setFontFamily(font.fontFamily.name).setFontWeight(weight).run();
+        } }));
+};

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

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

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

@@ -0,0 +1,47 @@
+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, useMemo, useRef, useState } from 'react';
+import { useThrottledCallback } from 'use-debounce';
+import { DEFAULT_TEXT_STYLE } from '../../../constants';
+import { useEditorState } from '@tiptap/react';
+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 }) => {
+    const inputRef = useRef(null);
+    const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
+    const { numberFontSize } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => {
+            const fontSize = editorInstance.getAttributes('textStyle').fontSize || DEFAULT_TEXT_STYLE.fontSize;
+            return {
+                numberFontSize: fontSize.replace('px', ''),
+            };
+        },
+    });
+    const [currentFontSize, setCurrentFontSize] = useState(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 TextTransformActionProps {
+    editor: Editor;
+}
+export declare const LetterSpacingAction: ({ editor }: TextTransformActionProps) => 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/LinkAction.d.ts

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

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

@@ -0,0 +1,17 @@
+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 LinkIcon = ({ size }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: size, width: size, viewBox: "0 -960 960 960", fill: "currentColor", children: _jsx("path", { d: "M680-160v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm560-40h-80q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480Z" }) }));
+export const LinkAction = ({ editor, onClick }) => {
+    const { isActive } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            isActive: editorInstance.isActive('link'),
+        }),
+    });
+    return (_jsx(TextEditorButton, { isActive: isActive, icon: _jsx(LinkIcon, { size: 18 }), onClick: () => onClick?.(), tooltipProps: {
+            title: TOOLTIPS.LINK.TITLE,
+        } }));
+};

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

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

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ORDERED_LIST_STYLE_TYPE, TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import { SplitButtonDropdown } from '../../SplitButtonDropdown';
+import { CustomOrderedList } from '../../../extensions/OrderedList';
+import { isOrderedListStyleType } from '../../../types';
+import { useEditorState } from '@tiptap/react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+const ListOrderedIcon = ({ 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 16.7857H4.10526V17.3214H3.05263V18.3929H4.10526V18.9286H2V20H5.15789V15.7143H2V16.7857ZM3.05263 9.28571H4.10526V5H2V6.07143H3.05263V9.28571ZM2 11.4286H3.89474L2 13.6786V14.6429H5.15789V13.5714H3.26316L5.15789 11.3214V10.3571H2V11.4286ZM7.26316 6.07143V8.21429H22V6.07143H7.26316ZM7.26316 18.9286H22V16.7857H7.26316V18.9286ZM7.26316 13.5714H22V11.4286H7.26316V13.5714Z", fill: "currentColor" }) }));
+const OPTIONS = [
+    {
+        label: '1, 2, 3, ...',
+        value: ORDERED_LIST_STYLE_TYPE.decimal,
+    },
+    {
+        label: 'a, b, c, ...',
+        value: ORDERED_LIST_STYLE_TYPE.lowerAlpha,
+    },
+    {
+        label: 'A, B, C, ...',
+        value: ORDERED_LIST_STYLE_TYPE.upperAlpha,
+    },
+    {
+        label: 'i, ii, iii, ...',
+        value: ORDERED_LIST_STYLE_TYPE.lowerRoman,
+    },
+    {
+        label: 'I, II, III, ...',
+        value: ORDERED_LIST_STYLE_TYPE.upperRoman,
+    },
+    {
+        label: 'α, β, γ, ...',
+        value: ORDERED_LIST_STYLE_TYPE.lowerGreek,
+    },
+    {
+        label: '01, 02, 03, ...',
+        value: ORDERED_LIST_STYLE_TYPE.decimalLeadingZero,
+    },
+];
+export const OrderedListAction = ({ editor }) => {
+    const { value, disabled, isSelected } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            disabled: !editorInstance.can().chain().focus().toggleCustomOrderedList().run(),
+            value: editorInstance.getAttributes(CustomOrderedList.name).listStyleType,
+            isSelected: editorInstance.isActive(CustomOrderedList.name),
+        }),
+    });
+    return (_jsx(SplitButtonDropdown, { disabled: disabled, value: value, options: OPTIONS, onClickOption: v => {
+            if (!isOrderedListStyleType(v))
+                return;
+            if (isSelected) {
+                editor.chain().focus().setOrderedListStyleType(v).run();
+                return;
+            }
+            editor
+                .chain()
+                .focus()
+                .toggleCustomOrderedList({
+                listStyleType: v,
+            })
+                .run();
+        }, onClick: () => {
+            editor.chain().focus().toggleCustomOrderedList().run();
+        }, tooltipProps: {
+            title: `${TOOLTIPS.ORDERED_LIST.TITLE} (${TOOLTIPS.ORDERED_LIST.SHORTCUT})`,
+        }, children: _jsx(ListOrderedIcon, { size: 18 }) }));
+};

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

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

package/es/components/organism/TextEditor/ui/Toolbar/actions/OutdentAction.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 OutdentIcon = ({ 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.8889 17.5556H22V15.3333H10.8889V17.5556ZM2 12L6.44444 16.4444V7.55556L2 12ZM2 22H22V19.7778H2V22ZM2 2V4.22222H22V2H2ZM10.8889 8.66667H22V6.44444H10.8889V8.66667ZM10.8889 13.1111H22V10.8889H10.8889V13.1111Z", fill: "currentColor" }) }));
+export const OutdentAction = ({ editor }) => {
+    const { disabled } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            disabled: !editorInstance.can().chain().focus().outdent().run(),
+        }),
+    });
+    return (_jsx(TextEditorButton, { disabled: disabled, icon: _jsx(OutdentIcon, { size: 18 }), onClick: () => editor.chain().focus().outdent().run(), tooltipProps: {
+            title: `${TOOLTIPS.OUTDENT.TITLE} (${TOOLTIPS.OUTDENT.SHORTCUT})`,
+        } }));
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Editor } from '@tiptap/core';
+export interface SmartTagActionProps {
+    editor: Editor;
+    onClick?: (event: React.MouseEvent) => void;
+}
+export declare const SmartTagAction: (props: SmartTagActionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+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 BracesIcon = ({ 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: "M8.33488 22C7.24726 21.7935 6.27276 21.1962 5.59506 20.3208C4.91737 19.4454 4.58329 18.3524 4.65581 17.2477V15.2244C4.65581 13.8484 4.10388 13.1605 3 13.1605V10.8349C4.10388 10.8349 4.65581 10.1434 4.65581 8.76047V6.61395C4.62732 5.54392 4.96584 4.49636 5.61512 3.64535C6.33032 2.82782 7.28199 2.25284 8.33837 2L8.98256 3.79884C8.12442 4.12597 7.67829 5.04225 7.64419 6.54767V8.76512C7.69096 9.43175 7.53511 10.0969 7.19707 10.6734C6.85903 11.2499 6.35461 11.7107 5.75 11.9953C6.35481 12.282 6.85892 12.7447 7.19629 13.3228C7.53366 13.9008 7.68856 14.5673 7.6407 15.2349V17.4442C7.67481 18.9496 8.12093 19.8659 8.97907 20.193L8.33488 22ZM15.0186 20.1907C15.8767 19.8636 16.3229 18.9473 16.357 17.4419V15.2244C16.309 14.5567 16.4653 13.8903 16.8051 13.3135C17.1448 12.7367 17.652 12.277 18.2593 11.9953C17.6523 11.7135 17.1453 11.2537 16.8057 10.677C16.4662 10.1002 16.3101 9.43383 16.3581 8.76628V6.54884C16.324 5.04341 15.8779 4.12713 15.0198 3.8L15.664 2.00116C16.7345 2.24964 17.6974 2.83439 18.4116 3.66977C19.0587 4.54795 19.3868 5.62058 19.3419 6.71047V8.76512C19.3419 10.1481 19.8938 10.8395 20.9977 10.8395V13.1651C19.8938 13.1651 19.3419 13.85 19.3419 15.2198V17.3907C19.382 18.4722 19.0328 19.5322 18.3577 20.3781C17.6825 21.2239 16.7263 21.7994 15.6628 22L15.0186 20.1907Z", fill: "currentColor" }) }));
+export const SmartTagAction = (props) => {
+    const { editor, onClick } = props;
+    const { isActive } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            isActive: editorInstance.isActive('smartTag'),
+        }),
+    });
+    return (_jsx(TextEditorButton, { onClick: onClick, isActive: isActive, icon: _jsx(BracesIcon, { size: 18 }), tooltipProps: {
+            title: TOOLTIPS.SMART_TAG.TITLE,
+        } }));
+};

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

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

package/es/components/organism/TextEditor/ui/Toolbar/actions/SpacingAction.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 { LineHeight } from '../../../extensions/LineHeight';
+import { range, round } from 'lodash';
+import { Tooltip } from 'antd';
+import { useEditorState } from '@tiptap/react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+export const SpacingIcon = (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 SpacingAction = (props) => {
+    const { editor, defaultValue = DEFAULT_TEXT_STYLE.lineHeight } = props;
+    const { selectedLineHeight } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            selectedLineHeight: OPTIONS.map(i => i.value).find(lineHeight => editorInstance?.isActive({
+                [LineHeight.name]: lineHeight,
+            })),
+        }),
+    });
+    return (_jsx(DropdownButton, { value: selectedLineHeight, 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(SpacingIcon, { size: 18 }) }));
+};

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

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

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

@@ -0,0 +1,18 @@
+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 StrikethroughIcon = ({ 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: "M9.77778 21H14.2222V17.6H9.77778V21ZM4.22222 4V7.4H9.77778V10.8H14.2222V7.4H19.7778V4H4.22222ZM2 15.3333H22V13.0667H2V15.3333Z", fill: "currentColor" }) }));
+export const StrikeAction = ({ editor }) => {
+    const { isStrike, disabled } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            isStrike: editorInstance.isActive('strike'),
+            disabled: !editorInstance.can().chain().focus().toggleStrike().run(),
+        }),
+    });
+    return (_jsx(TextEditorButton, { icon: _jsx(StrikethroughIcon, { size: 18 }), disabled: disabled, isActive: isStrike, onClick: () => editor.chain().focus().toggleStrike().run(), tooltipProps: {
+            title: `${TOOLTIPS.STRIKE.TITLE} (${TOOLTIPS.STRIKE.SHORTCUT})`,
+        } }));
+};

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

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