Implement composer completion user/room pill insertion

This modifies the composer completion such that completing a room or user will insert an IMMUTABLE matrix.to LINK Entity for the range that was replaced. Display names will not have a colon after their name anymore as it seemed strange that we would insert one after a pill.

src/autocomplete/Autocompleter.js

@@ -34,6 +34,12 @@ export type Completion = {
     component: ?Component,
     range: SelectionRange,
     command: ?string,
+    // An entity applied during the replacement (using draftjs@0.8.1 Entity.create)
+    entity: ? {
+        type: string,
+        mutability: string,
+        data: ?Object,
+    },
 };
 
 const PROVIDERS = [

src/autocomplete/RoomProvider.js

@@ -52,9 +52,16 @@ export default class RoomProvider extends AutocompleteProvider {
                 };
             }));
             completions = this.matcher.match(command[0]).map(room => {
-                let displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
+                const displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
                 return {
-                    completion: displayAlias + ' ',
+                    completion: displayAlias,
+                    entity: {
+                        type: 'LINK',
+                        mutability: 'IMMUTABLE',
+                        data: {
+                            url: 'https://matrix.to/#/' + displayAlias,
+                        },
+                    },
                     component: (
                         <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={room.room} />} title={room.name} description={displayAlias} />
                     ),

src/autocomplete/UserProvider.js

@@ -51,16 +51,17 @@ export default class UserProvider extends AutocompleteProvider {
         let completions = [];
         let {command, range} = this.getCurrentCommand(query, selection, force);
         if (command) {
-            completions = this.matcher.match(command[0]).slice(0, 4).map((user) => {
-                let displayName = (user.name || user.userId || '').replace(' (IRC)', ''); // FIXME when groups are done
-                let completion = displayName;
-                if (range.start === 0) {
-                    completion += ': ';
-                } else {
-                    completion += ' ';
-                }
+            completions = this.matcher.match(command[0]).map((user) => {
+                const displayName = (user.name || user.userId || '').replace(' (IRC)', ''); // FIXME when groups are done
                 return {
-                    completion,
+                    completion: displayName,
+                    entity: {
+                        type: 'LINK',
+                        mutability: 'IMMUTABLE',
+                        data: {
+                            url: 'https://matrix.to/#/' + user.userId,
+                        },
+                    },
                     component: (
                         <PillCompletion
                             initialComponent={<MemberAvatar member={user} width={24} height={24}/>}