@antscorp/antsomi-ui 2.0.109 → 2.0.111

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/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;

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

@@ -0,0 +1,26 @@
+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 SubscriptIcon = ({ 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: "M20.8318 19.625H18.4953V20.8125H22V22H17.3271V19.625C17.3271 18.9719 17.8528 18.4375 18.4953 18.4375H20.8318V17.25H17.3271V16.0625H20.8318C21.4743 16.0625 22 16.5969 22 17.25V18.4375C22 19.0906 21.4743 19.625 20.8318 19.625ZM2 19.625H5.10748L9.07944 13.1887H9.21963L13.1916 19.625H16.2991L10.8668 10.9919L15.9369 3H12.8061L9.21963 8.92562H9.07944L5.46963 3H2.36215L7.40888 10.9919L2 19.625Z", fill: "currentColor" }) }));
+export const SubscriptAction = ({ editor }) => {
+    const { isSubscript, isSuperscript, disabled } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            isSubscript: editorInstance.isActive('subscript'),
+            isSuperscript: editorInstance.isActive('superscript'),
+            disabled: !editorInstance.can().chain().focus().toggleSubscript().run(),
+        }),
+    });
+    return (_jsx(TextEditorButton, { onClick: () => {
+            if (isSuperscript) {
+                editor.chain().focus().toggleSuperscript().toggleSubscript().run();
+            }
+            else {
+                editor.chain().focus().toggleSubscript().run();
+            }
+        }, disabled: disabled, isActive: isSubscript, icon: _jsx(SubscriptIcon, { size: 18 }), tooltipProps: {
+            title: `${TOOLTIPS.SUBSCRIPT.TITLE} (${TOOLTIPS.SUBSCRIPT.SHORTCUT})`,
+        } }));
+};

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

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

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

@@ -0,0 +1,26 @@
+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 SuperscriptIcon = ({ 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: "M20.8318 6.5625H18.4953V7.75H22V8.9375H17.3271V6.5625C17.3271 5.90937 17.8528 5.375 18.4953 5.375H20.8318V4.1875H17.3271V3H20.8318C21.4743 3 22 3.53437 22 4.1875V5.375C22 6.02813 21.4743 6.5625 20.8318 6.5625ZM2 22H5.10748L9.07944 15.5637H9.21963L13.1916 22H16.2991L10.8668 13.3669L15.9369 5.375H12.8061L9.21963 11.3006H9.07944L5.46963 5.375H2.36215L7.40888 13.3669L2 22Z", fill: "currentColor" }) }));
+export const SuperscriptAction = ({ editor }) => {
+    const { isSuperscript, isSubscript, disabled } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            isSuperscript: editorInstance.isActive('superscript'),
+            isSubscript: editorInstance.isActive('subscript'),
+            disabled: !editorInstance.can().chain().focus().toggleSuperscript().run(),
+        }),
+    });
+    return (_jsx(TextEditorButton, { onClick: () => {
+            if (isSubscript) {
+                editor.chain().focus().toggleSubscript().toggleSuperscript().run();
+            }
+            else {
+                editor.chain().focus().toggleSuperscript().run();
+            }
+        }, disabled: disabled, isActive: isSuperscript, icon: _jsx(SuperscriptIcon, { size: 18 }), tooltipProps: {
+            title: `${TOOLTIPS.SUPERSCRIPT.TITLE} (${TOOLTIPS.SUBSCRIPT.SHORTCUT})`,
+        } }));
+};

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

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

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextAlignSelect } from '../../TextAlignSelect';
+export const TextAlignAction = ({ editor }) => (_jsx(TextAlignSelect, { editor: editor, onChange: v => editor.chain().focus().setTextAlign(v).run() }));

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

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

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex } from 'antd';
+import { ColorPicker } from '../../ColorPicker';
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import { useRef } from 'react';
+import tinycolor from 'tinycolor2';
+import { TextEditorButton } from '../../Button';
+import { useEditorState } from '@tiptap/react';
+const BrushCleaningIcon = ({ 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: "M20.7879 12.7767C20.7879 13.3592 20.7205 13.9175 20.5859 14.4515C20.4512 14.9854 20.266 15.4951 20.0303 15.9806L18.4646 14.5243C18.5657 14.2492 18.6414 13.9701 18.6919 13.6869C18.7424 13.4037 18.7677 13.1003 18.7677 12.7767C18.7677 12.0162 18.6204 11.2961 18.3258 10.6165C18.0311 9.93689 17.5892 9.3301 17 8.79612L12.7071 4.71845L10.4848 6.80583L9.07071 5.4466L12.7071 2L18.4141 7.38835C19.1549 8.06796 19.7357 8.87298 20.1566 9.8034C20.5774 10.7338 20.7879 11.7249 20.7879 12.7767ZM20.5859 22L17.4545 18.9903C16.7643 19.4595 16.0236 19.8196 15.2323 20.0704C14.4411 20.3212 13.5993 20.4466 12.7071 20.4466C10.468 20.4466 8.56145 19.6982 6.98737 18.2015C5.4133 16.7047 4.62626 14.8964 4.62626 12.7767C4.62626 11.9515 4.76094 11.1586 5.0303 10.3981C5.29966 9.63754 5.7037 8.90938 6.24242 8.21359L2 4.13592L3.41414 2.7767L22 20.6408L20.5859 22ZM12.7071 18.5049C13.3131 18.5049 13.8897 18.4239 14.4369 18.2621C14.984 18.1003 15.5017 17.8738 15.9899 17.5825L7.65657 9.62136C7.30303 10.1392 7.0463 10.657 6.88636 11.1748C6.72643 11.6926 6.64646 12.2265 6.64646 12.7767C6.64646 14.3625 7.23569 15.7136 8.41414 16.8301C9.59259 17.9466 11.0236 18.5049 12.7071 18.5049Z", fill: "currentColor" }) }));
+const HighlighterIcon = ({ size, color = 'currentColor' }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M2 24V20H22V24H2Z", fill: color }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.7246 12.6748L12 17.4248C11.6001 17.8247 11.1294 18.0253 10.5879 18.0254C10.0462 18.0254 9.5748 17.8248 9.1748 17.4248L8.5 18H3.5L6.65039 14.875C6.25039 14.475 6.04206 13.9958 6.02539 13.4375C6.00873 12.8793 6.19974 12.4 6.59961 12L11.3252 7.27539L16.7246 12.6748ZM8 13.4004L10.5752 16L14.5996 12L12 9.40039L8 13.4004Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.4121 2C17.9537 2 18.4252 2.19968 18.8252 2.59961L21.4248 5.1748C21.8248 5.5748 22.0254 6.04622 22.0254 6.58789C22.0253 7.12939 21.8247 7.6001 21.4248 8L16.7246 12.6748L11.3252 7.27539L16 2.59961C16.3999 2.19984 16.8707 2.0001 17.4121 2ZM13.4248 8L16 10.5752L20 6.59961L17.4004 4L13.4248 8Z", fill: "currentColor" })] }));
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+export const TextBackColorAction = ({ editor }) => {
+    const ref = useRef(null);
+    const { activeColor } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            activeColor: editorInstance.getAttributes('textStyle').backgroundColor,
+        }),
+    });
+    const handleClearBackgroundColor = () => {
+        editor.chain().focus().unsetBackgroundColor().run();
+        ref.current?.setOpen(false);
+    };
+    return (_jsx(ColorPicker, { ref: ref, value: activeColor, onChange: v => editor.chain().focus().setBackgroundColor(v).run(), popoverProps: {
+            content: ({ colorGrid, usedColors, customColorPicker }) => (_jsxs(Flex, { vertical: true, gap: 8, children: [colorGrid, usedColors, customColorPicker, _jsx(Button, { icon: _jsx(BrushCleaningIcon, { size: 18 }), onClick: handleClearBackgroundColor, type: "text", children: "None" })] })),
+        }, children: _jsx(TextEditorButton, { tooltipProps: {
+                title: TOOLTIPS.HIGHLIGHT.TITLE,
+            }, icon: _jsx(HighlighterIcon, { color: tinycolor(activeColor).isValid() ? activeColor : 'transparent', size: 18 }) }) }));
+};

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Editor } from '@tiptap/core';
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    color?: string;
+    textColor?: string;
+    size?: number;
+}
+export declare const TextColorIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export interface TextColorActionProps {
+    editor: Editor;
+    defaultValue?: string;
+}
+export declare const TextColorAction: ({ editor, defaultValue, }: TextColorActionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorPicker } from '../../ColorPicker';
+import { DEFAULT_TEXT_STYLE, TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import tinycolor from 'tinycolor2';
+import { TextEditorButton } from '../../Button';
+import { useEditorState } from '@tiptap/react';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+export const TextColorIcon = (props) => {
+    const { color, textColor = 'currentColor', size = 24, ...rest } = props;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", ...rest, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19 18H16.415L15.0688 13.8862H8.98483L7.58504 18H5L10.6538 2H13.3462L19 18ZM9.73888 11.6004H14.2611L12.0536 4.97098H11.9464L9.73888 11.6004Z", fill: "currentColor" }), _jsx("path", { d: "M2 24V20H22V24H2Z", fill: textColor })] }));
+};
+export const TextColorAction = ({ editor, defaultValue = DEFAULT_TEXT_STYLE.color, }) => {
+    const { activeColor } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            activeColor: editorInstance.getAttributes('textStyle').color,
+        }),
+    });
+    return (_jsx(ColorPicker, { value: activeColor, onChange: v => editor.chain().focus().setColor(v).run(), children: _jsx(TextEditorButton, { icon: _jsx(TextColorIcon, { size: 18, textColor: tinycolor(activeColor).isValid() ? activeColor : defaultValue }), tooltipProps: {
+                title: TOOLTIPS.TEXT_COLOR.TITLE,
+            } }) }));
+};

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

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

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+import { DropdownButton } from '../../DropdownButton';
+import { useEditorState } from '@tiptap/react';
+const { TEXT_TRANSFORM, TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+const TextTransformIcon = ({ size }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M21.8775 10.3857V12.3506H15.9394V10.3857H21.8775ZM17.4098 7.81406H20.1243V17.6674C20.1243 17.9692 20.162 18.2004 20.2374 18.3609C20.3191 18.5214 20.4385 18.6338 20.5956 18.698C20.7527 18.7558 20.9506 18.7847 21.1894 18.7847C21.3591 18.7847 21.5099 18.7783 21.6418 18.7654C21.7801 18.7462 21.8963 18.7269 21.9906 18.7076L22 20.7496C21.7675 20.8266 21.5162 20.8876 21.246 20.9326C20.9758 20.9775 20.6773 21 20.3505 21C19.7536 21 19.232 20.9005 18.7859 20.7014C18.346 20.4959 18.0067 20.1685 17.7679 19.719C17.5292 19.2695 17.4098 18.6787 17.4098 17.9467V7.81406Z", fill: "currentColor" }), _jsx("path", { d: "M2 3V6.59617H8.64727V20.9808H12.2836V6.59617H18.9309V3H2Z", fill: "currentColor" })] }));
+export const TextTransformAction = ({ editor }) => {
+    const { textTransform } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            textTransform: editorInstance.getAttributes('textStyle').textTransform,
+        }),
+    });
+    return (_jsx(DropdownButton, { tooltipProps: {
+            title: TOOLTIPS.TEXT_TRANSFORM.TITLE,
+        }, value: textTransform, options: [
+            {
+                label: TEXT_TRANSFORM.OPTIONS.UPPERCASE.LABEL,
+                value: TEXT_TRANSFORM.OPTIONS.UPPERCASE.VALUE,
+            },
+            {
+                label: TEXT_TRANSFORM.OPTIONS.LOWERCASE.LABEL,
+                value: TEXT_TRANSFORM.OPTIONS.LOWERCASE.VALUE,
+            },
+            {
+                label: TEXT_TRANSFORM.OPTIONS.CAPITALIZE.LABEL,
+                value: TEXT_TRANSFORM.OPTIONS.CAPITALIZE.VALUE,
+            },
+            {
+                label: TEXT_TRANSFORM.OPTIONS.NONE.LABEL,
+                value: TEXT_TRANSFORM.OPTIONS.NONE.VALUE,
+            },
+        ], onClickOption: v => {
+            editor.chain().focus().setTextTransform(v).run();
+        }, children: _jsx(TextTransformIcon, { size: 18 }) }));
+};

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

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

package/es/components/organism/TextEditor/ui/Toolbar/actions/UnderlineAction.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 UnderlineIcon = ({ 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: "M4 22V19.7778H20V22H4ZM12 17.5556C10.0762 17.5556 8.58095 16.9722 7.51429 15.8056C6.44762 14.6389 5.91429 13.0926 5.91429 11.1667V2H8.85714V11.3333C8.85714 12.3704 9.12381 13.213 9.65714 13.8611C10.1905 14.5093 10.9714 14.8333 12 14.8333C13.0286 14.8333 13.8095 14.5093 14.3429 13.8611C14.8762 13.213 15.1429 12.3704 15.1429 11.3333V2H18.0857V11.1667C18.0857 13.0926 17.5524 14.6389 16.4857 15.8056C15.419 16.9722 13.9238 17.5556 12 17.5556Z", fill: "currentColor" }) }));
+export const UnderlineAction = ({ editor }) => {
+    const { isUnderline, disabled } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            isUnderline: editorInstance.isActive('underline'),
+            disabled: !editorInstance.can().chain().focus().toggleUnderline().run(),
+        }),
+    });
+    return (_jsx(TextEditorButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), disabled: disabled, isActive: isUnderline, icon: _jsx(UnderlineIcon, { size: 18 }), tooltipProps: {
+            title: `${TOOLTIPS.UNDERLINE.TITLE} (${TOOLTIPS.UNDERLINE.SHORTCUT})`,
+        } }));
+};

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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Hooks
+import { LinkOffIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { TextEditorButton } from '../../Button';
+import { memo } from 'react';
+import { useEditorState } from '@tiptap/react';
+export const UnsetLinkAction = memo((props) => {
+    const { editor } = props;
+    const { disabled } = useEditorState({
+        editor,
+        selector: ({ editor: editorInstance }) => ({
+            disabled: !editorInstance.can().chain().focus().unsetCustomLink().run(),
+        }),
+    });
+    return (_jsx(TextEditorButton, { tooltipProps: {
+            title: 'Remove link',
+        }, disabled: disabled, icon: _jsx(LinkOffIcon, { size: 18 }), onClick: () => editor.chain().unsetCustomLink().run() }));
+});

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

@@ -0,0 +1,24 @@
+export * from './BoldAction';
+export * from './BulletListAction';
+export * from './ClearFormattingAction';
+export * from './FontFamilyAction';
+export * from './FontSizeAction';
+export * from './ItalicAction';
+export * from './StrikeAction';
+export * from './SuperscriptAction';
+export * from './SubscriptAction';
+export * from './TextTransformAction';
+export * from './LinkAction';
+export * from './SmartTagAction';
+export * from './TextColorAction';
+export * from './OrderedListAction';
+export * from './TextAlignAction';
+export * from './IndentAction';
+export * from './OutdentAction';
+export * from './UnderlineAction';
+export * from './EmojiAction';
+export * from './HistoryAction';
+export * from './LetterSpacing';
+export * from './TextBackgroundColorAction';
+export * from './UnsetLink';
+export * from './LineSpacingAction';

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

@@ -0,0 +1,24 @@
+export * from './BoldAction';
+export * from './BulletListAction';
+export * from './ClearFormattingAction';
+export * from './FontFamilyAction';
+export * from './FontSizeAction';
+export * from './ItalicAction';
+export * from './StrikeAction';
+export * from './SuperscriptAction';
+export * from './SubscriptAction';
+export * from './TextTransformAction';
+export * from './LinkAction';
+export * from './SmartTagAction';
+export * from './TextColorAction';
+export * from './OrderedListAction';
+export * from './TextAlignAction';
+export * from './IndentAction';
+export * from './OutdentAction';
+export * from './UnderlineAction';
+export * from './EmojiAction';
+export * from './HistoryAction';
+export * from './LetterSpacing';
+export * from './TextBackgroundColorAction';
+export * from './UnsetLink';
+export * from './LineSpacingAction';

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

@@ -0,0 +1,2 @@
+export { LinkPreviewToolbar, type LinkPreviewToolbarProps } from './LinkPreviewToolbar';
+export { FormattingToolbar, type FormattingToolbarProps } from './FormattingToolbar';

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

@@ -0,0 +1,2 @@
+export { LinkPreviewToolbar } from './LinkPreviewToolbar';
+export { FormattingToolbar } from './FormattingToolbar';

package/es/components/organism/TextEditor/utils/documentState.d.ts

@@ -0,0 +1,73 @@
+import { EditorState } from '@tiptap/pm/state';
+import { Node as ProseMirrorNode } from '@tiptap/pm/model';
+import { Editor } from '@tiptap/core';
+/**
+ * Configuration for document emptiness detection
+ */
+export interface DocumentStateConfig {
+    /** Minimum size to consider document as having content */
+    minContentSize?: number;
+    /** Whether to consider whitespace-only content as empty */
+    ignoreWhitespace?: boolean;
+    /** Custom validation function */
+    customValidator?: (doc: ProseMirrorNode) => boolean;
+}
+/**
+ * Calculates the minimum size of an empty document based on schema
+ */
+export declare function calculateEmptyDocumentSize(state: EditorState): number;
+/**
+ * Checks if document is effectively empty
+ */
+export declare function isDocumentEmpty(state: EditorState, config?: DocumentStateConfig): boolean;
+/**
+ * Checks if document has meaningful content
+ */
+export declare function hasDocumentContent(state: EditorState, config?: DocumentStateConfig): boolean;
+/**
+ * Gets document content statistics
+ */
+export declare function getDocumentStats(state: EditorState): {
+    nodeSize: number;
+    textLength: number;
+    trimmedTextLength: number;
+    nodeCount: void;
+    isEmpty: boolean;
+    emptyDocumentSize: number;
+};
+/**
+ * Document state change detector
+ */
+export declare class DocumentStateTracker {
+    private previousState;
+    /**
+     * Updates tracker with new state and returns changes
+     */
+    update(state: EditorState): {
+        isEmpty: boolean;
+        wasEmpty: boolean;
+        becameEmpty: boolean;
+        becameNonEmpty: boolean;
+        sizeChanged: boolean;
+        textLengthChanged: boolean;
+    };
+    /**
+     * Resets the tracker
+     */
+    reset(): void;
+}
+export declare function isEntireParagraphSelected(editor: Editor): boolean;
+/**
+ * Helper function to extract text from atom nodes (emoji, smartTag)
+ * Used as leafText callback for doc.textBetween()
+ */
+export declare const getTextFromAtomNode: (node: ProseMirrorNode) => string;
+/**
+ * Wrapper for doc.textBetween that automatically handles atom nodes (emoji, smartTag)
+ * @param state EditorState
+ * @param from Start position
+ * @param to End position
+ * @param blockSeparator Optional separator between blocks (default: '')
+ * @returns Text content including atom nodes
+ */
+export declare const textBetween: (state: EditorState, from: number, to: number, blockSeparator?: string) => string;

package/es/components/organism/TextEditor/utils/documentState.js

@@ -0,0 +1,149 @@
+import { LIST_EMOJI } from '../extensions/Emoji';
+/**
+ * Default configuration for document state detection
+ */
+const DEFAULT_CONFIG = {
+    minContentSize: 4, // Standard ProseMirror empty doc size
+    ignoreWhitespace: true,
+    customValidator: () => false,
+};
+/**
+ * Calculates the minimum size of an empty document based on schema
+ */
+export function calculateEmptyDocumentSize(state) {
+    // Create a minimal document with the same schema
+    const emptyDoc = state.schema.topNodeType.createAndFill();
+    return emptyDoc?.nodeSize ?? 4;
+}
+/**
+ * Checks if document is effectively empty
+ */
+export function isDocumentEmpty(state, config = {}) {
+    const { minContentSize, ignoreWhitespace, customValidator } = {
+        ...DEFAULT_CONFIG,
+        ...config,
+    };
+    const { doc } = state;
+    // Use custom validator if provided
+    if (customValidator(doc)) {
+        return true;
+    }
+    // Check document size
+    const calculatedMinSize = calculateEmptyDocumentSize(state);
+    const effectiveMinSize = minContentSize === 4 ? calculatedMinSize : minContentSize;
+    if (doc.nodeSize <= effectiveMinSize) {
+        return true;
+    }
+    // Check if content is only whitespace
+    if (ignoreWhitespace) {
+        const textContent = doc.textContent.trim();
+        return textContent.length === 0;
+    }
+    return false;
+}
+/**
+ * Checks if document has meaningful content
+ */
+export function hasDocumentContent(state, config = {}) {
+    return !isDocumentEmpty(state, config);
+}
+/**
+ * Gets document content statistics
+ */
+export function getDocumentStats(state) {
+    const { doc } = state;
+    return {
+        nodeSize: doc.nodeSize,
+        textLength: doc.textContent.length,
+        trimmedTextLength: doc.textContent.trim().length,
+        nodeCount: doc.nodesBetween(0, doc.nodeSize, () => true),
+        isEmpty: isDocumentEmpty(state),
+        emptyDocumentSize: calculateEmptyDocumentSize(state),
+    };
+}
+/**
+ * Document state change detector
+ */
+export class DocumentStateTracker {
+    constructor() {
+        this.previousState = null;
+    }
+    /**
+     * Updates tracker with new state and returns changes
+     */
+    update(state) {
+        const isEmpty = isDocumentEmpty(state);
+        const { nodeSize } = state.doc;
+        const textLength = state.doc.textContent.length;
+        const result = {
+            isEmpty,
+            wasEmpty: this.previousState?.isEmpty ?? true,
+            becameEmpty: false,
+            becameNonEmpty: false,
+            sizeChanged: false,
+            textLengthChanged: false,
+        };
+        if (this.previousState) {
+            result.becameEmpty = !this.previousState.isEmpty && isEmpty;
+            result.becameNonEmpty = this.previousState.isEmpty && !isEmpty;
+            result.sizeChanged = this.previousState.nodeSize !== nodeSize;
+            result.textLengthChanged = this.previousState.textLength !== textLength;
+        }
+        this.previousState = { isEmpty, nodeSize, textLength };
+        return result;
+    }
+    /**
+     * Resets the tracker
+     */
+    reset() {
+        this.previousState = null;
+    }
+}
+export function isEntireParagraphSelected(editor) {
+    const { state } = editor;
+    const { selection } = state;
+    const { from, to } = selection;
+    // Nếu không có selection hoặc selection rỗng
+    if (from === to) {
+        return false;
+    }
+    // Tìm node paragraph chứa selection
+    const $from = state.doc.resolve(from);
+    const $to = state.doc.resolve(to);
+    // Kiểm tra xem from và to có cùng trong một paragraph không
+    const fromParagraph = $from.node($from.depth);
+    const toParagraph = $to.node($to.depth);
+    // Nếu không cùng paragraph, return false
+    if (fromParagraph !== toParagraph || fromParagraph.type.name !== 'paragraph') {
+        return false;
+    }
+    // Lấy vị trí bắt đầu và kết thúc của paragraph
+    const paragraphStart = $from.start($from.depth);
+    const paragraphEnd = $from.end($from.depth);
+    // Kiểm tra xem selection có bao phủ toàn bộ nội dung của paragraph không
+    return from === paragraphStart && to === paragraphEnd;
+}
+/**
+ * Helper function to extract text from atom nodes (emoji, smartTag)
+ * Used as leafText callback for doc.textBetween()
+ */
+export const getTextFromAtomNode = (node) => {
+    if (node.type.name === 'emoji') {
+        // Find emoji character from name
+        const emojiChar = LIST_EMOJI.find(i => i.name === node.attrs.name)?.emoji;
+        return emojiChar || node.attrs.name || '*';
+    }
+    if (node.type.name === 'smartTag') {
+        return node.attrs.content || '*';
+    }
+    return '*';
+};
+/**
+ * Wrapper for doc.textBetween that automatically handles atom nodes (emoji, smartTag)
+ * @param state EditorState
+ * @param from Start position
+ * @param to End position
+ * @param blockSeparator Optional separator between blocks (default: '')
+ * @returns Text content including atom nodes
+ */
+export const textBetween = (state, from, to, blockSeparator = '') => state.doc.textBetween(from, to, blockSeparator, getTextFromAtomNode);