"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _draftJs = require("draft-js");
var _draftConvert = require("draft-convert");
var _RichTextInputAreaSt = require("./RichTextInputArea.st.css.js");
var _RichTextToolbar = _interopRequireDefault(require("./Toolbar/RichTextToolbar"));
var _EditorUtilities = _interopRequireDefault(require("./EditorUtilities"));
var _RichTextInputAreaContext = require("./RichTextInputAreaContext");
var _RichTextInputAreaTexts = require("./RichTextInputAreaTexts");
var _StatusIndicator = _interopRequireDefault(require("../StatusIndicator"));
var _StatusContext = require("../FormField/StatusContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/RichTextInputArea/RichTextInputArea.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; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var decorator = new _draftJs.CompositeDecorator([{
  strategy: _EditorUtilities["default"].findLinkEntities,
  component: function component(_ref) {
    var contentState = _ref.contentState,
      entityKey = _ref.entityKey,
      children = _ref.children;
    var _contentState$getEnti = contentState.getEntity(entityKey).getData(),
      url = _contentState$getEnti.url;
    return /*#__PURE__*/_react["default"].createElement("a", {
      "data-hook": "richtextarea-link",
      href: url,
      className: _RichTextInputAreaSt.classes.link,
      target: "_blank"
      // Avoids a potentially serious vulnerability for '_blank' links
      ,
      rel: "noopener noreferrer",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 22,
        columnNumber: 9
      }
    }, children);
  }
}]);
var RichTextInputArea = /*#__PURE__*/function (_React$PureComponent) {
  function RichTextInputArea(props) {
    var _this2;
    (0, _classCallCheck2["default"])(this, RichTextInputArea);
    _this2 = _callSuper(this, RichTextInputArea, [props]);
    _this2._setEditorState = function (newEditorState) {
      var onStateChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
      _this2.setState({
        editorState: newEditorState
      }, function () {
        var _this2$props$onChange = _this2.props.onChange,
          onChange = _this2$props$onChange === void 0 ? function () {} : _this2$props$onChange;
        var htmlText = _EditorUtilities["default"].convertToHtml(newEditorState);
        var plainText = newEditorState.getCurrentContent().getPlainText();
        onChange(htmlText, {
          plainText: plainText
        });
        onStateChanged();
      });
    };
    _this2._updateContentByValue = function (value) {
      var content = (0, _draftConvert.convertFromHTML)({
        htmlToEntity: function htmlToEntity(nodeName, node, createEntity) {
          if (nodeName === 'a') {
            return createEntity('LINK', 'MUTABLE', {
              url: node.href
            });
          }
        }
      })(value);
      var updatedEditorState = _draftJs.EditorState.push(_this2.state.editorState, content);
      _this2.setState({
        editorState: updatedEditorState
      });
    };
    /** Set value to display in the editor */
    _this2.setValue = function (value) {
      _this2._updateContentByValue(value);
    };
    /** Sets focus on rich text input area element */
    _this2.focus = function () {
      var _this2$editorRef$curr;
      (_this2$editorRef$curr = _this2.editorRef.current) == null || _this2$editorRef$curr.focus();
    };
    /** Removes focus from rich text input area element */
    _this2.blur = function () {
      var _this2$editorRef$curr2;
      (_this2$editorRef$curr2 = _this2.editorRef.current) == null || _this2$editorRef$curr2.blur();
    };
    var consumerTexts = props.texts;
    _this2.state = {
      editorState: _draftJs.EditorState.createEmpty(decorator),
      texts: {
        toolbarButtons: _objectSpread(_objectSpread({}, _RichTextInputAreaTexts.defaultTexts.toolbarButtons), consumerTexts.toolbarButtons),
        insertionForm: _objectSpread(_objectSpread({}, _RichTextInputAreaTexts.defaultTexts.insertionForm), consumerTexts.insertionForm)
      }
    };
    return _this2;
  }
  (0, _inherits2["default"])(RichTextInputArea, _React$PureComponent);
  return (0, _createClass2["default"])(RichTextInputArea, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var initialValue = this.props.initialValue;

      // TODO: currently it treats the value as an initial value
      this._updateContentByValue(initialValue);
      this.editorRef = /*#__PURE__*/_react["default"].createRef();
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;
      var _this$props = this.props,
        dataHook = _this$props.dataHook,
        className = _this$props.className,
        placeholder = _this$props.placeholder,
        disabled = _this$props.disabled,
        minHeight = _this$props.minHeight,
        maxHeight = _this$props.maxHeight,
        status = _this$props.status,
        statusMessage = _this$props.statusMessage,
        spellCheck = _this$props.spellCheck,
        customButtons = _this$props.customButtons;
      var isEditorEmpty = _EditorUtilities["default"].isEditorEmpty(this.state.editorState);
      var finalStatus = (0, _StatusContext.getStatusFromContext)(this.context, status);
      return /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": dataHook,
        className: (0, _RichTextInputAreaSt.st)(_RichTextInputAreaSt.classes.root, {
          hidePlaceholder: !isEditorEmpty,
          disabled: disabled,
          hasError: !disabled && finalStatus === 'error',
          hasWarning: !disabled && finalStatus === 'warning'
        }, className)
        // Using CSS variable instead of applying minHeight & maxHeight on each child, down to the editor's content
        ,
        style: (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _RichTextInputAreaSt.vars.minHeight, minHeight), _RichTextInputAreaSt.vars.maxHeight, maxHeight),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 84,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement(_RichTextInputAreaContext.RichTextInputAreaContext.Provider, {
        value: {
          texts: this.state.texts
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 102,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement(_RichTextToolbar["default"], {
        dataHook: "richtextarea-toolbar",
        className: _RichTextInputAreaSt.classes.toolbar,
        isDisabled: disabled,
        editorState: this.state.editorState,
        onBold: this._setEditorState,
        onItalic: this._setEditorState,
        onUnderline: this._setEditorState,
        onLink: function onLink(newEditorState) {
          _this3._setEditorState(newEditorState, function () {
            return _this3.focus();
          });
        },
        onBulletedList: this._setEditorState,
        onNumberedList: this._setEditorState,
        customButtons: customButtons,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 107,
          columnNumber: 11
        }
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: _RichTextInputAreaSt.classes.editorWrapper,
        onClick: function onClick() {
          return _this3.focus();
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 123,
          columnNumber: 9
        }
      }, /*#__PURE__*/_react["default"].createElement(_draftJs.Editor, {
        ref: this.editorRef,
        editorState: this.state.editorState,
        onChange: this._setEditorState,
        placeholder: placeholder,
        readOnly: disabled,
        spellCheck: spellCheck,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 124,
          columnNumber: 11
        }
      }), !disabled && (status || finalStatus === 'loading') && /*#__PURE__*/_react["default"].createElement("span", {
        className: _RichTextInputAreaSt.classes.statusIndicator,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 133,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react["default"].createElement(_StatusIndicator["default"], {
        dataHook: "richtextarea-status-indicator",
        status: finalStatus,
        message: statusMessage,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 134,
          columnNumber: 15
        }
      }))));
    }
  }]);
}(_react["default"].PureComponent);
RichTextInputArea.contextType = _StatusContext.StatusContext;
RichTextInputArea.displayName = 'RichTextInputArea';
RichTextInputArea.defaultProps = {
  initialValue: '<p/>',
  texts: {},
  disabled: false
};
var _default = exports["default"] = RichTextInputArea;