wix-style-react/dist/es/src/RichTextInputArea/Toolbar/RichTextToolbar.js

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["type", "iconComponent", "isDisabled", "isActive"],
    _excluded2 = ["type", "iconComponent", "isDisabled", "isActive"],
    _excluded3 = ["render"];
import React from 'react';
import TextAreaBold from 'wix-ui-icons-common/system/TextAreaBold';
import TextAreaItalic from 'wix-ui-icons-common/system/TextAreaItalic';
import TextAreaUnderline from 'wix-ui-icons-common/system/TextAreaUnderline';
import TextAreaLink from 'wix-ui-icons-common/system/TextAreaLink';
import TextAreaBulletList from 'wix-ui-icons-common/system/TextAreaBulletList';
import TextAreaNumberedList from 'wix-ui-icons-common/system/TextAreaNumberedList';
import RichTextToolbarButton from './RichTextToolbarButton';
import RichTextToolbarLinkButton from './RichTextToolbarLinkButton';
import { RichTextInputAreaContext } from '../RichTextInputAreaContext';
import EditorUtilities from '../EditorUtilities';
import { inlineStyleTypes, blockTypes, entityTypes } from '../RichTextInputAreaTypes';

var renderButton = function renderButton(index, _ref) {
  var type = _ref.type,
      Icon = _ref.iconComponent,
      isDisabled = _ref.isDisabled,
      isActive = _ref.isActive,
      restProps = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement(RichTextToolbarButton, _extends({
    key: "".concat(index, "-").concat(type),
    dataHook: "richtextarea-button-".concat(type.toLowerCase()),
    isDisabled: isDisabled,
    isActive: !isDisabled && isActive()
  }, restProps), /*#__PURE__*/React.createElement(Icon, null));
};

var renderLinkButton = function renderLinkButton(index, _ref2) {
  var type = _ref2.type,
      Icon = _ref2.iconComponent,
      isDisabled = _ref2.isDisabled,
      isActive = _ref2.isActive,
      restProps = _objectWithoutProperties(_ref2, _excluded2);

  return /*#__PURE__*/React.createElement(RichTextToolbarLinkButton, _extends({
    key: "".concat(index, "-").concat(type),
    dataHook: "richtextarea-button-".concat(type.toLowerCase()),
    isDisabled: isDisabled,
    isActive: !isDisabled && isActive()
  }, restProps), /*#__PURE__*/React.createElement(Icon, null));
};

var RichTextToolbar = function RichTextToolbar(_ref3) {
  var dataHook = _ref3.dataHook,
      className = _ref3.className,
      isDisabled = _ref3.isDisabled,
      editorState = _ref3.editorState,
      onBold = _ref3.onBold,
      onItalic = _ref3.onItalic,
      onUnderline = _ref3.onUnderline,
      onLink = _ref3.onLink,
      onBulletedList = _ref3.onBulletedList,
      onNumberedList = _ref3.onNumberedList;
  return /*#__PURE__*/React.createElement(RichTextInputAreaContext.Consumer, null, function (_ref4) {
    var texts = _ref4.texts;
    var buttons = [{
      type: inlineStyleTypes.bold,
      iconComponent: TextAreaBold,
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return EditorUtilities.isEditorFocused(editorState) && EditorUtilities.hasStyle(editorState, inlineStyleTypes.bold);
      },
      tooltipText: texts.toolbarButtons.boldButtonLabel,
      onClick: function onClick() {
        return onBold(EditorUtilities.toggleStyle(editorState, inlineStyleTypes.bold));
      }
    }, {
      type: inlineStyleTypes.italic,
      iconComponent: TextAreaItalic,
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return EditorUtilities.isEditorFocused(editorState) && EditorUtilities.hasStyle(editorState, inlineStyleTypes.italic);
      },
      tooltipText: texts.toolbarButtons.italicButtonLabel,
      onClick: function onClick() {
        return onItalic(EditorUtilities.toggleStyle(editorState, inlineStyleTypes.italic));
      }
    }, {
      type: inlineStyleTypes.underline,
      iconComponent: TextAreaUnderline,
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return EditorUtilities.isEditorFocused(editorState) && EditorUtilities.hasStyle(editorState, inlineStyleTypes.underline);
      },
      tooltipText: texts.toolbarButtons.underlineButtonLabel,
      onClick: function onClick() {
        return onUnderline(EditorUtilities.toggleStyle(editorState, inlineStyleTypes.underline));
      }
    }, {
      type: entityTypes.link,
      iconComponent: TextAreaLink,
      render: function render(index, buttonProps) {
        return renderLinkButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return 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: function onSubmit(event, linkData) {
        onLink(EditorUtilities.toggleLink(editorState, linkData));
      },
      onRemove: function onRemove() {
        onLink(EditorUtilities.toggleLink(editorState));
      }
    }, {
      type: blockTypes.bulletedList,
      iconComponent: TextAreaBulletList,
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return EditorUtilities.isEditorFocused(editorState) && EditorUtilities.hasBlockType(editorState, blockTypes.bulletedList);
      },
      tooltipText: texts.toolbarButtons.bulletedListButtonLabel,
      onClick: function onClick() {
        return onBulletedList(EditorUtilities.toggleBlockType(editorState, blockTypes.bulletedList));
      }
    }, {
      type: blockTypes.numberedList,
      iconComponent: TextAreaNumberedList,
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return EditorUtilities.isEditorFocused(editorState) && EditorUtilities.hasBlockType(editorState, blockTypes.numberedList);
      },
      tooltipText: texts.toolbarButtons.numberedListButtonLabel,
      onClick: function onClick() {
        return onNumberedList(EditorUtilities.toggleBlockType(editorState, blockTypes.numberedList));
      }
    }];
    return /*#__PURE__*/React.createElement("div", {
      "data-hook": dataHook,
      className: className
    }, buttons.map(function (_ref5, index) {
      var render = _ref5.render,
          props = _objectWithoutProperties(_ref5, _excluded3);

      return render(index, props);
    }));
  });
};

export default RichTextToolbar;