react-mentions 4.1.0 → 4.3.1

package/README.md

@@ -7,7 +7,7 @@
 
 A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.
 
-Used in production at [Signavio](https://signavio.com), [State](https://state.com), [Snips](https://snips.ai), [Swat.io](https://swat.io), [GotDone](https://www.gotdone.me), [Volinspire](https://volinspire.com), [Marvin](https://amazingmarvin.com), [Timely](https://timelyapp.com), [GuideFitter](https://www.guidefitter.com/), [Evite](https://www.evite.com/), [Publer](https://publer.me/), [Kontentino](https://www.kontentino.com/), and [you?](https://github.com/signavio/react-mentions/edit/master/README.md)
+Used in production at [Signavio](https://signavio.com), [State](https://state.com), [Snips](https://snips.ai), [Swat.io](https://swat.io), [GotDone](https://www.gotdone.me), [Volinspire](https://volinspire.com), [Marvin](https://amazingmarvin.com), [Timely](https://timelyapp.com), [GuideFitter](https://www.guidefitter.com/), [Evite](https://www.evite.com/), [Publer](https://publer.me/), [Kontentino](https://www.kontentino.com/), [Wix.com](https://wix.com) and [you?](https://github.com/signavio/react-mentions/edit/master/README.md)
 
 ## Getting started
 
@@ -76,7 +76,7 @@ Each data source is configured using a `Mention` component, which has the follow
 | markup           | string                                                       | `'@[__display__](__id__)'`                  | A template string for the markup to use for mentions                                                                                                   |
 | displayTransform | function (id, display)                                       | returns `display`                           | Accepts a function for customizing the string that is displayed for a mention                                                                          |
 | regex            | RegExp                                                       | automatically derived from `markup` pattern | Allows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional)                          |  |
-| onAdd            | function (id, display)                                       | empty function                              | Callback invoked when a suggestion has been added (optional)                                                                                           |
+| onAdd            | function (id, display, startPos, endPos)                                       | empty function                              | Callback invoked when a suggestion has been added (optional)                                                                                           |
 | appendSpaceOnAdd | boolean                                                      | `false`                                     | Append a space when a suggestion has been added (optional)                                                                                             |
 
 If a function is passed as the `data` prop, that function will be called with the current search query as first, and a callback function as second argument. The callback can be used to provide results asynchronously, e.g., after fetch requests. (It can even be called multiple times to update the list of suggestions.)
@@ -91,6 +91,11 @@ If you want to avoid global class names and use css modules instead, you can pro
 
 You can also assign `className` and `style` props to the `Mention` elements to define how to highlight the mentioned words.
 
+## Testing
+
+Due to react-mentions' internal cursor tracking it is not good enough to simulate the editing of the textarea value using `ReactTestUtils.Simulate.change`.
+We recommend using [@testing-library/user-event](https://github.com/testing-library/user-event) for a realistic simulation of events as they would happen in the browser as the user interacts the textarea.
+
 ## Contributing
 
 Spawn a development server with an example page and module hot loading all set up:

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

@@ -629,6 +629,10 @@ var getSubstringIndex = function getSubstringIndex(str, substr, ignoreAccents) {
   return normalizeString(str).indexOf(normalizeString(substr));
 };
 
+var isIE = function isIE() {
+  return !!document.documentMode;
+};
+
 var isNumber = function isNumber(val) {
   return typeof val === 'number';
 };
@@ -1239,6 +1243,7 @@ var propTypes = {
   singleLine: PropTypes.bool,
   allowSpaceInQuery: PropTypes.bool,
   allowSuggestionsAboveCursor: PropTypes.bool,
+  forceSuggestionsAboveCursor: PropTypes.bool,
   ignoreAccents: PropTypes.bool,
   a11ySuggestionsListLabel: PropTypes.string,
   value: PropTypes.string,
@@ -1424,13 +1429,16 @@ function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (ev) {
-      isComposing = false; // if we are inside iframe, we need to find activeElement within its contentDocument
+      isComposing = false;
 
-      var currentDocument = document.activeElement && document.activeElement.contentDocument || document;
+      if (isIE()) {
+        // if we are inside iframe, we need to find activeElement within its contentDocument
+        var currentDocument = document.activeElement && document.activeElement.contentDocument || document;
 
-      if (currentDocument.activeElement !== ev.target) {
-        // fix an IE bug (blur from empty input element with placeholder attribute trigger "input" event)
-        return;
+        if (currentDocument.activeElement !== ev.target) {
+          // fix an IE bug (blur from empty input element with placeholder attribute trigger "input" event)
+          return;
+        }
       }
 
       var value = _this.props.value || '';
@@ -1513,6 +1521,7 @@ function (_React$Component) {
 
       if (Object.values(KEY).indexOf(ev.keyCode) >= 0) {
         ev.preventDefault();
+        ev.stopPropagation();
       }
 
       switch (ev.keyCode) {
@@ -1625,7 +1634,8 @@ function (_React$Component) {
       var caretPosition = _this.state.caretPosition;
       var _this$props5 = _this.props,
           suggestionsPortalHost = _this$props5.suggestionsPortalHost,
-          allowSuggestionsAboveCursor = _this$props5.allowSuggestionsAboveCursor;
+          allowSuggestionsAboveCursor = _this$props5.allowSuggestionsAboveCursor,
+          forceSuggestionsAboveCursor = _this$props5.forceSuggestionsAboveCursor;
 
       if (!caretPosition || !_this.suggestionsElement) {
         return;
@@ -1670,7 +1680,7 @@ function (_React$Component) {
         // is small enough to NOT cover up the caret
 
 
-        if (allowSuggestionsAboveCursor && top + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < top - caretHeight) {
+        if (allowSuggestionsAboveCursor && top + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < top - caretHeight || forceSuggestionsAboveCursor) {
           position.top = Math.max(0, top - suggestions.offsetHeight - caretHeight);
         } else {
           position.top = top;
@@ -1885,7 +1895,7 @@ function (_React$Component) {
       _this.executeOnChange(eventMock, newValue, newPlainTextValue, mentions);
 
       if (onAdd) {
-        onAdd(id, display);
+        onAdd(id, display, start, end);
       } // Make sure the suggestions overlay is closed
 
 

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

@@ -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) {
@@ -785,6 +787,7 @@ var makeTriggerRegex = function(trigger) {
   singleLine: PropTypes.bool,
   allowSpaceInQuery: PropTypes.bool,
   allowSuggestionsAboveCursor: PropTypes.bool,
+  forceSuggestionsAboveCursor: PropTypes.bool,
   ignoreAccents: PropTypes.bool,
   a11ySuggestionsListLabel: PropTypes.string,
   value: PropTypes.string,
@@ -886,27 +889,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, 
+      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,
@@ -917,8 +919,8 @@ var makeTriggerRegex = function(trigger) {
         _this.updateHighlighterScroll(), _this.props.onSelect(ev);
       }
     }), _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(ev) {
-      if (0 !== countSuggestions(_this.state.suggestions) && _this.suggestionsElement) switch (Object.values(KEY).indexOf(ev.keyCode) >= 0 && ev.preventDefault(), 
-      ev.keyCode) {
+      if (0 !== countSuggestions(_this.state.suggestions) && _this.suggestionsElement) switch (Object.values(KEY).indexOf(ev.keyCode) >= 0 && (ev.preventDefault(), 
+      ev.stopPropagation()), ev.keyCode) {
        case KEY.ESC:
         return void _this.clearSuggestions();
 
@@ -970,7 +972,7 @@ var makeTriggerRegex = function(trigger) {
         scrollFocusedIntoView: !1
       });
     }), _defineProperty(_assertThisInitialized(_this), "updateSuggestionsPosition", function() {
-      var caretPosition = _this.state.caretPosition, _this$props5 = _this.props, suggestionsPortalHost = _this$props5.suggestionsPortalHost, allowSuggestionsAboveCursor = _this$props5.allowSuggestionsAboveCursor;
+      var caretPosition = _this.state.caretPosition, _this$props5 = _this.props, suggestionsPortalHost = _this$props5.suggestionsPortalHost, allowSuggestionsAboveCursor = _this$props5.allowSuggestionsAboveCursor, forceSuggestionsAboveCursor = _this$props5.forceSuggestionsAboveCursor;
       if (caretPosition && _this.suggestionsElement) {
         var suggestions = _this.suggestionsElement, highlighter = _this.highlighterElement, caretOffsetParentRect = highlighter.getBoundingClientRect(), caretHeight = getComputedStyleLengthProp(highlighter, "font-size"), viewportRelative = {
           left: caretOffsetParentRect.left + caretPosition.left,
@@ -985,7 +987,7 @@ var makeTriggerRegex = function(trigger) {
             left -= highlighter.scrollLeft, top -= highlighter.scrollTop;
             var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
             left + suggestions.offsetWidth > viewportWidth ? position.left = Math.max(0, viewportWidth - suggestions.offsetWidth) : position.left = left, 
-            allowSuggestionsAboveCursor && top + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < top - caretHeight ? position.top = Math.max(0, top - suggestions.offsetHeight - caretHeight) : position.top = top;
+            allowSuggestionsAboveCursor && top + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < top - caretHeight || forceSuggestionsAboveCursor ? position.top = Math.max(0, top - suggestions.offsetHeight - caretHeight) : position.top = top;
           } else {
             var _left = caretPosition.left - highlighter.scrollLeft, _top = caretPosition.top - highlighter.scrollTop;
             _left + suggestions.offsetWidth > _this.containerElement.offsetWidth ? position.right = 0 : position.left = _left, 
@@ -1074,7 +1076,7 @@ var makeTriggerRegex = function(trigger) {
           value: newValue
         }
       }, mentions = getMentions(newValue, config), newPlainTextValue = spliceString(plainTextValue, querySequenceStart, querySequenceEnd, displayValue);
-      _this.executeOnChange(eventMock, newValue, newPlainTextValue, mentions), onAdd && onAdd(id, display), 
+      _this.executeOnChange(eventMock, newValue, newPlainTextValue, mentions), onAdd && onAdd(id, display, start, end), 
       _this.clearSuggestions();
     }), _defineProperty(_assertThisInitialized(_this), "isLoading", function() {
       var isLoading = !1;

package/dist/react-mentions.esm.js

@@ -621,6 +621,10 @@ var getSubstringIndex = function getSubstringIndex(str, substr, ignoreAccents) {
   return normalizeString(str).indexOf(normalizeString(substr));
 };
 
+var isIE = function isIE() {
+  return !!document.documentMode;
+};
+
 var isNumber = function isNumber(val) {
   return typeof val === 'number';
 };
@@ -1231,6 +1235,7 @@ var propTypes = {
   singleLine: PropTypes.bool,
   allowSpaceInQuery: PropTypes.bool,
   allowSuggestionsAboveCursor: PropTypes.bool,
+  forceSuggestionsAboveCursor: PropTypes.bool,
   ignoreAccents: PropTypes.bool,
   a11ySuggestionsListLabel: PropTypes.string,
   value: PropTypes.string,
@@ -1416,13 +1421,16 @@ function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (ev) {
-      isComposing = false; // if we are inside iframe, we need to find activeElement within its contentDocument
+      isComposing = false;
 
-      var currentDocument = document.activeElement && document.activeElement.contentDocument || document;
+      if (isIE()) {
+        // if we are inside iframe, we need to find activeElement within its contentDocument
+        var currentDocument = document.activeElement && document.activeElement.contentDocument || document;
 
-      if (currentDocument.activeElement !== ev.target) {
-        // fix an IE bug (blur from empty input element with placeholder attribute trigger "input" event)
-        return;
+        if (currentDocument.activeElement !== ev.target) {
+          // fix an IE bug (blur from empty input element with placeholder attribute trigger "input" event)
+          return;
+        }
       }
 
       var value = _this.props.value || '';
@@ -1505,6 +1513,7 @@ function (_React$Component) {
 
       if (Object.values(KEY).indexOf(ev.keyCode) >= 0) {
         ev.preventDefault();
+        ev.stopPropagation();
       }
 
       switch (ev.keyCode) {
@@ -1617,7 +1626,8 @@ function (_React$Component) {
       var caretPosition = _this.state.caretPosition;
       var _this$props5 = _this.props,
           suggestionsPortalHost = _this$props5.suggestionsPortalHost,
-          allowSuggestionsAboveCursor = _this$props5.allowSuggestionsAboveCursor;
+          allowSuggestionsAboveCursor = _this$props5.allowSuggestionsAboveCursor,
+          forceSuggestionsAboveCursor = _this$props5.forceSuggestionsAboveCursor;
 
       if (!caretPosition || !_this.suggestionsElement) {
         return;
@@ -1662,7 +1672,7 @@ function (_React$Component) {
         // is small enough to NOT cover up the caret
 
 
-        if (allowSuggestionsAboveCursor && top + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < top - caretHeight) {
+        if (allowSuggestionsAboveCursor && top + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < top - caretHeight || forceSuggestionsAboveCursor) {
           position.top = Math.max(0, top - suggestions.offsetHeight - caretHeight);
         } else {
           position.top = top;
@@ -1877,7 +1887,7 @@ function (_React$Component) {
       _this.executeOnChange(eventMock, newValue, newPlainTextValue, mentions);
 
       if (onAdd) {
-        onAdd(id, display);
+        onAdd(id, display, start, end);
       } // Make sure the suggestions overlay is closed
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mentions",
-  "version": "4.1.0",
+  "version": "4.3.1",
   "description": "React mentions input",
   "main": "dist/react-mentions.cjs.js",
   "module": "dist/react-mentions.esm.js",