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

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _system = require("@wix/wix-ui-icons-common/system");
var _RichTextInputArea = require("../RichTextInputArea.constants");
var _WixDesignSystemIconThemeProvider = require("../../WixDesignSystemIconThemeProvider");
var _RichTextToolbarButton = _interopRequireDefault(require("./RichTextToolbarButton"));
var _RichTextToolbarLinkButton = _interopRequireDefault(require("./RichTextToolbarLinkButton"));
var _RichTextInputAreaContext = require("../RichTextInputAreaContext");
var _EditorUtilities = _interopRequireDefault(require("../EditorUtilities"));
var _RichTextInputAreaTypes = require("../RichTextInputAreaTypes");
var _excluded = ["type", "iconComponent", "isDisabled", "isActive"],
  _excluded2 = ["type", "iconComponent", "isDisabled", "isActive"],
  _excluded3 = ["render"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/RichTextInputArea/Toolbar/RichTextToolbar.jsx",
  _this = void 0;
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var renderButton = function renderButton(index, _ref) {
  var type = _ref.type,
    Icon = _ref.iconComponent,
    isDisabled = _ref.isDisabled,
    isActive = _ref.isActive,
    restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_RichTextToolbarButton["default"], (0, _extends2["default"])({
    key: "".concat(index, "-").concat(type),
    dataHook: "richtextarea-button-".concat(type.toLowerCase()),
    isDisabled: isDisabled,
    isActive: !isDisabled && isActive()
  }, restProps, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 33,
      columnNumber: 3
    }
  }), /*#__PURE__*/_react["default"].createElement(Icon, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40,
      columnNumber: 5
    }
  }));
};
var renderLinkButton = function renderLinkButton(index, _ref2) {
  var type = _ref2.type,
    Icon = _ref2.iconComponent,
    isDisabled = _ref2.isDisabled,
    isActive = _ref2.isActive,
    restProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
  return /*#__PURE__*/_react["default"].createElement(_RichTextToolbarLinkButton["default"], (0, _extends2["default"])({
    key: "".concat(index, "-").concat(type),
    dataHook: "richtextarea-button-".concat(type.toLowerCase()),
    isDisabled: isDisabled,
    isActive: !isDisabled && isActive()
  }, restProps, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48,
      columnNumber: 3
    }
  }), /*#__PURE__*/_react["default"].createElement(Icon, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55,
      columnNumber: 5
    }
  }));
};
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,
    customButtons = _ref3.customButtons,
    size = _ref3.size;
  var themeIcons = (0, _WixDesignSystemIconThemeProvider.useIcons)('RichTextToolbar', {
    TextAreaBoldSmall: _system.TextAreaBoldSmall,
    TextAreaBoldLarge: _system.TextAreaBoldLarge,
    TextAreaItalicSmall: _system.TextAreaItalicSmall,
    TextAreaItalicLarge: _system.TextAreaItalicLarge,
    TextAreaUnderlineSmall: _system.TextAreaUnderlineSmall,
    TextAreaUnderlineLarge: _system.TextAreaUnderlineLarge,
    TextAreaLinkSmall: _system.TextAreaLinkSmall,
    TextAreaLinkLarge: _system.TextAreaLinkLarge,
    TextAreaBulletListSmall: _system.TextAreaBulletListSmall,
    TextAreaBulletListLarge: _system.TextAreaBulletListLarge,
    TextAreaNumberedListSmall: _system.TextAreaNumberedListSmall,
    TextAreaNumberedListLarge: _system.TextAreaNumberedListLarge
  });
  var sizeToIcons = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _RichTextInputArea.RICH_TEXT_INPUT_AREA_SIZE.small, {
    bold: themeIcons.TextAreaBoldSmall,
    italic: themeIcons.TextAreaItalicSmall,
    underline: themeIcons.TextAreaUnderlineSmall,
    link: themeIcons.TextAreaLinkSmall,
    bulletList: themeIcons.TextAreaBulletListSmall,
    numberedList: themeIcons.TextAreaNumberedListSmall
  }), _RichTextInputArea.RICH_TEXT_INPUT_AREA_SIZE.large, {
    bold: themeIcons.TextAreaBoldLarge,
    italic: themeIcons.TextAreaItalicLarge,
    underline: themeIcons.TextAreaUnderlineLarge,
    link: themeIcons.TextAreaLinkLarge,
    bulletList: themeIcons.TextAreaBulletListLarge,
    numberedList: themeIcons.TextAreaNumberedListLarge
  });
  var icons = sizeToIcons[size] || sizeToIcons[_RichTextInputArea.RICH_TEXT_INPUT_AREA_SIZE.large];
  return /*#__PURE__*/_react["default"].createElement(_RichTextInputAreaContext.RichTextInputAreaContext.Consumer, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 111,
      columnNumber: 5
    }
  }, function (_ref4) {
    var texts = _ref4.texts;
    var buttons = [{
      type: _RichTextInputAreaTypes.inlineStyleTypes.bold,
      iconComponent: icons.bold,
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.bold);
      },
      tooltipText: texts.toolbarButtons.boldButtonLabel,
      onClick: function onClick() {
        return onBold(_EditorUtilities["default"].toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.bold));
      }
    }, {
      type: _RichTextInputAreaTypes.inlineStyleTypes.italic,
      iconComponent: icons.italic,
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.italic);
      },
      tooltipText: texts.toolbarButtons.italicButtonLabel,
      onClick: function onClick() {
        return onItalic(_EditorUtilities["default"].toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.italic));
      }
    }, {
      type: _RichTextInputAreaTypes.inlineStyleTypes.underline,
      iconComponent: icons.underline,
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.underline);
      },
      tooltipText: texts.toolbarButtons.underlineButtonLabel,
      onClick: function onClick() {
        return onUnderline(_EditorUtilities["default"].toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.underline));
      }
    }, {
      type: _RichTextInputAreaTypes.entityTypes.link,
      iconComponent: icons.link,
      render: function render(index, buttonProps) {
        return renderLinkButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasEntity(editorState, _RichTextInputAreaTypes.entityTypes.link);
      },
      tooltipText: texts.toolbarButtons.linkButtonLabel,
      // The data which is passed and being used within the insertion form
      data: {
        selectedText: _EditorUtilities["default"].getSelectedText(editorState),
        hasRemovableEntityInSelection: _EditorUtilities["default"].hasRemovableEntityInSelection(editorState)
      },
      onSubmit: function onSubmit(event, linkData) {
        onLink(_EditorUtilities["default"].toggleLink(editorState, linkData));
      },
      onRemove: function onRemove() {
        onLink(_EditorUtilities["default"].toggleLink(editorState));
      }
    }, {
      type: _RichTextInputAreaTypes.blockTypes.bulletedList,
      iconComponent: icons.bulletList,
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasBlockType(editorState, _RichTextInputAreaTypes.blockTypes.bulletedList);
      },
      tooltipText: texts.toolbarButtons.bulletedListButtonLabel,
      onClick: function onClick() {
        return onBulletedList(_EditorUtilities["default"].toggleBlockType(editorState, _RichTextInputAreaTypes.blockTypes.bulletedList));
      }
    }, {
      type: _RichTextInputAreaTypes.blockTypes.numberedList,
      iconComponent: icons.numberedList,
      render: function render(index, buttonProps) {
        return renderButton(index, buttonProps);
      },
      isDisabled: isDisabled,
      isActive: function isActive() {
        return _EditorUtilities["default"].isEditorFocused(editorState) && _EditorUtilities["default"].hasBlockType(editorState, _RichTextInputAreaTypes.blockTypes.numberedList);
      },
      tooltipText: texts.toolbarButtons.numberedListButtonLabel,
      onClick: function onClick() {
        return onNumberedList(_EditorUtilities["default"].toggleBlockType(editorState, _RichTextInputAreaTypes.blockTypes.numberedList));
      }
    }];
    return /*#__PURE__*/_react["default"].createElement("div", {
      "data-hook": dataHook,
      className: className,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 228,
        columnNumber: 11
      }
    }, buttons.map(function (_ref5, index) {
      var render = _ref5.render,
        props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded3);
      return render(index, _objectSpread(_objectSpread({}, props), {}, {
        size: size
      }));
    }), customButtons && customButtons.map(function (_ref6, index) {
      var tooltipText = _ref6.tooltipText,
        icon = _ref6.icon,
        onClick = _ref6.onClick,
        disabled = _ref6.disabled,
        active = _ref6.active,
        buttonDataHook = _ref6.dataHook;
      return /*#__PURE__*/_react["default"].createElement(_RichTextToolbarButton["default"], {
        key: buttonDataHook || index,
        dataHook: buttonDataHook,
        tooltipText: tooltipText,
        isDisabled: isDisabled || disabled,
        isActive: active,
        onClick: onClick,
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 245,
          columnNumber: 19
        }
      }, icon);
    }));
  });
};
var _default = exports["default"] = RichTextToolbar;