slate-editor-icons/lib/helpers/ImageNode.js

icons for slate editors

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _class, _temp;

/* eslint-disable require-jsdoc */


exports['default'] = function (readOnly) {
  var NodeComponent = function () {
    function NodeComponent(_ref) {
      var props = (0, _objectWithoutProperties3['default'])(_ref, []);

      return _react2['default'].createElement(ImageNode, (0, _extends3['default'])({}, props, { readOnly: readOnly }));
    }

    return NodeComponent;
  }();
  return NodeComponent;
};

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _slatePlugins = require('slate-plugins');

var _reactResizable = require('react-resizable');

var _arrowUp = require('react-icons/lib/fa/arrow-up');

var _arrowUp2 = _interopRequireDefault(_arrowUp);

var _arrowDown = require('react-icons/lib/fa/arrow-down');

var _arrowDown2 = _interopRequireDefault(_arrowDown);

var _trashO = require('react-icons/lib/fa/trash-o');

var _trashO2 = _interopRequireDefault(_trashO);

var _imageNode = require('./style/imageNode.scss');

var _imageNode2 = _interopRequireDefault(_imageNode);

require('./style/react-resizable.lib.scss');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var ImageNode = (_temp = _class = function (_Component) {
  (0, _inherits3['default'])(ImageNode, _Component);

  function ImageNode(props) {
    (0, _classCallCheck3['default'])(this, ImageNode);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (ImageNode.__proto__ || (0, _getPrototypeOf2['default'])(ImageNode)).call(this, props));

    _this.onResizeEnd = _this.onResizeEnd.bind(_this);
    _this.onResize = _this.onResize.bind(_this);
    _this.moveUp = _this.moveUp.bind(_this);
    _this.moveDown = _this.moveDown.bind(_this);
    _this.remove = _this.remove.bind(_this);

    _this.state = {
      width: null,
      height: null
    };
    return _this;
  }

  (0, _createClass3['default'])(ImageNode, [{
    key: 'onResizeEnd',
    value: function () {
      function onResizeEnd(e, data) {
        var onChange = this.props.editor.onChange;
        var _data$size = data.size,
            width = _data$size.width,
            height = _data$size.height;

        onChange(_slatePlugins.blocks.addDataToCurrent(this.props.state, {
          data: { width: width, height: height }
        }));
      }

      return onResizeEnd;
    }()
  }, {
    key: 'onResize',
    value: function () {
      function onResize(e, data) {
        var _data$size2 = data.size,
            width = _data$size2.width,
            height = _data$size2.height;

        this.setState({
          width: width,
          height: height
        });
      }

      return onResize;
    }()
  }, {
    key: 'moveUp',
    value: function () {
      function moveUp() {
        var _props = this.props,
            state = _props.state,
            node = _props.node,
            editor = _props.editor;
        var document = state.document;

        var parent = document.getParent(node);
        var index = parent.nodes.indexOf(node) - 1;
        var newState = state.transform().moveNodeByKey(node, parent, index === -1 ? 0 : index).apply();
        editor.onChange(newState);
      }

      return moveUp;
    }()
  }, {
    key: 'moveDown',
    value: function () {
      function moveDown() {
        var _props2 = this.props,
            state = _props2.state,
            node = _props2.node,
            editor = _props2.editor;
        var document = state.document;

        var parent = document.getParent(node);
        var index = parent.nodes.indexOf(node) + 1;
        var newState = state.transform().moveNodeByKey(node, parent, index > parent.nodes.count() ? parent.nodes.count() : index) // eslint-disable-line max-len
        .apply();
        editor.onChange(newState);
      }

      return moveDown;
    }()
  }, {
    key: 'remove',
    value: function () {
      function remove() {
        var _props3 = this.props,
            state = _props3.state,
            node = _props3.node,
            editor = _props3.editor;

        var newState = state.transform().unsetSelection().removeNodeByKey(node.key).apply();

        editor.onChange(newState);
      }

      return remove;
    }()
  }, {
    key: 'render',
    value: function () {
      function render() {
        var _props4 = this.props,
            node = _props4.node,
            state = _props4.state,
            attributes = _props4.attributes,
            children = _props4.children,
            readOnly = _props4.readOnly;

        var align = node.data.get('align');
        var indent = node.data.get('indent');
        var src = node.data.get('src');
        var width = this.state.width || node.data.get('width');
        var height = this.state.height || node.data.get('height');
        var isFocused = state.selection.hasEdgeIn(node);

        if (readOnly) {
          // if editor is readOnly
          return _react2['default'].createElement(
            'div',
            { style: {
                textAlign: align,
                paddingLeft: 3 * indent + 'em'
              }, 'data-slate-type': 'image' },
            _react2['default'].createElement(
              'div',
              {
                className: _imageNode2['default'].imageNode,
                style: {
                  width: width,
                  height: height
                } },
              _react2['default'].createElement('img', (0, _extends3['default'])({}, attributes, {
                src: src })),
              children
            )
          );
        }

        return _react2['default'].createElement(
          'div',
          { style: {
              textAlign: align,
              paddingLeft: 3 * indent + 'em'
            }, 'data-slate-type': 'image' },
          _react2['default'].createElement(
            _reactResizable.Resizable,
            {
              lockAspectRatio: true,
              minConstraints: [200, 200],
              maxConstraints: [700, 700],
              onResize: this.onResize,
              onResizeEnd: this.onResizeEnd,
              width: width,
              height: height },
            _react2['default'].createElement(
              'div',
              {
                className: isFocused ? _imageNode2['default'].imageNodeActive : _imageNode2['default'].imageNode,
                style: {
                  width: width,
                  height: height
                } },
              _react2['default'].createElement('div', { className: _imageNode2['default'].overlay }),
              _react2['default'].createElement(
                'div',
                { className: _imageNode2['default'].imageToolbar },
                _react2['default'].createElement(
                  'div',
                  { className: _imageNode2['default'].imageToolbarItem },
                  _react2['default'].createElement(_arrowUp2['default'], { onClick: this.moveUp })
                ),
                _react2['default'].createElement(
                  'div',
                  { className: _imageNode2['default'].imageToolbarItem },
                  _react2['default'].createElement(_arrowDown2['default'], { onClick: this.moveDown })
                ),
                _react2['default'].createElement(
                  'div',
                  { className: _imageNode2['default'].imageToolbarItem },
                  _react2['default'].createElement(_trashO2['default'], { onClick: this.remove })
                )
              ),
              _react2['default'].createElement('img', (0, _extends3['default'])({}, attributes, {
                src: src })),
              children
            )
          )
        );
      }

      return render;
    }()
  }]);
  return ImageNode;
}(_react.Component), _class.propTypes = {
  attributes: _react.PropTypes.object,
  children: _react.PropTypes.any,
  node: _react.PropTypes.any,
  state: _react.PropTypes.object,
  editor: _react.PropTypes.object,
  readOnly: _react.PropTypes.bool
}, _temp);
module.exports = exports['default'];