"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.EditorAndToolbar = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _toolbar = _interopRequireDefault(require("./toolbar"));

var _classnames = _interopRequireDefault(require("classnames"));

var _debug = _interopRequireDefault(require("debug"));

var _theme = require("../../theme");

var _styles = require("@material-ui/core/styles");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));

var _renderUi = require("../../../render-ui");

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:toolbar:editor-and-toolbar');

var EditorAndToolbar = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(EditorAndToolbar, _React$Component);

  var _super = _createSuper(EditorAndToolbar);

  function EditorAndToolbar() {
    (0, _classCallCheck2["default"])(this, EditorAndToolbar);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(EditorAndToolbar, [{
    key: "render",
    value: function render() {
      var _classNames,
          _this = this,
          _classNames2;

      var _this$props = this.props,
          classes = _this$props.classes,
          children = _this$props.children,
          value = _this$props.value,
          plugins = _this$props.plugins,
          onChange = _this$props.onChange,
          getFocusedValue = _this$props.getFocusedValue,
          onDone = _this$props.onDone,
          focusedNode = _this$props.focusedNode,
          autoWidth = _this$props.autoWidth,
          readOnly = _this$props.readOnly,
          disableScrollbar = _this$props.disableScrollbar,
          disableUnderline = _this$props.disableUnderline,
          pluginProps = _this$props.pluginProps,
          toolbarOpts = _this$props.toolbarOpts,
          onDataChange = _this$props.onDataChange,
          toolbarRef = _this$props.toolbarRef,
          doneButtonRef = _this$props.doneButtonRef,
          focusToolbar = _this$props.focusToolbar,
          onToolbarFocus = _this$props.onToolbarFocus,
          onToolbarBlur = _this$props.onToolbarBlur;
      var inFocus = value.isFocused || focusedNode !== null && focusedNode !== undefined || focusToolbar;
      var holderNames = (0, _classnames["default"])(classes.editorHolder, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.editorInFocus, inFocus), (0, _defineProperty2["default"])(_classNames, classes.readOnly, readOnly), (0, _defineProperty2["default"])(_classNames, classes.disabledUnderline, disableUnderline), (0, _defineProperty2["default"])(_classNames, classes.disabledScrollbar, disableScrollbar), _classNames));
      var clonedChildren = children;

      if (typeof children !== 'string') {
        clonedChildren = /*#__PURE__*/_react["default"].cloneElement(children, {
          ref: function ref(el) {
            return _this.editorRef = el;
          }
        });
      }

      log('[render] inFocus: ', inFocus, 'value.isFocused:', value.isFocused, 'focused node: ', focusedNode);
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, classes.noBorder, toolbarOpts && toolbarOpts.noBorder), (0, _defineProperty2["default"])(_classNames2, classes.error, toolbarOpts && toolbarOpts.error), _classNames2), classes.root)
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: holderNames
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.noPadding, toolbarOpts && toolbarOpts.noPadding), classes.children)
      }, clonedChildren)), /*#__PURE__*/_react["default"].createElement(_toolbar["default"], {
        autoWidth: autoWidth,
        plugins: plugins,
        focusedNode: focusedNode,
        value: value,
        isFocused: inFocus,
        onBlur: onToolbarBlur,
        onFocus: onToolbarFocus,
        onChange: onChange,
        getFocusedValue: getFocusedValue,
        onDone: onDone,
        onDataChange: onDataChange,
        toolbarRef: toolbarRef,
        doneButtonRef: doneButtonRef,
        pluginProps: pluginProps,
        toolbarOpts: toolbarOpts
      }));
    }
  }]);
  return EditorAndToolbar;
}(_react["default"].Component);

exports.EditorAndToolbar = EditorAndToolbar;
(0, _defineProperty2["default"])(EditorAndToolbar, "propTypes", {
  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
  value: _slatePropTypes["default"].value.isRequired,
  plugins: _propTypes["default"].array.isRequired,
  onChange: _propTypes["default"].func.isRequired,
  getFocusedValue: _propTypes["default"].func.isRequired,
  onDone: _propTypes["default"].func.isRequired,
  onDataChange: _propTypes["default"].func,
  toolbarRef: _propTypes["default"].func,
  focusedNode: _slatePropTypes["default"].node,
  readOnly: _propTypes["default"].bool,
  disableScrollbar: _propTypes["default"].bool,
  disableUnderline: _propTypes["default"].bool,
  autoWidth: _propTypes["default"].bool,
  classes: _propTypes["default"].object.isRequired,
  pluginProps: _propTypes["default"].object,
  toolbarOpts: _propTypes["default"].shape({
    position: _propTypes["default"].oneOf(['bottom', 'top']),
    alwaysVisible: _propTypes["default"].bool,
    error: _propTypes["default"].string,
    noBorder: _propTypes["default"].any,
    noPadding: _propTypes["default"].any
  }),
  focusToolbar: _propTypes["default"].bool.isRequired,
  onToolbarFocus: _propTypes["default"].func.isRequired,
  onToolbarBlur: _propTypes["default"].func.isRequired,
  doneButtonRef: _propTypes["default"].func
});

var style = function style(theme) {
  return {
    root: {
      position: 'relative',
      padding: '0px',
      border: '1px solid #ccc',
      borderRadius: '4px',
      cursor: 'text',
      '& [data-slate-editor="true"]': {
        wordBreak: 'break-word',
        overflow: 'visible',
        maxHeight: '500px',
        // needed in order to be able to put the focus before a void element when it is the first one in the editor
        padding: '5px'
      }
    },
    children: {
      padding: '10px 16px'
    },
    editorHolder: {
      position: 'relative',
      padding: '0px',
      overflowY: 'auto',
      color: _renderUi.color.text(),
      backgroundColor: _renderUi.color.background(),
      '&::before': {
        left: '0',
        right: '0',
        bottom: '0',
        height: '1px',
        content: '""',
        position: 'absolute',
        transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
        pointerEvents: 'none',
        backgroundColor: 'rgba(0, 0, 0, 0.42)'
      },
      '&::after': {
        left: '0',
        right: '0',
        bottom: '0',
        height: '1px',
        content: '""',
        position: 'absolute',
        transform: 'scaleX(0)',
        transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',
        backgroundColor: 'rgba(0, 0, 0, 0.42)'
      },
      '&:focus': {
        '&::after': {
          transform: 'scaleX(1)',
          backgroundColor: _theme.primary,
          height: '2px'
        }
      },
      '&:hover': {
        '&::after': {
          transform: 'scaleX(1)',
          backgroundColor: theme.palette.common.black,
          height: '2px'
        }
      }
    },
    disabledUnderline: {
      '&::before': {
        display: 'none'
      },
      '&::after': {
        display: 'none'
      }
    },
    disabledScrollbar: {
      '&::-webkit-scrollbar': {
        display: 'none'
      },
      scrollbarWidth: 'none',
      '-ms-overflow-style': 'none'
    },
    readOnly: {
      '&::before': {
        background: 'transparent',
        backgroundSize: '5px 1px',
        backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',
        backgroundRepeat: 'repeat-x',
        backgroundPosition: 'left top'
      },
      '&::after': {
        left: '0',
        right: '0',
        bottom: '0',
        height: '1px',
        content: '""',
        position: 'absolute',
        transform: 'scaleX(0)',
        transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',
        backgroundColor: 'rgba(0, 0, 0, 0)'
      },
      '&:hover': {
        '&::after': {
          transform: 'scaleX(0)',
          backgroundColor: theme.palette.common.black,
          height: '2px'
        }
      }
    },
    editorInFocus: {
      '&::after': {
        transform: 'scaleX(1)',
        backgroundColor: _theme.primary,
        height: '2px'
      },
      '&:hover': {
        '&::after': {
          backgroundColor: _theme.primary
        }
      }
    },
    error: {
      border: "2px solid ".concat(theme.palette.error.main, " !important")
    },
    noBorder: {
      border: 'none'
    },
    noPadding: {
      padding: 0
    }
  };
};

var _default = (0, _styles.withStyles)(style)(EditorAndToolbar);

exports["default"] = _default;
//# sourceMappingURL=editor-and-toolbar.js.map