@lumel/mention 5.2.1 → 5.2.4

package/lib/index.esm.js

@@ -11,26 +11,21 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
-
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-
   _setPrototypeOf(subClass, superClass);
 }
-
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -38,22 +33,18 @@ function _setPrototypeOf(o, p) {
   };
   return _setPrototypeOf(o, p);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
-
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -62,20 +53,15 @@ function _unsupportedIterableToArray(o, minLen) {
   if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
   return arr2;
 }
-
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (it) return (it = it.call(o)).next.bind(it);
-
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike) {
     if (it) o = it;
     var i = 0;
     return function () {
@@ -88,14 +74,13 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
       };
     };
   }
-
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function MentionLink(_ref) {
   var mention = _ref.mention,
-      children = _ref.children,
-      className = _ref.className;
+    children = _ref.children,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("a", {
     href: mention.link,
     className: className,
@@ -103,26 +88,24 @@ function MentionLink(_ref) {
     "data-testid": "mentionLink"
   }, children);
 }
-
 function MentionText(_ref2) {
   var children = _ref2.children,
-      className = _ref2.className;
+    className = _ref2.className;
   return /*#__PURE__*/React.createElement("span", {
     className: className,
     spellCheck: false,
     "data-testid": "mentionText"
   }, children);
 }
-
 function Mention(props) {
   var entityKey = props.entityKey,
-      _props$theme = props.theme,
-      theme = _props$theme === void 0 ? {} : _props$theme,
-      mentionComponent = props.mentionComponent,
-      children = props.children,
-      decoratedText = props.decoratedText,
-      className = props.className,
-      contentState = props.contentState;
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? {} : _props$theme,
+    mentionComponent = props.mentionComponent,
+    children = props.children,
+    decoratedText = props.decoratedText,
+    className = props.className,
+    contentState = props.contentState;
   var combinedClassName = clsx(theme.mention, className);
   var mention = contentState.getEntity(entityKey).getData().mention;
   var Component = mentionComponent || (mention.link ? MentionLink : MentionText);
@@ -147,7 +130,6 @@ function getSearchTextAt(blockText, position, triggers) {
   var matches = str.matchAll(TRIGGER_REGEX);
   var triggerStartIndex = 0;
   var valueStartIndex = 0;
-
   for (var _iterator = _createForOfIteratorHelperLoose(matches), _step; !(_step = _iterator()).done;) {
     var match = _step.value;
     var spaceLen = match[1].length;
@@ -155,7 +137,6 @@ function getSearchTextAt(blockText, position, triggers) {
     triggerStartIndex = (match.index || 0) + spaceLen;
     valueStartIndex = triggerStartIndex + matchLen;
   }
-
   var matchingString = str.slice(valueStartIndex);
   var end = str.length;
   return {
@@ -184,36 +165,33 @@ function addMention(editorState, mention, mentionPrefix, mentionTrigger, entityM
   });
   var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
   var currentSelectionState = editorState.getSelection();
-
   var _getSearchText = getSearchText(editorState, currentSelectionState, [mentionTrigger]),
-      begin = _getSearchText.begin,
-      end = _getSearchText.end; // get selection of the @mention search text
-
+    begin = _getSearchText.begin,
+    end = _getSearchText.end;
 
+  // get selection of the @mention search text
   var mentionTextSelection = currentSelectionState.merge({
     anchorOffset: begin,
     focusOffset: end
   });
-  var mentionReplacedContent = Modifier.replaceText(editorState.getCurrentContent(), mentionTextSelection, "" + mentionPrefix + mention.name, editorState.getCurrentInlineStyle(), entityKey); // If the mention is inserted at the end, a space is appended right after for
-  // a smooth writing experience.
+  var mentionReplacedContent = Modifier.replaceText(editorState.getCurrentContent(), mentionTextSelection, "" + mentionPrefix + mention.name, editorState.getCurrentInlineStyle(), entityKey);
 
+  // If the mention is inserted at the end, a space is appended right after for
+  // a smooth writing experience.
   var blockKey = mentionTextSelection.getAnchorKey();
   var blockSize = editorState.getCurrentContent().getBlockForKey(blockKey).getLength();
-
   if (blockSize === end) {
     mentionReplacedContent = Modifier.insertText(mentionReplacedContent, mentionReplacedContent.getSelectionAfter(), ' ');
   }
-
   var newEditorState = EditorState.push(editorState, mentionReplacedContent, 'insert-fragment');
   return EditorState.forceSelection(newEditorState, mentionReplacedContent.getSelectionAfter());
 }
 
 var decodeOffsetKey = function decodeOffsetKey(offsetKey) {
   var _offsetKey$split = offsetKey.split('-'),
-      blockKey = _offsetKey$split[0],
-      decoratorKey = _offsetKey$split[1],
-      leafKey = _offsetKey$split[2];
-
+    blockKey = _offsetKey$split[0],
+    decoratorKey = _offsetKey$split[1],
+    leafKey = _offsetKey$split[2];
   return {
     blockKey: blockKey,
     decoratorKey: parseInt(decoratorKey, 10),
@@ -221,65 +199,64 @@ var decodeOffsetKey = function decodeOffsetKey(offsetKey) {
   };
 };
 
-var decodeOffsetKey$1 = decodeOffsetKey;
-
 function filterUndefineds(value) {
   return value !== undefined;
 }
-
 function getTriggerForMention(editorState, searches, mentionTriggers) {
   // get the current selection
   var selection = editorState.getSelection();
   var anchorKey = selection.getAnchorKey();
-  var anchorOffset = selection.getAnchorOffset(); // the list should not be visible if a range is selected or the editor has no focus
-
+  var anchorOffset = selection.getAnchorOffset();
+  // the list should not be visible if a range is selected or the editor has no focus
   if (!selection.isCollapsed() || !selection.getHasFocus()) {
     return null;
-  } // identify the start & end positon of each search-text
-
+  }
 
+  // identify the start & end positon of each search-text
   var offsetDetails = searches.map(function (offsetKey) {
-    return decodeOffsetKey$1(offsetKey);
-  }); // a leave can be empty when it is removed due event.g. using backspace
-  // do not check leaves, use full decorated portal text
+    return decodeOffsetKey(offsetKey);
+  });
 
+  // a leave can be empty when it is removed due event.g. using backspace
+  // do not check leaves, use full decorated portal text
   var leaves = offsetDetails.filter(function (offsetDetail) {
     return offsetDetail.blockKey === anchorKey;
   }).map(function (offsetDetail) {
     return editorState.getBlockTree(offsetDetail.blockKey).getIn([offsetDetail.decoratorKey]);
-  }); // if all leaves are undefined the popover should be removed
+  });
 
+  // if all leaves are undefined the popover should be removed
   if (leaves.every(function (leave) {
     return leave === undefined;
   })) {
     return null;
-  } // Checks that the cursor is after the @ character but still somewhere in
+  }
+  // Checks that the cursor is after the @ character but still somewhere in
   // the word (search term). Setting it to allow the cursor to be left of
   // the @ causes troubles due selection confusion.
-
-
   var blockText = editorState.getCurrentContent().getBlockForKey(anchorKey).getText();
   var triggerForSelectionInsideWord = leaves.filter(filterUndefineds).map(function (_ref) {
     var start = _ref.start,
-        end = _ref.end;
+      end = _ref.end;
     return mentionTriggers.map(function (trigger) {
-      return (// @ is the first character
-        start === 0 && anchorOffset >= start + trigger.length && //should not trigger if the cursor is before the trigger
-        blockText.substr(0, trigger.length) === trigger && anchorOffset <= end || // @ is in the text or at the end, multi triggers
-        mentionTriggers.length > 1 && anchorOffset >= start + trigger.length && (blockText.substr(start + 1, trigger.length) === trigger || blockText.substr(start, trigger.length) === trigger) && anchorOffset <= end || // @ is in the text or at the end, single trigger
+      return (
+        // @ is the first character
+        start === 0 && anchorOffset >= start + trigger.length &&
+        //should not trigger if the cursor is before the trigger
+        blockText.substr(0, trigger.length) === trigger && anchorOffset <= end ||
+        // @ is in the text or at the end, multi triggers
+        mentionTriggers.length > 1 && anchorOffset >= start + trigger.length && (blockText.substr(start + 1, trigger.length) === trigger || blockText.substr(start, trigger.length) === trigger) && anchorOffset <= end ||
+        // @ is in the text or at the end, single trigger
         mentionTriggers.length === 1 && anchorOffset >= start + trigger.length && anchorOffset <= end ? trigger : undefined
       );
     }).filter(filterUndefineds)[0];
   }).filter(filterUndefineds);
-
   if (triggerForSelectionInsideWord.isEmpty()) {
     return null;
   }
-
   var _triggerForSelectionI = triggerForSelectionInsideWord.entrySeq().first(),
-      activeOffsetKey = _triggerForSelectionI[0],
-      activeTrigger = _triggerForSelectionI[1];
-
+    activeOffsetKey = _triggerForSelectionI[0],
+    activeTrigger = _triggerForSelectionI[1];
   return {
     activeOffsetKey: activeOffsetKey,
     activeTrigger: activeTrigger
@@ -290,23 +267,18 @@ var getRelativeParent = function getRelativeParent(element) {
   if (!element) {
     return null;
   }
-
   var position = window.getComputedStyle(element).getPropertyValue('position');
-
   if (position !== 'static') {
     return element;
   }
-
   return getRelativeParent(element.parentElement);
 };
-
 function positionSuggestions(_ref) {
   var decoratorRect = _ref.decoratorRect,
-      popover = _ref.popover,
-      props = _ref.props;
+    popover = _ref.popover,
+    props = _ref.props;
   var relativeParent = getRelativeParent(popover.parentElement);
   var relativeRect;
-
   if (relativeParent) {
     var relativeParentRect = relativeParent.getBoundingClientRect();
     relativeRect = {
@@ -323,12 +295,10 @@ function positionSuggestions(_ref) {
       left: decoratorRect.left
     };
   }
-
   var left = relativeRect.left + relativeRect.scrollLeft;
   var top = relativeRect.top + relativeRect.scrollTop;
   var transform;
   var transition;
-
   if (props.open) {
     if (props.suggestions.length > 0) {
       transform = 'scale(1)';
@@ -338,7 +308,6 @@ function positionSuggestions(_ref) {
       transition = 'all 0.35s cubic-bezier(.3,1,.2,1)';
     }
   }
-
   return {
     left: left + "px",
     top: top + "px",
@@ -357,9 +326,8 @@ var warning = once(function (text) {
 
 function Avatar(_ref) {
   var mention = _ref.mention,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? {} : _ref$theme;
-
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? {} : _ref$theme;
   if (mention.avatar) {
     return /*#__PURE__*/React.createElement("img", {
       src: mention.avatar,
@@ -367,19 +335,17 @@ function Avatar(_ref) {
       role: "presentation"
     });
   }
-
   return null;
 }
 
 var _excluded$1 = ["mention", "theme", "isFocused", "searchValue", "selectMention"];
 function DefaultEntryComponent(props) {
   var mention = props.mention,
-      theme = props.theme,
-      isFocused = props.isFocused;
-      props.searchValue;
-      props.selectMention;
-      var parentProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-
+    theme = props.theme,
+    isFocused = props.isFocused;
+    props.searchValue;
+    props.selectMention;
+    var parentProps = _objectWithoutPropertiesLoose(props, _excluded$1);
   return /*#__PURE__*/React.createElement("div", _extends({}, parentProps, {
     "aria-selected": isFocused
   }), /*#__PURE__*/React.createElement(Avatar, {
@@ -392,14 +358,14 @@ function DefaultEntryComponent(props) {
 
 var Entry = function Entry(_ref) {
   var onMentionSelect = _ref.onMentionSelect,
-      mention = _ref.mention,
-      theme = _ref.theme,
-      index = _ref.index,
-      onMentionFocus = _ref.onMentionFocus,
-      isFocused = _ref.isFocused,
-      id = _ref.id,
-      searchValue = _ref.searchValue,
-      EntryComponent = _ref.entryComponent;
+    mention = _ref.mention,
+    theme = _ref.theme,
+    index = _ref.index,
+    onMentionFocus = _ref.onMentionFocus,
+    isFocused = _ref.isFocused,
+    id = _ref.id,
+    searchValue = _ref.searchValue,
+    EntryComponent = _ref.entryComponent;
   var mouseDown = useRef(false);
   var ref = useRef(null);
   useEffect(function () {
@@ -407,7 +373,6 @@ var Entry = function Entry(_ref) {
       //delay the scrolling as the popup needs some time for positioning
       requestAnimationFrame(function () {
         var _ref$current;
-
         return (_ref$current = ref.current) == null ? void 0 : _ref$current.scrollIntoView({
           behavior: 'smooth',
           block: 'nearest'
@@ -418,24 +383,20 @@ var Entry = function Entry(_ref) {
   useEffect(function () {
     mouseDown.current = false;
   });
-
   var onMouseUp = function onMouseUp() {
     if (mouseDown.current) {
       onMentionSelect(mention);
       mouseDown.current = false;
     }
   };
-
   var onMouseDown = function onMouseDown(event) {
     // Note: important to avoid a content edit change
     event.preventDefault();
     mouseDown.current = true;
   };
-
   var onMouseEnter = function onMouseEnter() {
     onMentionFocus(index);
   };
-
   var className = isFocused ? theme.mentionSuggestionsEntryFocused : theme.mentionSuggestionsEntry;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref
@@ -454,38 +415,32 @@ var Entry = function Entry(_ref) {
     selectMention: onMentionSelect
   }));
 };
-
 Entry.propTypes = {
   entryComponent: PropTypes.any.isRequired,
   searchValue: PropTypes.string,
   // eslint-disable-next-line react/no-unused-prop-types
   onMentionSelect: PropTypes.func
 };
-var Entry$1 = Entry;
 
 function Popover(_ref) {
   var store = _ref.store,
-      children = _ref.children,
-      theme = _ref.theme,
-      _ref$popperOptions = _ref.popperOptions,
-      popperOptions = _ref$popperOptions === void 0 ? {
-    placement: 'bottom-start'
-  } : _ref$popperOptions;
-
+    children = _ref.children,
+    theme = _ref.theme,
+    _ref$popperOptions = _ref.popperOptions,
+    popperOptions = _ref$popperOptions === void 0 ? {
+      placement: 'bottom-start'
+    } : _ref$popperOptions;
   var _useState = useState(function () {
-    return clsx(theme.mentionSuggestions, theme.mentionSuggestionsPopup);
-  }),
-      className = _useState[0],
-      setClassName = _useState[1];
-
+      return clsx(theme.mentionSuggestions, theme.mentionSuggestionsPopup);
+    }),
+    className = _useState[0],
+    setClassName = _useState[1];
   var _useState2 = useState(null),
-      popperElement = _useState2[0],
-      setPopperElement = _useState2[1];
-
+    popperElement = _useState2[0],
+    setPopperElement = _useState2[1];
   var _usePopper = usePopper(store.getReferenceElement(), popperElement, popperOptions),
-      styles = _usePopper.styles,
-      attributes = _usePopper.attributes;
-
+    styles = _usePopper.styles,
+    attributes = _usePopper.attributes;
   useEffect(function () {
     requestAnimationFrame(function () {
       return setClassName(clsx(theme.mentionSuggestions, theme.mentionSuggestionsPopup, theme.mentionSuggestionsPopupVisible));
@@ -503,208 +458,157 @@ function Popover(_ref) {
 var _excluded = ["entryComponent", "popoverComponent", "popperOptions", "popoverContainer", "onOpenChange", "onAddMention", "onSearchChange", "suggestions", "ariaProps", "callbacks", "theme", "store", "entityMutability", "positionSuggestions", "mentionTriggers", "mentionPrefix"];
 var MentionSuggestions = /*#__PURE__*/function (_Component) {
   _inheritsLoose(MentionSuggestions, _Component);
-
   function MentionSuggestions(props) {
     var _this;
-
     _this = _Component.call(this, props) || this;
     _this.state = {
       focusedOptionIndex: 0
     };
     _this.key = genKey();
-    _this.popover = void 0;
-    _this.activeOffsetKey = void 0;
-    _this.lastSearchValue = void 0;
     _this.lastActiveTrigger = '';
-    _this.lastSelectionIsInsideWord = void 0;
-
     _this.onEditorStateChange = function (editorState) {
-      var searches = _this.props.store.getAllSearches(); // if no search portal is active there is no need to show the popover
-
-
+      var searches = _this.props.store.getAllSearches();
+      // if no search portal is active there is no need to show the popover
       if (searches.size === 0) {
         return editorState;
       }
-
       var removeList = function removeList() {
         _this.props.store.resetEscapedSearch();
-
         _this.closeDropdown();
-
         return editorState;
       };
-
       var triggerForMention = getTriggerForMention(editorState, searches, _this.props.mentionTriggers);
-
       if (!triggerForMention) {
         return removeList();
       }
-
       var lastActiveOffsetKey = _this.activeOffsetKey;
       _this.activeOffsetKey = triggerForMention.activeOffsetKey;
+      _this.onSearchChange(editorState, editorState.getSelection(), _this.activeOffsetKey, lastActiveOffsetKey, triggerForMention.activeTrigger);
 
-      _this.onSearchChange(editorState, editorState.getSelection(), _this.activeOffsetKey, lastActiveOffsetKey, triggerForMention.activeTrigger); // make sure the escaped search is reseted in the cursor since the user
+      // make sure the escaped search is reseted in the cursor since the user
       // already switched to another mention search
-
-
       if (!_this.props.store.isEscaped(_this.activeOffsetKey || '')) {
         _this.props.store.resetEscapedSearch();
-      } // If none of the above triggered to close the window, it's safe to assume
+      }
+
+      // If none of the above triggered to close the window, it's safe to assume
       // the dropdown should be open. This is useful when a user focuses on another
       // input field and then comes back: the dropdown will show again.
-
-
       if (!_this.props.open && !_this.props.store.isEscaped(_this.activeOffsetKey || '')) {
         _this.openDropdown();
-      } // makes sure the focused index is reseted every time a new selection opens
+      }
+      // makes sure the focused index is reseted every time a new selection opens
       // or the selection was moved to another mention search
-
-
       if (lastActiveOffsetKey !== _this.activeOffsetKey) {
         _this.setState({
           focusedOptionIndex: 0
         });
       }
-
       return editorState;
     };
-
     _this.onSearchChange = function (editorState, selection, activeOffsetKey, lastActiveOffsetKey, trigger) {
       var _getSearchText = getSearchText(editorState, selection, [trigger]),
-          searchValue = _getSearchText.matchingString;
-
+        searchValue = _getSearchText.matchingString;
       if (_this.lastActiveTrigger !== trigger || _this.lastSearchValue !== searchValue || activeOffsetKey !== lastActiveOffsetKey) {
         _this.lastActiveTrigger = trigger;
         _this.lastSearchValue = searchValue;
-
         _this.props.onSearchChange({
           trigger: trigger,
           value: searchValue
-        }); //reset focus item if search is cahnged
-
-
+        });
+        //reset focus item if search is cahnged
         _this.setState({
           focusedOptionIndex: 0
         });
       }
     };
-
     _this.onDownArrow = function (keyboardEvent) {
       keyboardEvent.preventDefault();
       var newIndex = _this.state.focusedOptionIndex + 1;
-
       _this.onMentionFocus(newIndex >= _this.props.suggestions.length ? 0 : newIndex);
     };
-
     _this.onTab = function (keyboardEvent) {
       keyboardEvent.preventDefault();
-
       _this.commitSelection();
     };
-
     _this.onUpArrow = function (keyboardEvent) {
       keyboardEvent.preventDefault();
-
       if (_this.props.suggestions.length > 0) {
         var newIndex = _this.state.focusedOptionIndex - 1;
-
         _this.onMentionFocus(newIndex < 0 ? _this.props.suggestions.length - 1 : newIndex);
       }
     };
-
     _this.onEscape = function (keyboardEvent) {
       keyboardEvent.preventDefault();
-
       _this.props.store.escapeSearch(_this.activeOffsetKey || '');
+      _this.closeDropdown();
 
-      _this.closeDropdown(); // to force a re-render of the outer component to change the aria props
-
-
+      // to force a re-render of the outer component to change the aria props
       _this.props.store.setEditorState(_this.props.store.getEditorState());
     };
-
     _this.onMentionSelect = function (mention) {
       // Note: This can happen in case a user typed @xxx (invalid mention) and
       // then hit Enter. Then the mention will be undefined.
       if (!mention) {
         return;
       }
-
       if (_this.props.onAddMention) {
         _this.props.onAddMention(mention);
       }
-
       _this.closeDropdown();
-
       var newEditorState = addMention(_this.props.store.getEditorState(), mention, _this.props.mentionPrefix, _this.lastActiveTrigger || '', _this.props.entityMutability);
-
       _this.props.store.setEditorState(newEditorState);
     };
-
     _this.onMentionFocus = function (index) {
       var descendant = "mention-option-" + _this.key + "-" + index;
       _this.props.ariaProps.ariaActiveDescendantID = descendant;
-
       _this.setState({
         focusedOptionIndex: index
-      }); // to force a re-render of the outer component to change the aria props
-
+      });
 
+      // to force a re-render of the outer component to change the aria props
       _this.props.store.setEditorState(_this.props.store.getEditorState());
     };
-
     _this.commitSelection = function () {
       var mention = _this.props.suggestions[_this.state.focusedOptionIndex];
-
       if (!_this.props.store.getIsOpened() || !mention) {
         return 'not-handled';
       }
-
       _this.onMentionSelect(mention);
-
       return 'handled';
     };
-
     _this.openDropdown = function () {
       // This is a really nasty way of attaching & releasing the key related functions.
       // It assumes that the keyFunctions object will not loose its reference and
       // by this we can replace inner parameters spread over different modules.
       // This better be some registering & unregistering logic. PRs are welcome :)
       _this.props.callbacks.handleReturn = _this.commitSelection;
-
       _this.props.callbacks.keyBindingFn = function (keyboardEvent) {
         // arrow down
         if (keyboardEvent.keyCode === 40) {
           _this.onDownArrow(keyboardEvent);
-        } // arrow up
-
-
+        }
+        // arrow up
         if (keyboardEvent.keyCode === 38) {
           _this.onUpArrow(keyboardEvent);
-        } // escape
-
-
+        }
+        // escape
         if (keyboardEvent.keyCode === 27) {
           _this.onEscape(keyboardEvent);
-        } // tab
-
-
+        }
+        // tab
         if (keyboardEvent.keyCode === 9) {
           _this.onTab(keyboardEvent);
         }
-
         return undefined;
       };
-
       var descendant = "mention-option-" + _this.key + "-" + _this.state.focusedOptionIndex;
       _this.props.ariaProps.ariaActiveDescendantID = descendant;
       _this.props.ariaProps.ariaOwneeID = "mentions-list-" + _this.key;
       _this.props.ariaProps.ariaHasPopup = 'true';
       _this.props.ariaProps.ariaExpanded = true;
-
       _this.props.onOpenChange(true);
     };
-
     _this.closeDropdown = function () {
       // make sure none of these callbacks are triggered
       _this.props.callbacks.handleReturn = undefined;
@@ -713,37 +617,31 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
       _this.props.ariaProps.ariaExpanded = false;
       _this.props.ariaProps.ariaActiveDescendantID = undefined;
       _this.props.ariaProps.ariaOwneeID = undefined;
-
       _this.props.onOpenChange(false);
     };
-
     _this.props.callbacks.onChange = _this.onEditorStateChange;
     return _this;
   }
-
   var _proto = MentionSuggestions.prototype;
-
   _proto.componentDidUpdate = function componentDidUpdate() {
     if (this.popover) {
       // In case the list shrinks there should be still an option focused.
       // Note: this might run multiple times and deduct 1 until the condition is
       // not fullfilled anymore.
       var size = this.props.suggestions.length;
-
       if (size > 0 && this.state.focusedOptionIndex >= size) {
         this.setState({
           focusedOptionIndex: size - 1
         });
-      } // Note: this is a simple protection for the error when componentDidUpdate
+      }
+
+      // Note: this is a simple protection for the error when componentDidUpdate
       // try to get new getPortalClientRect, but the key already was deleted by
       // previous action. (right now, it only can happened when set the mention
       // trigger to be multi-characters which not supported anyway!)
-
-
       if (!this.props.store.getAllSearches().has(this.activeOffsetKey)) {
         return;
       }
-
       var decoratorRect = this.props.store.getPortalClientRect(this.activeOffsetKey);
       var positionSuggestions$1 = this.props.positionSuggestions || positionSuggestions;
       var newStyles = positionSuggestions$1({
@@ -751,49 +649,49 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
         props: this.props,
         popover: this.popover
       });
-
       for (var _i = 0, _Object$entries = Object.entries(newStyles); _i < _Object$entries.length; _i++) {
         var _Object$entries$_i = _Object$entries[_i],
-            key = _Object$entries$_i[0],
-            value = _Object$entries$_i[1];
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.popover.style[key] = value;
       }
     }
   };
-
   _proto.componentWillUnmount = function componentWillUnmount() {
     this.props.callbacks.onChange = undefined;
   };
-
+  _proto.getMentionKey = function getMentionKey(mention, index) {
+    if (mention.key != null) return String(mention.key);
+    if (mention.id != null) return String(mention.id);
+    if (mention.name != null) return mention.name;
+    return String(index); // ultimate fallback
+  };
   _proto.render = function render() {
     var _this2 = this;
-
     if (!this.props.open) {
       return null;
     }
-
     var _this$props = this.props,
-        entryComponent = _this$props.entryComponent,
-        popoverComponent = _this$props.popoverComponent,
-        popperOptions = _this$props.popperOptions,
-        _this$props$popoverCo = _this$props.popoverContainer,
-        PopoverContainer = _this$props$popoverCo === void 0 ? Popover : _this$props$popoverCo;
-        _this$props.onOpenChange;
-        _this$props.onAddMention;
-        _this$props.onSearchChange;
-        _this$props.suggestions;
-        _this$props.ariaProps;
-        _this$props.callbacks;
-        var _this$props$theme = _this$props.theme,
-        theme = _this$props$theme === void 0 ? {} : _this$props$theme;
-        _this$props.store;
-        _this$props.entityMutability;
-        var positionSuggestions = _this$props.positionSuggestions;
-        _this$props.mentionTriggers;
-        _this$props.mentionPrefix;
-        var elementProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
+      entryComponent = _this$props.entryComponent,
+      popoverComponent = _this$props.popoverComponent,
+      popperOptions = _this$props.popperOptions,
+      _this$props$popoverCo = _this$props.popoverContainer,
+      PopoverContainer = _this$props$popoverCo === void 0 ? Popover : _this$props$popoverCo;
+      _this$props.onOpenChange;
+      _this$props.onAddMention;
+      _this$props.onSearchChange;
+      _this$props.suggestions;
+      _this$props.ariaProps;
+      _this$props.callbacks;
+      var _this$props$theme = _this$props.theme,
+      theme = _this$props$theme === void 0 ? {} : _this$props$theme;
+      _this$props.store;
+      _this$props.entityMutability;
+      var positionSuggestions = _this$props.positionSuggestions;
+      _this$props.mentionTriggers;
+      _this$props.mentionPrefix;
+      var elementProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     if (popoverComponent || positionSuggestions) {
       warning('The properties `popoverComponent` and `positionSuggestions` are deprecated and will be removed in @draft-js-plugins/mentions 6.0 . Use `popperOptions` instead');
       return /*#__PURE__*/React.cloneElement(popoverComponent || /*#__PURE__*/React.createElement("div", null), _extends({}, elementProps, {
@@ -804,8 +702,8 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
           _this2.popover = element;
         }
       }), this.props.suggestions.map(function (mention, index) {
-        return /*#__PURE__*/React.createElement(Entry$1, {
-          key: mention.id != null ? mention.id : mention.name,
+        return /*#__PURE__*/React.createElement(Entry, {
+          key: _this2.getMentionKey(mention, index),
           onMentionSelect: _this2.onMentionSelect,
           onMentionFocus: _this2.onMentionFocus,
           isFocused: _this2.state.focusedOptionIndex === index,
@@ -818,18 +716,16 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
         });
       }));
     }
-
     if (!this.props.renderEmptyPopup && this.props.suggestions.length === 0) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement(PopoverContainer, {
       store: this.props.store,
       popperOptions: popperOptions,
       theme: theme
     }, this.props.suggestions.map(function (mention, index) {
-      return /*#__PURE__*/React.createElement(Entry$1, {
-        key: mention.id != null ? mention.id : mention.name,
+      return /*#__PURE__*/React.createElement(Entry, {
+        key: _this2.getMentionKey(mention, index),
         onMentionSelect: _this2.onMentionSelect,
         onMentionFocus: _this2.onMentionFocus,
         isFocused: _this2.state.focusedOptionIndex === index,
@@ -842,7 +738,6 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
       });
     }));
   };
-
   return MentionSuggestions;
 }(Component);
 MentionSuggestions.propTypes = {
@@ -853,36 +748,35 @@ MentionSuggestions.propTypes = {
   onAddMention: PropTypes.func,
   suggestions: PropTypes.array.isRequired
 };
-var MentionSuggestions$1 = MentionSuggestions;
 
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function MentionSuggestionsPortal(props) {
-  var searchPortal = useRef(); // Note: this is a workaround for an obscure issue: https://github.com/draft-js-plugins/draft-js-plugins/pull/667/files
-  // Ideally we can remove this in the future.
+  var searchPortal = useRef();
 
+  // Note: this is a workaround for an obscure issue: https://github.com/draft-js-plugins/draft-js-plugins/pull/667/files
+  // Ideally we can remove this in the future.
   var searchPortalRef = function searchPortalRef(element) {
     searchPortal.current = element;
     props.store.setReferenceElement(element);
   };
-
   var updatePortalClientRect = function updatePortalClientRect(currentProps) {
     currentProps.store.updatePortalClientRect(currentProps.offsetKey, function () {
       return searchPortal.current.getBoundingClientRect();
     });
-  }; // When inputting Japanese characters (or any complex alphabet which requires
+  };
+
+  // When inputting Japanese characters (or any complex alphabet which requires
   // hitting enter to commit the characters), that action was causing a race
   // condition when we used UNSAFE_componentWillMount. By using componentDidMount
   // instead of UNSAFE_componentWillMount, the component will unmount unregister and
   // then properly mount and register after. Prior to this change,
   // UNSAFE_componentWillMount would not fire after componentWillUnmount even though it
   // was still in the DOM, so it wasn't re-registering the offsetkey.
-
-
   useIsomorphicLayoutEffect(function () {
     props.store.register(props.offsetKey);
     props.store.setIsOpened(true);
-    updatePortalClientRect(props); // trigger a re-render so the MentionSuggestions becomes active
-
+    updatePortalClientRect(props);
+    // trigger a re-render so the MentionSuggestions becomes active
     props.store.setEditorState(props.store.getEditorState());
     return function () {
       props.store.unregister(props.offsetKey);
@@ -890,6 +784,12 @@ function MentionSuggestionsPortal(props) {
       props.store.setReferenceElement(null);
     };
   }, []);
+  useEffect(function () {
+    // Use hook to set reference element. CFR: https://github.com/draft-js-plugins/draft-js-plugins/issues/2966
+    if (searchPortal.current) {
+      props.store.setReferenceElement(searchPortal.current);
+    }
+  }, [searchPortal.current]);
   useEffect(function () {
     updatePortalClientRect(props);
   });
@@ -898,19 +798,29 @@ function MentionSuggestionsPortal(props) {
   }, props.children);
 }
 
-var defaultRegExp = '[' + '\\w-' + // Latin-1 Supplement (letters only) - https://en.wikipedia.org/wiki/List_of_Unicode_characters#Latin-1_Supplement
-"\xC0-\xD6" + "\xD8-\xF6" + "\xF8-\xFF" + // Latin Extended-A (without deprecated character) - https://en.wikipedia.org/wiki/List_of_Unicode_characters#Latin_Extended-A
-"\u0100-\u0148" + "\u014A-\u017F" + // Cyrillic symbols: \u0410-\u044F - https://en.wikipedia.org/wiki/Cyrillic_script_in_Unicode
-"\u0410-\u044F" + // Symbols that are sometimes used in Japanese names: \u3005-\u3006
-"\u3005-\u3006" + // hiragana (japanese): \u3040-\u309F - https://gist.github.com/ryanmcgrath/982242#file-japaneseregex-js
-"\u3040-\u309F" + // katakana (japanese): \u30A0-\u30FF - https://gist.github.com/ryanmcgrath/982242#file-japaneseregex-js
-"\u30A0-\u30FF" + // For an advanced explaination about Hangul see https://github.com/draft-js-plugins/draft-js-plugins/pull/480#issuecomment-254055437
+var defaultRegExp = '[' + '\\w-' +
+// Latin-1 Supplement (letters only) - https://en.wikipedia.org/wiki/List_of_Unicode_characters#Latin-1_Supplement
+"\xC0-\xD6" + "\xD8-\xF6" + "\xF8-\xFF" +
+// Latin Extended-A (without deprecated character) - https://en.wikipedia.org/wiki/List_of_Unicode_characters#Latin_Extended-A
+"\u0100-\u0148" + "\u014A-\u017F" +
+// Cyrillic symbols: \u0410-\u044F - https://en.wikipedia.org/wiki/Cyrillic_script_in_Unicode
+"\u0410-\u044F" +
+// Symbols that are sometimes used in Japanese names: \u3005-\u3006
+"\u3005-\u3006" +
+// hiragana (japanese): \u3040-\u309F - https://gist.github.com/ryanmcgrath/982242#file-japaneseregex-js
+"\u3040-\u309F" +
+// katakana (japanese): \u30A0-\u30FF - https://gist.github.com/ryanmcgrath/982242#file-japaneseregex-js
+"\u30A0-\u30FF" +
+// For an advanced explaination about Hangul see https://github.com/draft-js-plugins/draft-js-plugins/pull/480#issuecomment-254055437
 // Hangul Jamo (korean): \u3130-\u318F - https://en.wikipedia.org/wiki/Korean_language_and_computers#Hangul_in_Unicode
 // Hangul Syllables (korean): \uAC00-\uD7A3 - https://en.wikipedia.org/wiki/Korean_language_and_computers#Hangul_in_Unicode
-"\u3130-\u318F" + "\uAC00-\uD7A3" + // common chinese symbols: \u4e00-\u9eff - http://stackoverflow.com/a/1366113/837709
+"\u3130-\u318F" + "\uAC00-\uD7A3" +
+// common chinese symbols: \u4e00-\u9eff - http://stackoverflow.com/a/1366113/837709
 // extended to \u9fa5 https://github.com/draft-js-plugins/draft-js-plugins/issues/1888
-"\u4E00-\u9FA5" + // Arabic https://en.wikipedia.org/wiki/Arabic_(Unicode_block)
-"\u0600-\u06FF" + // Vietnamese http://vietunicode.sourceforge.net/charset/
+"\u4E00-\u9FA5" +
+// Arabic https://en.wikipedia.org/wiki/Arabic_(Unicode_block)
+"\u0600-\u06FF" +
+// Vietnamese http://vietunicode.sourceforge.net/charset/
 "\xC0-\u1EF9" + ']';
 
 var defaultTheme = {
@@ -937,74 +847,63 @@ var findMentionEntities = function findMentionEntities(triggers) {
   };
 };
 
-var mentionStrategy = findMentionEntities;
-
 var whitespaceRegEx = /\s/;
-
 function checkForWhiteSpaceBeforeTrigger(text, index) {
   if (index === 0) {
     return true;
   }
-
   return whitespaceRegEx.test(text[index - 1]);
 }
-
 function findInContentBlock(regex, text, nonEntityStart, callback) {
   var matchArr;
   var start;
-  var prevLastIndex = regex.lastIndex; // Go through all matches in the text and return the indices to the callback
-  // Break the loop if lastIndex is not changed
+  var prevLastIndex = regex.lastIndex;
 
+  // Go through all matches in the text and return the indices to the callback
+  // Break the loop if lastIndex is not changed
   while ((matchArr = regex.exec(text)) !== null) {
     if (regex.lastIndex === prevLastIndex) {
       break;
     }
-
     prevLastIndex = regex.lastIndex;
     start = nonEntityStart + matchArr.index;
-
     var _end = start + matchArr[0].length;
-
     if (whitespaceRegEx.test(text[start])) {
       //trim the result so that we have no whitespaces
       start += 1;
     }
-
     callback(start, _end);
   }
 }
-
 function findInContentBlockWithWhitespace(regex, text, nonEntityStart, callback) {
   var matchArr;
   var start;
-  var prevLastIndex = regex.lastIndex; // Go through all matches in the text and return the indices to the callback
-  // Break the loop if lastIndex is not changed
+  var prevLastIndex = regex.lastIndex;
 
+  // Go through all matches in the text and return the indices to the callback
+  // Break the loop if lastIndex is not changed
   while ((matchArr = regex.exec(text)) !== null) {
     if (regex.lastIndex === prevLastIndex) {
       break;
     }
-
     prevLastIndex = regex.lastIndex;
     start = nonEntityStart + matchArr.index;
+    var _end2 = start + matchArr[0].length;
 
-    var _end2 = start + matchArr[0].length; //check if whitespace support is active that the char before the trigger is a white space #1844
-
-
+    //check if whitespace support is active that the char before the trigger is a white space #1844
     if (checkForWhiteSpaceBeforeTrigger(text, matchArr.index)) {
       callback(start, _end2);
     }
   }
 }
-
 var findWithRegex = function findWithRegex(regex, contentBlock, supportWhiteSpace, callback) {
-  var contentBlockText = contentBlock.getText(); // exclude entities, when matching
+  var contentBlockText = contentBlock.getText();
 
+  // exclude entities, when matching
   contentBlock.findEntityRanges(function (character) {
     return !character.getEntity();
   }, function (nonEntityStart, nonEntityEnd) {
     var text = contentBlockText.slice(nonEntityStart, nonEntityEnd);
-
     if (supportWhiteSpace) {
       findInContentBlockWithWhitespace(regex, text, nonEntityStart, callback);
     } else {
@@ -1012,7 +911,6 @@ var findWithRegex = function findWithRegex(regex, contentBlock, supportWhiteSpac
     }
   });
 };
-
 var mentionSuggestionsStrategy = (function (triggers, supportWhiteSpace, regExp) {
   var triggerPattern = "(" + triggers.map(function (trigger) {
     return escapeRegExp(trigger);
@@ -1024,6 +922,7 @@ var mentionSuggestionsStrategy = (function (triggers, supportWhiteSpace, regExp)
 });
 
 // Get the first 5 suggestions that match
+
 var defaultSuggestionsFilter$1 = function defaultSuggestionsFilter(searchValue, suggestions, trigger) {
   var value = searchValue.toLowerCase();
   var triggerSuggestions = trigger && !Array.isArray(suggestions) ? suggestions[trigger] : suggestions;
@@ -1034,13 +933,10 @@ var defaultSuggestionsFilter$1 = function defaultSuggestionsFilter(searchValue,
   return filteredSuggestions.slice(0, length);
 };
 
-var suggestionsFilter = defaultSuggestionsFilter$1;
-
 var index = (function (config) {
   if (config === void 0) {
     config = {};
   }
-
   var callbacks = {
     keyBindingFn: undefined,
     handleKeyCommand: undefined,
@@ -1098,31 +994,32 @@ var index = (function (config) {
     setReferenceElement: function setReferenceElement(element) {
       referenceElement = element;
     }
-  }; // Styles are overwritten instead of merged as merging causes a lot of confusion.
+  };
+
+  // Styles are overwritten instead of merged as merging causes a lot of confusion.
   //
   // Why? Because when merging a developer needs to know all of the underlying
   // styles which needs a deep dive into the code. Merging also makes it prone to
   // errors when upgrading as basically every styling change would become a major
   // breaking change. 1px of an increased padding can break a whole layout.
-
   var _config = config,
-      _config$mentionPrefix = _config.mentionPrefix,
-      mentionPrefix = _config$mentionPrefix === void 0 ? '' : _config$mentionPrefix,
-      _config$theme = _config.theme,
-      theme = _config$theme === void 0 ? defaultTheme : _config$theme,
-      positionSuggestions = _config.positionSuggestions,
-      mentionComponent = _config.mentionComponent,
-      _config$mentionSugges = _config.mentionSuggestionsComponent,
-      MentionSuggestionsComponent = _config$mentionSugges === void 0 ? MentionSuggestions$1 : _config$mentionSugges,
-      _config$entityMutabil = _config.entityMutability,
-      entityMutability = _config$entityMutabil === void 0 ? 'SEGMENTED' : _config$entityMutabil,
-      _config$mentionTrigge = _config.mentionTrigger,
-      mentionTrigger = _config$mentionTrigge === void 0 ? '@' : _config$mentionTrigge,
-      _config$mentionRegExp = _config.mentionRegExp,
-      mentionRegExp = _config$mentionRegExp === void 0 ? defaultRegExp : _config$mentionRegExp,
-      _config$supportWhites = _config.supportWhitespace,
-      supportWhitespace = _config$supportWhites === void 0 ? false : _config$supportWhites,
-      popperOptions = _config.popperOptions;
+    _config$mentionPrefix = _config.mentionPrefix,
+    mentionPrefix = _config$mentionPrefix === void 0 ? '' : _config$mentionPrefix,
+    _config$theme = _config.theme,
+    theme = _config$theme === void 0 ? defaultTheme : _config$theme,
+    positionSuggestions = _config.positionSuggestions,
+    mentionComponent = _config.mentionComponent,
+    _config$mentionSugges = _config.mentionSuggestionsComponent,
+    MentionSuggestionsComponent = _config$mentionSugges === void 0 ? MentionSuggestions : _config$mentionSugges,
+    _config$entityMutabil = _config.entityMutability,
+    entityMutability = _config$entityMutabil === void 0 ? 'SEGMENTED' : _config$entityMutabil,
+    _config$mentionTrigge = _config.mentionTrigger,
+    mentionTrigger = _config$mentionTrigge === void 0 ? '@' : _config$mentionTrigge,
+    _config$mentionRegExp = _config.mentionRegExp,
+    mentionRegExp = _config$mentionRegExp === void 0 ? defaultRegExp : _config$mentionRegExp,
+    _config$supportWhites = _config.supportWhitespace,
+    supportWhitespace = _config$supportWhites === void 0 ? false : _config$supportWhites,
+    popperOptions = _config.popperOptions;
   var mentionTriggers = typeof mentionTrigger === 'string' ? [mentionTrigger] : mentionTrigger;
   var mentionSearchProps = {
     ariaProps: ariaProps,
@@ -1135,28 +1032,24 @@ var index = (function (config) {
     mentionPrefix: mentionPrefix,
     popperOptions: popperOptions
   };
-
   var DecoratedMentionSuggestionsComponent = function DecoratedMentionSuggestionsComponent(props) {
     return /*#__PURE__*/React.createElement(MentionSuggestionsComponent, _extends({}, props, mentionSearchProps));
   };
-
   var DecoratedMention = function DecoratedMention(props) {
     return /*#__PURE__*/React.createElement(Mention, _extends({}, props, {
       theme: theme,
       mentionComponent: mentionComponent
     }));
   };
-
   var DecoratedMentionSuggestionsPortal = function DecoratedMentionSuggestionsPortal(props) {
     return /*#__PURE__*/React.createElement(MentionSuggestionsPortal, _extends({}, props, {
       store: store
     }));
   };
-
   return {
     MentionSuggestions: DecoratedMentionSuggestionsComponent,
     decorators: [{
-      strategy: mentionStrategy(mentionTriggers),
+      strategy: findMentionEntities(mentionTriggers),
       component: DecoratedMention
     }, {
       strategy: mentionSuggestionsStrategy(mentionTriggers, supportWhitespace, mentionRegExp),
@@ -1174,7 +1067,7 @@ var index = (function (config) {
     },
     initialize: function initialize(_ref) {
       var getEditorState = _ref.getEditorState,
-          setEditorState = _ref.setEditorState;
+        setEditorState = _ref.setEditorState;
       store.getEditorState = getEditorState;
       store.setEditorState = setEditorState;
     },
@@ -1188,11 +1081,10 @@ var index = (function (config) {
       if (callbacks.onChange) {
         return callbacks.onChange(editorState);
       }
-
       return editorState;
     }
   };
 });
-var defaultSuggestionsFilter = suggestionsFilter;
+var defaultSuggestionsFilter = defaultSuggestionsFilter$1;
 
-export { MentionSuggestions$1 as MentionSuggestions, Popover, addMention, index as default, defaultSuggestionsFilter, defaultTheme };
+export { MentionSuggestions, Popover, addMention, index as default, defaultSuggestionsFilter, defaultTheme };