react-mentions 4.2.0 → 4.3.2

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), [Highlight](https://highlight.run/) 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.)

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';
 };
@@ -1060,6 +1064,7 @@ function (_Component) {
           containerRef = _this$props.containerRef,
           position = _this$props.position,
           left = _this$props.left,
+          right = _this$props.right,
           top = _this$props.top; // do not show suggestions until there is some data
 
       if (!isOpened) {
@@ -1069,6 +1074,7 @@ function (_Component) {
       return React__default.createElement("div", _extends({}, useStyles.inline({
         position: position || 'absolute',
         left: left,
+        right: right,
         top: top
       }, style), {
         onMouseDown: onMouseDown,
@@ -1144,6 +1150,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,
@@ -1345,13 +1352,15 @@ function (_React$Component) {
       var _this$state$suggestio = _this.state.suggestionsPosition,
           position = _this$state$suggestio.position,
           left = _this$state$suggestio.left,
-          top = _this$state$suggestio.top;
+          top = _this$state$suggestio.top,
+          right = _this$state$suggestio.right;
       var 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,
@@ -1425,13 +1434,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 || '';
@@ -1888,7 +1900,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
 
 
@@ -1995,7 +2007,11 @@ function (_React$Component) {
           value: newValue
         })
       };
-      this.executeOnChange(eventMock, newValue, newPlainTextValue, getMentions(newValue, config));
+      this.executeOnChange(eventMock, newValue, newPlainTextValue, getMentions(newValue, config)); // Move the cursor position to the end of the pasted data
+
+      var startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
+      var nextPos = (startOfMention || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
+      this.setSelection(nextPos, nextPos);
     }
   }, {
     key: "saveSelectionToClipboard",

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) {
@@ -643,10 +645,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,
@@ -708,6 +711,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,
@@ -844,12 +848,13 @@ 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,
@@ -887,27 +892,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,
@@ -1075,7 +1079,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;
@@ -1134,6 +1138,8 @@ var makeTriggerRegex = function(trigger) {
           })
         };
         this.executeOnChange(eventMock, newValue, newPlainTextValue, getMentions(newValue, config));
+        var nextPos = (findStartOfMentionInPlainText(value, config, selectionStart) || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
+        this.setSelection(nextPos, nextPos);
       }
     }
   }, {

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';
 };
@@ -1052,6 +1056,7 @@ function (_Component) {
           containerRef = _this$props.containerRef,
           position = _this$props.position,
           left = _this$props.left,
+          right = _this$props.right,
           top = _this$props.top; // do not show suggestions until there is some data
 
       if (!isOpened) {
@@ -1061,6 +1066,7 @@ function (_Component) {
       return React.createElement("div", _extends({}, inline({
         position: position || 'absolute',
         left: left,
+        right: right,
         top: top
       }, style), {
         onMouseDown: onMouseDown,
@@ -1136,6 +1142,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,
@@ -1337,13 +1344,15 @@ function (_React$Component) {
       var _this$state$suggestio = _this.state.suggestionsPosition,
           position = _this$state$suggestio.position,
           left = _this$state$suggestio.left,
-          top = _this$state$suggestio.top;
+          top = _this$state$suggestio.top,
+          right = _this$state$suggestio.right;
       var suggestionsNode = React.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,
@@ -1417,13 +1426,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 || '';
@@ -1880,7 +1892,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
 
 
@@ -1987,7 +1999,11 @@ function (_React$Component) {
           value: newValue
         })
       };
-      this.executeOnChange(eventMock, newValue, newPlainTextValue, getMentions(newValue, config));
+      this.executeOnChange(eventMock, newValue, newPlainTextValue, getMentions(newValue, config)); // Move the cursor position to the end of the pasted data
+
+      var startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
+      var nextPos = (startOfMention || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
+      this.setSelection(nextPos, nextPos);
     }
   }, {
     key: "saveSelectionToClipboard",

package/package.json

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