Fixed ChannelMentionProvider matching completed mentions (#5188)

webapp/components/suggestion/channel_mention_provider.jsx

@@ -51,73 +51,83 @@ class ChannelMentionSuggestion extends Suggestion {
 }
 
 export default class ChannelMentionProvider extends Provider {
+    constructor() {
+        super();
+
+        this.lastCompletedWord = '';
+    }
+
     handlePretextChanged(suggestionId, pretext) {
-        const captured = (/(^|\s)(~([^~]*))$/i).exec(pretext.toLowerCase());
+        const captured = (/(^|\s)(~([^~\r\n]*))$/i).exec(pretext.toLowerCase());
-        if (captured) {
-            const prefix = captured[3];
 
-            if ((/\s/).test(prefix)) {
+        if (!captured) {
-                // If there's a space, there's a chance that we've already completed this mention
+            // Not a channel mention
-                const firstWordOfPrefix = prefix.split(' ')[0];
+            return;
+        }
 
-                for (const channel of ChannelStore.getChannels()) {
+        if (this.lastCompletedWord && captured[0].startsWith(this.lastCompletedWord)) {
-                    if (firstWordOfPrefix === channel.name) {
+            // It appears we're still matching a channel handle that we already completed
-                        // We've already mentioned this channel so there's nothing else to look for
+            return;
-                        return;
+        }
-                    }
+
+        // Clear the last completed word since we've started to match new text
+        this.lastCompletedWord = '';
+
+        const prefix = captured[3];
+
+        this.startNewRequest(prefix);
+
+        autocompleteChannels(
+            prefix,
+            (data) => {
+                if (this.shouldCancelDispatch(prefix)) {
+                    return;
                 }
-            }
 
-            this.startNewRequest(prefix);
+                const channels = data;
 
-            autocompleteChannels(
+                // Wrap channels in an outer object to avoid overwriting the 'type' property.
-                prefix,
+                const wrappedChannels = [];
-                (data) => {
+                const wrappedMoreChannels = [];
-                    if (this.shouldCancelDispatch(prefix)) {
+                const moreChannels = [];
-                        return;
+                channels.forEach((item) => {
-                    }
+                    if (ChannelStore.get(item.id)) {
-
+                        wrappedChannels.push({
-                    const channels = data;
+                            type: Constants.MENTION_CHANNELS,
-
-                    // Wrap channels in an outer object to avoid overwriting the 'type' property.
-                    const wrappedChannels = [];
-                    const wrappedMoreChannels = [];
-                    const moreChannels = [];
-                    channels.forEach((item) => {
-                        if (ChannelStore.get(item.id)) {
-                            wrappedChannels.push({
-                                type: Constants.MENTION_CHANNELS,
-                                channel: item
-                            });
-                            return;
-                        }
-
-                        wrappedMoreChannels.push({
-                            type: Constants.MENTION_MORE_CHANNELS,
                             channel: item
                         });
+                        return;
+                    }
 
-                        moreChannels.push(item);
+                    wrappedMoreChannels.push({
+                        type: Constants.MENTION_MORE_CHANNELS,
+                        channel: item
                     });
 
-                    const wrapped = wrappedChannels.concat(wrappedMoreChannels);
+                    moreChannels.push(item);
-                    const mentions = wrapped.map((item) => '~' + item.channel.name);
+                });
 
-                    AppDispatcher.handleServerAction({
+                const wrapped = wrappedChannels.concat(wrappedMoreChannels);
-                        type: ActionTypes.RECEIVED_MORE_CHANNELS,
+                const mentions = wrapped.map((item) => '~' + item.channel.name);
-                        channels: moreChannels
-                    });
 
-                    AppDispatcher.handleServerAction({
+                AppDispatcher.handleServerAction({
-                        type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
+                    type: ActionTypes.RECEIVED_MORE_CHANNELS,
-                        id: suggestionId,
+                    channels: moreChannels
-                        matchedPretext: captured[2],
+                });
-                        terms: mentions,
+
-                        items: wrapped,
+                AppDispatcher.handleServerAction({
-                        component: ChannelMentionSuggestion
+                    type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
-                    });
+                    id: suggestionId,
-                }
+                    matchedPretext: captured[2],
-            );
+                    terms: mentions,
-        }
+                    items: wrapped,
+                    component: ChannelMentionSuggestion
+                });
+            }
+        );
+    }
+
+    handleCompleteWord(term) {
+        this.lastCompletedWord = term;
     }
 }

webapp/components/suggestion/suggestion_box.jsx

@@ -153,6 +153,12 @@ export default class SuggestionBox extends React.Component {
         window.requestAnimationFrame(() => {
             Utils.setCaretPosition(textbox, prefix.length + term.length + 1);
         });
+
+        for (const provider of this.props.providers) {
+            if (provider.handleCompleteWord) {
+                provider.handleCompleteWord(term, matchedPretext);
+            }
+        }
     }
 
     handleKeyDown(e) {