bilingo-ui/lib/RichTextEditor/index.js

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var _commonjsHelpers = require('../_commonjsHelpers-4ed3570f.js');
var React = require('react');
var React__default = _interopDefault(React);
var styleInject_es = require('../style-inject.es-dcee06b6.js');
var Draft = require('../Draft-7ee7c163.js');
require('../_react-dom_commonjs-external-55867475.js');
require('react-dom');

var css = ".RichTextEditor_wrapper__3X3Yv .RichTextEditor_btnListWrapper__vUaki {\n  display: flex;\n}\n.RichTextEditor_wrapper__3X3Yv .RichTextEditor_editorWrapper__3UFgF {\n  border: 1px solid #ccc;\n}\n";
var styles = {"wrapper":"RichTextEditor_wrapper__3X3Yv","btnListWrapper":"RichTextEditor_btnListWrapper__vUaki","editorWrapper":"RichTextEditor_editorWrapper__3UFgF"};
styleInject_es.styleInject(css);

// 自定义组件，用于超链接
var Link = function Link(props) {
  // 这里通过contentState来获取entity�，之后通过getData获取entity中包含的数据
  var _props$contentState$g = props.contentState.getEntity(props.entityKey).getData(),
      url = _props$contentState$g.url;

  return React__default.createElement("a", {
    href: url
  }, props.children);
}; // decorator，用于超链接


var decorator = new Draft.Draft_4([{
  strategy: function strategy(contentBlock, callback, contentState) {
    // 这个方法接收2个函数作为参数，如果第一个参数的函数执行时�返回true，就会执行第二个参数函数，同时会�将匹配的�字符的起始位置和结束位置传递给第二个参数。
    contentBlock.findEntityRanges(function (character) {
      var entityKey = character.getEntity();
      return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK';
    }, function () {
      callback.apply(void 0, arguments);
    });
  },
  component: Link
}, {
  strategy: function strategy(contentBlock, callback, contentState) {
    contentBlock.findEntityRanges(function (character) {
      var entityKey = character.getEntity();
      return entityKey !== null && contentState.getEntity(entityKey).getType() === 'EMOJI';
    }, function () {
      callback.apply(void 0, arguments);
    });
  },
  // component: (props: any) => (<span style={{ color: 'red' }}>[Emoji]</span>)
  component: function component(props) {
    return React__default.createElement("i", {
      style: {
        display: 'inline-block',
        height: '18px',
        width: '18px',
        backgroundImage: "url(https://i.pinimg.com/originals/03/7e/79/037e79b2fb52127537be79110891ae3f.png)",
        backgroundSize: '100% 100%',
        color: 'transparent'
      }
    }, "e");
  }
}]);

var RichTextEditor =
/*#__PURE__*/
function (_React$Component) {
  _commonjsHelpers._inherits(RichTextEditor, _React$Component);

  function RichTextEditor(props) {
    var _this;

    _commonjsHelpers._classCallCheck(this, RichTextEditor);

    _this = _commonjsHelpers._possibleConstructorReturn(this, _commonjsHelpers._getPrototypeOf(RichTextEditor).call(this, props));

    _commonjsHelpers._defineProperty(_commonjsHelpers._assertThisInitialized(_this), "onChange", void 0);

    _this.state = {
      editorState: Draft.Draft_3.createEmpty(decorator)
    };

    _this.onChange = function (editorState) {
      return _this.setState({
        editorState: editorState
      });
    };

    _this.handleKeyCommand = _this.handleKeyCommand.bind(_commonjsHelpers._assertThisInitialized(_this));
    _this.defaultBlockStyleFn = _this.defaultBlockStyleFn.bind(_commonjsHelpers._assertThisInitialized(_this));
    return _this;
  }

  _commonjsHelpers._createClass(RichTextEditor, [{
    key: "handleKeyCommand",
    value: function handleKeyCommand(command, editorState) {
      var newState = Draft.Draft_15.handleKeyCommand(editorState, command);
      console.log('command: ', command);
      console.log('newState: ', newState);

      if (newState) {
        this.onChange(newState);
        return "handled";
      }

      switch (command) {
        case 'backspace':
          var contentState = editorState.getCurrentContent();
          var selectionState = editorState.getSelection();
          var _ref = [selectionState.getStartOffset(), selectionState.getEndOffset()],
              startOffset = _ref[0],
              endOffset = _ref[1];

          if (startOffset === endOffset) {
            // 未选中状态
            console.log(selectionState.getAnchorKey());
          } // 选中状态


          break;
      }

      return "not-handled";
    }
  }, {
    key: "_onBoldClick",
    value: function _onBoldClick() {
      this.onChange(Draft.Draft_15.toggleInlineStyle(this.state.editorState, 'BOLD'));
    }
  }, {
    key: "_onLinkClick",
    value: function _onLinkClick() {
      var editorState = this.state.editorState;
      var contentState = editorState.getCurrentContent();
      var selectionState = editorState.getSelection();
      var contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
        url: 'http://www.zombo.com'
      });
      var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
      var contentStateWithLink = Draft.Draft_14.applyEntity(contentStateWithEntity, selectionState, entityKey);
      var newEditorState = Draft.Draft_3.push(editorState, contentStateWithLink, 'apply-entity');
      this.onChange(newEditorState);
    }
  }, {
    key: "_onEmojiClick",
    value: function _onEmojiClick(e, emojiCode) {
      var editorState = this.state.editorState;
      var contentState = editorState.getCurrentContent();
      var selectionState = editorState.getSelection();
      var EMOJIEntity = contentState.createEntity('EMOJI', 'IMMUTABLE', {
        emojiCode: emojiCode
      });
      var entityKey = EMOJIEntity.getLastCreatedEntityKey();
      var ncsWithEntity = Draft.Draft_14.insertText(contentState, selectionState, 'e', undefined, entityKey);
      var newEditorState = Draft.Draft_3.push(editorState, ncsWithEntity, 'insert-characters'); // const newEditorState = AtomicBlockUtils.insertAtomicBlock(
      //   editorState,
      //   entityKey,
      //   ' '
      // );

      this.onChange(newEditorState);
    }
  }, {
    key: "_onCheckRange",
    value: function _onCheckRange() {
      console.log(this.state.editorState.getCurrentContent());
      console.log(Draft.Draft_20(this.state.editorState.getCurrentContent()));
    }
  }, {
    key: "defaultBlockStyleFn",
    value: function defaultBlockStyleFn(contentBlock) {
      var type = contentBlock.getType();
      return "";
    }
  }, {
    key: "defaultBlockRenderFn",
    value: function defaultBlockRenderFn(contentBlock) {
      var type = contentBlock.getType();
      return contentBlock;
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var editorState = this.state.editorState;
      return React__default.createElement("div", {
        className: styles.wrapper
      }, React__default.createElement("div", {
        className: styles.btnListWrapper
      }, React__default.createElement("button", {
        onClick: this._onBoldClick.bind(this)
      }, "Bold"), React__default.createElement("button", {
        onClick: this._onCheckRange.bind(this)
      }, "Check"), React__default.createElement("button", {
        onClick: this._onLinkClick.bind(this)
      }, "Link"), React__default.createElement("button", {
        onClick: function onClick(e) {
          return _this2._onEmojiClick(e, '0011');
        }
      }, "Emoji")), React__default.createElement("div", {
        className: styles.editorWrapper
      }, React__default.createElement(Draft.Draft_1, {
        editorState: editorState,
        blockStyleFn: this.defaultBlockStyleFn,
        blockRendererFn: this.defaultBlockRenderFn,
        handleKeyCommand: this.handleKeyCommand,
        onChange: this.onChange
      })));
    }
  }]);

  return RichTextEditor;
}(React__default.Component);

exports.default = RichTextEditor;
//# sourceMappingURL=index.js.map