From 9e71ba26c47baca29018c0d1ca4535373a7284ca Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 1 Aug 2017 13:51:08 +0100
Subject: [PATCH 1/3] Add `key` prop to RTE decorated entities (Pills and
 links)

This will cause a re-render when the URL of the pill/link changes.

fixes vector-im/riot-web#4718
---
 src/components/views/rooms/MessageComposerInput.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 50486047a5..0814ddb7c4 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -190,11 +190,11 @@ export default class MessageComposerInput extends React.Component {
                 const Pill = sdk.getComponent('elements.Pill');
                 const {url} = Entity.get(entityProps.entityKey).getData();
                 if (Pill.isPillUrl(url)) {
-                    return <Pill url={url} room={this.props.room} offsetKey={entityProps.offsetKey}/>;
+                    return <Pill url={url} key={url} room={this.props.room} offsetKey={entityProps.offsetKey}/>;
                 }
 
                 return (
-                    <a href={url} data-offset-key={entityProps.offsetKey}>
+                    <a href={url} key={url} data-offset-key={entityProps.offsetKey}>
                         {entityProps.children}
                     </a>
                 );

From 71abd3aff851cb08d40948f84682f7e92773b5f8 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 1 Aug 2017 16:14:12 +0100
Subject: [PATCH 2/3] Revert setting of `key`

---
 src/components/views/rooms/MessageComposerInput.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 0814ddb7c4..50486047a5 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -190,11 +190,11 @@ export default class MessageComposerInput extends React.Component {
                 const Pill = sdk.getComponent('elements.Pill');
                 const {url} = Entity.get(entityProps.entityKey).getData();
                 if (Pill.isPillUrl(url)) {
-                    return <Pill url={url} key={url} room={this.props.room} offsetKey={entityProps.offsetKey}/>;
+                    return <Pill url={url} room={this.props.room} offsetKey={entityProps.offsetKey}/>;
                 }
 
                 return (
-                    <a href={url} key={url} data-offset-key={entityProps.offsetKey}>
+                    <a href={url} data-offset-key={entityProps.offsetKey}>
                         {entityProps.children}
                     </a>
                 );

From 630c2968eb60af7424e94c7c14cf787d5a4b8e61 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 1 Aug 2017 16:20:32 +0100
Subject: [PATCH 3/3] Use componentWillReceiveProps

---
 src/components/views/elements/Pill.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 6249863938..8d19eb5999 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -63,16 +63,15 @@ const Pill = React.createClass({
         };
     },
 
-    componentWillMount() {
-        this._unmounted = false;
+    componentWillReceiveProps(nextProps) {
         let regex = REGEX_MATRIXTO;
-        if (this.props.inMessage) {
+        if (nextProps.inMessage) {
             regex = REGEX_LOCAL_MATRIXTO;
         }
 
         // Default to the empty array if no match for simplicity
         // resource and prefix will be undefined instead of throwing
-        const matrixToMatch = regex.exec(this.props.url) || [];
+        const matrixToMatch = regex.exec(nextProps.url) || [];
 
         const resourceId = matrixToMatch[1]; // The room/user ID
         const prefix = matrixToMatch[2]; // The first character of prefix
@@ -87,7 +86,7 @@ const Pill = React.createClass({
         let room;
         switch (pillType) {
             case Pill.TYPE_USER_MENTION: {
-                const localMember = this.props.room.getMember(resourceId);
+                const localMember = nextProps.room.getMember(resourceId);
                 member = localMember;
                 if (!localMember) {
                     member = new RoomMember(null, resourceId);
@@ -112,6 +111,11 @@ const Pill = React.createClass({
         this.setState({resourceId, pillType, member, room});
     },
 
+    componentWillMount() {
+        this._unmounted = false;
+        this.componentWillReceiveProps(this.props);
+    },
+
     componentWillUnmount() {
         this._unmounted = true;
     },