From 143994e44ff3f0213ee4bcb6481dba43cbbaaf8f Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 25 Jul 2017 11:25:33 +0100
Subject: [PATCH 1/2] Use `data-offset-key` in RTE decorators

This makes sure the selection state is correct when moving the cursor through an entity in the composer but only in rich text mode. https://github.com/vector-im/riot-web/issues/4666 still persists despite this, probably because the text content inserted during a completion in markdown mode has a different length to the text node within the entity.

fixes vector-im/riot-web#4654
---
 src/components/views/elements/Pill.js              | 4 ++--
 src/components/views/rooms/MessageComposerInput.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index c4bf9de120..fdd657470e 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -173,11 +173,11 @@ const Pill = React.createClass({
 
         if (this.state.pillType) {
             return this.props.inMessage ?
-                <a className={classes} href={this.props.url} title={resource}>
+                <a className={classes} href={this.props.url} title={resource} data-offset-key={this.props.offsetKey}>
                     {avatar}
                     {linkText}
                 </a> :
-                <span className={classes} title={resource}>
+                <span className={classes} title={resource} data-offset-key={this.props.offsetKey}>
                     {avatar}
                     {linkText}
                 </span>;
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 2863b13243..d6c230f135 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(props.entityKey).getData();
                 if (Pill.isPillUrl(url)) {
-                    return <Pill url={url} room={this.props.room}/>;
+                    return <Pill url={url} room={this.props.room} offsetKey={props.offsetKey}/>;
                 }
 
                 return (
-                    <a href={url}>
+                    <a href={url} data-offset-key={props.offsetKey}>
                         {props.children}
                     </a>
                 );

From eccdceae336f029c60e8b710ce72ca416ea22561 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 25 Jul 2017 11:43:12 +0100
Subject: [PATCH 2/2] Rename `props` to `entityProps` for clarity

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

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index d6c230f135..5e451e07ac 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -186,16 +186,16 @@ export default class MessageComposerInput extends React.Component {
                 RichText.getScopedMDDecorators(this.props);
         decorators.push({
             strategy: this.findLinkEntities.bind(this),
-            component: (props) => {
+            component: (entityProps) => {
                 const Pill = sdk.getComponent('elements.Pill');
-                const {url} = Entity.get(props.entityKey).getData();
+                const {url} = Entity.get(entityProps.entityKey).getData();
                 if (Pill.isPillUrl(url)) {
-                    return <Pill url={url} room={this.props.room} offsetKey={props.offsetKey}/>;
+                    return <Pill url={url} room={this.props.room} offsetKey={entityProps.offsetKey}/>;
                 }
 
                 return (
-                    <a href={url} data-offset-key={props.offsetKey}>
-                        {props.children}
+                    <a href={url} data-offset-key={entityProps.offsetKey}>
+                        {entityProps.children}
                     </a>
                 );
             },