Hide/show autocomplete based on selection state

src/autocomplete/AutocompleteProvider.js

@@ -1,4 +1,41 @@
+import Q from 'q';
+
 export default class AutocompleteProvider {
+    constructor(commandRegex?: RegExp, fuseOpts?: any) {
+        if(commandRegex) {
+            if(!commandRegex.global) {
+                throw new Error('commandRegex must have global flag set');
+            }
+            this.commandRegex = commandRegex;
+        }
+    }
+
+    /**
+     * Of the matched commands in the query, returns the first that contains or is contained by the selection, or null.
+     */
+    getCurrentCommand(query: string, selection: {start: number, end: number}): ?Array<string> {
+        if(this.commandRegex == null)
+            return null;
+
+        let match = null;
+        while((match = this.commandRegex.exec(query)) != null) {
+            let matchStart = match.index,
+                matchEnd = matchStart + match[0].length;
+
+            console.log(match);
+            
+            if(selection.start <= matchEnd && selection.end >= matchStart) {
+                return match;
+            }
+        }
+        this.commandRegex.lastIndex = 0;
+        return null;
+    }
+
+    getCompletions(query: String, selection: {start: number, end: number}) {
+        return Q.when([]);
+    }
+
     getName(): string {
         return 'Default Provider';
     }

src/autocomplete/Autocompleter.js

@@ -12,10 +12,10 @@ const PROVIDERS = [
     EmojiProvider
 ].map(completer => completer.getInstance());
 
-export function getCompletions(query: String) {
+export function getCompletions(query: string, selection: {start: number, end: number}) {
     return PROVIDERS.map(provider => {
         return {
-            completions: provider.getCompletions(query),
+            completions: provider.getCompletions(query, selection),
             provider
         };
     });

src/autocomplete/CommandProvider.js

@@ -39,22 +39,23 @@ const COMMANDS = [
     }
 ];
 
+let COMMAND_RE = /(^\/\w*)/g;
+
 let instance = null;
 
 export default class CommandProvider extends AutocompleteProvider {
     constructor() {
-        super();
+        super(COMMAND_RE);
         this.fuse = new Fuse(COMMANDS, {
            keys: ['command', 'args', 'description']
         });
     }
 
-    getCompletions(query: String) {
+    getCompletions(query: string, selection: {start: number, end: number}) {
         let completions = [];
-        const matches = query.match(/(^\/\w*)/);
-        if(!!matches) {
-            const command = matches[0];
-            completions = this.fuse.search(command).map(result => {
+        const command = this.getCurrentCommand(query, selection);
+        if(command) {
+            completions = this.fuse.search(command[0]).map(result => {
                 return {
                     title: result.command,
                     subtitle: result.args,

src/autocomplete/DuckDuckGoProvider.js

@@ -2,23 +2,27 @@ import AutocompleteProvider from './AutocompleteProvider';
 import Q from 'q';
 import 'whatwg-fetch';
 
-const DDG_REGEX = /\/ddg\s+(.+)$/;
+const DDG_REGEX = /\/ddg\s+(.+)$/g;
 const REFERER = 'vector';
 
 let instance = null;
 
 export default class DuckDuckGoProvider extends AutocompleteProvider {
+    constructor() {
+        super(DDG_REGEX);
+    }
+    
     static getQueryUri(query: String) {
         return `http://api.duckduckgo.com/?q=${encodeURIComponent(query)}`
          + `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERER)}`;
     }
 
-    getCompletions(query: String) {
-        let match = DDG_REGEX.exec(query);
-        if(!query || !match)
+    getCompletions(query: string, selection: {start: number, end: number}) {
+        let command = this.getCurrentCommand(query, selection);
+        if(!query || !command)
             return Q.when([]);
 
-        return fetch(DuckDuckGoProvider.getQueryUri(match[1]), {
+        return fetch(DuckDuckGoProvider.getQueryUri(command[1]), {
             method: 'GET'
         })
             .then(response => response.json())

src/autocomplete/EmojiProvider.js

@@ -10,16 +10,15 @@ let instance = null;
 
 export default class EmojiProvider extends AutocompleteProvider {
     constructor() {
-        super();
+        super(EMOJI_REGEX);
         this.fuse = new Fuse(EMOJI_SHORTNAMES);
     }
 
-    getCompletions(query: String) {
+    getCompletions(query: string, selection: {start: number, end: number}) {
         let completions = [];
-        let matches = query.match(EMOJI_REGEX);
-        let command = matches && matches[0];
+        let command = this.getCurrentCommand(query, selection);
         if(command) {
-            completions = this.fuse.search(command).map(result => {
+            completions = this.fuse.search(command[0]).map(result => {
                 let shortname = EMOJI_SHORTNAMES[result];
                 let imageHTML = shortnameToImage(shortname);
                 return {

src/autocomplete/RoomProvider.js

@@ -9,17 +9,18 @@ let instance = null;
 
 export default class RoomProvider extends AutocompleteProvider {
     constructor() {
-        super();
+        super(ROOM_REGEX, {
+            keys: ['displayName', 'userId']
+        });
         this.fuse = new Fuse([], {
            keys: ['name', 'roomId', 'aliases']
         });
     }
 
-    getCompletions(query: String) {
+    getCompletions(query: string, selection: {start: number, end: number}) {
         let client = MatrixClientPeg.get();
         let completions = [];
-        const matches = query.match(ROOM_REGEX);
-        const command = matches && matches[0];
+        const command = this.getCurrentCommand(query, selection);
         if(command) {
             // the only reason we need to do this is because Fuse only matches on properties
             this.fuse.set(client.getRooms().filter(room => !!room).map(room => {
@@ -29,7 +30,7 @@ export default class RoomProvider extends AutocompleteProvider {
                     aliases: room.getAliases()
                 };
             }));
-            completions = this.fuse.search(command).map(room => {
+            completions = this.fuse.search(command[0]).map(room => {
                 return {
                     title: room.name,
                     subtitle: room.roomId

src/autocomplete/UserProvider.js

@@ -2,26 +2,27 @@ import AutocompleteProvider from './AutocompleteProvider';
 import Q from 'q';
 import Fuse from 'fuse.js';
 
-const ROOM_REGEX = /@[^\s]*/g;
+const USER_REGEX = /@[^\s]*/g;
 
 let instance = null;
 
 export default class UserProvider extends AutocompleteProvider {
     constructor() {
-        super();
+        super(USER_REGEX, {
+            keys: ['displayName', 'userId']
+        });
         this.users = [];
         this.fuse = new Fuse([], {
             keys: ['displayName', 'userId']
         })
     }
 
-    getCompletions(query: String) {
+    getCompletions(query: string, selection: {start: number, end: number}) {
         let completions = [];
-        let matches = query.match(ROOM_REGEX);
-        let command = matches && matches[0];
+        let command = this.getCurrentCommand(query, selection);
         if(command) {
             this.fuse.set(this.users);
-            completions = this.fuse.search(command).map(user => {
+            completions = this.fuse.search(command[0]).map(user => {
                 return {
                     title: user.displayName || user.userId,
                     description: user.userId