feat: implement autocomplete replacement

src/autocomplete/UserProvider.js

@@ -1,6 +1,8 @@
+import React from 'react';
 import AutocompleteProvider from './AutocompleteProvider';
 import Q from 'q';
 import Fuse from 'fuse.js';
+import {TextualCompletion} from './Components';
 
 const USER_REGEX = /@[^\s]*/g;
 
@@ -9,23 +11,27 @@ let instance = null;
 export default class UserProvider extends AutocompleteProvider {
     constructor() {
         super(USER_REGEX, {
-            keys: ['displayName', 'userId']
+            keys: ['displayName', 'userId'],
         });
         this.users = [];
         this.fuse = new Fuse([], {
-            keys: ['displayName', 'userId']
-        })
+            keys: ['displayName', 'userId'],
+        });
     }
 
     getCompletions(query: string, selection: {start: number, end: number}) {
         let completions = [];
-        let command = this.getCurrentCommand(query, selection);
-        if(command) {
+        let {command, range} = this.getCurrentCommand(query, selection);
+        if (command) {
             this.fuse.set(this.users);
             completions = this.fuse.search(command[0]).map(user => {
                 return {
-                    title: user.displayName || user.userId,
-                    description: user.userId
+                    completion: user.userId,
+                    component: (
+                        <TextualCompletion
+                            title={user.displayName || user.userId}
+                            description={user.userId} />
+                    ),
                 };
             }).slice(0, 4);
         }
@@ -41,8 +47,9 @@ export default class UserProvider extends AutocompleteProvider {
     }
 
     static getInstance(): UserProvider {
-        if(instance == null)
+        if (instance == null) {
             instance = new UserProvider();
+        }
         return instance;
     }
 }