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 _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-0494a5d0.js');
var React = require('react');
var React__default = _interopDefault(React);
require('react-dom');
var styleInject_es = require('../style-inject.es-dcee06b6.js');
require('../_commonjsHelpers-72d386ba.js');
var Draft = require('../Draft-4ccef031.js');
require('../_react-dom_commonjs-external-55867475.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_es.styleInject(css);

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

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

var decorator = new Draft.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__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) {
  _rollupPluginBabelHelpers._inherits(RichTextEditor, _React$Component);

  function RichTextEditor(props) {
    var _this;

    _rollupPluginBabelHelpers._classCallCheck(this, RichTextEditor);

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

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

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

  _rollupPluginBabelHelpers._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');
      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