From 60d66dfe5734fc84883ba9d0114736561f79657b Mon Sep 17 00:00:00 2001
From: Ondrej <ndrjkvc@gmail.com>
Date: Tue, 17 Sep 2019 10:52:09 +0200
Subject: [PATCH] Support matching suggestions on spacebar

---
 draft-js-mention-plugin/package.json            |  2 +-
 .../src/MentionSuggestions/index.js             | 17 +++++++++++++++++
 draft-js-mention-plugin/src/index.js            |  2 ++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/draft-js-mention-plugin/package.json b/draft-js-mention-plugin/package.json
index 87009fb6bb..d05125fb02 100644
--- a/draft-js-mention-plugin/package.json
+++ b/draft-js-mention-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "draft-js-mention-plugin",
-  "version": "3.1.5",
+  "version": "3.1.5-withAutocomplete",
   "description": "Mention Plugin for DraftJS",
   "author": {
     "name": "Nik Graf",
diff --git a/draft-js-mention-plugin/src/MentionSuggestions/index.js b/draft-js-mention-plugin/src/MentionSuggestions/index.js
index 93c42a1f9f..9616df2c61 100644
--- a/draft-js-mention-plugin/src/MentionSuggestions/index.js
+++ b/draft-js-mention-plugin/src/MentionSuggestions/index.js
@@ -1,3 +1,4 @@
+import find from 'lodash/find';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { genKey } from 'draft-js';
@@ -12,6 +13,7 @@ export class MentionSuggestions extends Component {
   static propTypes = {
     entityMutability: PropTypes.oneOf(['SEGMENTED', 'IMMUTABLE', 'MUTABLE']),
     entryComponent: PropTypes.func,
+    matchSuggestion: PropTypes.func,
     onAddMention: PropTypes.func,
     suggestions: PropTypes.array,
   };
@@ -245,6 +247,16 @@ export class MentionSuggestions extends Component {
     this.props.store.setEditorState(this.props.store.getEditorState());
   };
 
+  onSpacebar = keyboardEvent => {
+    const matchingSuggestion = find(this.props.suggestions, suggestion =>
+      this.props.matchSuggestion(suggestion, this.lastSearchValue)
+    );
+    if (matchingSuggestion) {
+      keyboardEvent.preventDefault();
+      this.onMentionSelect(matchingSuggestion);
+    }
+  };
+
   onMentionSelect = mention => {
     // Note: This can happen in case a user typed @xxx (invalid mention) and
     // then hit Enter. Then the mention will be undefined.
@@ -310,6 +322,10 @@ export class MentionSuggestions extends Component {
       if (keyboardEvent.keyCode === 9) {
         this.onTab(keyboardEvent);
       }
+      // spacebar
+      if (keyboardEvent.keyCode === 32) {
+        this.onSpacebar(keyboardEvent);
+      }
     };
 
     const descendant = `mention-option-${this.key}-${this.state.focusedOptionIndex}`;
@@ -364,6 +380,7 @@ export class MentionSuggestions extends Component {
       positionSuggestions, // eslint-disable-line no-unused-vars
       mentionTrigger, // eslint-disable-line no-unused-vars
       mentionPrefix, // eslint-disable-line no-unused-vars
+      matchSuggestion, // eslint-disable-line no-unused-vars
       ...elementProps
     } = this.props;
 
diff --git a/draft-js-mention-plugin/src/index.js b/draft-js-mention-plugin/src/index.js
index 3a198f88bc..fe0556795a 100644
--- a/draft-js-mention-plugin/src/index.js
+++ b/draft-js-mention-plugin/src/index.js
@@ -83,6 +83,7 @@ export default (config = {}) => {
     mentionTrigger = '@',
     mentionRegExp = defaultRegExp,
     supportWhitespace = false,
+    matchSuggestion,
   } = config;
   const mentionSearchProps = {
     ariaProps,
@@ -93,6 +94,7 @@ export default (config = {}) => {
     positionSuggestions,
     mentionTrigger,
     mentionPrefix,
+    matchSuggestion,
   };
   const DecoratedMentionSuggestionsComponent = props => (
     <MentionSuggestionsComponent {...props} {...mentionSearchProps} />