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

package/es/components/organism/TextEditor/ui/Emoji/suggestion.js

@@ -0,0 +1,71 @@
+import { posToDOMRect, ReactRenderer } from '@tiptap/react';
+import { LIST_EMOJI } from '../../extensions/Emoji';
+import { EmojiList, ITEM_SIZE } from './EmojiList';
+import { computePosition, flip, shift } from '@floating-ui/dom';
+import { COMPONENT_CLS } from '../../constants';
+import { calInlineListSize } from '@antscorp/antsomi-ui/es/components/molecules/VirtualizedMenu/utils';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+const updatePosition = (editor, element, itemLength) => {
+    const virtualElement = {
+        getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
+    };
+    computePosition(virtualElement, element, {
+        placement: 'top-start',
+        strategy: 'absolute',
+        middleware: [shift(), flip()],
+    }).then(({ x, y, strategy }) => {
+        element.style.height = `${calInlineListSize(Math.min(itemLength, 6), ITEM_SIZE)}px`;
+        element.style.position = strategy;
+        element.style.left = `${x}px`;
+        element.style.top = `${y}px`;
+    });
+};
+export const suggestion = ({ container }) => ({
+    items: ({ query }) => LIST_EMOJI.filter(i => searchStringQuery(i.slug, query)),
+    render() {
+        let renderer;
+        const safeGetRenndererEl = () => {
+            if (renderer.element instanceof HTMLElement) {
+                return renderer.element;
+            }
+            throw Error('ReactRenderer element should be HTMLElement');
+        };
+        const destroy = () => {
+            renderer.destroy();
+            safeGetRenndererEl().remove();
+        };
+        return {
+            onStart: props => {
+                renderer = new ReactRenderer(EmojiList, {
+                    props,
+                    editor: props.editor,
+                });
+                if (!props.clientRect) {
+                    return;
+                }
+                const rendererEl = safeGetRenndererEl();
+                rendererEl.classList.add(`${COMPONENT_CLS}-emoji-popover`);
+                (container || document.body).appendChild(rendererEl);
+                updatePosition(props.editor, rendererEl, props.items.length);
+            },
+            onUpdate(props) {
+                renderer.updateProps(props);
+                const rendererEl = safeGetRenndererEl();
+                if (!props.clientRect) {
+                    return;
+                }
+                updatePosition(props.editor, rendererEl, props.items.length);
+            },
+            onKeyDown(props) {
+                if (props.event.key === 'Escape') {
+                    destroy();
+                    return true;
+                }
+                return renderer.ref?.onKeyDown(props) || false;
+            },
+            onExit() {
+                destroy();
+            },
+        };
+    },
+});

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FontConfig } from '../../types';
+type FontPopoverProps = {
+    fonts?: FontConfig[];
+    value?: {
+        font: FontConfig;
+        weight: number;
+    };
+    onChange?: (font: FontConfig, weight: number) => void;
+};
+export declare const FontPopover: import("react").MemoExoticComponent<(props: FontPopoverProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Typography } from 'antd';
+import { SearchPopover, VirtualizedMenu } from '@antscorp/antsomi-ui/es/components/molecules';
+import { DEFAULT_FONT_CONFIGS, FONT_WEIGHT_MAP } from '../../constants';
+import { memo, useMemo, useState } from 'react';
+import { PopoverTrigger } from './styled';
+import { calInlineListSize } from '@antscorp/antsomi-ui/es/components/molecules/VirtualizedMenu/utils';
+import { useTextEditorStore } from '../../provider';
+import clsx from 'clsx';
+import { TextEditorPopover } from '../Popover';
+import { ChevronRightIcon } from '@antscorp/antsomi-ui/es/components/icons';
+const FontItem = (props) => {
+    const { fontConfig, active, onSelectFont, onOpenChange } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const numOfWeight = fontConfig.fontWeight.length;
+    const isActive = active.font.fontFamily.name === fontConfig.fontFamily.name;
+    const fontNameContent = (_jsxs(Flex, { className: clsx('font-popover-item', { active: isOpen || isActive }), style: { fontFamily: fontConfig.fontFamily.name }, onClick: () => onSelectFont?.(400), align: "center", justify: "space-between", children: [fontConfig.fontFamily.name, numOfWeight > 1 && _jsx(ChevronRightIcon, { size: 14 })] }));
+    const handleOpenChange = (newOpen) => {
+        setIsOpen(newOpen);
+        onOpenChange?.(newOpen);
+    };
+    if (numOfWeight < 2) {
+        return fontNameContent;
+    }
+    return (_jsx(TextEditorPopover, { open: isOpen, onOpenChange: handleOpenChange, placement: "rightTop", trigger: ['hover'], arrow: false, overlayClassName: "font-weight-popover", destroyTooltipOnHide: true, content: _jsx(Flex, { vertical: true, gap: 4, children: fontConfig.fontWeight.map(weight => (_jsx(Typography.Text, { className: clsx('font-weight-item', {
+                    active: active.weight === weight,
+                }), style: {
+                    fontFamily: fontConfig.fontFamily.name,
+                    fontWeight: weight,
+                }, onClick: () => onSelectFont?.(weight), children: FONT_WEIGHT_MAP[weight] }, weight))) }), children: fontNameContent }));
+};
+export const FontPopover = memo((props) => {
+    const { fonts = [], value: fontValue = {
+        font: DEFAULT_FONT_CONFIGS[0],
+        weight: 400,
+    }, onChange, } = props;
+    const [search, setSearch] = useState('');
+    const [open, setOpen] = useState(false);
+    const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
+    const filteredFonts = useMemo(() => fonts
+        .filter(font => font.fontFamily.name.toLowerCase().includes(search.toLowerCase()))
+        .sort((a, b) => a.fontFamily.name.localeCompare(b.fontFamily.name)), [fonts, search]);
+    const handleClose = () => {
+        setOpen(false);
+        setSearch('');
+    };
+    const handleOpenChange = (newOpen) => {
+        setOpen(newOpen);
+        if (newOpen === false) {
+            handleClose();
+        }
+    };
+    const handleChangeFont = (font, weight = 400) => {
+        onChange?.(font, weight);
+        handleClose();
+    };
+    const itemSize = 30;
+    const itemSpacing = 4;
+    const activeFontName = fontValue.font.fontFamily.name;
+    return (_jsx(SearchPopover, { open: open, placement: "bottomLeft", onOpenChange: handleOpenChange, getPopupContainer: () => bubbleMenuContainer || document.body, inputSearchProps: {
+            value: search,
+            onAfterChange: setSearch,
+        }, overlayClassName: "font-popover-overlay", content: _jsx("div", { className: "list-font-root", style: {
+                height: calInlineListSize(Math.min(filteredFonts.length, 6), itemSize, itemSpacing),
+            }, children: _jsx(VirtualizedMenu, { itemSize: itemSize, inlinePadding: 0, itemSpacing: itemSpacing, items: filteredFonts.map(fontConfig => ({
+                    key: fontConfig.fontFamily.name,
+                    label: (_jsx(FontItem, { fontConfig: fontConfig, active: { font: fontValue.font, weight: fontValue.weight }, onSelectFont: weight => handleChangeFont(fontConfig, weight) })),
+                })) }) }), children: _jsx(PopoverTrigger, { className: "font-popover-trigger", children: _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: activeFontName }) }) }));
+});

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

@@ -0,0 +1 @@
+export declare const PopoverTrigger: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,22 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const PopoverTrigger = styled.div `
+  &.font-popover-trigger {
+    width: 90px;
+    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};
+    }
+  }
+`;

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, { 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,52 @@
+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: 36px;
+      height: 36px;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+
+      &: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: 36px;
+      border-start-start-radius: 0;
+      border-end-start-radius: 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) {
+          background-color: #e0ebf7;
+
+          &:hover {
+            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,77 @@
+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 || 'left',
+            };
+        },
+    });
+    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/Toolbar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Editor } from '@tiptap/core';
+import { Config, TextStyle } from '../../types';
+export type ToolbarProps = {
+    editor: Editor;
+    config?: Config;
+    defaultTextStyle?: TextStyle;
+    smartTagHandler?: {
+        onUpsert?: (event: React.MouseEvent) => void;
+    };
+    linkHanlder?: {
+        onUpsert?: () => void;
+    };
+};
+export declare const Toolbar: (props: ToolbarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Flex, Typography } from 'antd';
+import { BoldAction } from './actions/BoldAction';
+import { BulletListAction } from './actions/BulletListAction';
+import { ClearFormattingAction } from './actions/ClearFormattingAction';
+import { FontFamilyAction } from './actions/FontFamilyAction';
+import { FontSizeAction } from './actions/FontSizeAction';
+import { TextBackColorAction } from './actions/TextBackgroundColorAction';
+import { IndentAction } from './actions/IndentAction';
+import { ItalicAction } from './actions/ItalicAction';
+import { LinkAction } from './actions/LinkAction';
+import { OrderedListAction } from './actions/OrderedListAction';
+import { OutdentAction } from './actions/OutdentAction';
+import { SmartTagAction } from './actions/SmartTagAction';
+import { StrikeAction } from './actions/StrikeAction';
+import { SubscriptAction } from './actions/SubscriptAction';
+import { SuperscriptAction } from './actions/SuperscriptAction';
+import { TextAlignAction } from './actions/TextAlignAction';
+import { TextColorAction } from './actions/TextColorAction';
+import { TextTransformAction } from './actions/TextTransformAction';
+import { UnderlineAction } from './actions/UnderlineAction';
+import { SpacingAction } from './actions/SpacingAction';
+import { getLinkMark, isShowLinkMenu } from '../../utils';
+import { ToolbarWrapper } from '../../styled';
+import { UnsetLinkAction } from './actions/UnsetLink';
+import { EmoijiAction } from './actions';
+import { LetterSpacingAction } from './actions/LetterSpacing';
+import { HistoryAction } from './actions/HistoryAction';
+import { CopyDuplicateIcon, EditIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { TextEditorButton } from '../Button';
+export const Toolbar = (props) => {
+    const { editor, smartTagHandler, linkHanlder, config, defaultTextStyle } = props;
+    if (isShowLinkMenu(editor.state)) {
+        const { attrs } = getLinkMark({ state: editor.state }) || {};
+        const href = String(attrs?.href);
+        return (_jsxs(ToolbarWrapper, { wrap: "wrap", gap: 8, align: "center", children: [_jsx(Typography.Link, { style: { maxWidth: 150 }, ellipsis: true, href: href, children: href }), _jsx(TextEditorButton, { icon: _jsx(CopyDuplicateIcon, { size: 18 }), tooltipProps: { title: 'Copy' }, onClick: () => {
+                        navigator.clipboard.writeText(href);
+                    } }), _jsx(TextEditorButton, { icon: _jsx(EditIcon, { size: 18 }), tooltipProps: { title: 'Edit' }, onClick: () => linkHanlder?.onUpsert?.() }), _jsx(UnsetLinkAction, { editor: editor })] }));
+    }
+    return (_jsxs(ToolbarWrapper, { vertical: true, gap: 8, children: [_jsxs(Flex, { gap: 4, justify: "flex-start", align: "center", children: [_jsx(FontFamilyAction, { editor: editor, fonts: config?.FontFamily?.fonts }), _jsx(Divider, { type: "vertical", className: "toolbar-separator" }), _jsx(FontSizeAction, { editor: editor }), _jsx(Divider, { type: "vertical", className: "toolbar-separator" }), _jsx(BoldAction, { editor: editor }), _jsx(ItalicAction, { editor: editor }), _jsx(UnderlineAction, { editor: editor }), _jsx(LinkAction, { editor: editor, onClick: linkHanlder?.onUpsert }), _jsx(Divider, { type: "vertical", className: "toolbar-separator" }), _jsx(StrikeAction, { editor: editor }), _jsx(SuperscriptAction, { editor: editor }), _jsx(SubscriptAction, { editor: editor }), _jsx(Divider, { type: "vertical", className: "toolbar-separator" }), _jsx(TextTransformAction, { editor: editor }), _jsx(TextColorAction, { editor: editor }), _jsx(TextBackColorAction, { editor: editor }), _jsx(EmoijiAction, { editor: editor }), _jsx(SmartTagAction, { editor: editor, onClick: smartTagHandler?.onUpsert })] }), _jsxs(Flex, { gap: 4, justify: "flex-start", align: "center", children: [_jsx(BulletListAction, { editor: editor, useCustomBullet: config?.UnorderedList?.useCustomBullet }), _jsx(OrderedListAction, { editor: editor }), _jsx(TextAlignAction, { editor: editor }), _jsx(SpacingAction, { editor: editor, defaultValue: defaultTextStyle?.lineHeight }), _jsx(LetterSpacingAction, { editor: editor }), _jsx(IndentAction, { editor: editor }), _jsx(OutdentAction, { editor: editor }), _jsx(Divider, { type: "vertical", className: "toolbar-separator" }), _jsx(HistoryAction, { editor: editor }), _jsx(ClearFormattingAction, { editor: editor })] })] }));
+};

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

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

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

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

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