@antscorp/antsomi-ui 2.0.84 → 2.0.86-text-editor-beta.1

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Typography } from 'antd';
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { COMPONENT_CLS } from '../../constants';
+import { VirtualizedMenu } from '@antscorp/antsomi-ui/es/components/molecules';
+import clsx from 'clsx';
+export const ITEM_SIZE = 28;
+export const EmojiList = forwardRef((props, ref) => {
+    const { items = [] } = props;
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selectItem = (index) => {
+        const item = items[index];
+        if (item) {
+            props.command({ name: item.name });
+        }
+    };
+    const upHandler = () => {
+        setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    };
+    const downHandler = () => {
+        setSelectedIndex((selectedIndex + 1) % props.items.length);
+    };
+    const enterHandler = () => {
+        selectItem(selectedIndex);
+    };
+    useEffect(() => setSelectedIndex(0), [props.items]);
+    useImperativeHandle(ref, () => ({
+        onKeyDown: ({ event }) => {
+            if (event.key === 'ArrowUp') {
+                upHandler();
+                return true;
+            }
+            if (event.key === 'ArrowDown') {
+                downHandler();
+                return true;
+            }
+            if (event.key === 'Enter') {
+                enterHandler();
+                return true;
+            }
+            return false;
+        },
+    }));
+    if (items.length <= 0) {
+        return null;
+    }
+    return (_jsx(VirtualizedMenu, { className: `${COMPONENT_CLS}-emoji-list`, itemSize: ITEM_SIZE, selected: items.at(selectedIndex) ? [items[selectedIndex].slug] : [], onClick: item => {
+            const idx = items.findIndex(i => i.slug === item.item.key);
+            if (idx !== -1) {
+                selectItem(idx);
+            }
+        }, items: items.map(i => ({
+            key: i.slug,
+            className: clsx(`${COMPONENT_CLS}-emoji-item`),
+            label: (_jsxs(_Fragment, { children: [_jsx("span", { style: {
+                            lineHeight: 1,
+                            fontSize: ITEM_SIZE - 8,
+                        }, children: i.emoji }), _jsxs(Typography.Text, { ellipsis: {
+                            tooltip: {
+                                title: i.slug,
+                                mouseEnterDelay: 0.3,
+                                placement: 'right',
+                            },
+                        }, children: [":", i.slug] }, i.slug)] })),
+        })) }));
+});

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

@@ -0,0 +1,2 @@
+export { EmojiList } from './EmojiList';
+export { suggestion as emojiSuggestion } from './suggestion';

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

@@ -0,0 +1,2 @@
+export { EmojiList } from './EmojiList';
+export { suggestion as emojiSuggestion } from './suggestion';

package/es/components/organism/TextEditor/ui/Emoji/suggestion.d.ts

@@ -0,0 +1,4 @@
+import { EmojiOptions } from '../../extensions/Emoji';
+export declare const suggestion: ({ container, }: {
+    container?: HTMLElement | null;
+}) => EmojiOptions['suggestion'];

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 { ChevronRight } from 'lucide-react';
+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';
+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(ChevronRight, { 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: 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,20 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const PopoverTrigger = styled.div `
+  &.font-popover-trigger {
+    width: 90px;
+    height: 22.5px;
+    padding: 0 7px;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: 22.5px;
+    text-overflow: ellipsis;
+    font-size: ${THEME.token?.fontSize || 12}px;
+    border-bottom: 1px solid ${THEME.token?.blue1};
+
+    &:hover {
+      background-color: ${THEME.token?.blue};
+    }
+  }
+`;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { PopoverProps } from 'antd/lib';
+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,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover } from 'antd';
+import { useTextEditorStore } from '../../provider';
+export const TextEditorPopover = ({ children, ...restProps }) => {
+    const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
+    return (_jsx(Popover, { ...restProps, getPopupContainer: () => bubbleMenuContainer || document.body, 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/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<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}, {
+    readonly label: string;
+    readonly value: string;
+    readonly shortcut: string;
+    readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}, {
+    readonly label: string;
+    readonly value: string;
+    readonly shortcut: string;
+    readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+}, {
+    readonly label: string;
+    readonly value: string;
+    readonly shortcut: string;
+    readonly icon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & 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,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Flex, Tooltip } from 'antd';
+import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifyIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { formatHotkey } from '../../utils';
+import { TEXT_EDITOR_CONSTANTS } from '../../constants';
+import { TextEditorPopover } from '../Popover';
+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,
+    },
+];
+export const TextAlignSelect = (props) => {
+    const { editor, onChange } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const currentAlignment = ['left', 'center', 'right', 'justify'].find(alignment => editor?.isActive({ textAlign: 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, content: _jsx(Flex, { gap: 8, children: textAlignOptions.map(option => (_jsx(Tooltip, { title: `${TEXT_ALIGN.TOOLTIP} ${option.label.toLowerCase()} (${option.shortcut})`, placement: "bottom", children: _jsx(Button, { size: "small", icon: _jsx(option.icon, { size: 16 }, option.value), onClick: () => handleClickOption(option.value), type: currentAlignment === option.value ? 'primary' : 'default' }) }, option.value))) }), trigger: ['click'], placement: "bottomLeft", onOpenChange: setOpen => setIsOpen(setOpen), children: _jsx(Tooltip, { title: TEXT_ALIGN.TITLE, placement: "top", children: _jsx(Button, { size: "small", icon: _jsx(AlignIconComponent, { size: 16 }), type: currentAlignment ? 'primary' : 'default' }) }) }));
+};

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,14 @@
+import React from 'react';
+import { Editor } from '@tiptap/core';
+import { Config } from '../../types';
+export type ToolbarProps = {
+    editor: Editor;
+    config?: Config;
+    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,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Divider, Flex, Tooltip, 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 { CopyIcon, PencilIcon } from 'lucide-react';
+import { ToolbarWrapper } from '../../styled';
+import { UnsetLinkAction } from './actions/UnsetLink';
+import { EmoijiAction } from './actions';
+export const Toolbar = (props) => {
+    const { editor, smartTagHandler, linkHanlder, config } = 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(Tooltip, { title: "Copy", children: _jsx(Button, { size: "small", icon: _jsx(CopyIcon, { size: 16 }), onClick: () => {
+                            navigator.clipboard.writeText(href);
+                        } }) }), _jsx(Tooltip, { title: "Edit", children: _jsx(Button, { size: "small", icon: _jsx(PencilIcon, { size: 16 }), onClick: () => linkHanlder?.onUpsert?.() }) }), _jsx(UnsetLinkAction, { editor: editor })] }));
+    }
+    return (_jsxs(ToolbarWrapper, { vertical: true, gap: 8, children: [_jsxs(Flex, { gap: 8, 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(StrikeAction, { editor: editor }), _jsx(SuperscriptAction, { editor: editor }), _jsx(SubscriptAction, { editor: editor }), _jsx(TextTransformAction, { editor: editor })] }), _jsxs(Flex, { gap: 8, justify: "flex-start", align: "center", children: [_jsx(LinkAction, { editor: editor, onClick: linkHanlder?.onUpsert }), _jsx(SmartTagAction, { editor: editor, onClick: smartTagHandler?.onUpsert }), _jsx(Divider, { type: "vertical", className: "toolbar-separator" }), _jsx(TextColorAction, { editor: editor, colorPickerProps: {
+                            usedColorsStorageKey: config?.Color?.colorPickerStorageKey,
+                        } }), _jsx(TextBackColorAction, { editor: editor, colorPickerProps: {
+                            usedColorsStorageKey: config?.BackgroundColor?.colorPickerStorageKey,
+                        } }), _jsx(Divider, { type: "vertical", className: "toolbar-separator" }), _jsx(BulletListAction, { editor: editor }), _jsx(OrderedListAction, { editor: editor }), _jsx(Divider, { type: "vertical", className: "toolbar-separator" }), _jsx(TextAlignAction, { editor: editor }), _jsx(SpacingAction, { editor: editor }), _jsx(Divider, { type: "vertical", className: "toolbar-separator" }), _jsx(IndentAction, { editor: editor }), _jsx(OutdentAction, { editor: editor }), _jsx(Divider, { type: "vertical", className: "toolbar-separator" }), _jsx(EmoijiAction, { 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,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Tooltip } from 'antd';
+import { BoldIcon } from 'lucide-react';
+import { formatHotkey } from '../../../utils';
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+export const BoldAction = ({ editor }) => (_jsx(Tooltip, { title: `${TOOLTIPS.BOLD.TITLE} (${formatHotkey(TOOLTIPS.BOLD.SHORTCUT)})`, placement: "top", children: _jsx(Button, { size: "small", disabled: !editor.can().chain().focus().toggleBold().run(), onClick: () => editor.chain().focus().toggleBold().run(), type: editor.isActive('bold') ? 'primary' : 'default', icon: _jsx(BoldIcon, { size: 16 }) }) }));

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Tooltip } from 'antd';
+import { ListIcon } from 'lucide-react';
+import { formatHotkey } from '../../../utils';
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+export const BulletListAction = ({ editor }) => (_jsx(Tooltip, { title: `${TOOLTIPS.BULLET_LIST.TITLE} (${formatHotkey(TOOLTIPS.BULLET_LIST.SHORTCUT)})`, placement: "top", children: _jsx(Button, { size: "small", onClick: () => editor.chain().focus().toggleBulletList().run(), type: editor.isActive('bulletList') ? 'primary' : 'default', icon: _jsx(ListIcon, { size: 16 }) }) }));

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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Tooltip } from 'antd';
+import { RemoveFormattingIcon } from 'lucide-react';
+import { DEFAULT_TEXT_STYLE, TEXT_EDITOR_CONSTANTS } from '../../../constants';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+export const ClearFormattingAction = ({ editor }) => {
+    const clearFormatting = () => {
+        editor
+            ?.chain()
+            .updateAttributes('textStyle', DEFAULT_TEXT_STYLE)
+            .unsetAllMarks()
+            .clearNodes()
+            .unsetTextAlign()
+            .unsetTextTransform()
+            .run();
+    };
+    return (_jsx(Tooltip, { title: TOOLTIPS.CLEAR_FORMATTING.TITLE, placement: "top", children: _jsx(Button, { size: "small", onClick: clearFormatting, icon: _jsx(RemoveFormattingIcon, { size: 16 }) }) }));
+};

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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmojiSmileIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { EMOJI_COLLECTIONS, EmojiPopover } from '@antscorp/antsomi-ui/es/components/molecules';
+export const EmoijiAction = ({ editor }) => (_jsx(EmojiPopover, { collections: [
+        {
+            key: EMOJI_COLLECTIONS.COMMON,
+            label: _jsx(EmojiSmileIcon, {}),
+        },
+    ], onEmojiClick: emoji => {
+        if (typeof emoji !== 'string')
+            return;
+        editor?.chain().insertEmoji(emoji);
+    } }));

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

@@ -0,0 +1,7 @@
+import { Editor } from '@tiptap/core';
+import { FontConfig } from '../../../types';
+export interface FontFamilyActionProps {
+    editor: Editor;
+    fonts?: FontConfig[];
+}
+export declare const FontFamilyAction: (props: FontFamilyActionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toString } from 'lodash';
+import { DEFAULT_FONT_CONFIGS } from '../../../constants';
+import { FontPopover } from '../../FontPopover/FontPopover';
+export const FontFamilyAction = (props) => {
+    const { editor, fonts = DEFAULT_FONT_CONFIGS } = props;
+    const { fontWeight, fontFamily } = editor.getAttributes('textStyle') || {};
+    let fontValue = toString(fontFamily);
+    if (fontValue.split(',').length > 0) {
+        [fontValue] = fontValue.split(',');
+    }
+    return (_jsx(FontPopover, { fonts: fonts, value: {
+            font: fonts.find(font => font.fontFamily.name === fontValue) || fonts[0],
+            weight: Number(fontWeight),
+        }, onChange: (font, weight) => {
+            editor.chain().focus().setFontFamily(font.fontFamily.name).setFontWeight(weight).run();
+        } }));
+};

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

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

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTextEditorStore } from '../../../provider';
+import { FontSizeInput, } from '@antscorp/antsomi-ui/es/components/molecules';
+import styled from 'styled-components';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { DEFAULT_TEXT_STYLE } from '../../../constants';
+const StyledFontSizeInput = styled(FontSizeInput) `
+  &.antsomi-input-number {
+    height: 22.5px;
+    width: 54px;
+
+    input.antsomi-input-number-input {
+      font-size: 12px;
+      padding: 0 0 0 7px;
+    }
+  }
+`;
+export const FontSizeAction = memo(({ editor, debounceUpdateSize = 500 }) => {
+    const inputRef = useRef(null);
+    const bubbleMenuContainer = useTextEditorStore(state => state.bubbleMenuContainer);
+    const numberFontSize = (editor.getAttributes('textStyle').fontSize || DEFAULT_TEXT_STYLE.fontSize).replace('px', '');
+    const [currentFontSize, setCurrentFontSize] = useState(numberFontSize);
+    const updateEditorFontSize = useDebouncedCallback((v) => {
+        if (v === numberFontSize)
+            return;
+        editor.chain().focus().setFontSize(`${v}px`).run();
+    }, debounceUpdateSize);
+    const handleFontSizeChange = useCallback((value) => {
+        setCurrentFontSize(+value);
+        updateEditorFontSize(+value);
+    }, [updateEditorFontSize]);
+    const dropdownProps = useMemo(() => ({
+        getPopupContainer: () => bubbleMenuContainer,
+    }), [bubbleMenuContainer]);
+    return (_jsx(StyledFontSizeInput, { ref: inputRef, delay: 100, placeholder: "Font Size", value: currentFontSize, onChange: handleFontSizeChange, dropdownProps: dropdownProps }));
+});

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Tooltip } from 'antd';
+import { HighlighterIcon } from 'lucide-react';
+import { ColorPicker } from '../../ColorPicker';
+import { TEXT_EDITOR_CONSTANTS } from '../../../constants';
+const { TOOLTIPS } = TEXT_EDITOR_CONSTANTS;
+export const HighlightAction = ({ editor }) => (_jsx(ColorPicker, { value: editor.getAttributes('highlight').color, onChange: v => editor.chain().focus().setHighlight({ color: v }).run(), usedColorsStorageKey: "text-backgrounds", children: _jsx(Tooltip, { title: TOOLTIPS.HIGHLIGHT.TITLE, placement: "top", children: _jsx(Button, { size: "small", icon: _jsx(HighlighterIcon, { color: editor.getAttributes('highlight').color, size: 16 }) }) }) }));

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

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