correctly send pills in messages

src/autocomplete/NotifProvider.js

@@ -40,6 +40,7 @@ export default class NotifProvider extends AutocompleteProvider {
         if (command && command[0] && '@room'.startsWith(command[0]) && command[0].length > 1) {
             return [{
                 completion: '@room',
+                completionId: '@room',
                 suffix: ' ',
                 component: (
                     <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={this.room} />} title="@room" description={_t("Notify the whole room")} />

src/autocomplete/PlainWithPillsSerializer.js

@@ -0,0 +1,89 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// Based originally on slate-plain-serializer
+
+import { Block } from 'slate';
+
+/**
+ * Plain text serializer, which converts a Slate `value` to a plain text string,
+ * serializing pills into various different formats as required.
+ *
+ * @type {PlainWithPillsSerializer}
+ */
+
+class PlainWithPillsSerializer {
+
+    /*
+     * @param {String} options.pillFormat - either 'md', 'plain', 'id'
+     */
+    constructor(options = {}) {
+        let {
+            pillFormat = 'plain',
+        } = options;
+        this.pillFormat = pillFormat;
+    }
+
+    /**
+     * Serialize a Slate `value` to a plain text string,
+     * serializing pills as either MD links, plain text representations or
+     * ID representations as required.
+     *
+     * @param {Value} value
+     * @return {String}
+     */
+    serialize = value => {
+        return this._serializeNode(value.document)
+    }
+
+    /**
+     * Serialize a `node` to plain text.
+     *
+     * @param {Node} node
+     * @return {String}
+     */
+    _serializeNode = node => {
+        if (
+            node.object == 'document' ||
+            (node.object == 'block' && Block.isBlockList(node.nodes))
+        ) {
+            return node.nodes.map(this._serializeNode).join('\n');
+        } else if (node.type == 'pill') {
+            switch (this.pillFormat) {
+                case 'plain':
+                    return node.text;
+                case 'md':
+                    return `[${ node.text }](${ node.data.get('url') })`;
+                case 'id':
+                    return node.data.completionId || node.text;
+            }
+        }
+        else if (node.nodes) {
+            return node.nodes.map(this._serializeNode).join('');
+        }
+        else {
+            return node.text;
+        }
+    }
+}
+
+/**
+ * Export.
+ *
+ * @type {PlainWithPillsSerializer}
+ */
+
+export default PlainWithPillsSerializer

src/autocomplete/RoomProvider.js

@@ -78,6 +78,7 @@ export default class RoomProvider extends AutocompleteProvider {
                 const displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
                 return {
                     completion: displayAlias,
+                    completionId: displayAlias,
                     suffix: ' ',
                     href: makeRoomPermalink(displayAlias),
                     component: (

src/autocomplete/UserProvider.js

@@ -113,6 +113,7 @@ export default class UserProvider extends AutocompleteProvider {
                     // Length of completion should equal length of text in decorator. draft-js
                     // relies on the length of the entity === length of the text in the decoration.
                     completion: user.rawDisplayName.replace(' (IRC)', ''),
+                    completionId: user.userId,
                     suffix: range.start === 0 ? ': ' : ' ',
                     href: makeUserPermalink(user.userId),
                     component: (