@antscorp/antsomi-ui 2.0.92-text-editor-beta.6 → 2.0.93

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { TextEditorButtonProps } from '../Button';
-type DropdownButtonProps = {
-    children?: React.ReactNode;
-    value?: string;
-    options?: {
-        value: string;
-        label: React.ReactNode;
-        disabled?: boolean;
-    }[];
-    tooltipProps?: TextEditorButtonProps['tooltipProps'];
-    disabled?: boolean;
-    className?: string;
-    onClickOption?: (key: string) => void;
-};
-export declare const DropdownButton: (props: DropdownButtonProps) => import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dropdown } from 'antd';
-import { useState } from 'react';
-import { TextEditorButton } from '../Button';
-import { ArrowDropDownIcon } from '@antscorp/antsomi-ui/es/components/icons';
-import styled from 'styled-components';
-import clsx from 'clsx';
-const StyledTriggerButton = styled(TextEditorButton) `
-  &.antsomi-dropdown-trigger.antsomi-btn {
-    gap: 0;
-    padding: 0;
-    width: 40px;
-    height: 36px;
-  }
-
-  &.is-open {
-    svg.icon-dropdown {
-      transform: rotate(180deg);
-    }
-  }
-`;
-export const DropdownButton = (props) => {
-    const { className, children, disabled, tooltipProps, options = [], value, onClickOption } = 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(Dropdown, { trigger: ['click'], className: clsx(className, {
-            'is-active': isSelected,
-            'is-open': isOpen,
-        }), disabled: disabled, 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);
-            },
-        }, open: isOpen, onOpenChange: handleOpenChange, children: _jsxs(StyledTriggerButton, { tooltipProps: tooltipProps, isActive: isSelected, disabled: disabled, children: [children, _jsx(ArrowDropDownIcon, { className: "icon-dropdown", size: 16 })] }) }));
-};

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

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

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

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

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

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { EmojiNodeAttrs, SuggestionItem } from '../../extensions/Emoji';
-import { SuggestionProps } from '@tiptap/suggestion';
-export declare const ITEM_SIZE = 28;
-export type EmojiListRef = {
-    onKeyDown: (args: {
-        event: KeyboardEvent;
-    }) => boolean;
-};
-export type EmojiListProps = SuggestionProps<SuggestionItem, EmojiNodeAttrs>;
-export declare const EmojiList: import("react").ForwardRefExoticComponent<EmojiListProps & import("react").RefAttributes<EmojiListRef>>;

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 { 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

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

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

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

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

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

@@ -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/SplitButtonDropdown/SplitButtonDropdown.d.ts

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

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

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

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

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

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

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

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

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

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

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<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

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

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

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

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