Insert MD links when autocompleting in MD mode

These will appear decorated because they are inserted as entities. It was necessary to modify pills to have an explicit linkText that is derived from the `href` being pillified (and is thus no longer the inserted completion but rather the display name (or user ID) or room alias.

src/autocomplete/RoomProvider.js

@@ -55,13 +55,8 @@ export default class RoomProvider extends AutocompleteProvider {
                 const displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
                 return {
                     completion: displayAlias,
-                    entity: {
+                    suffix: ' ',
-                        type: 'LINK',
+                    href: 'https://matrix.to/#/' + displayAlias,
-                        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

@@ -56,13 +56,7 @@ export default class UserProvider extends AutocompleteProvider {
                 return {
                     completion: displayName,
                     suffix: range.start === 0 ? ': ' : ' ',
-                    entity: {
+                    href: 'https://matrix.to/#/' + user.userId,
-                        type: 'LINK',
-                        mutability: 'IMMUTABLE',
-                        data: {
-                            url: 'https://matrix.to/#/' + user.userId,
-                        },
-                    },
                     component: (
                         <PillCompletion
                             initialComponent={<MemberAvatar member={user} width={24} height={24}/>}

src/components/views/rooms/MessageComposerInput.js

@@ -198,6 +198,9 @@ export default class MessageComposerInput extends React.Component {
                 const resource = matrixToMatch[1]; // The room/user ID
                 const prefix = matrixToMatch[2]; // The first character of prefix
 
+                // Default to the room/user ID
+                let linkText = resource;
+
                 const isUserPill = prefix === '@';
                 const isRoomPill = prefix === '#' || prefix === '!';
 
@@ -212,12 +215,18 @@ export default class MessageComposerInput extends React.Component {
                     // member. This could be improved by doing an async profile lookup.
                     const member = this.props.room.getMember(resource) ||
                         new RoomMember(null, resource);
+
+                    linkText = member.name;
+
                     avatar = member ? <MemberAvatar member={member} width={16} height={16}/> : null;
                 } else if (isRoomPill) {
                     const room = prefix === '#' ?
                         MatrixClientPeg.get().getRooms().find((r) => {
                             return r.getCanonicalAlias() === resource;
                         }) : MatrixClientPeg.get().getRoom(resource);
+
+                    linkText = room.getCanonicalAlias();
+
                     avatar = room ? <RoomAvatar room={room} width={16} height={16}/> : null;
                 }
 
@@ -225,7 +234,7 @@ export default class MessageComposerInput extends React.Component {
                     return (
                         <span className={classes}>
                             {avatar}
-                            {props.children}
+                            {linkText}
                         </span>
                     );
                 }
@@ -928,14 +937,14 @@ export default class MessageComposerInput extends React.Component {
             return false;
         }
 
-        const {range = {}, completion = '', entity = null, suffix = ''} = displayedCompletion;
+        const {range = {}, completion = '', href = null, suffix = ''} = displayedCompletion;
         let entityKey;
-        if (entity) {
+        let mdCompletion;
-            entityKey = Entity.create(
+        if (href) {
-              entity.type,
+            entityKey = Entity.create('LINK', 'IMMUTABLE', {url: href});
-              entity.mutability,
+            if (!this.state.isRichtextEnabled) {
-              entity.data,
+                mdCompletion = `[${completion}](${href})`;
-            );
+            }
         }
 
         let contentState = Modifier.replaceText(
@@ -943,7 +952,7 @@ export default class MessageComposerInput extends React.Component {
             RichText.textOffsetsToSelectionState(
                 range, activeEditorState.getCurrentContent().getBlocksAsArray(),
             ),
-            completion,
+            mdCompletion || completion,
             null,
             entityKey,
         );