From 31290f3377465b95aa46cf3a0025b40635325d55 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 17 Jul 2017 14:27:50 +0100
Subject: [PATCH 1/2] Remove redundant, unused decorators from RTE

These have since been replaced by decorators that operator whether in MD mode or otherwise. This might not be optimal because LINK entities do not appear in MD mode at all at the moment, but instead you see the ()[] md notation version.
---
 src/RichText.js | 25 -------------------------
 1 file changed, 25 deletions(-)

diff --git a/src/RichText.js b/src/RichText.js
index f2f2d533a8..3cd0f5ec59 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -113,31 +113,6 @@ let emojiDecorator = {
  * Returns a composite decorator which has access to provided scope.
  */
 export function getScopedRTDecorators(scope: any): CompositeDecorator {
-    let MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-
-    let usernameDecorator = {
-        strategy: (contentBlock, callback) => {
-            findWithRegex(USERNAME_REGEX, contentBlock, callback);
-        },
-        component: (props) => {
-            let member = scope.room.getMember(props.children[0].props.text);
-            // unused until we make these decorators immutable (autocomplete needed)
-            let name = member ? member.name : null;
-            let avatar = member ? <MemberAvatar member={member} width={16} height={16}/> : null;
-            return <span className="mx_UserPill">{avatar}{props.children}</span>;
-        }
-    };
-
-    let roomDecorator = {
-        strategy: (contentBlock, callback) => {
-            findWithRegex(ROOM_REGEX, contentBlock, callback);
-        },
-        component: (props) => {
-            return <span className="mx_RoomPill">{props.children}</span>;
-        }
-    };
-
-    // TODO Re-enable usernameDecorator and roomDecorator
     return [emojiDecorator];
 }
 

From b1e3dc406c156717526a8e6629a20810d6532e5d Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 17 Jul 2017 14:50:45 +0100
Subject: [PATCH 2/2] Decorate matrix.to anchor tags as mx_UserPill and
 mx_RoomPill

Requires https://github.com/vector-im/riot-web/pull/4597 to look OK
---
 src/components/views/messages/TextualBody.js | 53 ++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 2c50a94a6a..998818da20 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -30,6 +30,8 @@ import SdkConfig from '../../../SdkConfig';
 import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import UserSettingsStore from "../../../UserSettingsStore";
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import {RoomMember} from 'matrix-js-sdk';
 
 linkifyMatrix(linkify);
 
@@ -80,6 +82,10 @@ module.exports = React.createClass({
     componentDidMount: function() {
         this._unmounted = false;
 
+        // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
+        // are still sent as plaintext URLs. If these are ever pillified in the composer,
+        // we should be pillify them here by doing the linkifying BEFORE the pillifying.
+        this.pillifyLinks(this.refs.content.children);
         linkifyElement(this.refs.content, linkifyMatrix.options);
         this.calculateUrlPreview();
 
@@ -162,6 +168,53 @@ module.exports = React.createClass({
         }
     },
 
+    pillifyLinks: function(nodes) {
+        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (node.tagName === "A" && node.getAttribute("href")) {
+                const href = node.getAttribute("href");
+                // HtmlUtils transforms `matrix.to` links to local links, so match against
+                // user or room app links.
+                const match = /^#\/(user|room)\/(.*)$/.exec(href);
+                if (match) {
+                    let avatar;
+                    let roomId;
+                    let room;
+                    let member;
+                    switch (match[1]) {
+                        case "user":
+                            roomId = this.props.mxEvent.getRoomId();
+                            room = MatrixClientPeg.get().getRoom(roomId);
+                            member = room.getMember(match[2]) ||
+                                new RoomMember(null, match[2]);
+                            avatar = <MemberAvatar member={member} width={16} height={16} name={match[2]}/>;
+                        break;
+                        case "room":
+                            room = match[2][0] === '#' ?
+                                MatrixClientPeg.get().getRooms().find((r) => {
+                                    return r.getCanonicalAlias() === match[2];
+                                }) : MatrixClientPeg.get().getRoom(match[2]);
+                            if (room) {
+                                avatar = <RoomAvatar room={room} width={16} height={16}/>;
+                            }
+                        break;
+                    }
+                    if (avatar) {
+                        const avatarContainer = document.createElement('span');
+                        node.className = "mx_MTextBody_pill " +
+                            (match[1] === "user" ? "mx_UserPill" : "mx_RoomPill");
+                        ReactDOM.render(avatar, avatarContainer);
+                        node.insertBefore(avatarContainer, node.firstChild);
+                    }
+                }
+            } else if (node.children && node.children.length) {
+                this.pillifyLinks(node.children);
+            }
+        }
+    },
+
     findLinks: function(nodes) {
         var links = [];