From 84fe51a162d94e96d3b9911f7ea6b917c152dea1 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 20 Jul 2017 15:09:59 +0100
Subject: [PATCH] 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              |  9 ++-----
 src/autocomplete/UserProvider.js              |  8 +-----
 .../views/rooms/MessageComposerInput.js       | 27 ++++++++++++-------
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/autocomplete/RoomProvider.js b/src/autocomplete/RoomProvider.js
index ed737a7d96..09d2d79833 100644
--- a/src/autocomplete/RoomProvider.js
+++ b/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: {
-                        type: 'LINK',
-                        mutability: 'IMMUTABLE',
-                        data: {
-                            url: 'https://matrix.to/#/' + displayAlias,
-                        },
-                    },
+                    suffix: ' ',
+                    href: 'https://matrix.to/#/' + displayAlias,
                     component: (
                         <PillCompletion initialComponent={<RoomAvatar width={24} height={24} room={room.room} />} title={room.name} description={displayAlias} />
                     ),
diff --git a/src/autocomplete/UserProvider.js b/src/autocomplete/UserProvider.js
index 0a262d30cf..9c93cf537f 100644
--- a/src/autocomplete/UserProvider.js
+++ b/src/autocomplete/UserProvider.js
@@ -56,13 +56,7 @@ export default class UserProvider extends AutocompleteProvider {
                 return {
                     completion: displayName,
                     suffix: range.start === 0 ? ': ' : ' ',
-                    entity: {
-                        type: 'LINK',
-                        mutability: 'IMMUTABLE',
-                        data: {
-                            url: 'https://matrix.to/#/' + user.userId,
-                        },
-                    },
+                    href: 'https://matrix.to/#/' + user.userId,
                     component: (
                         <PillCompletion
                             initialComponent={<MemberAvatar member={user} width={24} height={24}/>}
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index d5a486bb39..d42f4a69bb 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/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) {
-            entityKey = Entity.create(
-              entity.type,
-              entity.mutability,
-              entity.data,
-            );
+        let mdCompletion;
+        if (href) {
+            entityKey = Entity.create('LINK', 'IMMUTABLE', {url: href});
+            if (!this.state.isRichtextEnabled) {
+                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,
         );