@wix/design-system/dist/esm/RichTextInputArea/Toolbar/RichTextToolbar.js

@wix/design-system

import React from 'react';
import { TextAreaBoldSmall, TextAreaBoldLarge, TextAreaItalicSmall, TextAreaItalicLarge, TextAreaUnderlineSmall, TextAreaUnderlineLarge, TextAreaLinkSmall, TextAreaLinkLarge, TextAreaBulletListSmall, TextAreaBulletListLarge, TextAreaNumberedListSmall, TextAreaNumberedListLarge, } from '@wix/wix-ui-icons-common/system';
import { RICH_TEXT_INPUT_AREA_SIZE } from '../RichTextInputArea.constants';
import { useIcons } from '../../WixDesignSystemIconThemeProvider';
import RichTextToolbarButton from './RichTextToolbarButton';
import RichTextToolbarLinkButton from './RichTextToolbarLinkButton';
import { RichTextInputAreaContext } from '../RichTextInputAreaContext';
import EditorUtilities from '../EditorUtilities';
import { inlineStyleTypes, blockTypes, entityTypes, } from '../RichTextInputAreaTypes';
const renderButton = (index, { type, iconComponent: Icon, isDisabled, isActive, ...restProps }) => (React.createElement(RichTextToolbarButton, { key: `${index}-${type}`, dataHook: `richtextarea-button-${type.toLowerCase()}`, isDisabled: isDisabled, isActive: !isDisabled && isActive(), ...restProps },
    React.createElement(Icon, null)));
const renderLinkButton = (index, { type, iconComponent: Icon, isDisabled, isActive, ...restProps }) => (React.createElement(RichTextToolbarLinkButton, { key: `${index}-${type}`, dataHook: `richtextarea-button-${type.toLowerCase()}`, isDisabled: isDisabled, isActive: !isDisabled && isActive(), ...restProps },
    React.createElement(Icon, null)));
const RichTextToolbar = ({ dataHook, className, isDisabled, editorState, onBold, onItalic, onUnderline, onLink, onBulletedList, onNumberedList, customButtons, size, }) => {
    const themeIcons = useIcons('RichTextToolbar', {
        TextAreaBoldSmall,
        TextAreaBoldLarge,
        TextAreaItalicSmall,
        TextAreaItalicLarge,
        TextAreaUnderlineSmall,
        TextAreaUnderlineLarge,
        TextAreaLinkSmall,
        TextAreaLinkLarge,
        TextAreaBulletListSmall,
        TextAreaBulletListLarge,
        TextAreaNumberedListSmall,
        TextAreaNumberedListLarge,
    });
    const sizeToIcons = {
        [RICH_TEXT_INPUT_AREA_SIZE.small]: {
            bold: themeIcons.TextAreaBoldSmall,
            italic: themeIcons.TextAreaItalicSmall,
            underline: themeIcons.TextAreaUnderlineSmall,
            link: themeIcons.TextAreaLinkSmall,
            bulletList: themeIcons.TextAreaBulletListSmall,
            numberedList: themeIcons.TextAreaNumberedListSmall,
        },
        [RICH_TEXT_INPUT_AREA_SIZE.large]: {
            bold: themeIcons.TextAreaBoldLarge,
            italic: themeIcons.TextAreaItalicLarge,
            underline: themeIcons.TextAreaUnderlineLarge,
            link: themeIcons.TextAreaLinkLarge,
            bulletList: themeIcons.TextAreaBulletListLarge,
            numberedList: themeIcons.TextAreaNumberedListLarge,
        },
    };
    const icons = sizeToIcons[size] || sizeToIcons[RICH_TEXT_INPUT_AREA_SIZE.large];
    return (React.createElement(RichTextInputAreaContext.Consumer, null, ({ texts }) => {
        const buttons = [
            {
                type: inlineStyleTypes.bold,
                iconComponent: icons.bold,
                render: (index, buttonProps) => renderButton(index, buttonProps),
                isDisabled,
                isActive: () => EditorUtilities.isEditorFocused(editorState) &&
                    EditorUtilities.hasStyle(editorState, inlineStyleTypes.bold),
                tooltipText: texts.toolbarButtons.boldButtonLabel,
                onClick: () => onBold(EditorUtilities.toggleStyle(editorState, inlineStyleTypes.bold)),
            },
            {
                type: inlineStyleTypes.italic,
                iconComponent: icons.italic,
                render: (index, buttonProps) => renderButton(index, buttonProps),
                isDisabled,
                isActive: () => EditorUtilities.isEditorFocused(editorState) &&
                    EditorUtilities.hasStyle(editorState, inlineStyleTypes.italic),
                tooltipText: texts.toolbarButtons.italicButtonLabel,
                onClick: () => onItalic(EditorUtilities.toggleStyle(editorState, inlineStyleTypes.italic)),
            },
            {
                type: inlineStyleTypes.underline,
                iconComponent: icons.underline,
                render: (index, buttonProps) => renderButton(index, buttonProps),
                isDisabled,
                isActive: () => EditorUtilities.isEditorFocused(editorState) &&
                    EditorUtilities.hasStyle(editorState, inlineStyleTypes.underline),
                tooltipText: texts.toolbarButtons.underlineButtonLabel,
                onClick: () => onUnderline(EditorUtilities.toggleStyle(editorState, inlineStyleTypes.underline)),
            },
            {
                type: entityTypes.link,
                iconComponent: icons.link,
                render: (index, buttonProps) => renderLinkButton(index, buttonProps),
                isDisabled,
                isActive: () => EditorUtilities.isEditorFocused(editorState) &&
                    EditorUtilities.hasEntity(editorState, entityTypes.link),
                tooltipText: texts.toolbarButtons.linkButtonLabel,
                // The data which is passed and being used within the insertion form
                data: {
                    selectedText: EditorUtilities.getSelectedText(editorState),
                    hasRemovableEntityInSelection: EditorUtilities.hasRemovableEntityInSelection(editorState),
                },
                onSubmit: (event, linkData) => {
                    onLink(EditorUtilities.toggleLink(editorState, linkData));
                },
                onRemove: () => {
                    onLink(EditorUtilities.toggleLink(editorState));
                },
            },
            {
                type: blockTypes.bulletedList,
                iconComponent: icons.bulletList,
                render: (index, buttonProps) => renderButton(index, buttonProps),
                isDisabled,
                isActive: () => EditorUtilities.isEditorFocused(editorState) &&
                    EditorUtilities.hasBlockType(editorState, blockTypes.bulletedList),
                tooltipText: texts.toolbarButtons.bulletedListButtonLabel,
                onClick: () => onBulletedList(EditorUtilities.toggleBlockType(editorState, blockTypes.bulletedList)),
            },
            {
                type: blockTypes.numberedList,
                iconComponent: icons.numberedList,
                render: (index, buttonProps) => renderButton(index, buttonProps),
                isDisabled,
                isActive: () => EditorUtilities.isEditorFocused(editorState) &&
                    EditorUtilities.hasBlockType(editorState, blockTypes.numberedList),
                tooltipText: texts.toolbarButtons.numberedListButtonLabel,
                onClick: () => onNumberedList(EditorUtilities.toggleBlockType(editorState, blockTypes.numberedList)),
            },
        ];
        return (React.createElement("div", { "data-hook": dataHook, className: className },
            buttons.map(({ render, ...props }, index) => render(index, { ...props, size })),
            customButtons &&
                customButtons.map(({ tooltipText, icon, onClick, disabled, active, dataHook: buttonDataHook, }, index) => (React.createElement(RichTextToolbarButton, { key: buttonDataHook || index, dataHook: buttonDataHook, tooltipText: tooltipText, isDisabled: isDisabled || disabled, isActive: active, onClick: onClick }, icon)))));
    }));
};
export default RichTextToolbar;
//# sourceMappingURL=RichTextToolbar.js.map