react-mentions 4.3.0 → 4.4.0

package/dist/react-mentions.cjs.prod.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
   value: !0
 });
 
-var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsumableArray")), _extends = _interopDefault(require("@babel/runtime/helpers/extends")), _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf")), _assertThisInitialized = _interopDefault(require("@babel/runtime/helpers/assertThisInitialized")), _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), React = require("react"), React__default = _interopDefault(React), invariant = _interopDefault(require("invariant")), _slicedToArray = _interopDefault(require("@babel/runtime/helpers/slicedToArray")), _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")), useStyles = require("substyle"), useStyles__default = _interopDefault(useStyles), PropTypes = _interopDefault(require("prop-types")), ReactDOM = _interopDefault(require("react-dom")), escapeRegex = function(str) {
+var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsumableArray")), _extends = _interopDefault(require("@babel/runtime/helpers/extends")), _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass")), _assertThisInitialized = _interopDefault(require("@babel/runtime/helpers/assertThisInitialized")), _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), React = require("react"), React__default = _interopDefault(React), invariant = _interopDefault(require("invariant")), _slicedToArray = _interopDefault(require("@babel/runtime/helpers/slicedToArray")), _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")), useStyles = require("substyle"), useStyles__default = _interopDefault(useStyles), PropTypes = _interopDefault(require("prop-types")), ReactDOM = _interopDefault(require("react-dom")), escapeRegex = function(str) {
   return str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
 }, PLACEHOLDERS = {
   id: "__id__",
@@ -405,6 +405,8 @@ var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsu
   return removeAccents(str).toLowerCase();
 }, getSubstringIndex = function(str, substr, ignoreAccents) {
   return ignoreAccents ? normalizeString(str).indexOf(normalizeString(substr)) : str.toLowerCase().indexOf(substr.toLowerCase());
+}, isIE = function() {
+  return !!document.documentMode;
 }, isNumber = function(val) {
   return "number" == typeof val;
 }, keys = function(obj) {
@@ -416,12 +418,12 @@ var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsu
     return obj.hasOwnProperty(k) && !keys.includes(k) && void 0 !== obj[k] && (acc[k] = obj[k]), 
     acc;
   }, {});
-};
+}, _excluded = [ "style", "className", "classNames" ];
 
 function createDefaultStyle(defaultStyle, getModifiers) {
   return function(ComponentToWrap) {
     var DefaultStyleEnhancer = function(_ref) {
-      var style = _ref.style, className = _ref.className, classNames = _ref.classNames, rest = _objectWithoutProperties(_ref, [ "style", "className", "classNames" ]), modifiers = getModifiers ? getModifiers(rest) : void 0, styles = useStyles__default(defaultStyle, {
+      var style = _ref.style, className = _ref.className, classNames = _ref.classNames, rest = _objectWithoutProperties(_ref, _excluded), modifiers = getModifiers ? getModifiers(rest) : void 0, styles = useStyles__default(defaultStyle, {
         style: style,
         className: className,
         classNames: classNames
@@ -435,12 +437,38 @@ function createDefaultStyle(defaultStyle, getModifiers) {
   };
 }
 
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+  return function() {
+    var result, Super = _getPrototypeOf(Derived);
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else result = Super.apply(this, arguments);
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
+function _isNativeReflectConstruct() {
+  if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
+  if (Reflect.construct.sham) return !1;
+  if ("function" == typeof Proxy) return !0;
+  try {
+    return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})), 
+    !0;
+  } catch (e) {
+    return !1;
+  }
+}
+
 var _generateComponentKey = function(usedKeys, id) {
   return usedKeys.hasOwnProperty(id) ? usedKeys[id]++ : usedKeys[id] = 0, id + "_" + usedKeys[id];
 }, Highlighter = function(_Component) {
+  _inherits(Highlighter, _Component);
+  var _super = _createSuper(Highlighter);
   function Highlighter() {
     var _this;
-    return _classCallCheck(this, Highlighter), _this = _possibleConstructorReturn(this, _getPrototypeOf(Highlighter).apply(this, arguments)), 
+    return _classCallCheck(this, Highlighter), _this = _super.apply(this, arguments), 
     _defineProperty(_assertThisInitialized(_this), "setCaretElement", function(el) {
       _this.caretElement = el;
     }), _this.state = {
@@ -448,7 +476,7 @@ var _generateComponentKey = function(usedKeys, id) {
       top: void 0
     }, _this;
   }
-  return _inherits(Highlighter, _Component), _createClass(Highlighter, [ {
+  return _createClass(Highlighter, [ {
     key: "componentDidMount",
     value: function() {
       this.notifyCaretPosition();
@@ -555,11 +583,39 @@ var styled = createDefaultStyle({
   return {
     "&singleLine": props.singleLine
   };
-}), Highlighter$1 = styled(Highlighter), Suggestion = function(_Component) {
+}), Highlighter$1 = styled(Highlighter);
+
+function _createSuper$1(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct$1();
+  return function() {
+    var result, Super = _getPrototypeOf(Derived);
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else result = Super.apply(this, arguments);
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
+function _isNativeReflectConstruct$1() {
+  if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
+  if (Reflect.construct.sham) return !1;
+  if ("function" == typeof Proxy) return !0;
+  try {
+    return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})), 
+    !0;
+  } catch (e) {
+    return !1;
+  }
+}
+
+var Suggestion = function(_Component) {
+  _inherits(Suggestion, _Component);
+  var _super = _createSuper$1(Suggestion);
   function Suggestion() {
-    return _classCallCheck(this, Suggestion), _possibleConstructorReturn(this, _getPrototypeOf(Suggestion).apply(this, arguments));
+    return _classCallCheck(this, Suggestion), _super.apply(this, arguments);
   }
-  return _inherits(Suggestion, _Component), _createClass(Suggestion, [ {
+  return _createClass(Suggestion, [ {
     key: "render",
     value: function() {
       var rest = omit(this.props, [ "style", "classNames", "className" ], keys(Suggestion.propTypes));
@@ -618,13 +674,38 @@ function LoadingIndicator() {
   return React__default.createElement("div", styles, React__default.createElement("div", spinnerStyles, React__default.createElement("div", spinnerStyles([ "element", "element1" ])), React__default.createElement("div", spinnerStyles([ "element", "element2" ])), React__default.createElement("div", spinnerStyles([ "element", "element3" ])), React__default.createElement("div", spinnerStyles([ "element", "element4" ])), React__default.createElement("div", spinnerStyles([ "element", "element5" ]))));
 }
 
+function _createSuper$2(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct$2();
+  return function() {
+    var result, Super = _getPrototypeOf(Derived);
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else result = Super.apply(this, arguments);
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
+function _isNativeReflectConstruct$2() {
+  if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
+  if (Reflect.construct.sham) return !1;
+  if ("function" == typeof Proxy) return !0;
+  try {
+    return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})), 
+    !0;
+  } catch (e) {
+    return !1;
+  }
+}
+
 var SuggestionsOverlay = function(_Component) {
+  _inherits(SuggestionsOverlay, _Component);
+  var _super = _createSuper$2(SuggestionsOverlay);
   function SuggestionsOverlay() {
-    var _getPrototypeOf2, _this;
+    var _this;
     _classCallCheck(this, SuggestionsOverlay);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-    return _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SuggestionsOverlay)).call.apply(_getPrototypeOf2, [ this ].concat(args))), 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function(index, ev) {
+    return _this = _super.call.apply(_super, [ this ].concat(args)), _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function(index, ev) {
       _this.props.onMouseEnter && _this.props.onMouseEnter(index);
     }), _defineProperty(_assertThisInitialized(_this), "select", function(suggestion, queryInfo) {
       _this.props.onSelect(suggestion, queryInfo);
@@ -632,7 +713,7 @@ var SuggestionsOverlay = function(_Component) {
       _this.ulElement = el;
     }), _this;
   }
-  return _inherits(SuggestionsOverlay, _Component), _createClass(SuggestionsOverlay, [ {
+  return _createClass(SuggestionsOverlay, [ {
     key: "componentDidUpdate",
     value: function() {
       if (this.ulElement && !(this.ulElement.offsetHeight >= this.ulElement.scrollHeight) && this.props.scrollFocusedIntoView) {
@@ -643,10 +724,11 @@ var SuggestionsOverlay = function(_Component) {
   }, {
     key: "render",
     value: function() {
-      var _this$props = this.props, id = _this$props.id, a11ySuggestionsListLabel = _this$props.a11ySuggestionsListLabel, isOpened = _this$props.isOpened, style = _this$props.style, onMouseDown = _this$props.onMouseDown, containerRef = _this$props.containerRef, position = _this$props.position, left = _this$props.left, top = _this$props.top;
+      var _this$props = this.props, id = _this$props.id, a11ySuggestionsListLabel = _this$props.a11ySuggestionsListLabel, isOpened = _this$props.isOpened, style = _this$props.style, onMouseDown = _this$props.onMouseDown, containerRef = _this$props.containerRef, position = _this$props.position, left = _this$props.left, right = _this$props.right, top = _this$props.top;
       return isOpened ? React__default.createElement("div", _extends({}, useStyles.inline({
         position: position || "absolute",
         left: left,
+        right: right,
         top: top
       }, style), {
         onMouseDown: onMouseDown,
@@ -661,13 +743,13 @@ var SuggestionsOverlay = function(_Component) {
   }, {
     key: "renderSuggestions",
     value: function() {
-      var _this2 = this;
-      return Object.values(this.props.suggestions).reduce(function(accResults, _ref) {
+      var _this2 = this, customSuggestionsContainer = this.props.customSuggestionsContainer, suggestions = Object.values(this.props.suggestions).reduce(function(accResults, _ref) {
         var results = _ref.results, queryInfo = _ref.queryInfo;
         return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function(result, index) {
           return _this2.renderSuggestion(result, queryInfo, accResults.length + index);
         })));
       }, []);
+      return customSuggestionsContainer ? customSuggestionsContainer(suggestions) : suggestions;
     }
   }, {
     key: "renderSuggestion",
@@ -708,6 +790,7 @@ _defineProperty(SuggestionsOverlay, "propTypes", {
   focusIndex: PropTypes.number,
   position: PropTypes.string,
   left: PropTypes.number,
+  right: PropTypes.number,
   top: PropTypes.number,
   scrollFocusedIntoView: PropTypes.bool,
   isLoading: PropTypes.bool,
@@ -753,15 +836,39 @@ function ownKeys(object, enumerableOnly) {
 function _objectSpread(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(source, !0).forEach(function(key) {
+    i % 2 ? ownKeys(Object(source), !0).forEach(function(key) {
       _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(source).forEach(function(key) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
   return target;
 }
 
+function _createSuper$3(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct$3();
+  return function() {
+    var result, Super = _getPrototypeOf(Derived);
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else result = Super.apply(this, arguments);
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
+function _isNativeReflectConstruct$3() {
+  if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
+  if (Reflect.construct.sham) return !1;
+  if ("function" == typeof Proxy) return !0;
+  try {
+    return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})), 
+    !0;
+  } catch (e) {
+    return !1;
+  }
+}
+
 var makeTriggerRegex = function(trigger) {
   var options = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
   if (trigger instanceof RegExp) return trigger;
@@ -790,6 +897,7 @@ var makeTriggerRegex = function(trigger) {
   a11ySuggestionsListLabel: PropTypes.string,
   value: PropTypes.string,
   onKeyDown: PropTypes.func,
+  customSuggestionsContainer: PropTypes.func,
   onSelect: PropTypes.func,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
@@ -799,14 +907,16 @@ var makeTriggerRegex = function(trigger) {
   }) ]),
   children: PropTypes.oneOfType([ PropTypes.element, PropTypes.arrayOf(PropTypes.element) ]).isRequired
 }, MentionsInput = function(_React$Component) {
+  _inherits(MentionsInput, _React$Component);
+  var _super = _createSuper$3(MentionsInput);
   function MentionsInput(_props) {
     var _this;
-    return _classCallCheck(this, MentionsInput), _this = _possibleConstructorReturn(this, _getPrototypeOf(MentionsInput).call(this, _props)), 
+    return _classCallCheck(this, MentionsInput), _this = _super.call(this, _props), 
     _defineProperty(_assertThisInitialized(_this), "setContainerElement", function(el) {
       _this.containerElement = el;
     }), _defineProperty(_assertThisInitialized(_this), "getInputProps", function() {
       var _this$props = _this.props, readOnly = _this$props.readOnly, disabled = _this$props.disabled, style = _this$props.style;
-      return _objectSpread({}, omit(_this.props, [ "style", "classNames", "className" ], keys(propTypes)), {}, style("input"), {
+      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, omit(_this.props, [ "style", "classNames", "className" ], keys(propTypes))), style("input")), {}, {
         value: _this.getPlainText()
       }, !readOnly && !disabled && {
         onChange: _this.handleChange,
@@ -816,7 +926,7 @@ var makeTriggerRegex = function(trigger) {
         onCompositionStart: _this.handleCompositionStart,
         onCompositionEnd: _this.handleCompositionEnd,
         onScroll: _this.updateHighlighterScroll
-      }, {}, _this.isOpened() && {
+      }), _this.isOpened() && {
         role: "combobox",
         "aria-controls": _this.uuidSuggestionsOverlay,
         "aria-expanded": !0,
@@ -844,16 +954,18 @@ var makeTriggerRegex = function(trigger) {
       _this.suggestionsElement = el;
     }), _defineProperty(_assertThisInitialized(_this), "renderSuggestionsOverlay", function() {
       if (!isNumber(_this.state.selectionStart)) return null;
-      var _this$state$suggestio = _this.state.suggestionsPosition, position = _this$state$suggestio.position, left = _this$state$suggestio.left, top = _this$state$suggestio.top, suggestionsNode = React__default.createElement(SuggestionsOverlay$1, {
+      var _this$state$suggestio = _this.state.suggestionsPosition, position = _this$state$suggestio.position, left = _this$state$suggestio.left, top = _this$state$suggestio.top, right = _this$state$suggestio.right, suggestionsNode = React__default.createElement(SuggestionsOverlay$1, {
         id: _this.uuidSuggestionsOverlay,
         style: _this.props.style("suggestions"),
         position: position,
         left: left,
         top: top,
+        right: right,
         focusIndex: _this.state.focusIndex,
         scrollFocusedIntoView: _this.state.scrollFocusedIntoView,
         containerRef: _this.setSuggestionsElement,
         suggestions: _this.state.suggestions,
+        customSuggestionsContainer: _this.props.customSuggestionsContainer,
         onSelect: _this.addMention,
         onMouseDown: _this.handleSuggestionsMouseDown,
         onMouseEnter: _this.handleSuggestionsMouseEnter,
@@ -887,27 +999,26 @@ var makeTriggerRegex = function(trigger) {
       var _this$props4, _this$props$valueLink;
       return _this.props.onChange ? (_this$props4 = _this.props).onChange.apply(_this$props4, [ event ].concat(args)) : _this.props.valueLink ? (_this$props$valueLink = _this.props.valueLink).requestChange.apply(_this$props$valueLink, [ event.target.value ].concat(args)) : void 0;
     }), _defineProperty(_assertThisInitialized(_this), "handleChange", function(ev) {
-      if (isComposing = !1, (document.activeElement && document.activeElement.contentDocument || document).activeElement === ev.target) {
-        var value = _this.props.value || "", config = readConfigFromChildren(_this.props.children), newPlainTextValue = ev.target.value, newValue = applyChangeToValue(value, newPlainTextValue, {
-          selectionStartBefore: _this.state.selectionStart,
-          selectionEndBefore: _this.state.selectionEnd,
-          selectionEndAfter: ev.target.selectionEnd
-        }, config);
-        newPlainTextValue = getPlainText(newValue, config);
-        var selectionStart = ev.target.selectionStart, selectionEnd = ev.target.selectionEnd, setSelectionAfterMentionChange = !1, startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
-        void 0 !== startOfMention && _this.state.selectionEnd > startOfMention && (selectionEnd = selectionStart = startOfMention, 
-        setSelectionAfterMentionChange = !0), _this.setState({
-          selectionStart: selectionStart,
-          selectionEnd: selectionEnd,
-          setSelectionAfterMentionChange: setSelectionAfterMentionChange
-        });
-        var mentions = getMentions(newValue, config), eventMock = {
-          target: {
-            value: newValue
-          }
-        };
-        _this.executeOnChange(eventMock, newValue, newPlainTextValue, mentions);
-      }
+      if ((isComposing = !1, isIE()) && (document.activeElement && document.activeElement.contentDocument || document).activeElement !== ev.target) return;
+      var value = _this.props.value || "", config = readConfigFromChildren(_this.props.children), newPlainTextValue = ev.target.value, newValue = applyChangeToValue(value, newPlainTextValue, {
+        selectionStartBefore: _this.state.selectionStart,
+        selectionEndBefore: _this.state.selectionEnd,
+        selectionEndAfter: ev.target.selectionEnd
+      }, config);
+      newPlainTextValue = getPlainText(newValue, config);
+      var selectionStart = ev.target.selectionStart, selectionEnd = ev.target.selectionEnd, setSelectionAfterMentionChange = !1, startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
+      void 0 !== startOfMention && _this.state.selectionEnd > startOfMention && (selectionEnd = selectionStart = startOfMention + (ev.nativeEvent.data ? ev.nativeEvent.data.length : 0), 
+      setSelectionAfterMentionChange = !0), _this.setState({
+        selectionStart: selectionStart,
+        selectionEnd: selectionEnd,
+        setSelectionAfterMentionChange: setSelectionAfterMentionChange
+      });
+      var mentions = getMentions(newValue, config), eventMock = {
+        target: {
+          value: newValue
+        }
+      };
+      _this.executeOnChange(eventMock, newValue, newPlainTextValue, mentions);
     }), _defineProperty(_assertThisInitialized(_this), "handleSelect", function(ev) {
       if (_this.setState({
         selectionStart: ev.target.selectionStart,
@@ -1041,7 +1152,7 @@ var makeTriggerRegex = function(trigger) {
       syncResult instanceof Array && _this.updateSuggestions(_this._queryId, childIndex, query, querySequenceStart, querySequenceEnd, plainTextValue, syncResult);
     }), _defineProperty(_assertThisInitialized(_this), "updateSuggestions", function(queryId, childIndex, query, querySequenceStart, querySequenceEnd, plainTextValue, results) {
       if (queryId === _this._queryId) {
-        _this.suggestions = _objectSpread({}, _this.suggestions, _defineProperty({}, childIndex, {
+        _this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
           queryInfo: {
             childIndex: childIndex,
             query: query,
@@ -1096,7 +1207,7 @@ var makeTriggerRegex = function(trigger) {
       suggestionsPosition: {}
     }, _this;
   }
-  return _inherits(MentionsInput, _React$Component), _createClass(MentionsInput, [ {
+  return _createClass(MentionsInput, [ {
     key: "componentDidMount",
     value: function() {
       document.addEventListener("copy", this.handleCopy), document.addEventListener("cut", this.handleCut), 
@@ -1129,17 +1240,19 @@ var makeTriggerRegex = function(trigger) {
       if (event.target === this.inputElement && this.supportsClipboardActions(event)) {
         event.preventDefault();
         var _this$state3 = this.state, selectionStart = _this$state3.selectionStart, selectionEnd = _this$state3.selectionEnd, _this$props7 = this.props, value = _this$props7.value, children = _this$props7.children, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END"), pastedMentions = event.clipboardData.getData("text/react-mentions"), pastedData = event.clipboardData.getData("text/plain"), newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, ""), newPlainTextValue = getPlainText(newValue, config), eventMock = {
-          target: _objectSpread({}, event.target, {
+          target: _objectSpread(_objectSpread({}, event.target), {}, {
             value: newValue
           })
         };
         this.executeOnChange(eventMock, newValue, newPlainTextValue, getMentions(newValue, config));
+        var nextPos = (findStartOfMentionInPlainText(value, config, selectionStart) || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
+        this.setSelection(nextPos, nextPos);
       }
     }
   }, {
     key: "saveSelectionToClipboard",
     value: function(event) {
-      var _this$state4 = this.state, selectionStart = _this$state4.selectionStart, selectionEnd = _this$state4.selectionEnd, _this$props8 = this.props, children = _this$props8.children, value = _this$props8.value, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END");
+      var selectionStart = this.inputElement.selectionStart, selectionEnd = this.inputElement.selectionEnd, _this$props8 = this.props, children = _this$props8.children, value = _this$props8.value, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END");
       event.clipboardData.setData("text/plain", event.target.value.slice(selectionStart, selectionEnd)), 
       event.clipboardData.setData("text/react-mentions", value.slice(markupStartIndex, markupEndIndex));
     }
@@ -1159,8 +1272,8 @@ var makeTriggerRegex = function(trigger) {
     value: function(event) {
       if (event.target === this.inputElement && this.supportsClipboardActions(event)) {
         event.preventDefault(), this.saveSelectionToClipboard(event);
-        var _this$state5 = this.state, selectionStart = _this$state5.selectionStart, selectionEnd = _this$state5.selectionEnd, _this$props9 = this.props, children = _this$props9.children, value = _this$props9.value, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END"), newValue = [ value.slice(0, markupStartIndex), value.slice(markupEndIndex) ].join(""), newPlainTextValue = getPlainText(newValue, config), eventMock = {
-          target: _objectSpread({}, event.target, {
+        var _this$state4 = this.state, selectionStart = _this$state4.selectionStart, selectionEnd = _this$state4.selectionEnd, _this$props9 = this.props, children = _this$props9.children, value = _this$props9.value, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END"), newValue = [ value.slice(0, markupStartIndex), value.slice(markupEndIndex) ].join(""), newPlainTextValue = getPlainText(newValue, config), eventMock = {
+          target: _objectSpread(_objectSpread({}, event.target), {}, {
             value: newPlainTextValue
           })
         };