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

@@ -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>;

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>
                 );