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

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

import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { findDOMNode } from 'react-dom';
import 'react-quill/dist/quill.snow.css';
import isEqual from 'lodash/isEqual';
import isObject from 'lodash/isObject';
import omit from 'lodash/omit';
import LightBox from 'react-image-lightbox';
import QuillImageDropAndPaste from './utils/imageDropAndPaste';
import autobind from '../_util/autobind';
import RichTextViewer from './RichTextViewer';
import Toolbar from './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', QuillImageDropAndPaste);
}

var BaseEditor = /*#__PURE__*/function (_Component) {
  _inherits(BaseEditor, _Component);

  var _super = _createSuper(BaseEditor);

  function BaseEditor() {
    var _this;

    _classCallCheck(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;
  }

  _createClass(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 (!isObject(value) && this.editor) {
        deltaOps = this.editor.getEditor().clipboard.convert(value).ops;
      }

      if ('value' in this.props && !isEqual(this.deltaOps, deltaOps || value) && this.editor) {
        this.editor.getEditor().setContents(deltaOps || value);
      }
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      return omit(this.props, ['style', 'toolbar', 'className', 'defaultValue', 'onChange', 'value']);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var thisNode = 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 = findDOMNode(this);

      if (thisNode) {
        thisNode.addEventListener('click', this.handleOpenLightBox);
      }
    }
  }, {
    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 (!isObject(value) && this.editor) {
        deltaOps = this.editor.getEditor().clipboard.convert(value).ops;
      }

      if (mode === 'preview') {
        return /*#__PURE__*/React.createElement(RichTextViewer, {
          style: style,
          deltaOps: deltaOps || value
        });
      }

      if (ReactQuill) {
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Toolbar, {
          id: toolbarId,
          dataSet: dataSet,
          toolbar: toolbar,
          prefixCls: className
        }), /*#__PURE__*/React.createElement(ReactQuill, _extends({}, 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 _this$props2 = this.props,
          className = _this$props2.className,
          style = _this$props2.style;
      var content = this.renderContent();
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
        className: className,
        style: style
      }, content), imgOpen && /*#__PURE__*/React.createElement(LightBox, {
        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;
}(Component);

__decorate([autobind], BaseEditor.prototype, "setValue", null);

__decorate([autobind], BaseEditor.prototype, "handleRichTextChange", null);

__decorate([autobind], BaseEditor.prototype, "renderContent", null);

BaseEditor = __decorate([observer], BaseEditor);
export default BaseEditor;
//# sourceMappingURL=BaseEditor.js.map