bilingo-ui/eslib/RichTextEditor/index.js

import { a as _inherits, b as _createClass, c as _classCallCheck, d as _possibleConstructorReturn, e as _getPrototypeOf, i as _assertThisInitialized } from '../_rollupPluginBabelHelpers-22a1b8cb.js';
import React from 'react';
import 'react-dom';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import '../_commonjsHelpers-97e6d7b1.js';
import { a as Draft_4, b as Draft_3, c as Draft_15, d as Draft_14, e as Draft_20, f as Draft_1 } from '../Draft-eeda2ee2.js';
import '../_react-dom_commonjs-external-d3012e04.js';

var css = ".RichTextEditor_wrapper__A033L .RichTextEditor_btnListWrapper__3iF9d {\n  display: flex;\n}\n.RichTextEditor_wrapper__A033L .RichTextEditor_editorWrapper__PzQ_1 {\n  border: 1px solid #ccc;\n}\n";
var styles = {
  "wrapper": "RichTextEditor_wrapper__A033L",
  "btnListWrapper": "RichTextEditor_btnListWrapper__3iF9d",
  "editorWrapper": "RichTextEditor_editorWrapper__PzQ_1"
};
styleInject(css);

var Link = function Link(props) {
  var _props$contentState$g = props.contentState.getEntity(props.entityKey).getData(),
      url = _props$contentState$g.url;

  return React.createElement("a", {
    href: url
  }, props.children);
};

var decorator = new Draft_4([{
  strategy: function strategy(contentBlock, callback, contentState) {
    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: function component(props) {
    return React.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) {
  _inherits(RichTextEditor, _React$Component);

  function RichTextEditor(props) {
    var _this;

    _classCallCheck(this, RichTextEditor);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(RichTextEditor).call(this, props));
    _this.state = {
      editorState: Draft_3.createEmpty(decorator)
    };

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

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

  _createClass(RichTextEditor, [{
    key: "handleKeyCommand",
    value: function handleKeyCommand(command, editorState) {
      var newState = 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_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_14.applyEntity(contentStateWithEntity, selectionState, entityKey);
      var newEditorState = 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_14.insertText(contentState, selectionState, 'e', undefined, entityKey);
      var newEditorState = Draft_3.push(editorState, ncsWithEntity, 'insert-characters');
      this.onChange(newEditorState);
    }
  }, {
    key: "_onCheckRange",
    value: function _onCheckRange() {
      console.log(this.state.editorState.getCurrentContent());
      console.log(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.createElement("div", {
        className: styles.wrapper
      }, React.createElement("div", {
        className: styles.btnListWrapper
      }, React.createElement("button", {
        onClick: this._onBoldClick.bind(this)
      }, "Bold"), React.createElement("button", {
        onClick: this._onCheckRange.bind(this)
      }, "Check"), React.createElement("button", {
        onClick: this._onLinkClick.bind(this)
      }, "Link"), React.createElement("button", {
        onClick: function onClick(e) {
          return _this2._onEmojiClick(e, '0011');
        }
      }, "Emoji")), React.createElement("div", {
        className: styles.editorWrapper
      }, React.createElement(Draft_1, {
        editorState: editorState,
        blockStyleFn: this.defaultBlockStyleFn,
        blockRendererFn: this.defaultBlockRenderFn,
        handleKeyCommand: this.handleKeyCommand,
        onChange: this.onChange
      })));
    }
  }]);

  return RichTextEditor;
}(React.Component);

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