choerodon-ui/pro/lib/rich-text/BaseEditor.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

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

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

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

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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _tslib = require("tslib");

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

var _mobxReact = require("mobx-react");

var _reactDom = require("react-dom");

require("react-quill/dist/quill.snow.css");

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _isObject = _interopRequireDefault(require("lodash/isObject"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _reactImageLightbox = _interopRequireDefault(require("react-image-lightbox"));

var _imageDropAndPaste = _interopRequireDefault(require("./utils/imageDropAndPaste"));

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _RichTextViewer = _interopRequireDefault(require("./RichTextViewer"));

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

var ReactQuill;
var Quill;

if (typeof window !== 'undefined') {
  // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
  ReactQuill = require('react-quill'); // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires

  Quill = require('react-quill').Quill;
  /**
   * 注册图片拖拽、粘贴
   */

  Quill.register('modules/imageDropAndPaste', _imageDropAndPaste["default"]);
}

var BaseEditor = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(BaseEditor, _Component);

  var _super = (0, _createSuper2["default"])(BaseEditor);

  function BaseEditor() {
    var _this;

    (0, _classCallCheck2["default"])(this, BaseEditor);
    _this = _super.apply(this, arguments);
    _this.state = {
      imgOpen: false,
      images: [],
      srcIndex: 0
    };

    _this.handleOpenLightBox = function (e) {
      if (e.target.nodeName === 'IMG' && _this.deltaOps) {
        e.stopPropagation();
        var src = e.target.src;
        var imgArr = [];

        _this.deltaOps.forEach(function (item) {
          var image = item.insert.image;

          if (image) {
            imgArr.push(image);
          }
        });

        var index = imgArr.findIndex(function (img) {
          return img === src;
        });

        _this.setState({
          imgOpen: true,
          images: imgArr,
          srcIndex: index
        });
      }
    };

    _this.saveRef = function (name) {
      return function (ref) {
        _this[name] = ref;
        var saveRef = _this.props.saveRef;

        if (saveRef) {
          saveRef(ref);
        }
      };
    };

    return _this;
  }

  (0, _createClass2["default"])(BaseEditor, [{
    key: "setValue",
    value: function setValue(value) {
      if (this.editor) {
        this.editor.getEditor().setContents(value);
      }
    }
  }, {
    key: "handleRichTextChange",
    value: function handleRichTextChange(_, __, ___, editor) {
      var rtDelta = editor.getContents();
      this.deltaOps = rtDelta.ops;
      var onChange = this.props.onChange;

      if (onChange && rtDelta && rtDelta.ops) {
        onChange(rtDelta.ops);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var value = this.props.value;
      var deltaOps;

      if (!(0, _isObject["default"])(value) && this.editor) {
        deltaOps = this.editor.getEditor().clipboard.convert(value).ops;
      }

      if ('value' in this.props && !(0, _isEqual["default"])(this.deltaOps, deltaOps || value) && this.editor) {
        this.editor.getEditor().setContents(deltaOps || value);
      }
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      return (0, _omit["default"])(this.props, ['toolbar', 'className', 'defaultValue', 'onChange', 'value', 'ref']);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var thisNode = (0, _reactDom.findDOMNode)(this);

      if (thisNode) {
        thisNode.removeEventListener('click', this.handleOpenLightBox);
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var autoFocus = this.props.autoFocus;

      if (autoFocus && this.editor) {
        setTimeout(function () {
          _this2.editor.focus();
        });
      }

      var thisNode = (0, _reactDom.findDOMNode)(this);

      if (thisNode) {
        thisNode.addEventListener('click', this.handleOpenLightBox);
      }
    }
  }, {
    key: "blur",
    value: function blur() {
      if (this.editor) {
        this.editor.blur();
      }
    }
  }, {
    key: "renderContent",
    value: function renderContent() {
      var _this$props = this.props,
          style = _this$props.style,
          className = _this$props.className,
          toolbarId = _this$props.toolbarId,
          toolbar = _this$props.toolbar,
          dataSet = _this$props.dataSet,
          value = _this$props.value,
          mode = _this$props.mode;
      var deltaOps;

      if (!(0, _isObject["default"])(value) && this.editor) {
        deltaOps = this.editor.getEditor().clipboard.convert(value).ops;
      }

      if (mode === 'preview') {
        return /*#__PURE__*/_react["default"].createElement(_RichTextViewer["default"], {
          style: style,
          deltaOps: deltaOps || value
        });
      }

      if (ReactQuill) {
        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_toolbar["default"], {
          id: toolbarId,
          dataSet: dataSet,
          toolbar: toolbar,
          prefixCls: className
        }), /*#__PURE__*/_react["default"].createElement(ReactQuill, (0, _extends2["default"])({}, this.getOtherProps(), {
          className: "".concat(className, "-quill"),
          defaultValue: value,
          ref: this.saveRef('editor'),
          onChange: this.handleRichTextChange,
          bounds: className
        })));
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$state = this.state,
          imgOpen = _this$state.imgOpen,
          images = _this$state.images,
          srcIndex = _this$state.srcIndex;
      var className = this.props.className;
      var content = this.renderContent();
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
        className: className
      }, content), imgOpen && /*#__PURE__*/_react["default"].createElement(_reactImageLightbox["default"], {
        mainSrc: images[srcIndex],
        onCloseRequest: function onCloseRequest() {
          return _this3.setState({
            imgOpen: false
          });
        },
        imageTitle: "images",
        prevSrc: images[srcIndex - 1],
        nextSrc: images[srcIndex + 1],
        onMovePrevRequest: function onMovePrevRequest() {
          _this3.setState({
            srcIndex: srcIndex - 1
          });
        },
        onMoveNextRequest: function onMoveNextRequest() {
          _this3.setState({
            srcIndex: srcIndex + 1
          });
        }
      }));
    }
  }]);
  return BaseEditor;
}(_react.Component);

(0, _tslib.__decorate)([_autobind["default"]], BaseEditor.prototype, "setValue", null);
(0, _tslib.__decorate)([_autobind["default"]], BaseEditor.prototype, "handleRichTextChange", null);
(0, _tslib.__decorate)([_autobind["default"]], BaseEditor.prototype, "renderContent", null);
BaseEditor = (0, _tslib.__decorate)([_mobxReact.observer], BaseEditor);
var _default = BaseEditor;
exports["default"] = _default;
//# sourceMappingURL=BaseEditor.js.map