choerodon-ui/lib/rc-components/editor-mention/utils/createImmutableMention.js

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

"use strict";

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

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

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

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

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

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

var _draftJs = require("draft-js");

var _noop = _interopRequireDefault(require("lodash/noop"));

var _Suggestions2 = _interopRequireDefault(require("../component/Suggestions.react"));

var _mentionStore = _interopRequireDefault(require("../model/mentionStore"));

var _exportContent = _interopRequireDefault(require("../utils/exportContent"));

var MentionContentComponent = function MentionContentComponent(props) {
  var entityKey = props.entityKey,
      tag = props.tag,
      callbacks = props.callbacks;
  var contentState = callbacks.getEditorState().getCurrentContent();
  var data = contentState.getEntity(entityKey).getData();
  return (0, _react.createElement)(tag, (0, _objectSpread2["default"])({}, props, {
    data: data
  }));
};

function mentionContentStrategy(contentBlock, callback, contentState) {
  contentBlock.findEntityRanges(function (character) {
    var entityKey = character.getEntity();
    return entityKey && contentState.getEntity(entityKey).getType() === 'mention';
  }, callback);
}

function mentionTriggerStrategy(contentBlock, callback, contentState) {
  contentBlock.findEntityRanges(function (character) {
    var entityKey = character.getEntity();
    return entityKey && contentState.getEntity(entityKey).getType() === 'trigger';
  }, callback);
}

function createImmutableMention() {
  var callbacks = {
    onChange: _noop["default"],
    onUpArrow: _noop["default"],
    onDownArrow: _noop["default"],
    getEditorState: _noop["default"],
    setEditorState: _noop["default"],
    handleReturn: _noop["default"],
    onBlur: _noop["default"]
  };

  function _onChange(editorState) {
    var selectionState = editorState.getSelection();
    var currentContent = editorState.getCurrentContent();
    var anchorKey = selectionState.getAnchorKey();
    var currentContentBlock = currentContent.getBlockForKey(anchorKey);

    if (selectionState.isCollapsed()) {
      currentContent.createEntity('trigger', 'MUTABLE');
      var end = selectionState.getEndOffset();
      var start = end - 1;
      var selectedText = currentContentBlock.getText().slice(start, end);

      if (selectedText === '@') {
        var updatedContent = _draftJs.Modifier.replaceText(currentContent, selectionState.merge({
          anchorOffset: start,
          focusOffset: end
        }), '@', null, currentContent.getLastCreatedEntityKey());

        return _draftJs.EditorState.push(editorState, updatedContent, 'insert-mention');
      }
    }

    return editorState;
  }

  var componentProps = {
    callbacks: callbacks,
    mentionStore: _mentionStore["default"]
  };
  return {
    name: 'mention',
    Suggestions: function Suggestions(props) {
      return _react["default"].createElement(_Suggestions2["default"], (0, _extends2["default"])({}, props, componentProps, {
        store: _mentionStore["default"]
      }));
    },
    decorators: [{
      strategy: mentionTriggerStrategy,
      component: function component(props) {
        return _react["default"].createElement("span", (0, _extends2["default"])({}, props, {
          style: {
            color: 'red'
          }
        }));
      }
    }, {
      strategy: mentionContentStrategy,
      component: function component(props) {
        return _react["default"].createElement(MentionContentComponent, (0, _extends2["default"])({}, props, {
          callbacks: callbacks
        }));
      }
    }],
    onChange: function onChange(editorState) {
      var updatedEditorState = _onChange(editorState);

      return callbacks.onChange ? callbacks.onChange(updatedEditorState) : updatedEditorState;
    },
    callbacks: callbacks,
    "export": _exportContent["default"]
  };
}
//# sourceMappingURL=createImmutableMention.js.map