insert command completion as command part (instead of plain)

this prevents the command being sent as plain text

this adds a `type` property to completions to decide which
parts should be inserted into the composer, hence deciding how
they will be rendered.

src/autocomplete/CommandProvider.js

@@ -64,6 +64,7 @@ export default class CommandProvider extends AutocompleteProvider {
         return matches.map((result) => ({
             // If the command is the same as the one they entered, we don't want to discard their arguments
             completion: result.command === command[1] ? command[0] : (result.command + ' '),
+            type: "command",
             component: <TextualCompletion
                 title={result.command}
                 subtitle={result.args}

src/autocomplete/CommunityProvider.js

@@ -84,6 +84,7 @@ export default class CommunityProvider extends AutocompleteProvider {
             ]).map(({avatarUrl, groupId, name}) => ({
                 completion: groupId,
                 suffix: ' ',
+                type: "community",
                 href: makeGroupPermalink(groupId),
                 component: (
                     <PillCompletion initialComponent={

src/autocomplete/NotifProvider.js

@@ -42,6 +42,7 @@ export default class NotifProvider extends AutocompleteProvider {
             return [{
                 completion: '@room',
                 completionId: '@room',
+                type: "at-room",
                 suffix: ' ',
                 component: (
                     <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={this.room} />} title="@room" description={_t("Notify the whole room")} />

src/autocomplete/RoomProvider.js

@@ -89,6 +89,7 @@ export default class RoomProvider extends AutocompleteProvider {
                 return {
                     completion: displayAlias,
                     completionId: displayAlias,
+                    type: "room",
                     suffix: ' ',
                     href: makeRoomPermalink(displayAlias),
                     component: (

src/autocomplete/UserProvider.js

@@ -114,6 +114,7 @@ export default class UserProvider extends AutocompleteProvider {
                     // relies on the length of the entity === length of the text in the decoration.
                     completion: user.rawDisplayName,
                     completionId: user.userId,
+                    type: "user",
                     suffix: (selection.beginning && range.start === 0) ? ': ' : ' ',
                     href: makeUserPermalink(user.userId),
                     component: (