@antscorp/antsomi-ui 2.0.83-text-editor-beta.10 → 2.0.84

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

@@ -1,66 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,71 +0,0 @@
-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

@@ -1,12 +0,0 @@
-/// <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

@@ -1,69 +0,0 @@
-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

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

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

@@ -1,20 +0,0 @@
-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

@@ -1,6 +0,0 @@
-/// <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

@@ -1,7 +0,0 @@
-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

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

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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

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

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

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

@@ -1,30 +0,0 @@
-/// <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

@@ -1,49 +0,0 @@
-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

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

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

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,7 +0,0 @@
-/// <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

@@ -1,37 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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