Merge 27e88211f5 into 74d843de5c

11 months ago · 5fca99b371
parent 74d843de5c 27e88211f5
commit 5fca99b371
3 changed files with 805 additions and 3 deletions
--- a/package.json
+++ b/package.json
@ -90,7 +90,8 @@
    },
    "patchedDependencies": {
      "moleculer@0.14.23": "patches/moleculer@0.14.23.patch",
-      "vite-express@0.8.0": "patches/vite-express@0.8.0.patch"
+      "vite-express@0.8.0": "patches/vite-express@0.8.0.patch",
+      "react-mentions@4.4.7": "patches/react-mentions@4.4.7.patch"
    }
  }
 }
--- a/patches/react-mentions@4.4.7.patch
+++ b/patches/react-mentions@4.4.7.patch
@ -0,0 +1,797 @@
+diff --git a/CHANGELOG.md b/CHANGELOG.md
+deleted file mode 100644
+index 679058241bcfde9586b543c09e9d37ecd73de1ec..0000000000000000000000000000000000000000
+diff --git a/dist/react-mentions.cjs.dev.js b/dist/react-mentions.cjs.dev.js
+index 015df9d75574f86fbd249fc53447e76cbec1781b..bbf48bd869160cdfb0d62ea2f658c89dbbab3c38 100644
+--- a/dist/react-mentions.cjs.dev.js
+++ b/dist/react-mentions.cjs.dev.js
+@@ -230,14 +230,23 @@ var applyChangeToValue = function applyChangeToValue(value, plainTextValue, _ref
+       // find start of diff
+       spliceStart = 0;
+ 
+-      while (plainTextValue[spliceStart] === controlPlainTextValue[spliceStart]) {
+      while (plainTextValue[spliceStart] === oldPlainTextValue[spliceStart]) {
+         spliceStart++;
+      } // find end of diff
+
+
+      var spliceEndOfNew = plainTextValue.length;
+      var spliceEndOfOld = oldPlainTextValue.length;
+
+      while (plainTextValue[spliceEndOfNew - 1] === oldPlainTextValue[spliceEndOfOld - 1]) {
+        spliceEndOfNew--;
+        spliceEndOfOld--;
+       } // extract auto-corrected insertion
+ 
+ 
+-      insert = plainTextValue.slice(spliceStart, selectionEndAfter); // find index of the unchanged remainder
+      insert = plainTextValue.slice(spliceStart, spliceEndOfNew); // find index of the unchanged remainder
+ 
+-      spliceEnd = oldPlainTextValue.lastIndexOf(plainTextValue.substring(selectionEndAfter)); // re-map the corrected indices
+      spliceEnd = spliceEndOfOld >= spliceStart ? spliceEndOfOld : selectionEndAfter; // re-map the corrected indices
+ 
+       mappedSpliceStart = mapPlainTextIndex(value, config, spliceStart, 'START');
+       mappedSpliceEnd = mapPlainTextIndex(value, config, spliceEnd, 'END');
+@@ -661,6 +670,10 @@ var omit = function omit(obj) {
+ 
+ var _excluded = ["style", "className", "classNames"];
+ 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[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 createDefaultStyle(defaultStyle, getModifiers) {
+   var enhance = function enhance(ComponentToWrap) {
+     var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
+@@ -681,8 +694,13 @@ function createDefaultStyle(defaultStyle, getModifiers) {
+     };
+ 
+     var displayName = ComponentToWrap.displayName || ComponentToWrap.name || 'Component';
+-    DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")");
+-    return DefaultStyleEnhancer;
+    DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")"); // return DefaultStyleEnhancer
+
+    return /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+      return DefaultStyleEnhancer(_objectSpread(_objectSpread({}, props), {}, {
+        ref: ref
+      }));
+    });
+   };
+ 
+   return enhance;
+@@ -724,7 +742,7 @@ function Highlighter(_ref) {
+ 
+   React.useEffect(function () {
+     notifyCaretPosition();
+-  }, [caretElement]);
+  });
+ 
+   var notifyCaretPosition = function notifyCaretPosition() {
+     if (!caretElement) {
+@@ -973,7 +991,7 @@ function SuggestionsOverlay(_ref) {
+       onMouseDown = _ref.onMouseDown,
+       onMouseEnter = _ref.onMouseEnter;
+ 
+-  var _useState = React.useState(),
+  var _useState = React.useState(undefined),
+       _useState2 = _slicedToArray(_useState, 2),
+       ulElement = _useState2[0],
+       setUlElement = _useState2[1];
+@@ -1000,17 +1018,23 @@ function SuggestionsOverlay(_ref) {
+     } else if (bottom > ulElement.offsetHeight) {
+       ulElement.scrollTop = bottom - ulElement.offsetHeight;
+     }
+-  }, []);
+  }, [focusIndex, scrollFocusedIntoView, ulElement]);
+ 
+   var renderSuggestions = function renderSuggestions() {
+-    var suggestionsToRender = Object.values(suggestions).reduce(function (accResults, _ref2) {
+    var suggestionsToRender = /*#__PURE__*/React__default.createElement("ul", _extends({
+      ref: setUlElement,
+      id: id,
+      role: "listbox",
+      "aria-label": a11ySuggestionsListLabel
+    }, style('list')), Object.values(suggestions).reduce(function (accResults, _ref2) {
+       var results = _ref2.results,
+           queryInfo = _ref2.queryInfo;
+       return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
+         return renderSuggestion(result, queryInfo, accResults.length + index);
+       })));
+-    }, []);
+-    if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);else return suggestionsToRender;
+    }, []));
+    if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);
+    return suggestionsToRender;
+   };
+ 
+   var renderSuggestion = function renderSuggestion(result, queryInfo, index) {
+@@ -1077,12 +1101,7 @@ function SuggestionsOverlay(_ref) {
+   }, style), {
+     onMouseDown: onMouseDown,
+     ref: containerRef
+-  }), /*#__PURE__*/React__default.createElement("ul", _extends({
+-    ref: setUlElement,
+-    id: id,
+-    role: "listbox",
+-    "aria-label": a11ySuggestionsListLabel
+-  }, style('list')), renderSuggestions()), renderLoadingIndicator());
+  }), renderSuggestions(), renderLoadingIndicator());
+ }
+ 
+ SuggestionsOverlay.propTypes = {
+@@ -1099,7 +1118,7 @@ SuggestionsOverlay.propTypes = {
+   isOpened: PropTypes.bool.isRequired,
+   onSelect: PropTypes.func,
+   ignoreAccents: PropTypes.bool,
+-  customSuggestionsContainer: PropTypes.any,
+  customSuggestionsContainer: PropTypes.func,
+   containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+     current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
+   })])
+@@ -1117,9 +1136,9 @@ var styled$2 = createDefaultStyle({
+ });
+ var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
+ 
+-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+ 
+-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[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 _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+ 
+ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+ 
+@@ -1216,7 +1235,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+ 
+       var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
+       keys(propTypes));
+-      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
+      return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, props), style('input')), {}, {
+         value: _this.getPlainText(),
+         onScroll: _this.updateHighlighterScroll
+       }, !readOnly && !disabled && {
+@@ -1380,11 +1399,23 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+ 
+       var value = _this.props.value || '';
+       var config = readConfigFromChildren(_this.props.children);
+-      var newPlainTextValue = ev.target.value; // Derive the new value to set by applying the local change in the textarea's plain text
+      var newPlainTextValue = ev.target.value;
+      var selectionStartBefore = _this.state.selectionStart;
+
+      if (selectionStartBefore == null) {
+        selectionStartBefore = ev.target.selectionStart;
+      }
+
+      var selectionEndBefore = _this.state.selectionEnd;
+
+      if (selectionEndBefore == null) {
+        selectionEndBefore = ev.target.selectionEnd;
+      } // Derive the new value to set by applying the local change in the textarea's plain text
+
+ 
+       var newValue = applyChangeToValue(value, newPlainTextValue, {
+-        selectionStartBefore: _this.state.selectionStart,
+-        selectionEndBefore: _this.state.selectionEnd,
+        selectionStartBefore: selectionStartBefore,
+        selectionEndBefore: selectionEndBefore,
+         selectionEndAfter: ev.target.selectionEnd
+       }, config); // In case a mention is deleted, also adjust the new plain text value
+ 
+@@ -1410,9 +1441,14 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+         setSelectionAfterMentionChange: setSelectionAfterMentionChange
+       });
+ 
+-      var mentions = getMentions(newValue, config); // Propagate change
+      var mentions = getMentions(newValue, config);
+
+      if (ev.nativeEvent.isComposing && selectionStart === selectionEnd) {
+        _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
+      } // Propagate change
+       // let handleChange = this.getOnChange(this.props) || emptyFunction;
+ 
+
+       var eventMock = {
+         target: {
+           value: newValue
+@@ -1759,7 +1795,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+       if (queryId !== _this._queryId) return; // save in property so that multiple sync state updates from different mentions sources
+       // won't overwrite each other
+ 
+-      _this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
+      _this.suggestions = _objectSpread$1(_objectSpread$1({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
+         queryInfo: {
+           childIndex: childIndex,
+           query: query,
+@@ -1864,7 +1900,8 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+       selectionEnd: null,
+       suggestions: {},
+       caretPosition: null,
+-      suggestionsPosition: {}
+      suggestionsPosition: {},
+      setSelectionAfterHandlePaste: false
+     };
+     return _this;
+   }
+@@ -1894,6 +1931,13 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+         });
+         this.setSelection(this.state.selectionStart, this.state.selectionEnd);
+       }
+
+      if (this.state.setSelectionAfterHandlePaste) {
+        this.setState({
+          setSelectionAfterHandlePaste: false
+        });
+        this.setSelection(this.state.selectionStart, this.state.selectionEnd);
+      }
+     }
+   }, {
+     key: "componentWillUnmount",
+@@ -1935,7 +1979,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+       var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
+       var newPlainTextValue = getPlainText(newValue, config);
+       var eventMock = {
+-        target: _objectSpread(_objectSpread({}, event.target), {}, {
+        target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
+           value: newValue
+         })
+       };
+@@ -1943,7 +1987,11 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+ 
+       var startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
+       var nextPos = (startOfMention || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
+-      this.setSelection(nextPos, nextPos);
+      this.setState({
+        selectionStart: nextPos,
+        selectionEnd: nextPos,
+        setSelectionAfterHandlePaste: true
+      });
+     }
+   }, {
+     key: "saveSelectionToClipboard",
+@@ -2005,7 +2053,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+       var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
+       var newPlainTextValue = getPlainText(newValue, config);
+       var eventMock = {
+-        target: _objectSpread(_objectSpread({}, event.target), {}, {
+        target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
+           value: newPlainTextValue
+         })
+       };
+@@ -2062,7 +2110,7 @@ var styled$3 = createDefaultStyle({
+     letterSpacing: 'inherit'
+   },
+   '&multiLine': {
+-    input: _objectSpread({
+    input: _objectSpread$1({
+       height: '100%',
+       bottom: 0,
+       overflow: 'hidden',
+diff --git a/dist/react-mentions.cjs.js b/dist/react-mentions.cjs.js
+index 168777643efee2afe58e34f9f147a4e246a4ba29..fd7a5910b8a4ff4e9156126ff1a1849adebfe5fa 100644
+--- a/dist/react-mentions.cjs.js
+++ b/dist/react-mentions.cjs.js
+@@ -1,7 +1,7 @@
+ 'use strict';
+ 
+ if (process.env.NODE_ENV === "production") {
+-  module.exports = require("./react-mentions.cjs.prod.js");
+  module.exports = require("./react-mentions-fix.cjs.prod.js");
+ } else {
+-  module.exports = require("./react-mentions.cjs.dev.js");
+  module.exports = require("./react-mentions-fix.cjs.dev.js");
+ }
+diff --git a/dist/react-mentions.cjs.prod.js b/dist/react-mentions.cjs.prod.js
+index 206f74b50db6296322f15d82491e98d7d25a330e..0b71c291b9ee7ebe3ae6698b260efa8635231161 100644
+--- a/dist/react-mentions.cjs.prod.js
+++ b/dist/react-mentions.cjs.prod.js
+@@ -70,14 +70,13 @@ var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsu
+   var insert = plainTextValue.slice(selectionStartBefore, selectionEndAfter), spliceStart = Math.min(selectionStartBefore, selectionEndAfter), spliceEnd = selectionEndBefore;
+   selectionStartBefore === selectionEndAfter && (spliceEnd = Math.max(selectionEndBefore, selectionStartBefore + lengthDelta));
+   var mappedSpliceStart = mapPlainTextIndex(value, config, spliceStart, "START"), mappedSpliceEnd = mapPlainTextIndex(value, config, spliceEnd, "END"), controlSpliceStart = mapPlainTextIndex(value, config, spliceStart, "NULL"), controlSpliceEnd = mapPlainTextIndex(value, config, spliceEnd, "NULL"), willRemoveMention = null === controlSpliceStart || null === controlSpliceEnd, newValue = spliceString(value, mappedSpliceStart, mappedSpliceEnd, insert);
+-  if (!willRemoveMention) {
+-    var controlPlainTextValue = getPlainText(newValue, config);
+-    if (controlPlainTextValue !== plainTextValue) {
+-      for (spliceStart = 0; plainTextValue[spliceStart] === controlPlainTextValue[spliceStart]; ) spliceStart++;
+-      insert = plainTextValue.slice(spliceStart, selectionEndAfter), spliceEnd = oldPlainTextValue.lastIndexOf(plainTextValue.substring(selectionEndAfter)), 
+-      mappedSpliceStart = mapPlainTextIndex(value, config, spliceStart, "START"), mappedSpliceEnd = mapPlainTextIndex(value, config, spliceEnd, "END"), 
+-      newValue = spliceString(value, mappedSpliceStart, mappedSpliceEnd, insert);
+-    }
+  if (!willRemoveMention && getPlainText(newValue, config) !== plainTextValue) {
+    for (spliceStart = 0; plainTextValue[spliceStart] === oldPlainTextValue[spliceStart]; ) spliceStart++;
+    for (var spliceEndOfNew = plainTextValue.length, spliceEndOfOld = oldPlainTextValue.length; plainTextValue[spliceEndOfNew - 1] === oldPlainTextValue[spliceEndOfOld - 1]; ) spliceEndOfNew--, 
+    spliceEndOfOld--;
+    insert = plainTextValue.slice(spliceStart, spliceEndOfNew), spliceEnd = spliceEndOfOld >= spliceStart ? spliceEndOfOld : selectionEndAfter, 
+    mappedSpliceStart = mapPlainTextIndex(value, config, spliceStart, "START"), mappedSpliceEnd = mapPlainTextIndex(value, config, spliceEnd, "END"), 
+    newValue = spliceString(value, mappedSpliceStart, mappedSpliceEnd, insert);
+   }
+   return newValue;
+ }, findStartOfMentionInPlainText = function(value, config, indexInPlainText) {
+@@ -420,6 +419,29 @@ var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsu
+   }, {});
+ }, _excluded = [ "style", "className", "classNames" ];
+ 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function(key) {
+      _defineProperty(target, key, source[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 createDefaultStyle(defaultStyle, getModifiers) {
+   return function(ComponentToWrap) {
+     var DefaultStyleEnhancer = function(_ref) {
+@@ -433,7 +455,11 @@ function createDefaultStyle(defaultStyle, getModifiers) {
+       }));
+     }, displayName = ComponentToWrap.displayName || ComponentToWrap.name || "Component";
+     return DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")"), 
+-    DefaultStyleEnhancer;
+    React__default.forwardRef(function(props, ref) {
+      return DefaultStyleEnhancer(_objectSpread(_objectSpread({}, props), {}, {
+        ref: ref
+      }));
+    });
+   };
+ }
+ 
+@@ -449,7 +475,7 @@ function Highlighter(_ref) {
+   }), _useState2 = _slicedToArray(_useState, 2), position = _useState2[0], setPosition = _useState2[1], _useState3 = React.useState(), _useState4 = _slicedToArray(_useState3, 2), caretElement = _useState4[0], setCaretElement = _useState4[1];
+   React.useEffect(function() {
+     notifyCaretPosition();
+-  }, [ caretElement ]);
+  });
+   var caretPositionInMarkup, notifyCaretPosition = function() {
+     if (caretElement) {
+       var offsetLeft = caretElement.offsetLeft, offsetTop = caretElement.offsetTop;
+@@ -585,13 +611,13 @@ var defaultstyle = {};
+ function SuggestionsOverlay(_ref) {
+   var id = _ref.id, _ref$suggestions = _ref.suggestions, suggestions = void 0 === _ref$suggestions ? {} : _ref$suggestions, a11ySuggestionsListLabel = _ref.a11ySuggestionsListLabel, focusIndex = _ref.focusIndex, position = _ref.position, left = _ref.left, right = _ref.right, top = _ref.top, scrollFocusedIntoView = _ref.scrollFocusedIntoView, isLoading = _ref.isLoading, isOpened = _ref.isOpened, _ref$onSelect = _ref.onSelect, onSelect = void 0 === _ref$onSelect ? function() {
+     return null;
+-  } : _ref$onSelect, ignoreAccents = _ref.ignoreAccents, containerRef = _ref.containerRef, children = _ref.children, style = _ref.style, customSuggestionsContainer = _ref.customSuggestionsContainer, onMouseDown = _ref.onMouseDown, onMouseEnter = _ref.onMouseEnter, _useState = React.useState(), _useState2 = _slicedToArray(_useState, 2), ulElement = _useState2[0], setUlElement = _useState2[1];
+  } : _ref$onSelect, ignoreAccents = _ref.ignoreAccents, containerRef = _ref.containerRef, children = _ref.children, style = _ref.style, customSuggestionsContainer = _ref.customSuggestionsContainer, onMouseDown = _ref.onMouseDown, onMouseEnter = _ref.onMouseEnter, _useState = React.useState(void 0), _useState2 = _slicedToArray(_useState, 2), ulElement = _useState2[0], setUlElement = _useState2[1];
+   React.useEffect(function() {
+     if (ulElement && !(ulElement.offsetHeight >= ulElement.scrollHeight) && scrollFocusedIntoView) {
+       var scrollTop = ulElement.scrollTop, _ulElement$children$f = ulElement.children[focusIndex].getBoundingClientRect(), top = _ulElement$children$f.top, bottom = _ulElement$children$f.bottom, topContainer = ulElement.getBoundingClientRect().top;
+       bottom = bottom - topContainer + scrollTop, (top = top - topContainer + scrollTop) < scrollTop ? ulElement.scrollTop = top : bottom > ulElement.offsetHeight && (ulElement.scrollTop = bottom - ulElement.offsetHeight);
+     }
+-  }, []);
+  }, [ focusIndex, scrollFocusedIntoView, ulElement ]);
+   var suggestionsToRender, renderSuggestion = function(result, queryInfo, index) {
+     var isFocused = index === focusIndex, childIndex = queryInfo.childIndex, query = queryInfo.query, renderSuggestion = React.Children.toArray(children)[childIndex].props.renderSuggestion;
+     return React__default.createElement(Suggestion$1, {
+@@ -626,17 +652,17 @@ function SuggestionsOverlay(_ref) {
+   }, style), {
+     onMouseDown: onMouseDown,
+     ref: containerRef
+-  }), React__default.createElement("ul", _extends({
+  }), (suggestionsToRender = React__default.createElement("ul", _extends({
+     ref: setUlElement,
+     id: id,
+     role: "listbox",
+     "aria-label": a11ySuggestionsListLabel
+-  }, style("list")), (suggestionsToRender = Object.values(suggestions).reduce(function(accResults, _ref2) {
+  }, style("list")), Object.values(suggestions).reduce(function(accResults, _ref2) {
+     var results = _ref2.results, queryInfo = _ref2.queryInfo;
+     return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function(result, index) {
+       return renderSuggestion(result, queryInfo, accResults.length + index);
+     })));
+-  }, []), customSuggestionsContainer ? customSuggestionsContainer(suggestionsToRender) : suggestionsToRender)), function() {
+  }, [])), customSuggestionsContainer ? customSuggestionsContainer(suggestionsToRender) : suggestionsToRender), function() {
+     if (isLoading) return React__default.createElement(LoadingIndicator, {
+       style: style("loadingIndicator")
+     });
+@@ -657,7 +683,7 @@ SuggestionsOverlay.propTypes = {
+   isOpened: PropTypes.bool.isRequired,
+   onSelect: PropTypes.func,
+   ignoreAccents: PropTypes.bool,
+-  customSuggestionsContainer: PropTypes.any,
+  customSuggestionsContainer: PropTypes.func,
+   containerRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({
+     current: "undefined" == typeof Element ? PropTypes.any : PropTypes.instanceOf(Element)
+   }) ])
+@@ -675,7 +701,7 @@ var styled$2 = createDefaultStyle({
+   }
+ }), SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
+ 
+-function ownKeys(object, enumerableOnly) {
+function ownKeys$1(object, enumerableOnly) {
+   var keys = Object.keys(object);
+   if (Object.getOwnPropertySymbols) {
+     var symbols = Object.getOwnPropertySymbols(object);
+@@ -686,12 +712,12 @@ function ownKeys(object, enumerableOnly) {
+   return keys;
+ }
+ 
+-function _objectSpread(target) {
+function _objectSpread$1(target) {
+   for (var i = 1; i < arguments.length; i++) {
+     var source = null != arguments[i] ? arguments[i] : {};
+-    i % 2 ? ownKeys(Object(source), !0).forEach(function(key) {
+    i % 2 ? ownKeys$1(Object(source), !0).forEach(function(key) {
+       _defineProperty(target, key, source[key]);
+-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function(key) {
+       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+     });
+   }
+@@ -769,7 +795,7 @@ var makeTriggerRegex = function(trigger) {
+       _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(_objectSpread(_objectSpread(_objectSpread({}, omit(_this.props, [ "style", "classNames", "className" ], keys(propTypes))), style("input")), {}, {
+      return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, omit(_this.props, [ "style", "classNames", "className" ], keys(propTypes))), style("input")), {}, {
+         value: _this.getPlainText(),
+         onScroll: _this.updateHighlighterScroll
+       }, !readOnly && !disabled && {
+@@ -853,9 +879,13 @@ var makeTriggerRegex = function(trigger) {
+       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, 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,
+      var value = _this.props.value || "", config = readConfigFromChildren(_this.props.children), newPlainTextValue = ev.target.value, selectionStartBefore = _this.state.selectionStart;
+      null == selectionStartBefore && (selectionStartBefore = ev.target.selectionStart);
+      var selectionEndBefore = _this.state.selectionEnd;
+      null == selectionEndBefore && (selectionEndBefore = ev.target.selectionEnd);
+      var newValue = applyChangeToValue(value, newPlainTextValue, {
+        selectionStartBefore: selectionStartBefore,
+        selectionEndBefore: selectionEndBefore,
+         selectionEndAfter: ev.target.selectionEnd
+       }, config);
+       newPlainTextValue = getPlainText(newValue, config);
+@@ -866,7 +896,9 @@ var makeTriggerRegex = function(trigger) {
+         selectionEnd: selectionEnd,
+         setSelectionAfterMentionChange: setSelectionAfterMentionChange
+       });
+-      var mentions = getMentions(newValue, config), eventMock = {
+      var mentions = getMentions(newValue, config);
+      ev.nativeEvent.isComposing && selectionStart === selectionEnd && _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
+      var eventMock = {
+         target: {
+           value: newValue
+         }
+@@ -1005,7 +1037,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(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
+        _this.suggestions = _objectSpread$1(_objectSpread$1({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
+           queryInfo: {
+             childIndex: childIndex,
+             query: query,
+@@ -1057,7 +1089,8 @@ var makeTriggerRegex = function(trigger) {
+       selectionEnd: null,
+       suggestions: {},
+       caretPosition: null,
+-      suggestionsPosition: {}
+      suggestionsPosition: {},
+      setSelectionAfterHandlePaste: !1
+     }, _this;
+   }
+   return _createClass(MentionsInput, [ {
+@@ -1072,6 +1105,8 @@ var makeTriggerRegex = function(trigger) {
+       prevState.suggestionsPosition === this.state.suggestionsPosition && this.updateSuggestionsPosition(), 
+       this.state.setSelectionAfterMentionChange && (this.setState({
+         setSelectionAfterMentionChange: !1
+      }), this.setSelection(this.state.selectionStart, this.state.selectionEnd)), this.state.setSelectionAfterHandlePaste && (this.setState({
+        setSelectionAfterHandlePaste: !1
+       }), this.setSelection(this.state.selectionStart, this.state.selectionEnd));
+     }
+   }, {
+@@ -1093,13 +1128,17 @@ 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(_objectSpread({}, event.target), {}, {
+          target: _objectSpread$1(_objectSpread$1({}, 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);
+        this.setState({
+          selectionStart: nextPos,
+          selectionEnd: nextPos,
+          setSelectionAfterHandlePaste: !0
+        });
+       }
+     }
+   }, {
+@@ -1126,7 +1165,7 @@ var makeTriggerRegex = function(trigger) {
+       if (event.target === this.inputElement && this.supportsClipboardActions(event)) {
+         event.preventDefault(), this.saveSelectionToClipboard(event);
+         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), {}, {
+          target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
+             value: newPlainTextValue
+           })
+         };
+@@ -1171,7 +1210,7 @@ var getComputedStyleLengthProp = function(forElement, propertyName) {
+     letterSpacing: "inherit"
+   },
+   "&multiLine": {
+-    input: _objectSpread({
+    input: _objectSpread$1({
+       height: "100%",
+       bottom: 0,
+       overflow: "hidden",
+diff --git a/dist/react-mentions.esm.js b/dist/react-mentions.esm.js
+index fd6c82b767e342124ea8a9c8b2b1e61d3eed9439..b68de5946a90361c0d1bb4af6ad2ab74f2837cef 100644
+--- a/dist/react-mentions.esm.js
+++ b/dist/react-mentions.esm.js
+@@ -222,14 +222,23 @@ var applyChangeToValue = function applyChangeToValue(value, plainTextValue, _ref
+       // find start of diff
+       spliceStart = 0;
+ 
+-      while (plainTextValue[spliceStart] === controlPlainTextValue[spliceStart]) {
+      while (plainTextValue[spliceStart] === oldPlainTextValue[spliceStart]) {
+         spliceStart++;
+      } // find end of diff
+
+
+      var spliceEndOfNew = plainTextValue.length;
+      var spliceEndOfOld = oldPlainTextValue.length;
+
+      while (plainTextValue[spliceEndOfNew - 1] === oldPlainTextValue[spliceEndOfOld - 1]) {
+        spliceEndOfNew--;
+        spliceEndOfOld--;
+       } // extract auto-corrected insertion
+ 
+ 
+-      insert = plainTextValue.slice(spliceStart, selectionEndAfter); // find index of the unchanged remainder
+      insert = plainTextValue.slice(spliceStart, spliceEndOfNew); // find index of the unchanged remainder
+ 
+-      spliceEnd = oldPlainTextValue.lastIndexOf(plainTextValue.substring(selectionEndAfter)); // re-map the corrected indices
+      spliceEnd = spliceEndOfOld >= spliceStart ? spliceEndOfOld : selectionEndAfter; // re-map the corrected indices
+ 
+       mappedSpliceStart = mapPlainTextIndex(value, config, spliceStart, 'START');
+       mappedSpliceEnd = mapPlainTextIndex(value, config, spliceEnd, 'END');
+@@ -653,6 +662,10 @@ var omit = function omit(obj) {
+ 
+ var _excluded = ["style", "className", "classNames"];
+ 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[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 createDefaultStyle(defaultStyle, getModifiers) {
+   var enhance = function enhance(ComponentToWrap) {
+     var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
+@@ -673,8 +686,13 @@ function createDefaultStyle(defaultStyle, getModifiers) {
+     };
+ 
+     var displayName = ComponentToWrap.displayName || ComponentToWrap.name || 'Component';
+-    DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")");
+-    return DefaultStyleEnhancer;
+    DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")"); // return DefaultStyleEnhancer
+
+    return /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return DefaultStyleEnhancer(_objectSpread(_objectSpread({}, props), {}, {
+        ref: ref
+      }));
+    });
+   };
+ 
+   return enhance;
+@@ -716,7 +734,7 @@ function Highlighter(_ref) {
+ 
+   useEffect(function () {
+     notifyCaretPosition();
+-  }, [caretElement]);
+  });
+ 
+   var notifyCaretPosition = function notifyCaretPosition() {
+     if (!caretElement) {
+@@ -965,7 +983,7 @@ function SuggestionsOverlay(_ref) {
+       onMouseDown = _ref.onMouseDown,
+       onMouseEnter = _ref.onMouseEnter;
+ 
+-  var _useState = useState(),
+  var _useState = useState(undefined),
+       _useState2 = _slicedToArray(_useState, 2),
+       ulElement = _useState2[0],
+       setUlElement = _useState2[1];
+@@ -992,17 +1010,23 @@ function SuggestionsOverlay(_ref) {
+     } else if (bottom > ulElement.offsetHeight) {
+       ulElement.scrollTop = bottom - ulElement.offsetHeight;
+     }
+-  }, []);
+  }, [focusIndex, scrollFocusedIntoView, ulElement]);
+ 
+   var renderSuggestions = function renderSuggestions() {
+-    var suggestionsToRender = Object.values(suggestions).reduce(function (accResults, _ref2) {
+    var suggestionsToRender = /*#__PURE__*/React.createElement("ul", _extends({
+      ref: setUlElement,
+      id: id,
+      role: "listbox",
+      "aria-label": a11ySuggestionsListLabel
+    }, style('list')), Object.values(suggestions).reduce(function (accResults, _ref2) {
+       var results = _ref2.results,
+           queryInfo = _ref2.queryInfo;
+       return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
+         return renderSuggestion(result, queryInfo, accResults.length + index);
+       })));
+-    }, []);
+-    if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);else return suggestionsToRender;
+    }, []));
+    if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);
+    return suggestionsToRender;
+   };
+ 
+   var renderSuggestion = function renderSuggestion(result, queryInfo, index) {
+@@ -1069,12 +1093,7 @@ function SuggestionsOverlay(_ref) {
+   }, style), {
+     onMouseDown: onMouseDown,
+     ref: containerRef
+-  }), /*#__PURE__*/React.createElement("ul", _extends({
+-    ref: setUlElement,
+-    id: id,
+-    role: "listbox",
+-    "aria-label": a11ySuggestionsListLabel
+-  }, style('list')), renderSuggestions()), renderLoadingIndicator());
+  }), renderSuggestions(), renderLoadingIndicator());
+ }
+ 
+ SuggestionsOverlay.propTypes = {
+@@ -1091,7 +1110,7 @@ SuggestionsOverlay.propTypes = {
+   isOpened: PropTypes.bool.isRequired,
+   onSelect: PropTypes.func,
+   ignoreAccents: PropTypes.bool,
+-  customSuggestionsContainer: PropTypes.any,
+  customSuggestionsContainer: PropTypes.func,
+   containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+     current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
+   })])
+@@ -1109,9 +1128,9 @@ var styled$2 = createDefaultStyle({
+ });
+ var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
+ 
+-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+ 
+-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[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 _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+ 
+ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+ 
+@@ -1208,7 +1227,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+ 
+       var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
+       keys(propTypes));
+-      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
+      return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, props), style('input')), {}, {
+         value: _this.getPlainText(),
+         onScroll: _this.updateHighlighterScroll
+       }, !readOnly && !disabled && {
+@@ -1372,11 +1391,23 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+ 
+       var value = _this.props.value || '';
+       var config = readConfigFromChildren(_this.props.children);
+-      var newPlainTextValue = ev.target.value; // Derive the new value to set by applying the local change in the textarea's plain text
+      var newPlainTextValue = ev.target.value;
+      var selectionStartBefore = _this.state.selectionStart;
+
+      if (selectionStartBefore == null) {
+        selectionStartBefore = ev.target.selectionStart;
+      }
+
+      var selectionEndBefore = _this.state.selectionEnd;
+
+      if (selectionEndBefore == null) {
+        selectionEndBefore = ev.target.selectionEnd;
+      } // Derive the new value to set by applying the local change in the textarea's plain text
+
+ 
+       var newValue = applyChangeToValue(value, newPlainTextValue, {
+-        selectionStartBefore: _this.state.selectionStart,
+-        selectionEndBefore: _this.state.selectionEnd,
+        selectionStartBefore: selectionStartBefore,
+        selectionEndBefore: selectionEndBefore,
+         selectionEndAfter: ev.target.selectionEnd
+       }, config); // In case a mention is deleted, also adjust the new plain text value
+ 
+@@ -1402,9 +1433,14 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+         setSelectionAfterMentionChange: setSelectionAfterMentionChange
+       });
+ 
+-      var mentions = getMentions(newValue, config); // Propagate change
+      var mentions = getMentions(newValue, config);
+
+      if (ev.nativeEvent.isComposing && selectionStart === selectionEnd) {
+        _this.updateMentionsQueries(_this.inputElement.value, selectionStart);
+      } // Propagate change
+       // let handleChange = this.getOnChange(this.props) || emptyFunction;
+ 
+
+       var eventMock = {
+         target: {
+           value: newValue
+@@ -1751,7 +1787,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+       if (queryId !== _this._queryId) return; // save in property so that multiple sync state updates from different mentions sources
+       // won't overwrite each other
+ 
+-      _this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
+      _this.suggestions = _objectSpread$1(_objectSpread$1({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
+         queryInfo: {
+           childIndex: childIndex,
+           query: query,
+@@ -1856,7 +1892,8 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+       selectionEnd: null,
+       suggestions: {},
+       caretPosition: null,
+-      suggestionsPosition: {}
+      suggestionsPosition: {},
+      setSelectionAfterHandlePaste: false
+     };
+     return _this;
+   }
+@@ -1886,6 +1923,13 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+         });
+         this.setSelection(this.state.selectionStart, this.state.selectionEnd);
+       }
+
+      if (this.state.setSelectionAfterHandlePaste) {
+        this.setState({
+          setSelectionAfterHandlePaste: false
+        });
+        this.setSelection(this.state.selectionStart, this.state.selectionEnd);
+      }
+     }
+   }, {
+     key: "componentWillUnmount",
+@@ -1927,7 +1971,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+       var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
+       var newPlainTextValue = getPlainText(newValue, config);
+       var eventMock = {
+-        target: _objectSpread(_objectSpread({}, event.target), {}, {
+        target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
+           value: newValue
+         })
+       };
+@@ -1935,7 +1979,11 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+ 
+       var startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
+       var nextPos = (startOfMention || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
+-      this.setSelection(nextPos, nextPos);
+      this.setState({
+        selectionStart: nextPos,
+        selectionEnd: nextPos,
+        setSelectionAfterHandlePaste: true
+      });
+     }
+   }, {
+     key: "saveSelectionToClipboard",
+@@ -1997,7 +2045,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
+       var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
+       var newPlainTextValue = getPlainText(newValue, config);
+       var eventMock = {
+-        target: _objectSpread(_objectSpread({}, event.target), {}, {
+        target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
+           value: newPlainTextValue
+         })
+       };
+@@ -2054,7 +2102,7 @@ var styled$3 = createDefaultStyle({
+     letterSpacing: 'inherit'
+   },
+   '&multiLine': {
+-    input: _objectSpread({
+    input: _objectSpread$1({
+       height: '100%',
+       bottom: 0,
+       overflow: 'hidden',
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -31,6 +31,9 @@ patchedDependencies:
  moleculer@0.14.23:
    hash: ahhlgpfy57fntn2aftq6beaeja
    path: patches/moleculer@0.14.23.patch
+  react-mentions@4.4.7:
+    hash: w6q3hebwqaamdsjccwh6ogh6fi
+    path: patches/react-mentions@4.4.7.patch
  vite-express@0.8.0:
    hash: u6touqej4dt3zxnslnszarl7vq
    path: patches/vite-express@0.8.0.patch
@ -733,7 +736,7 @@ importers:
        version: 8.0.5(@types/react@18.0.20)(react@18.2.0)
      react-mentions:
        specifier: ^4.4.7
-        version: 4.4.7(react-dom@18.2.0)(react@18.2.0)
+        version: 4.4.7(patch_hash=w6q3hebwqaamdsjccwh6ogh6fi)(react-dom@18.2.0)(react@18.2.0)
      react-router:
        specifier: 6.11.0
        version: 6.11.0(react@18.2.0)
@ -29390,7 +29393,7 @@ packages:
      - supports-color
    dev: false

-  /react-mentions@4.4.7(react-dom@18.2.0)(react@18.2.0):
+  /react-mentions@4.4.7(patch_hash=w6q3hebwqaamdsjccwh6ogh6fi)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-VNriu2h/uOB+RS0mwZgPG2Vf+UtdDvRh5zbXa2TNc1WqacKuNDgTdhlbo9LEOZRBxRzIeTUYQmYJ7p9M9rDHqQ==}
    peerDependencies:
      react: '>=16.8.3'
@ -29403,6 +29406,7 @@ packages:
      react-dom: 18.2.0(react@18.2.0)
      substyle: 9.4.1(react@18.2.0)
    dev: false
+    patched: true

  /react-merge-refs@1.1.0:
    resolution: {integrity: sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==}