@antscorp/antsomi-ui 2.0.109 → 2.0.111

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;

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

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

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

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