@antscorp/antsomi-ui 2.0.110 → 2.0.112

package/es/components/organism/TextEditor/ui/FontPopover/styled.js

@@ -0,0 +1,36 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const PopoverTrigger = styled.div `
+  &.font-popover-trigger {
+    width: 100px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    padding: 0 7px;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: ${THEME.token?.fontSize || 12}px;
+    border-bottom: 1px solid ${THEME.token?.blue1};
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: ${THEME.token?.blue};
+    }
+  }
+`;
+export const FontGroupTitle = styled.div `
+  color: ${THEME.token?.bw8};
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+
+  &.font-popover-item {
+    cursor: default;
+
+    &:hover {
+      background-color: white;
+    }
+  }
+`;

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

@@ -0,0 +1,35 @@
+import { FontConfig, FontGroupingFunction, GroupOrderFunction } from '../../types';
+/**
+ * Props for FontPopover component
+ */
+export type FontPopoverProps = {
+    /** Array of available font configurations */
+    fonts?: FontConfig[];
+    /** Currently selected font and weight */
+    value?: {
+        font: FontConfig;
+        weight: number;
+    };
+    /** Callback when font selection changes */
+    onChange?: (font: FontConfig, weight: number) => void;
+    /** Function to group fonts or false to disable grouping */
+    fontGrouping?: 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;
+};
+/**
+ * Props for FontItem component
+ */
+export type FontItemProps = {
+    /** Font configuration to display */
+    fontConfig: FontConfig;
+    /** Currently active font and weight */
+    active?: {
+        font: FontConfig;
+        weight: number;
+    };
+    /** Callback when font weight is selected */
+    onSelectFont?: (fontweight: number) => void;
+    /** Callback when popover open state changes */
+    onOpenChange?: (open: boolean) => void;
+};

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

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

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

@@ -0,0 +1,16 @@
+import { Editor } from '@tiptap/core';
+import React from 'react';
+import type { LinkFormData } from '../../types';
+export type LinkInsertFormProps = {
+    /** TipTap editor instance */
+    editor: Editor;
+    /** Form mode: insert or edit */
+    mode: 'insert' | 'edit';
+    /** Initial form data */
+    initialData: LinkFormData;
+    /** Callback when form is submitted */
+    onSubmit: () => void;
+    /** Callback when form is cancelled */
+    onCancel: () => void;
+};
+export declare const LinkInsertForm: React.FC<LinkInsertFormProps>;

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, Flex, Input } from 'antd';
+import { useState, useCallback, useRef, useEffect } from 'react';
+export const LinkInsertForm = props => {
+    const { editor, mode, initialData, onSubmit, onCancel } = props;
+    const [url, setUrl] = useState(initialData.url);
+    const [text, setText] = useState(initialData.text);
+    const [openInNewTab, setOpenInNewTab] = useState(initialData.openInNewTab);
+    const urlInputRef = useRef(null);
+    // Auto-focus the URL input without scrolling
+    useEffect(() => {
+        urlInputRef.current?.focus({
+            preventScroll: true,
+        });
+    }, []);
+    const handleSubmit = useCallback(() => {
+        if (!url.trim()) {
+            // Don't submit if URL is empty
+            return;
+        }
+        // If text is different from initial, update the content
+        if (text !== initialData.text && text.trim()) {
+            editor
+                .chain()
+                .focus()
+                .setCustomLink({
+                attrs: {
+                    href: url,
+                    target: openInNewTab ? '_blank' : null,
+                },
+                content: text,
+            })
+                .run();
+        }
+        else {
+            // Just update the link attributes
+            editor
+                .chain()
+                .focus()
+                .setCustomLink({
+                attrs: {
+                    href: url,
+                    target: openInNewTab ? '_blank' : null,
+                },
+            })
+                .run();
+        }
+        onSubmit();
+    }, [editor, url, text, initialData.text, openInNewTab, onSubmit]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            onCancel();
+        }
+    }, [handleSubmit, onCancel]);
+    return (_jsxs(Flex, { vertical: true, gap: 8, children: [_jsxs(Flex, { gap: 8, vertical: true, children: [_jsx(Input, { ref: urlInputRef, placeholder: "URL", value: url, onChange: e => setUrl(e.target.value), onKeyDown: handleKeyDown }), _jsx(Input, { placeholder: "Text", value: text, onChange: e => setText(e.target.value), onKeyDown: handleKeyDown })] }), _jsx(Checkbox, { checked: openInNewTab, onChange: e => setOpenInNewTab(e.target.checked), children: "Open in new tab" }), _jsxs(Flex, { justify: "flex-end", gap: 8, children: [_jsx(Button, { onClick: onCancel, children: "Cancel" }), _jsx(Button, { type: "primary", onClick: handleSubmit, disabled: !url.trim(), children: mode === 'insert' ? 'Insert' : 'Update' })] })] }));
+};

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

@@ -0,0 +1,2 @@
+export { LinkInsertForm } from './LinkInsertForm';
+export type { LinkInsertFormProps } from './LinkInsertForm';

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

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

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

@@ -0,0 +1,9 @@
+import { Editor } from '@tiptap/react';
+import React from 'react';
+export type LinkPopoverProps = {
+    /** TipTap editor instance */
+    editor: Editor;
+    /** Optional container to append the popover to. Defaults to document.body */
+    container?: HTMLElement | (() => HTMLElement);
+};
+export declare const LinkPopover: React.FC<LinkPopoverProps>;

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { posToDOMRect } from '@tiptap/react';
+import { useEffect, useRef, useCallback, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { computePosition, flip, shift, offset } from '@floating-ui/dom';
+import { useTextEditorStore } from '../../provider';
+import { LinkInsertForm } from '../LinkInsertForm';
+import { COMPONENT_CLS } from '../../constants';
+const updatePosition = (editor, element) => {
+    const virtualElement = {
+        getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
+    };
+    computePosition(virtualElement, element, {
+        placement: 'bottom-start',
+        strategy: 'fixed',
+        middleware: [offset(10), shift(), flip()],
+    }).then(({ x, y, strategy }) => {
+        element.style.position = strategy;
+        element.style.left = `${x}px`;
+        element.style.top = `${y}px`;
+    });
+};
+export const LinkPopover = props => {
+    const { editor, container } = props;
+    const popoverRef = useRef(null);
+    const savedSelectionRef = useRef(null);
+    // Get link form state and actions from store
+    const linkFormState = useTextEditorStore(state => state.linkFormState);
+    const hideLinkForm = useTextEditorStore(state => state.hideLinkForm);
+    const isVisible = linkFormState?.isVisible ?? false;
+    // Save initial selection when form becomes visible
+    useEffect(() => {
+        if (isVisible) {
+            savedSelectionRef.current = {
+                from: editor.state.selection.from,
+                to: editor.state.selection.to,
+            };
+        }
+        else {
+            savedSelectionRef.current = null;
+        }
+    }, [editor, isVisible]);
+    // Update position whenever editor state changes or form becomes visible
+    useLayoutEffect(() => {
+        if (!isVisible || !popoverRef.current)
+            return;
+        updatePosition(editor, popoverRef.current);
+    }, [editor, isVisible, linkFormState]);
+    // Effect 1: Close on selection change (only if selection actually changed from saved)
+    useEffect(() => {
+        if (!isVisible || !savedSelectionRef.current)
+            return;
+        const handleSelectionUpdate = () => {
+            const currentSelection = editor.state.selection;
+            const savedSelection = savedSelectionRef.current;
+            // Only close if selection moved to a different position
+            if (savedSelection &&
+                (currentSelection.from !== savedSelection.from || currentSelection.to !== savedSelection.to)) {
+                hideLinkForm();
+                // Editor already has focus when selection changes, no need to refocus
+            }
+        };
+        editor.on('selectionUpdate', handleSelectionUpdate);
+        return () => {
+            editor.off('selectionUpdate', handleSelectionUpdate);
+        };
+    }, [editor, isVisible, hideLinkForm]);
+    // Effect 2: Close on click outside
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        const handleClickOutside = (event) => {
+            if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+                hideLinkForm();
+                // Check if click was on the editor
+                const editorElement = editor.view.dom;
+                const clickedOnEditor = editorElement.contains(event.target);
+                // If not clicked on editor, focus it after closing
+                if (!clickedOnEditor) {
+                    setTimeout(() => {
+                        editor.commands.focus();
+                    }, 0);
+                }
+                // If clicked on editor, it will auto-focus naturally
+            }
+        };
+        // Use mousedown to catch the event before it propagates
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [editor, isVisible, hideLinkForm]);
+    // Handle form submission
+    const handleSubmit = useCallback(() => {
+        hideLinkForm();
+        // Focus back to editor after closing form
+        setTimeout(() => {
+            editor.commands.focus();
+        }, 0);
+    }, [editor, hideLinkForm]);
+    // Handle form cancellation (also handles Escape key via LinkInsertForm)
+    const handleCancel = useCallback(() => {
+        hideLinkForm();
+        // Focus back to editor after closing form
+        setTimeout(() => {
+            editor.commands.focus();
+        }, 0);
+    }, [editor, hideLinkForm]);
+    // Don't render if not visible or no form state
+    if (!isVisible || !linkFormState) {
+        return null;
+    }
+    const popoverElement = (_jsx("div", { ref: popoverRef, className: `${COMPONENT_CLS}-link-popover`, style: {
+            position: 'absolute',
+            zIndex: 1000,
+            background: '#fff',
+            border: '1px solid #d9d9d9',
+            borderRadius: '8px',
+            padding: '16px',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+            minWidth: '300px',
+        }, children: _jsx(LinkInsertForm, { editor: editor, mode: linkFormState.mode, initialData: linkFormState.data, onSubmit: handleSubmit, onCancel: handleCancel }) }));
+    // Use portal to render into container or document.body
+    const containerElement = (typeof container === 'function' ? container() : container) || document.body;
+    return createPortal(popoverElement, containerElement);
+};

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

@@ -0,0 +1,2 @@
+export { LinkPopover } from './LinkPopover';
+export type { LinkPopoverProps } from './LinkPopover';

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type PopoverProps } from 'antd';
+export interface TextEditorPopoverProps extends PopoverProps {
+    children: React.ReactNode;
+}
+export declare const TextEditorPopover: ({ children, ...restProps }: TextEditorPopoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover } from 'antd';
+import { useTextEditorStore } from '../../provider';
+import { useCallback } from 'react';
+export const TextEditorPopover = ({ children, ...restProps }) => {
+    const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
+    const getPopupContainer = useCallback(() => bubbleMenuContainer || document.body, [bubbleMenuContainer]);
+    return (_jsx(Popover, { destroyTooltipOnHide: true, trigger: ['click'], ...restProps, getPopupContainer: getPopupContainer, children: children }));
+};

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

@@ -0,0 +1 @@
+export * from './Popover';

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

@@ -0,0 +1 @@
+export * from './Popover';

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

@@ -0,0 +1,4 @@
+import { SelectProps } from 'antd';
+export interface TextEditorSelectProps extends SelectProps {
+}
+export declare const TextEditorSelect: (props: SelectProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select } from 'antd';
+import { useTextEditorStore } from '../../provider';
+export const TextEditorSelect = (props) => {
+    const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
+    return _jsx(Select, { ...props, getPopupContainer: () => bubbleMenuContainer || document.body });
+};

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

@@ -0,0 +1 @@
+export * from './Select';

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

@@ -0,0 +1 @@
+export * from './Select';

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

@@ -0,0 +1,2 @@
+import { SplitButtonDropdownProps } from './types';
+export declare const SplitButtonDropdown: (props: SplitButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowDropDownIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { StyledDropdownButton } from './styled';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { Tooltip } from 'antd';
+export const SplitButtonDropdown = (props) => {
+    const { children, disabled, value, className = '', tooltipProps, options = [], onClickOption, onClick, } = props;
+    const selectedOpt = value ? options.filter(opt => opt.value === value) : [];
+    const isSelected = selectedOpt.length > 0;
+    const [isOpen, setIsOpen] = useState(false);
+    const handleOpenChange = (visible) => {
+        if (disabled)
+            return;
+        setIsOpen(visible);
+    };
+    return (_jsx(StyledDropdownButton, { disabled: disabled, trigger: ['click'], className: clsx(className, {
+            'is-active': isSelected,
+            'is-open': isOpen,
+        }), open: isOpen, onOpenChange: handleOpenChange, placement: "bottomLeft", menu: {
+            style: {
+                maxHeight: 240,
+                overflow: 'auto',
+            },
+            items: options.map(opt => ({
+                key: opt.value,
+                label: opt.label,
+                disabled: opt.disabled,
+            })),
+            selectedKeys: selectedOpt.map(opt => opt.value),
+            onClick: e => {
+                const { key } = e;
+                onClickOption?.(key);
+            },
+        }, onClick: e => {
+            onClick?.(e, isSelected);
+        }, icon: _jsx(ArrowDropDownIcon, { size: 16 }), type: "text", buttonsRender: buttons => {
+            const [fistButton, ...restButton] = buttons;
+            return [
+                _jsx(Tooltip, { placement: "top", mouseEnterDelay: 0.4, ...tooltipProps, open: disabled ? false : undefined, children: fistButton }),
+                ...restButton,
+            ];
+        }, children: children }));
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledDropdownButton: import("styled-components").StyledComponent<import("react").FC<import("antd/es/dropdown").DropdownButtonProps>, any, {}, never>;

package/es/components/organism/TextEditor/ui/SplitButtonDropdown/styled.js

@@ -0,0 +1,58 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { Dropdown } from 'antd';
+import styled from 'styled-components';
+export const StyledDropdownButton = styled(Dropdown.Button) `
+  &.antsomi-dropdown-button {
+    width: fit-content;
+
+    .antsomi-btn {
+      border-radius: 4px;
+    }
+
+    .antsomi-btn-compact-item:not(.antsomi-btn-compact-last-item).antsomi-btn-compact-first-item {
+      width: 24px;
+      height: 24px;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      padding: 0;
+      color: ${THEME.token?.bw8};
+
+      &:hover:not(:disabled, .is-active) {
+        background-color: #ebebeb;
+      }
+    }
+
+    .antsomi-btn-compact-item:not(.antsomi-btn-compact-first-item).antsomi-btn-compact-last-item {
+      width: 16px;
+      height: 24px;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      padding: 0;
+
+      &:hover:not(:disabled),
+      &.antsomi-dropdown-open:not(:disabled) {
+        background-color: #ebebeb;
+      }
+    }
+
+    &.is-active {
+      .antsomi-btn-compact-item:not(.antsomi-btn-compact-last-item).antsomi-btn-compact-first-item {
+        :not(:disabled) {
+          color: ${THEME.token?.colorPrimary};
+          background-color: #e0ebf7;
+
+          &:hover {
+            color: ${THEME.token?.colorPrimary};
+            background-color: #e0ebf7;
+          }
+        }
+      }
+    }
+
+    &.is-open {
+      .antsomi-btn-icon svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export type SplitButtonDropdownProps = {
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    value?: string;
+    options?: {
+        value: string;
+        label: React.ReactNode;
+        disabled?: boolean;
+    }[];
+    className?: string;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    onClickOption?: (key: string) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement>, isSelected: boolean) => void;
+    tooltipProps?: {
+        title?: string;
+    };
+};

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

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

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { Editor } from '@tiptap/core';
+declare const textAlignOptions: readonly [{
+    readonly label: string;
+    readonly value: string;
+    readonly shortcut: string;
+    readonly icon: import("react").ForwardRefExoticComponent<import("../../../../icons/types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+}, {
+    readonly label: string;
+    readonly value: string;
+    readonly shortcut: string;
+    readonly icon: import("react").ForwardRefExoticComponent<import("../../../../icons/types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+}, {
+    readonly label: string;
+    readonly value: string;
+    readonly shortcut: string;
+    readonly icon: import("react").ForwardRefExoticComponent<import("../../../../icons/types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+}, {
+    readonly label: string;
+    readonly value: string;
+    readonly shortcut: string;
+    readonly icon: import("react").ForwardRefExoticComponent<import("../../../../icons/types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+}];
+type AlignType = (typeof textAlignOptions)[number]['value'];
+interface TextAlignSelectProps {
+    editor?: Editor;
+    onChange?: (value: AlignType) => void;
+}
+export declare const TextAlignSelect: (props: TextAlignSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatHotkey } from '@antscorp/antsomi-ui/es/utils';
+import { Flex } from 'antd';
+import { useMemo, useState } from 'react';
+import { TEXT_EDITOR_CONSTANTS } from '../../constants';
+import { TextEditorPopover } from '../Popover';
+import { TextEditorButton } from '../Button';
+import { ALignRightIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, ArrowDropDownIcon, } from '@antscorp/antsomi-ui/es/components/icons';
+import styled from 'styled-components';
+import { useEditorState } from '@tiptap/react';
+const { TEXT_ALIGN } = TEXT_EDITOR_CONSTANTS;
+const textAlignOptions = [
+    {
+        label: TEXT_ALIGN.OPTIONS.LEFT.LABEL,
+        value: TEXT_ALIGN.OPTIONS.LEFT.VALUE,
+        shortcut: formatHotkey('Shift+L'),
+        icon: AlignLeftIcon,
+    },
+    {
+        label: TEXT_ALIGN.OPTIONS.CENTER.LABEL,
+        value: TEXT_ALIGN.OPTIONS.CENTER.VALUE,
+        shortcut: formatHotkey('Shift+E'),
+        icon: AlignCenterIcon,
+    },
+    {
+        label: TEXT_ALIGN.OPTIONS.RIGHT.LABEL,
+        value: TEXT_ALIGN.OPTIONS.RIGHT.VALUE,
+        shortcut: formatHotkey('Shift+R'),
+        icon: ALignRightIcon,
+    },
+    {
+        label: TEXT_ALIGN.OPTIONS.JUSTIFY.LABEL,
+        value: TEXT_ALIGN.OPTIONS.JUSTIFY.VALUE,
+        shortcut: formatHotkey('Shift+J'),
+        icon: AlignJustifyIcon,
+    },
+];
+const StyledTriggerButton = styled(TextEditorButton) `
+  &.antsomi-btn.antsomi-btn-text {
+    width: 40px;
+    gap: 0;
+
+    &.is-active {
+      background-color: unset;
+    }
+  }
+`;
+export const TextAlignSelect = (props) => {
+    const { editor, onChange } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const { currentAlignment } = useEditorState({
+        editor: editor,
+        selector: ({ editor: editorInstance }) => {
+            const alignment = ['left', 'center', 'right', 'justify'].find(alignment => editorInstance?.isActive({ textAlign: alignment }));
+            return { currentAlignment: alignment };
+        },
+    });
+    const selectedOption = useMemo(() => textAlignOptions.find(option => option.value === currentAlignment), [currentAlignment]);
+    const handleClickOption = (align) => {
+        setIsOpen(false);
+        onChange?.(align);
+    };
+    let AlignIconComponent = textAlignOptions[0].icon;
+    if (selectedOption) {
+        AlignIconComponent = selectedOption.icon;
+    }
+    return (_jsx(TextEditorPopover, { destroyTooltipOnHide: true, open: isOpen, arrow: false, overlayInnerStyle: { padding: 8 }, content: _jsx(Flex, { gap: 8, children: textAlignOptions.map(option => (_jsx(TextEditorButton, { icon: _jsx(option.icon, { size: 16 }, option.value), onClick: () => handleClickOption(option.value), isActive: currentAlignment === option.value, tooltipProps: {
+                    title: `${TEXT_ALIGN.TOOLTIP} ${option.label.toLowerCase()} (${option.shortcut})`,
+                } }, option.value))) }), trigger: ['click'], placement: "bottomLeft", onOpenChange: setOpen => setIsOpen(setOpen), children: _jsx(StyledTriggerButton, { icon: _jsx(AlignIconComponent, { size: 18 }), isActive: !!currentAlignment, tooltipProps: { title: TEXT_ALIGN.TITLE }, children: _jsx(ArrowDropDownIcon, { style: {
+                    flexShrink: 0,
+                    ...(isOpen && {
+                        transform: 'rotate(180deg)',
+                    }),
+                }, size: 16 }) }) }));
+};

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/core';
+import React from 'react';
+import { Config, FontConfig, TextStyle } from '../../types';
+export type FormattingToolbarProps = {
+    editor: Editor;
+    config?: Config;
+    defaultTextStyle?: TextStyle;
+    smartTagHandler?: {
+        onUpsert?: (event: React.MouseEvent) => void;
+    };
+    linkHanlder?: {
+        onUpsert?: () => void;
+    };
+    onChangeFont?: (args: {
+        font: FontConfig;
+        weight: number;
+    }) => void;
+};
+export declare const FormattingToolbar: (props: FormattingToolbarProps) => import("react/jsx-runtime").JSX.Element | null;