From 9a1e7ad170e5dad8018b01d96d53622d279b9cbb Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Thu, 13 Jul 2017 00:27:03 +0100
Subject: [PATCH 01/34] Hide widget panel while it is being deleted.

---
 src/components/views/elements/AppTile.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 3c3f01c1cd..b875711df8 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -46,6 +46,7 @@ export default React.createClass({
             loading: false,
             widgetUrl: this.props.url,
             error: null,
+            deleting: false,
         };
     },
 
@@ -92,6 +93,7 @@ export default React.createClass({
 
     _onDeleteClick: function() {
         console.log("Delete widget %s", this.props.id);
+        this.setState({deleting: true});
         MatrixClientPeg.get().sendStateEvent(
             this.props.room.roomId,
             'im.vector.modular.widgets',
@@ -101,6 +103,7 @@ export default React.createClass({
             console.log('Deleted widget');
         }, (e) => {
             console.error('Failed to delete widget', e);
+            this.setState({deleting: false});
         });
     },
 
@@ -115,6 +118,12 @@ export default React.createClass({
 
     render: function() {
         let appTileBody;
+
+        // Don't render widget if it is in the process of being deleted
+        if (this.state.deleting) {
+            return <div></div>;
+        }
+
         if (this.state.loading) {
             appTileBody = (
                 <div> Loading... </div>

From 381f685013c4298166a3fb1aa9506cc12406ec4c Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 13 Jul 2017 18:41:51 +0100
Subject: [PATCH 02/34] Start on editing groups

---
 src/components/structures/GroupView.js        | 192 ++++++++++++++----
 src/components/views/settings/ChangeAvatar.js |  51 +++--
 2 files changed, 189 insertions(+), 54 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 30d67202e7..5aa6b1d2a9 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -212,7 +212,20 @@ export default React.createClass({
     },
 
     _onSettingsClick: function() {
-        this.setState({editing: true});
+        this.setState({
+            editing: true,
+            profileForm: Object.assign({}, this.state.summary.profile),
+        });
+    },
+
+    _onCancelClick: function() {
+        this.setState({
+            editing: false,
+            profileForm: null,
+        });
+    },
+
+    _onSaveClick: function() {
     },
 
     _getFeaturedRoomsNode() {
@@ -295,61 +308,162 @@ export default React.createClass({
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
         const Loader = sdk.getComponent("elements.Spinner");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const ChangeAvatar = sdk.getComponent("settings.ChangeAvatar");
 
         if (this.state.summary === null && this.state.error === null) {
             return <Loader />;
-        } else if (this.state.editing) {
-            return <div />;
+        } else if (false && this.state.editing) {
+            const summary = this.state.summary;
+            const avatarEdit = (
+                <div className="mx_GroupView_avatarPicker">
+                    <div onClick={this.onAvatarPickerClick}>
+                        <ChangeAvatar ref={this._collectChangeAvatar}
+                            groupId={this.props.groupId}
+                            initialAvatarUrl={this.state.summary.profile.avatar_url}
+                            setAvatar={false} onAvatar={this._onAvatarChange}
+                            showUploadSection={false} width={48} height={48}
+                        />
+                    </div>
+                    <div className="mx_GroupView_avatarPicker_edit">
+                        <label htmlFor="avatarInput" ref="file_label">
+                            <img src="img/camera.svg"
+                                alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
+                                width="17" height="15" />
+                        </label>
+                        <input id="avatarInput" className="mx_GroupView_uploadInput" type="file" onChange={this._onAvatarSelected}/>
+                    </div>
+                </div>
+            );
+
+            return <div>
+                {avatarEdit}
+                <input type="text"
+                    value={this.state.profileForm.name}
+                    onChange={this._onNameChange}
+                    placeholder={_t('Group Name')}
+                />
+                <input type="text"
+                    value={this.state.profileForm.short_description}
+                    onChange={this._onShortDescChange}
+                    placeholder={_t('Description')}
+                />
+                <AccessibleButton className="mx_GroupView_saveButton" onClick={this._onSaveClick}>
+                    {_t('Save')}
+                </AccessibleButton>
+                <AccessibleButton className='mx_GroupView_cancelButton' onClick={this._onCancelClick}>
+                    <img src="img/cancel.svg" className='mx_filterFlipColor'
+                        width="18" height="18" alt={_t("Cancel")}/>
+                </AccessibleButton>
+                <textarea value={this.state.profileForm.long_description}
+                    onChange={this._onLongDescChange}
+                />
+            </div>;
         } else if (this.state.summary) {
             const summary = this.state.summary;
-            let description = null;
-            if (summary.profile && summary.profile.long_description) {
-                description = sanitizedHtmlNode(summary.profile.long_description);
-            }
-
-            const roomBody = <div>
-                <div className="mx_GroupView_groupDesc">{description}</div>
-                {this._getFeaturedRoomsNode()}
-                {this._getFeaturedUsersNode()}
-            </div>;
 
+            let avatarNode;
             let nameNode;
-            if (summary.profile && summary.profile.name) {
-                nameNode = <div className="mx_RoomHeader_name">
-                    <span>{summary.profile.name}</span>
-                    <span className="mx_GroupView_header_groupid">
-                        ({this.props.groupId})
-                    </span>
+            let shortDescNode;
+            let rightButtons;
+            let roomBody;
+            if (this.state.editing) {
+                avatarNode = (
+                    <div className="mx_GroupView_avatarPicker">
+                        <div onClick={this.onAvatarPickerClick}>
+                            <ChangeAvatar ref={this._collectChangeAvatar}
+                                groupId={this.props.groupId}
+                                initialAvatarUrl={this.state.summary.profile.avatar_url}
+                                setAvatar={false} onAvatar={this._onAvatarChange}
+                                showUploadSection={false} width={48} height={48}
+                            />
+                        </div>
+                        <div className="mx_GroupView_avatarPicker_edit">
+                            <label htmlFor="avatarInput" ref="file_label">
+                                <img src="img/camera.svg"
+                                    alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
+                                    width="17" height="15" />
+                            </label>
+                            <input id="avatarInput" className="mx_GroupView_uploadInput" type="file" onChange={this._onAvatarSelected}/>
+                        </div>
+                    </div>
+                );
+                nameNode = <input type="text"
+                    value={this.state.profileForm.name}
+                    onChange={this._onNameChange}
+                    placeholder={_t('Group Name')}
+                />
+                shortDescNode = <input type="text"
+                    value={this.state.profileForm.short_description}
+                    onChange={this._onShortDescChange}
+                    placeholder={_t('Description')}
+                />
+                roomBody = <div>
+                    <textarea value={this.state.profileForm.long_description}
+                        onChange={this._onLongDescChange}
+                    />
+                </div>;
+                rightButtons = <div>
+                    <AccessibleButton className="mx_GroupView_saveButton" onClick={this._onSaveClick}>
+                        {_t('Save')}
+                    </AccessibleButton>
+                    <AccessibleButton className='mx_GroupView_cancelButton' onClick={this._onCancelClick}>
+                        <img src="img/cancel.svg" className='mx_filterFlipColor'
+                            width="18" height="18" alt={_t("Cancel")}/>
+                    </AccessibleButton>
                 </div>;
             } else {
-                nameNode = <div className="mx_RoomHeader_name">
-                    <span>{this.props.groupId}</span>
+                const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
+                avatarNode = <GroupAvatar
+                    groupId={this.props.groupId}
+                    groupAvatarUrl={groupAvatarUrl}
+                    width={48} height={48}
+                />;
+                if (summary.profile && summary.profile.name) {
+                    nameNode = <div>
+                        <span>{summary.profile.name}</span>
+                        <span className="mx_GroupView_header_groupid">
+                            ({this.props.groupId})
+                        </span>
+                    </div>;
+                } else {
+                    nameNode = <span>{this.props.groupId}</span>;
+                }
+                shortDescNode = <div className="mx_RoomHeader_topic">
+                    {summary.profile.short_description}
                 </div>;
+
+                let description = null;
+                if (summary.profile && summary.profile.long_description) {
+                    description = sanitizedHtmlNode(summary.profile.long_description);
+                }
+                roomBody = <div>
+                    <div className="mx_GroupView_groupDesc">{description}</div>
+                    {this._getFeaturedRoomsNode()}
+                    {this._getFeaturedUsersNode()}
+                </div>;
+                rightButtons = <AccessibleButton className="mx_RoomHeader_button" onClick={this._onSettingsClick} title={_t("Settings")}>
+                    <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
+                </AccessibleButton>;
             }
 
-            const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
-
-            // settings button is display: none until settings is wired up
             return (
                 <div className="mx_GroupView">
-                    <div className="mx_RoomHeader">
-                        <div className="mx_RoomHeader_wrapper">
-                            <div className="mx_RoomHeader_avatar">
-                                <GroupAvatar
-                                    groupId={this.props.groupId}
-                                    groupAvatarUrl={groupAvatarUrl}
-                                    width={48} height={48}
-                                />
+                    <div className="mx_GroupView_header">
+                        <div className="mx_GroupView_header_leftCol">
+                            <div className="mx_GroupView_header_avatar">
+                                {avatarNode}
                             </div>
-                            <div className="mx_RoomHeader_info">
-                                {nameNode}
-                                <div className="mx_RoomHeader_topic">
-                                    {summary.profile.short_description}
+                            <div className="mx_GroupView_header_info">
+                                <div className="mx_GroupView_header_name">
+                                    {nameNode}
+                                </div>
+                                <div className="mx_GroupView_header_shortDesc">
+                                    {shortDescNode}
                                 </div>
                             </div>
-                            <AccessibleButton className="mx_RoomHeader_button" onClick={this._onSettingsClick} title={_t("Settings")} style={{display: 'none'}}>
-                                <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
-                            </AccessibleButton>
+                        </div>
+                        <div className="mx_GroupView_header_rightCol">
+                            {rightButtons}
                         </div>
                     </div>
                     {roomBody}
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index ae6f1957b8..a5e995e7c6 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -24,11 +24,21 @@ module.exports = React.createClass({
     propTypes: {
         initialAvatarUrl: React.PropTypes.string,
         room: React.PropTypes.object,
+
+        // if set, set initialAvatarUrl to the current avatar, if it has one
+        groupId: React.PropTypes.string,
         // if false, you need to call changeAvatar.onFileSelected yourself.
         showUploadSection: React.PropTypes.bool,
         width: React.PropTypes.number,
         height: React.PropTypes.number,
-        className: React.PropTypes.string
+        className: React.PropTypes.string,
+
+        // If true, set the room / user avatar once the image is uploaded.
+        // Ignored for groups.
+        setAvatar: React.PropTypes.bool,
+
+        // Called after the avatar is uploaded
+        onAvatar: React.PropTypes.func,
     },
 
     Phases: {
@@ -43,6 +53,7 @@ module.exports = React.createClass({
             className: "",
             width: 80,
             height: 80,
+            setAvatar: true,
         };
     },
 
@@ -72,15 +83,20 @@ module.exports = React.createClass({
         var self = this;
         var httpPromise = MatrixClientPeg.get().uploadContent(file).then(function(url) {
             newUrl = url;
-            if (self.props.room) {
-                return MatrixClientPeg.get().sendStateEvent(
-                    self.props.room.roomId,
-                    'm.room.avatar',
-                    {url: url},
-                    ''
-                );
-            } else {
-                return MatrixClientPeg.get().setAvatarUrl(url);
+            if (this.props.onAvatar) {
+                this.props.onAvatar(url);
+            }
+            if (this.props.setAvatar) {
+                if (self.props.room) {
+                    return MatrixClientPeg.get().sendStateEvent(
+                        self.props.room.roomId,
+                        'm.room.avatar',
+                        {url: url},
+                        ''
+                    );
+                } else {
+                    return MatrixClientPeg.get().setAvatarUrl(url);
+                }
             }
         });
 
@@ -111,20 +127,25 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var avatarImg;
+        let avatarImg;
         // Having just set an avatar we just display that since it will take a little
         // time to propagate through to the RoomAvatar.
         if (this.props.room && !this.avatarSet) {
-            var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+            const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
             avatarImg = <RoomAvatar room={this.props.room} width={ this.props.width } height={ this.props.height } resizeMethod='crop' />;
+        } else if (this.props.groupId) {
+            const GroupAvatar = sdk.getComponent('avatars.GroupAvatar');
+            avatarImg = <GroupAvatar groupId={this.props.groupId} groupAvatarUrl={this.props.initialAvatarUrl}
+                width={this.props.width} height={this.props.height} resizeMethod='crop'
+            />;
         } else {
-            var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+            const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
             // XXX: FIXME: once we track in the JS what our own displayname is(!) then use it here rather than ?
             avatarImg = <BaseAvatar width={this.props.width} height={this.props.height} resizeMethod='crop'
                         name='?' idName={ MatrixClientPeg.get().getUserIdLocalpart() } url={this.state.avatarUrl} />;
         }
 
-        var uploadSection;
+        let uploadSection;
         if (this.props.showUploadSection) {
             uploadSection = (
                 <div className={this.props.className}>
@@ -147,7 +168,7 @@ module.exports = React.createClass({
                     </div>
                 );
             case this.Phases.Uploading:
-                var Loader = sdk.getComponent("elements.Spinner");
+                const Loader = sdk.getComponent("elements.Spinner");
                 return (
                     <Loader />
                 );

From f6f80bf9ce629af8e28102a923d19e44fd99e370 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 14 Jul 2017 17:22:17 +0100
Subject: [PATCH 03/34] Remove now unused 'edit' block

And add some css classes
---
 src/components/structures/GroupView.js | 68 +++++---------------------
 1 file changed, 12 insertions(+), 56 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 5aa6b1d2a9..2b48e6cd46 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -312,52 +312,6 @@ export default React.createClass({
 
         if (this.state.summary === null && this.state.error === null) {
             return <Loader />;
-        } else if (false && this.state.editing) {
-            const summary = this.state.summary;
-            const avatarEdit = (
-                <div className="mx_GroupView_avatarPicker">
-                    <div onClick={this.onAvatarPickerClick}>
-                        <ChangeAvatar ref={this._collectChangeAvatar}
-                            groupId={this.props.groupId}
-                            initialAvatarUrl={this.state.summary.profile.avatar_url}
-                            setAvatar={false} onAvatar={this._onAvatarChange}
-                            showUploadSection={false} width={48} height={48}
-                        />
-                    </div>
-                    <div className="mx_GroupView_avatarPicker_edit">
-                        <label htmlFor="avatarInput" ref="file_label">
-                            <img src="img/camera.svg"
-                                alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
-                                width="17" height="15" />
-                        </label>
-                        <input id="avatarInput" className="mx_GroupView_uploadInput" type="file" onChange={this._onAvatarSelected}/>
-                    </div>
-                </div>
-            );
-
-            return <div>
-                {avatarEdit}
-                <input type="text"
-                    value={this.state.profileForm.name}
-                    onChange={this._onNameChange}
-                    placeholder={_t('Group Name')}
-                />
-                <input type="text"
-                    value={this.state.profileForm.short_description}
-                    onChange={this._onShortDescChange}
-                    placeholder={_t('Description')}
-                />
-                <AccessibleButton className="mx_GroupView_saveButton" onClick={this._onSaveClick}>
-                    {_t('Save')}
-                </AccessibleButton>
-                <AccessibleButton className='mx_GroupView_cancelButton' onClick={this._onCancelClick}>
-                    <img src="img/cancel.svg" className='mx_filterFlipColor'
-                        width="18" height="18" alt={_t("Cancel")}/>
-                </AccessibleButton>
-                <textarea value={this.state.profileForm.long_description}
-                    onChange={this._onLongDescChange}
-                />
-            </div>;
         } else if (this.state.summary) {
             const summary = this.state.summary;
 
@@ -365,6 +319,7 @@ export default React.createClass({
             let nameNode;
             let shortDescNode;
             let rightButtons;
+            let headerBottom;
             let roomBody;
             if (this.state.editing) {
                 avatarNode = (
@@ -397,19 +352,20 @@ export default React.createClass({
                     onChange={this._onShortDescChange}
                     placeholder={_t('Description')}
                 />
-                roomBody = <div>
-                    <textarea value={this.state.profileForm.long_description}
-                        onChange={this._onLongDescChange}
-                    />
-                </div>;
-                rightButtons = <div>
-                    <AccessibleButton className="mx_GroupView_saveButton" onClick={this._onSaveClick}>
+                rightButtons = <span>
+                    <AccessibleButton className="mx_GroupView_saveButton mx_RoomHeader_textButton" onClick={this._onSaveClick}>
                         {_t('Save')}
                     </AccessibleButton>
                     <AccessibleButton className='mx_GroupView_cancelButton' onClick={this._onCancelClick}>
                         <img src="img/cancel.svg" className='mx_filterFlipColor'
                             width="18" height="18" alt={_t("Cancel")}/>
                     </AccessibleButton>
+                </span>;
+                headerBottom = <div className="mx_GroupView_header_editBottom" />;
+                roomBody = <div>
+                    <textarea className="mx_GroupView_editLongDesc" value={this.state.profileForm.long_description}
+                        onChange={this._onLongDescChange}
+                    />
                 </div>;
             } else {
                 const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
@@ -428,14 +384,13 @@ export default React.createClass({
                 } else {
                     nameNode = <span>{this.props.groupId}</span>;
                 }
-                shortDescNode = <div className="mx_RoomHeader_topic">
-                    {summary.profile.short_description}
-                </div>;
+                shortDescNode = <span>{summary.profile.short_description}</span>;
 
                 let description = null;
                 if (summary.profile && summary.profile.long_description) {
                     description = sanitizedHtmlNode(summary.profile.long_description);
                 }
+                headerBottom = <div className="mx_GroupView_header_viewBottom" />;
                 roomBody = <div>
                     <div className="mx_GroupView_groupDesc">{description}</div>
                     {this._getFeaturedRoomsNode()}
@@ -466,6 +421,7 @@ export default React.createClass({
                             {rightButtons}
                         </div>
                     </div>
+                    {headerBottom}
                     {roomBody}
                 </div>
             );

From a32113ad97b6e741258321227be4619bdad09716 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 17 Jul 2017 14:40:38 +0100
Subject: [PATCH 04/34] Add onChange handlers & tabIndexes

---
 src/components/structures/GroupView.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 2b48e6cd46..e2323eada2 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -225,6 +225,27 @@ export default React.createClass({
         });
     },
 
+    _onNameChange: function(e) {
+        const newProfileForm = Object.assign(this.state.profileForm, { name: e.target.value });
+        this.setState({
+            profileForm: newProfileForm,
+        });
+    },
+
+    _onShortDescChange: function(e) {
+        const newProfileForm = Object.assign(this.state.profileForm, { short_description: e.target.value });
+        this.setState({
+            profileForm: newProfileForm,
+        });
+    },
+
+    _onLongDescChange: function(e) {
+        const newProfileForm = Object.assign(this.state.profileForm, { long_description: e.target.value });
+        this.setState({
+            profileForm: newProfileForm,
+        });
+    },
+
     _onSaveClick: function() {
     },
 
@@ -346,11 +367,13 @@ export default React.createClass({
                     value={this.state.profileForm.name}
                     onChange={this._onNameChange}
                     placeholder={_t('Group Name')}
+                    tabIndex="1"
                 />
                 shortDescNode = <input type="text"
                     value={this.state.profileForm.short_description}
                     onChange={this._onShortDescChange}
                     placeholder={_t('Description')}
+                    tabIndex="2"
                 />
                 rightButtons = <span>
                     <AccessibleButton className="mx_GroupView_saveButton mx_RoomHeader_textButton" onClick={this._onSaveClick}>
@@ -365,6 +388,7 @@ export default React.createClass({
                 roomBody = <div>
                     <textarea className="mx_GroupView_editLongDesc" value={this.state.profileForm.long_description}
                         onChange={this._onLongDescChange}
+                        tabIndex="3"
                     />
                 </div>;
             } else {

From 1cd79fc918b1b993318f649abaf03c434cb2aa6e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 17 Jul 2017 17:17:18 +0100
Subject: [PATCH 05/34] Rename group settings to 'Edit Group'

---
 src/components/structures/GroupView.js | 4 ++--
 src/i18n/strings/en_EN.json            | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index e2323eada2..8f8ec84a78 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -211,7 +211,7 @@ export default React.createClass({
         });
     },
 
-    _onSettingsClick: function() {
+    _onEditClick: function() {
         this.setState({
             editing: true,
             profileForm: Object.assign({}, this.state.summary.profile),
@@ -420,7 +420,7 @@ export default React.createClass({
                     {this._getFeaturedRoomsNode()}
                     {this._getFeaturedUsersNode()}
                 </div>;
-                rightButtons = <AccessibleButton className="mx_RoomHeader_button" onClick={this._onSettingsClick} title={_t("Settings")}>
+                rightButtons = <AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
                 </AccessibleButton>;
             }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index e041649906..4e40415589 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -955,5 +955,6 @@
     "To join an exisitng group you'll have to know its group identifier; this will look something like <i>+example:matrix.org</i>.": "To join an exisitng group you'll have to know its group identifier; this will look something like <i>+example:matrix.org</i>.",
     "Featured Rooms:": "Featured Rooms:",
     "Error whilst fetching joined groups": "Error whilst fetching joined groups",
-    "Featured Users:": "Featured Users:"
+    "Featured Users:": "Featured Users:",
+    "Edit Group": "Edit Group"
 }

From 6f651289288850c62958b0a60a27ced021e91d6d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 17 Jul 2017 17:18:46 +0100
Subject: [PATCH 06/34] Disable edit button again

until we have an API to edit group profile info
---
 src/components/structures/GroupView.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 8f8ec84a78..a4216a78d0 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -247,6 +247,7 @@ export default React.createClass({
     },
 
     _onSaveClick: function() {
+        // TODO: There's no API to edit group profile info yet.
     },
 
     _getFeaturedRoomsNode() {
@@ -420,7 +421,8 @@ export default React.createClass({
                     {this._getFeaturedRoomsNode()}
                     {this._getFeaturedUsersNode()}
                 </div>;
-                rightButtons = <AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
+                // disabled until editing works
+                rightButtons = null;//<AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
                 </AccessibleButton>;
             }

From 859239f881c7ac944ee69fb4f371f1e3f9e817ee Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 17 Jul 2017 18:13:20 +0100
Subject: [PATCH 07/34] Lint / comment out line correctly

---
 src/components/structures/GroupView.js    | 9 ++++-----
 src/components/structures/LoggedInView.js | 1 +
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index a4216a78d0..d902309571 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -329,7 +329,6 @@ export default React.createClass({
     render: function() {
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
         const Loader = sdk.getComponent("elements.Spinner");
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const ChangeAvatar = sdk.getComponent("settings.ChangeAvatar");
 
         if (this.state.summary === null && this.state.error === null) {
@@ -369,13 +368,13 @@ export default React.createClass({
                     onChange={this._onNameChange}
                     placeholder={_t('Group Name')}
                     tabIndex="1"
-                />
+                />;
                 shortDescNode = <input type="text"
                     value={this.state.profileForm.short_description}
                     onChange={this._onShortDescChange}
                     placeholder={_t('Description')}
                     tabIndex="2"
-                />
+                />;
                 rightButtons = <span>
                     <AccessibleButton className="mx_GroupView_saveButton mx_RoomHeader_textButton" onClick={this._onSaveClick}>
                         {_t('Save')}
@@ -422,9 +421,9 @@ export default React.createClass({
                     {this._getFeaturedUsersNode()}
                 </div>;
                 // disabled until editing works
-                rightButtons = null;//<AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
+                rightButtons = null;/*<AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
-                </AccessibleButton>;
+                </AccessibleButton>;*/
             }
 
             return (
diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index a051af5d08..093fae5d7b 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -307,6 +307,7 @@ export default React.createClass({
                 page_element = <GroupView
                     groupId={this.props.currentGroupId}
                 />;
+                //right_panel = <RightPanel userId={this.props.viewUserId} opacity={this.props.rightOpacity} />;
                 break;
         }
 

From 0419eff230a75620bf1d1287f4abc99bcc71400d Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 20 Jul 2017 15:46:36 +0100
Subject: [PATCH 08/34] Insert pill onClick of timeline profile

When clicking someone in the timeline, insert a user pill instead of the plaintext "displayname:"
---
 src/components/views/messages/TextualBody.js   |  3 +--
 src/components/views/rooms/EventTile.js        |  4 ++--
 .../views/rooms/MessageComposerInput.js        | 18 +++++++++++++-----
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 85cc85be49..d45813cb17 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -297,10 +297,9 @@ module.exports = React.createClass({
 
     onEmoteSenderClick: function(event) {
         const mxEvent = this.props.mxEvent;
-        const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
         dis.dispatch({
             action: 'insert_displayname',
-            displayname: name.replace(' (IRC)', ''),
+            user_id: mxEvent.getSender(),
         });
     },
 
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 68ef3a1f44..32f0739795 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -357,10 +357,10 @@ module.exports = withMatrixClient(React.createClass({
     },
 
     onSenderProfileClick: function(event) {
-        var mxEvent = this.props.mxEvent;
+        const mxEvent = this.props.mxEvent;
         dis.dispatch({
             action: 'insert_displayname',
-            displayname: (mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()).replace(' (IRC)', ''),
+            user_id: mxEvent.getSender(),
         });
     },
 
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index d5a486bb39..29f627180b 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -275,15 +275,23 @@ export default class MessageComposerInput extends React.Component {
             case 'focus_composer':
                 editor.focus();
                 break;
-
-            // TODO change this so we insert a complete user alias
-
             case 'insert_displayname': {
+                const entityKey = Entity.create(
+                    'LINK', 'IMMUTABLE',
+                    { url: `https://matrix.to/#/${payload.user_id}`},
+                );
+                const selection = this.state.editorState.getSelection();
                 contentState = Modifier.replaceText(
                     contentState,
-                    this.state.editorState.getSelection(),
-                    `${payload.displayname}: `,
+                    selection,
+                    `${payload.user_id}`,
+                    null,
+                    entityKey,
                 );
+
+                const suffix = selection.getStartOffset() === 0 ? ': ' : ' ';
+                contentState = Modifier.replaceText(contentState, contentState.getSelectionAfter(), suffix);
+
                 let editorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
                 editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter());
                 this.onEditorContentChanged(editorState);

From 0600c5b049cb282c38f4c7e720664756033c7692 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 20 Jul 2017 16:46:53 +0100
Subject: [PATCH 09/34] Pretend that insert_displayname is a completion on that
 user

This has the advantage of us not reimplementing things and fixing the same bugs twice.
---
 .../views/rooms/MessageComposerInput.js       | 44 +++++++++----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 3ff93d7b24..cf934c09fd 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -286,29 +286,19 @@ export default class MessageComposerInput extends React.Component {
                 editor.focus();
                 break;
             case 'insert_displayname': {
-                const entityKey = Entity.create(
-                    'LINK', 'IMMUTABLE',
-                    { url: `https://matrix.to/#/${payload.user_id}`},
-                );
+                // Pretend that we've autocompleted this user because keeping two code
+                // paths for inserting a user pill is not fun
                 const selection = this.state.editorState.getSelection();
-                contentState = Modifier.replaceText(
-                    contentState,
+                const member = this.props.room.getMember(payload.user_id);
+                const completion = member ? member.name : payload.user_id;
+                this.setDisplayedCompletion({
+                    completion,
                     selection,
-                    `${payload.user_id}`,
-                    null,
-                    entityKey,
-                );
-
-                const suffix = selection.getStartOffset() === 0 ? ': ' : ' ';
-                contentState = Modifier.replaceText(contentState, contentState.getSelectionAfter(), suffix);
-
-                let editorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
-                editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter());
-                this.onEditorContentChanged(editorState);
-                editor.focus();
+                    href: `https://matrix.to/#/${payload.user_id}`,
+                    suffix: selection.getStartOffset() === 0 ? ': ' : ' ',
+                });
             }
                 break;
-
             case 'quote': {
                 let {body, formatted_body} = payload.event.getContent();
                 formatted_body = formatted_body || escape(body);
@@ -946,7 +936,8 @@ export default class MessageComposerInput extends React.Component {
             return false;
         }
 
-        const {range = {}, completion = '', href = null, suffix = ''} = displayedCompletion;
+        const {range = null, completion = '', href = null, suffix = ''} = displayedCompletion;
+
         let entityKey;
         let mdCompletion;
         if (href) {
@@ -956,11 +947,18 @@ export default class MessageComposerInput extends React.Component {
             }
         }
 
+        let selection;
+        if (range) {
+            selection = RichText.textOffsetsToSelectionState(
+                range, activeEditorState.getCurrentContent().getBlocksAsArray(),
+            );
+        } else {
+            selection = activeEditorState.getSelection();
+        }
+
         let contentState = Modifier.replaceText(
             activeEditorState.getCurrentContent(),
-            RichText.textOffsetsToSelectionState(
-                range, activeEditorState.getCurrentContent().getBlocksAsArray(),
-            ),
+            selection,
             mdCompletion || completion,
             null,
             entityKey,

From 6d7bff83ca18734843c8698ce2c57f150cd4a13a Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 20 Jul 2017 16:49:23 +0100
Subject: [PATCH 10/34] Update type Completion

---
 src/autocomplete/Autocompleter.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/autocomplete/Autocompleter.js b/src/autocomplete/Autocompleter.js
index 6fadf53a61..7a64fb154c 100644
--- a/src/autocomplete/Autocompleter.js
+++ b/src/autocomplete/Autocompleter.js
@@ -34,12 +34,9 @@ export type Completion = {
     component: ?Component,
     range: SelectionRange,
     command: ?string,
-    // An entity applied during the replacement (using draftjs@0.8.1 Entity.create)
-    entity: ? {
-        type: string,
-        mutability: string,
-        data: ?Object,
-    },
+    // If provided, apply a LINK entity to the completion with the
+    // data = { url: href }.
+    href: ?string,
 };
 
 const PROVIDERS = [

From 08cc0c421d44f6e59fca89471ea6c5a3a883e18a Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 20 Jul 2017 18:02:54 +0100
Subject: [PATCH 11/34] insert_displayname -> insert_mention

---
 src/components/views/messages/TextualBody.js       | 2 +-
 src/components/views/rooms/EventTile.js            | 2 +-
 src/components/views/rooms/MessageComposerInput.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index d45813cb17..b901f98f19 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -298,7 +298,7 @@ module.exports = React.createClass({
     onEmoteSenderClick: function(event) {
         const mxEvent = this.props.mxEvent;
         dis.dispatch({
-            action: 'insert_displayname',
+            action: 'insert_mention',
             user_id: mxEvent.getSender(),
         });
     },
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 32f0739795..b3831a7d0d 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -359,7 +359,7 @@ module.exports = withMatrixClient(React.createClass({
     onSenderProfileClick: function(event) {
         const mxEvent = this.props.mxEvent;
         dis.dispatch({
-            action: 'insert_displayname',
+            action: 'insert_mention',
             user_id: mxEvent.getSender(),
         });
     },
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index cf934c09fd..ddb205d08e 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -285,7 +285,7 @@ export default class MessageComposerInput extends React.Component {
             case 'focus_composer':
                 editor.focus();
                 break;
-            case 'insert_displayname': {
+            case 'insert_mention': {
                 // Pretend that we've autocompleted this user because keeping two code
                 // paths for inserting a user pill is not fun
                 const selection = this.state.editorState.getSelection();

From bac22cfb7cdf5f1c78b2ef5d63e92fcd291c7129 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 20 Jul 2017 18:04:12 +0100
Subject: [PATCH 12/34] Re-add removal of (IRC) suffix

---
 src/components/views/rooms/MessageComposerInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index ddb205d08e..2c011f3770 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -290,7 +290,7 @@ export default class MessageComposerInput extends React.Component {
                 // paths for inserting a user pill is not fun
                 const selection = this.state.editorState.getSelection();
                 const member = this.props.room.getMember(payload.user_id);
-                const completion = member ? member.name : payload.user_id;
+                const completion = member ? member.name.replace(' (IRC)', '') : payload.user_id;
                 this.setDisplayedCompletion({
                     completion,
                     selection,

From 571fada77ed39c7c67a1bf03ceb49b763657f81f Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 21 Jul 2017 11:12:15 +0100
Subject: [PATCH 13/34] Make group profile editing mostly work

apart from avatars
---
 src/components/structures/GroupView.js        | 51 ++++++++++++++++---
 src/components/views/settings/ChangeAvatar.js | 16 +++---
 2 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index d902309571..b0194fda9a 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -179,10 +179,12 @@ export default React.createClass({
             summary: null,
             error: null,
             editing: false,
+            saving: false,
         };
     },
 
     componentWillMount: function() {
+        this._changeAvatarComponent = null;
         this._loadGroupFromServer(this.props.groupId);
     },
 
@@ -197,6 +199,10 @@ export default React.createClass({
         }
     },
 
+    _collectChangeAvatar: function(node) {
+        this._changeAvatarComponent = node;
+    },
+
     _loadGroupFromServer: function(groupId) {
         MatrixClientPeg.get().getGroupSummary(groupId).done((res) => {
             this.setState({
@@ -246,8 +252,36 @@ export default React.createClass({
         });
     },
 
+    _onAvatarSelected: function(e) {
+    },
+
+    _onAvatarChange: function(newAvatarUrl) {
+        const newProfileForm = Object.assign(this.state.profileForm, { avatar_url: newAvatarUrl });
+        this.setState({
+            profileForm: newProfileForm,
+        });
+    },
+
     _onSaveClick: function() {
-        // TODO: There's no API to edit group profile info yet.
+        this.setState({saving: true});
+        MatrixClientPeg.get().setGroupProfile(this.props.groupId, this.state.profileForm).then((result) => {
+            this.setState({
+                saving: false,
+                editing: false,
+                summary: false,
+            });
+            return this._loadGroupFromServer(this.props.groupId);
+        }).catch((e) => {
+            this.setState({
+                saving: false,
+            });
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Failed to save group profile", e);
+            Modal.createDialog(ErrorDialog, {
+                title: _t('Error'),
+                description: _t('Failed to update group'),
+            });
+        }).done();
     },
 
     _getFeaturedRoomsNode() {
@@ -330,8 +364,9 @@ export default React.createClass({
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
         const Loader = sdk.getComponent("elements.Spinner");
         const ChangeAvatar = sdk.getComponent("settings.ChangeAvatar");
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-        if (this.state.summary === null && this.state.error === null) {
+        if (this.state.summary === null && this.state.error === null || this.state.saving) {
             return <Loader />;
         } else if (this.state.summary) {
             const summary = this.state.summary;
@@ -345,16 +380,16 @@ export default React.createClass({
             if (this.state.editing) {
                 avatarNode = (
                     <div className="mx_GroupView_avatarPicker">
-                        <div onClick={this.onAvatarPickerClick}>
+                        <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
                             <ChangeAvatar ref={this._collectChangeAvatar}
                                 groupId={this.props.groupId}
                                 initialAvatarUrl={this.state.summary.profile.avatar_url}
-                                setAvatar={false} onAvatar={this._onAvatarChange}
+                                onUploadComplete={this._onAvatarChange}
                                 showUploadSection={false} width={48} height={48}
                             />
-                        </div>
+                        </label>
                         <div className="mx_GroupView_avatarPicker_edit">
-                            <label htmlFor="avatarInput" ref="file_label">
+                            <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
                                 <img src="img/camera.svg"
                                     alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
                                     width="17" height="15" />
@@ -421,9 +456,9 @@ export default React.createClass({
                     {this._getFeaturedUsersNode()}
                 </div>;
                 // disabled until editing works
-                rightButtons = null;/*<AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
+                rightButtons = <AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
-                </AccessibleButton>;*/
+                </AccessibleButton>;
             }
 
             return (
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index a5e995e7c6..8c84f592be 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -33,12 +33,10 @@ module.exports = React.createClass({
         height: React.PropTypes.number,
         className: React.PropTypes.string,
 
-        // If true, set the room / user avatar once the image is uploaded.
-        // Ignored for groups.
-        setAvatar: React.PropTypes.bool,
-
-        // Called after the avatar is uploaded
-        onAvatar: React.PropTypes.func,
+        // Called with the mxc URL of the uploaded image after the avatar is
+        // uploaded. If undefined, the room or user avatar if changed once the
+        // image has finished uploading. Must be set for groups.
+        onUploadComplete: React.PropTypes.func,
     },
 
     Phases: {
@@ -53,7 +51,6 @@ module.exports = React.createClass({
             className: "",
             width: 80,
             height: 80,
-            setAvatar: true,
         };
     },
 
@@ -85,8 +82,7 @@ module.exports = React.createClass({
             newUrl = url;
             if (this.props.onAvatar) {
                 this.props.onAvatar(url);
-            }
-            if (this.props.setAvatar) {
+            } else {
                 if (self.props.room) {
                     return MatrixClientPeg.get().sendStateEvent(
                         self.props.room.roomId,
@@ -94,7 +90,7 @@ module.exports = React.createClass({
                         {url: url},
                         ''
                     );
-                } else {
+                } else if (!this.props.groupId) {
                     return MatrixClientPeg.get().setAvatarUrl(url);
                 }
             }

From f2afd852d85fb07b9b5337c62dcb2ebd1b9e4a91 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 21 Jul 2017 14:03:10 +0100
Subject: [PATCH 14/34] Make group editing work

---
 src/components/structures/GroupView.js | 50 +++++++++++++++++---------
 src/i18n/strings/en_EN.json            |  4 ++-
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index b0194fda9a..e6dac09940 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -22,6 +22,7 @@ import dis from '../../dispatcher';
 import { sanitizedHtmlNode } from '../../HtmlUtils';
 import { _t } from '../../languageHandler';
 import AccessibleButton from '../views/elements/AccessibleButton';
+import Modal from '../../Modal';
 
 const RoomSummaryType = PropTypes.shape({
     room_id: PropTypes.string.isRequired,
@@ -180,6 +181,7 @@ export default React.createClass({
             error: null,
             editing: false,
             saving: false,
+            uploadingAvatar: false,
         };
     },
 
@@ -199,10 +201,6 @@ export default React.createClass({
         }
     },
 
-    _collectChangeAvatar: function(node) {
-        this._changeAvatarComponent = node;
-    },
-
     _loadGroupFromServer: function(groupId) {
         MatrixClientPeg.get().getGroupSummary(groupId).done((res) => {
             this.setState({
@@ -252,14 +250,26 @@ export default React.createClass({
         });
     },
 
-    _onAvatarSelected: function(e) {
-    },
+    _onAvatarSelected: function(ev) {
+        const file = ev.target.files[0];
+        if (!file) return;
 
-    _onAvatarChange: function(newAvatarUrl) {
-        const newProfileForm = Object.assign(this.state.profileForm, { avatar_url: newAvatarUrl });
-        this.setState({
-            profileForm: newProfileForm,
-        });
+        this.setState({uploadingAvatar: true});
+        MatrixClientPeg.get().uploadContent(file).then((url) => {
+            const newProfileForm = Object.assign(this.state.profileForm, { avatar_url: url });
+            this.setState({
+                uploadingAvatar: false,
+                profileForm: newProfileForm,
+            });
+        }).catch((e) => {
+            this.setState({uploadingAvatar: false});
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Failed to upload avatar image", e);
+            Modal.createDialog(ErrorDialog, {
+                title: _t('Error'),
+                description: _t('Failed to upload image'),
+            });
+        }).done();
     },
 
     _onSaveClick: function() {
@@ -378,15 +388,21 @@ export default React.createClass({
             let headerBottom;
             let roomBody;
             if (this.state.editing) {
+                let avatarImage;
+                if (this.state.uploadingAvatar) {
+                    avatarImage = <Loader />;
+                } else {
+                    const GroupAvatar = sdk.getComponent('avatars.GroupAvatar');
+                    avatarImage = <GroupAvatar groupId={this.props.groupId}
+                        groupAvatarUrl={this.state.profileForm.avatar_url}
+                        width={48} height={48} resizeMethod='crop'
+                    />;
+                }
+
                 avatarNode = (
                     <div className="mx_GroupView_avatarPicker">
                         <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
-                            <ChangeAvatar ref={this._collectChangeAvatar}
-                                groupId={this.props.groupId}
-                                initialAvatarUrl={this.state.summary.profile.avatar_url}
-                                onUploadComplete={this._onAvatarChange}
-                                showUploadSection={false} width={48} height={48}
-                            />
+                            {avatarImage}
                         </label>
                         <div className="mx_GroupView_avatarPicker_edit">
                             <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 8ba15045a8..c6c563ac5b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -957,5 +957,7 @@
     "Error whilst fetching joined groups": "Error whilst fetching joined groups",
     "Featured Users:": "Featured Users:",
     "Edit Group": "Edit Group",
-    "Automatically replace plain text Emoji": "Automatically replace plain text Emoji"
+    "Automatically replace plain text Emoji": "Automatically replace plain text Emoji",
+    "Failed to upload image": "Failed to upload image",
+    "Failed to update group": "Failed to update group"
 }

From 8ef820054d2135f08ff121fb8cb3e0e6d77ca693 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 21 Jul 2017 13:41:23 +0100
Subject: [PATCH 15/34] Factor out shared logic in two code-paths for pill
 rendering

This isn't an entirely side-effect-free refactoring:
 - the text of the timeline pills is now either the room ID/alias or user ID/ display name of the linked resource (which means that until we do a roundtrip to get user displaynames, mentions for users not in the current room will have their user IDs shown instead of what was in the link body).
 - timeline links to rooms without avatars are now rendered as links
 - fixed issue that would throw an error whilst rendering (i.e. unusable client) a room link to a room that the client doesn't know about
---
 src/components/views/elements/Pill.js         | 101 ++++++++++++++++++
 src/components/views/messages/TextualBody.js  |  57 ++--------
 .../views/rooms/MessageComposerInput.js       |  57 +---------
 3 files changed, 115 insertions(+), 100 deletions(-)
 create mode 100644 src/components/views/elements/Pill.js

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
new file mode 100644
index 0000000000..6ca97359b9
--- /dev/null
+++ b/src/components/views/elements/Pill.js
@@ -0,0 +1,101 @@
+
+import React from 'react';
+import sdk from '../../../index';
+import classNames from 'classnames';
+import { Room, RoomMember } from 'matrix-js-sdk';
+import PropTypes from 'prop-types';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import { MATRIXTO_URL_PATTERN } from '../../../linkify-matrix';
+import { getDisplayAliasForRoom } from '../../../Rooms';
+
+const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
+const REGEX_LOCAL_MATRIXTO = /^#\/(?:user|room)\/(([\#\!\@\+]).*)$/;
+
+export default React.createClass({
+    statics: {
+        isPillUrl: (url) => {
+            return !!REGEX_MATRIXTO.exec(url);
+        },
+        isMessagePillUrl: (url) => {
+            return !!REGEX_LOCAL_MATRIXTO.exec(url);
+        },
+    },
+
+    props: {
+        // The URL to pillify (no validation is done, see isPillUrl and isMessagePillUrl)
+        url: PropTypes.string,
+        // Whether the pill is in a message
+        inMessage: PropTypes.bool,
+        // The room in which this pill is being rendered
+        room: PropTypes.instanceOf(Room),
+    },
+
+    render: function() {
+        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+
+        let regex = REGEX_MATRIXTO;
+        if (this.props.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) || [];
+        console.info(matrixToMatch);
+
+        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 === '!';
+
+        let avatar = null;
+        let userId;
+        if (isUserPill) {
+            // If this user is not a member of this room, default to the empty
+            // member. This could be improved by doing an async profile lookup.
+            const member = this.props.room.getMember(resource) ||
+                new RoomMember(null, resource);
+            if (member) {
+                userId = member.userId;
+                linkText = member.name;
+                avatar = <MemberAvatar member={member} width={16} height={16}/>;
+            }
+        } else if (isRoomPill) {
+            const room = prefix === '#' ?
+                MatrixClientPeg.get().getRooms().find((r) => {
+                    return r.getAliases().includes(resource);
+                }) : MatrixClientPeg.get().getRoom(resource);
+
+            if (room) {
+                linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
+                avatar = <RoomAvatar room={room} width={16} height={16}/>;
+            }
+        }
+
+        const classes = classNames({
+            "mx_UserPill": isUserPill,
+            "mx_RoomPill": isRoomPill,
+            "mx_UserPill_me": userId === MatrixClientPeg.get().credentials.userId,
+        });
+
+        if ((isUserPill || isRoomPill) && avatar) {
+            return this.props.inMessage ?
+                <a className={classes} href={this.props.url}>
+                    {avatar}
+                    {linkText}
+                </a> :
+                <span className={classes}>
+                    {avatar}
+                    {linkText}
+                </span>;
+        } else {
+            // Deliberately render nothing if the URL isn't recognised
+            return null;
+        }
+    },
+});
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index b901f98f19..6d4d01a196 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -170,56 +170,21 @@ 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) || [];
-                const resourceType = match[1]; // "user" or "room"
-                const resourceId = match[2]; // user ID or room ID
-                if (match && resourceType && resourceId) {
-                    let avatar;
-                    let roomId;
-                    let room;
-                    let member;
-                    let userId;
-                    switch (resourceType) {
-                        case "user":
-                            roomId = this.props.mxEvent.getRoomId();
-                            room = MatrixClientPeg.get().getRoom(roomId);
-                            userId = resourceId;
-                            member = room.getMember(userId) ||
-                                new RoomMember(null, userId);
-                            avatar = <MemberAvatar member={member} width={16} height={16} name={userId}/>;
-                        break;
-                        case "room":
-                            room = resourceId[0] === '#' ?
-                                MatrixClientPeg.get().getRooms().find((r) => {
-                                    return r.getCanonicalAlias() === resourceId;
-                                }) : MatrixClientPeg.get().getRoom(resourceId);
-                            if (room) {
-                                avatar = <RoomAvatar room={room} width={16} height={16}/>;
-                            }
-                        break;
-                    }
-                    if (avatar) {
-                        const avatarContainer = document.createElement('span');
-                        node.className = classNames(
-                            "mx_MTextBody_pill",
-                            {
-                                "mx_UserPill": match[1] === "user",
-                                "mx_RoomPill": match[1] === "room",
-                                "mx_UserPill_me":
-                                    userId === MatrixClientPeg.get().credentials.userId,
-                            },
-                        );
-                        ReactDOM.render(avatar, avatarContainer);
-                        node.insertBefore(avatarContainer, node.firstChild);
-                    }
+
+                // If the link is a (localised) matrix.to link, replace it with a pill
+                const Pill = sdk.getComponent('elements.Pill');
+                if (Pill.isMessagePillUrl(href)) {
+                    const pillContainer = document.createElement('span');
+
+                    const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+                    const pill = <Pill url={href} inMessage={true} room={room}/>;
+
+                    ReactDOM.render(pill, pillContainer);
+                    node.parentNode.replaceChild(pillContainer, node);
                 }
             } else if (node.children && node.children.length) {
                 this.pillifyLinks(node.children);
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 2c011f3770..006aebff60 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -26,7 +26,6 @@ import Promise from 'bluebird';
 
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import type {MatrixClient} from 'matrix-js-sdk/lib/matrix';
-import {RoomMember} from 'matrix-js-sdk';
 import SlashCommands from '../../../SlashCommands';
 import KeyCode from '../../../KeyCode';
 import Modal from '../../../Modal';
@@ -43,10 +42,6 @@ import {Completion} from "../../../autocomplete/Autocompleter";
 import Markdown from '../../../Markdown';
 import ComposerHistoryManager from '../../../ComposerHistoryManager';
 import MessageComposerStore from '../../../stores/MessageComposerStore';
-import { getDisplayAliasForRoom } from '../../../Rooms';
-
-import {MATRIXTO_URL_PATTERN} from '../../../linkify-matrix';
-const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
 
 import {asciiRegexp, shortnameToUnicode, emojioneList, asciiList, mapUnicodeToShort} from 'emojione';
 const EMOJI_SHORTNAMES = Object.keys(emojioneList);
@@ -188,56 +183,10 @@ export default class MessageComposerInput extends React.Component {
         decorators.push({
             strategy: this.findLinkEntities.bind(this),
             component: (props) => {
-                const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-                const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+                const Pill = sdk.getComponent('elements.Pill');
                 const {url} = Entity.get(props.entityKey).getData();
-
-                // Default to the empty array if no match for simplicity
-                // resource and prefix will be undefined instead of throwing
-                const matrixToMatch = REGEX_MATRIXTO.exec(url) || [];
-
-                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 === '!';
-
-                const classes = classNames({
-                    "mx_UserPill": isUserPill,
-                    "mx_RoomPill": isRoomPill,
-                });
-
-                let avatar = null;
-                if (isUserPill) {
-                    // If this user is not a member of this room, default to the empty
-                    // 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 = getDisplayAliasForRoom(room) || resource;
-
-                    avatar = room ? <RoomAvatar room={room} width={16} height={16}/> : null;
-                }
-
-                if (isUserPill || isRoomPill) {
-                    return (
-                        <span className={classes}>
-                            {avatar}
-                            {linkText}
-                        </span>
-                    );
+                if (Pill.isPillUrl(url)) {
+                    return <Pill url={url} room={this.props.room}/>;
                 }
 
                 return (

From 3c44af11f7ba0d5270a52059c88e6e23f5c03892 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 21 Jul 2017 14:06:08 +0100
Subject: [PATCH 16/34] Revert changes to ChangeAvatar

This component was basically adding nothing for group editing
---
 src/components/views/settings/ChangeAvatar.js | 45 ++++++-------------
 1 file changed, 14 insertions(+), 31 deletions(-)

diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index 8c84f592be..ae6f1957b8 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -24,19 +24,11 @@ module.exports = React.createClass({
     propTypes: {
         initialAvatarUrl: React.PropTypes.string,
         room: React.PropTypes.object,
-
-        // if set, set initialAvatarUrl to the current avatar, if it has one
-        groupId: React.PropTypes.string,
         // if false, you need to call changeAvatar.onFileSelected yourself.
         showUploadSection: React.PropTypes.bool,
         width: React.PropTypes.number,
         height: React.PropTypes.number,
-        className: React.PropTypes.string,
-
-        // Called with the mxc URL of the uploaded image after the avatar is
-        // uploaded. If undefined, the room or user avatar if changed once the
-        // image has finished uploading. Must be set for groups.
-        onUploadComplete: React.PropTypes.func,
+        className: React.PropTypes.string
     },
 
     Phases: {
@@ -80,19 +72,15 @@ module.exports = React.createClass({
         var self = this;
         var httpPromise = MatrixClientPeg.get().uploadContent(file).then(function(url) {
             newUrl = url;
-            if (this.props.onAvatar) {
-                this.props.onAvatar(url);
+            if (self.props.room) {
+                return MatrixClientPeg.get().sendStateEvent(
+                    self.props.room.roomId,
+                    'm.room.avatar',
+                    {url: url},
+                    ''
+                );
             } else {
-                if (self.props.room) {
-                    return MatrixClientPeg.get().sendStateEvent(
-                        self.props.room.roomId,
-                        'm.room.avatar',
-                        {url: url},
-                        ''
-                    );
-                } else if (!this.props.groupId) {
-                    return MatrixClientPeg.get().setAvatarUrl(url);
-                }
+                return MatrixClientPeg.get().setAvatarUrl(url);
             }
         });
 
@@ -123,25 +111,20 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        let avatarImg;
+        var avatarImg;
         // Having just set an avatar we just display that since it will take a little
         // time to propagate through to the RoomAvatar.
         if (this.props.room && !this.avatarSet) {
-            const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+            var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
             avatarImg = <RoomAvatar room={this.props.room} width={ this.props.width } height={ this.props.height } resizeMethod='crop' />;
-        } else if (this.props.groupId) {
-            const GroupAvatar = sdk.getComponent('avatars.GroupAvatar');
-            avatarImg = <GroupAvatar groupId={this.props.groupId} groupAvatarUrl={this.props.initialAvatarUrl}
-                width={this.props.width} height={this.props.height} resizeMethod='crop'
-            />;
         } else {
-            const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+            var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
             // XXX: FIXME: once we track in the JS what our own displayname is(!) then use it here rather than ?
             avatarImg = <BaseAvatar width={this.props.width} height={this.props.height} resizeMethod='crop'
                         name='?' idName={ MatrixClientPeg.get().getUserIdLocalpart() } url={this.state.avatarUrl} />;
         }
 
-        let uploadSection;
+        var uploadSection;
         if (this.props.showUploadSection) {
             uploadSection = (
                 <div className={this.props.className}>
@@ -164,7 +147,7 @@ module.exports = React.createClass({
                     </div>
                 );
             case this.Phases.Uploading:
-                const Loader = sdk.getComponent("elements.Spinner");
+                var Loader = sdk.getComponent("elements.Spinner");
                 return (
                     <Loader />
                 );

From 7db7192701d23d438aacbc01aaca35503a1c9cf1 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 21 Jul 2017 13:41:23 +0100
Subject: [PATCH 17/34] Factor out shared logic in two code-paths for pill
 rendering

This isn't an entirely side-effect-free refactoring:
 - the text of the timeline pills is now either the room ID/alias or user ID/ display name of the linked resource (which means that until we do a roundtrip to get user displaynames, mentions for users not in the current room will have their user IDs shown instead of what was in the link body).
 - timeline links to rooms without avatars are now rendered as links
 - fixed issue that would throw an error whilst rendering (i.e. unusable client) a room link to a room that the client doesn't know about
---
 src/components/views/elements/Pill.js         | 118 ++++++++++++++++++
 src/components/views/messages/TextualBody.js  |  57 ++-------
 .../views/rooms/MessageComposerInput.js       |  57 +--------
 3 files changed, 132 insertions(+), 100 deletions(-)
 create mode 100644 src/components/views/elements/Pill.js

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
new file mode 100644
index 0000000000..2df5ddbe89
--- /dev/null
+++ b/src/components/views/elements/Pill.js
@@ -0,0 +1,118 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React from 'react';
+import sdk from '../../../index';
+import classNames from 'classnames';
+import { Room, RoomMember } from 'matrix-js-sdk';
+import PropTypes from 'prop-types';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import { MATRIXTO_URL_PATTERN } from '../../../linkify-matrix';
+import { getDisplayAliasForRoom } from '../../../Rooms';
+
+const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
+
+// For URLs of matrix.to links in the timeline which have been reformatted by
+// HttpUtils transformTags to relative links
+const REGEX_LOCAL_MATRIXTO = /^#\/(?:user|room)\/(([\#\!\@\+]).*)$/;
+
+export default React.createClass({
+    statics: {
+        isPillUrl: (url) => {
+            return !!REGEX_MATRIXTO.exec(url);
+        },
+        isMessagePillUrl: (url) => {
+            return !!REGEX_LOCAL_MATRIXTO.exec(url);
+        },
+    },
+
+    props: {
+        // The URL to pillify (no validation is done, see isPillUrl and isMessagePillUrl)
+        url: PropTypes.string,
+        // Whether the pill is in a message
+        inMessage: PropTypes.bool,
+        // The room in which this pill is being rendered
+        room: PropTypes.instanceOf(Room),
+    },
+
+    render: function() {
+        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+
+        let regex = REGEX_MATRIXTO;
+        if (this.props.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) || [];
+        console.info(matrixToMatch);
+
+        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 === '!';
+
+        let avatar = null;
+        let userId;
+        if (isUserPill) {
+            // If this user is not a member of this room, default to the empty member
+            // TODO: This could be improved by doing an async profile lookup
+            const member = this.props.room.getMember(resource) ||
+                new RoomMember(null, resource);
+            if (member) {
+                userId = member.userId;
+                linkText = member.name;
+                avatar = <MemberAvatar member={member} width={16} height={16}/>;
+            }
+        } else if (isRoomPill) {
+            const room = prefix === '#' ?
+                MatrixClientPeg.get().getRooms().find((r) => {
+                    return r.getAliases().includes(resource);
+                }) : MatrixClientPeg.get().getRoom(resource);
+
+            if (room) {
+                linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
+                avatar = <RoomAvatar room={room} width={16} height={16}/>;
+            }
+        }
+
+        const classes = classNames({
+            "mx_UserPill": isUserPill,
+            "mx_RoomPill": isRoomPill,
+            "mx_UserPill_me": userId === MatrixClientPeg.get().credentials.userId,
+        });
+
+        if ((isUserPill || isRoomPill) && avatar) {
+            return this.props.inMessage ?
+                <a className={classes} href={this.props.url}>
+                    {avatar}
+                    {linkText}
+                </a> :
+                <span className={classes}>
+                    {avatar}
+                    {linkText}
+                </span>;
+        } else {
+            // Deliberately render nothing if the URL isn't recognised
+            return null;
+        }
+    },
+});
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index b901f98f19..6d4d01a196 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -170,56 +170,21 @@ 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) || [];
-                const resourceType = match[1]; // "user" or "room"
-                const resourceId = match[2]; // user ID or room ID
-                if (match && resourceType && resourceId) {
-                    let avatar;
-                    let roomId;
-                    let room;
-                    let member;
-                    let userId;
-                    switch (resourceType) {
-                        case "user":
-                            roomId = this.props.mxEvent.getRoomId();
-                            room = MatrixClientPeg.get().getRoom(roomId);
-                            userId = resourceId;
-                            member = room.getMember(userId) ||
-                                new RoomMember(null, userId);
-                            avatar = <MemberAvatar member={member} width={16} height={16} name={userId}/>;
-                        break;
-                        case "room":
-                            room = resourceId[0] === '#' ?
-                                MatrixClientPeg.get().getRooms().find((r) => {
-                                    return r.getCanonicalAlias() === resourceId;
-                                }) : MatrixClientPeg.get().getRoom(resourceId);
-                            if (room) {
-                                avatar = <RoomAvatar room={room} width={16} height={16}/>;
-                            }
-                        break;
-                    }
-                    if (avatar) {
-                        const avatarContainer = document.createElement('span');
-                        node.className = classNames(
-                            "mx_MTextBody_pill",
-                            {
-                                "mx_UserPill": match[1] === "user",
-                                "mx_RoomPill": match[1] === "room",
-                                "mx_UserPill_me":
-                                    userId === MatrixClientPeg.get().credentials.userId,
-                            },
-                        );
-                        ReactDOM.render(avatar, avatarContainer);
-                        node.insertBefore(avatarContainer, node.firstChild);
-                    }
+
+                // If the link is a (localised) matrix.to link, replace it with a pill
+                const Pill = sdk.getComponent('elements.Pill');
+                if (Pill.isMessagePillUrl(href)) {
+                    const pillContainer = document.createElement('span');
+
+                    const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+                    const pill = <Pill url={href} inMessage={true} room={room}/>;
+
+                    ReactDOM.render(pill, pillContainer);
+                    node.parentNode.replaceChild(pillContainer, node);
                 }
             } else if (node.children && node.children.length) {
                 this.pillifyLinks(node.children);
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 2c011f3770..006aebff60 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -26,7 +26,6 @@ import Promise from 'bluebird';
 
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import type {MatrixClient} from 'matrix-js-sdk/lib/matrix';
-import {RoomMember} from 'matrix-js-sdk';
 import SlashCommands from '../../../SlashCommands';
 import KeyCode from '../../../KeyCode';
 import Modal from '../../../Modal';
@@ -43,10 +42,6 @@ import {Completion} from "../../../autocomplete/Autocompleter";
 import Markdown from '../../../Markdown';
 import ComposerHistoryManager from '../../../ComposerHistoryManager';
 import MessageComposerStore from '../../../stores/MessageComposerStore';
-import { getDisplayAliasForRoom } from '../../../Rooms';
-
-import {MATRIXTO_URL_PATTERN} from '../../../linkify-matrix';
-const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
 
 import {asciiRegexp, shortnameToUnicode, emojioneList, asciiList, mapUnicodeToShort} from 'emojione';
 const EMOJI_SHORTNAMES = Object.keys(emojioneList);
@@ -188,56 +183,10 @@ export default class MessageComposerInput extends React.Component {
         decorators.push({
             strategy: this.findLinkEntities.bind(this),
             component: (props) => {
-                const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-                const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+                const Pill = sdk.getComponent('elements.Pill');
                 const {url} = Entity.get(props.entityKey).getData();
-
-                // Default to the empty array if no match for simplicity
-                // resource and prefix will be undefined instead of throwing
-                const matrixToMatch = REGEX_MATRIXTO.exec(url) || [];
-
-                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 === '!';
-
-                const classes = classNames({
-                    "mx_UserPill": isUserPill,
-                    "mx_RoomPill": isRoomPill,
-                });
-
-                let avatar = null;
-                if (isUserPill) {
-                    // If this user is not a member of this room, default to the empty
-                    // 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 = getDisplayAliasForRoom(room) || resource;
-
-                    avatar = room ? <RoomAvatar room={room} width={16} height={16}/> : null;
-                }
-
-                if (isUserPill || isRoomPill) {
-                    return (
-                        <span className={classes}>
-                            {avatar}
-                            {linkText}
-                        </span>
-                    );
+                if (Pill.isPillUrl(url)) {
+                    return <Pill url={url} room={this.props.room}/>;
                 }
 
                 return (

From 4eda2ab083a2580ee05848b1478f2d1a38ed5455 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 21 Jul 2017 14:13:57 +0100
Subject: [PATCH 18/34] Swap classes instead of using 0 height elements

---
 src/components/structures/GroupView.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index e6dac09940..0a4c966068 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -23,6 +23,7 @@ import { sanitizedHtmlNode } from '../../HtmlUtils';
 import { _t } from '../../languageHandler';
 import AccessibleButton from '../views/elements/AccessibleButton';
 import Modal from '../../Modal';
+import classnames from 'classnames';
 
 const RoomSummaryType = PropTypes.shape({
     room_id: PropTypes.string.isRequired,
@@ -385,8 +386,10 @@ export default React.createClass({
             let nameNode;
             let shortDescNode;
             let rightButtons;
-            let headerBottom;
             let roomBody;
+            let headerClasses = {
+                mx_GroupView_header: true,
+            };
             if (this.state.editing) {
                 let avatarImage;
                 if (this.state.uploadingAvatar) {
@@ -435,7 +438,6 @@ export default React.createClass({
                             width="18" height="18" alt={_t("Cancel")}/>
                     </AccessibleButton>
                 </span>;
-                headerBottom = <div className="mx_GroupView_header_editBottom" />;
                 roomBody = <div>
                     <textarea className="mx_GroupView_editLongDesc" value={this.state.profileForm.long_description}
                         onChange={this._onLongDescChange}
@@ -465,7 +467,6 @@ export default React.createClass({
                 if (summary.profile && summary.profile.long_description) {
                     description = sanitizedHtmlNode(summary.profile.long_description);
                 }
-                headerBottom = <div className="mx_GroupView_header_viewBottom" />;
                 roomBody = <div>
                     <div className="mx_GroupView_groupDesc">{description}</div>
                     {this._getFeaturedRoomsNode()}
@@ -475,11 +476,13 @@ export default React.createClass({
                 rightButtons = <AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
                 </AccessibleButton>;
+
+                headerClasses.mx_GroupView_header_view = true;
             }
 
             return (
                 <div className="mx_GroupView">
-                    <div className="mx_GroupView_header">
+                    <div className={classnames(headerClasses)}>
                         <div className="mx_GroupView_header_leftCol">
                             <div className="mx_GroupView_header_avatar">
                                 {avatarNode}
@@ -497,7 +500,6 @@ export default React.createClass({
                             {rightButtons}
                         </div>
                     </div>
-                    {headerBottom}
                     {roomBody}
                 </div>
             );

From be7228996aa67933b08fbd9a03b356c7f277081f Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 21 Jul 2017 14:18:28 +0100
Subject: [PATCH 19/34] This should be null rather than false

---
 src/components/structures/GroupView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 0a4c966068..0cadda5909 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -279,7 +279,7 @@ export default React.createClass({
             this.setState({
                 saving: false,
                 editing: false,
-                summary: false,
+                summary: null,
             });
             return this._loadGroupFromServer(this.props.groupId);
         }).catch((e) => {

From d48924e768cd149854b302d9dc7b81421a3116d4 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 21 Jul 2017 14:30:09 +0100
Subject: [PATCH 20/34] Lint

---
 src/components/structures/GroupView.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 0cadda5909..96c8044e2b 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -374,7 +374,6 @@ export default React.createClass({
     render: function() {
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
         const Loader = sdk.getComponent("elements.Spinner");
-        const ChangeAvatar = sdk.getComponent("settings.ChangeAvatar");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         if (this.state.summary === null && this.state.error === null || this.state.saving) {
@@ -387,7 +386,7 @@ export default React.createClass({
             let shortDescNode;
             let rightButtons;
             let roomBody;
-            let headerClasses = {
+            const headerClasses = {
                 mx_GroupView_header: true,
             };
             if (this.state.editing) {
@@ -473,7 +472,9 @@ export default React.createClass({
                     {this._getFeaturedUsersNode()}
                 </div>;
                 // disabled until editing works
-                rightButtons = <AccessibleButton className="mx_GroupHeader_button" onClick={this._onEditClick} title={_t("Edit Group")}>
+                rightButtons = <AccessibleButton className="mx_GroupHeader_button"
+                    onClick={this._onEditClick} title={_t("Edit Group")}
+                >
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
                 </AccessibleButton>;
 

From f9cff50ef57bd87d9a5b2547eaa0614607a1bef3 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 21 Jul 2017 14:41:29 +0100
Subject: [PATCH 21/34] _loadGroupFromServer doesn't return a promise

---
 src/components/structures/GroupView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 96c8044e2b..5f7866773d 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -281,7 +281,7 @@ export default React.createClass({
                 editing: false,
                 summary: null,
             });
-            return this._loadGroupFromServer(this.props.groupId);
+            this._loadGroupFromServer(this.props.groupId);
         }).catch((e) => {
             this.setState({
                 saving: false,

From e8495f637f1bf068dc0fa0395f65384d3edd0ad1 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 21 Jul 2017 16:38:31 +0100
Subject: [PATCH 22/34] Strip MD mentions from the `body` of sent messages

Because previously we just sent the display name and MD links are not very readable.
---
 src/components/views/rooms/MessageComposerInput.js | 10 +++++++++-
 src/linkify-matrix.js                              |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 2c011f3770..e489bdd8d7 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -45,8 +45,9 @@ import ComposerHistoryManager from '../../../ComposerHistoryManager';
 import MessageComposerStore from '../../../stores/MessageComposerStore';
 import { getDisplayAliasForRoom } from '../../../Rooms';
 
-import {MATRIXTO_URL_PATTERN} from '../../../linkify-matrix';
+import {MATRIXTO_URL_PATTERN, MATRIXTO_MD_LINK_PATTERN} from '../../../linkify-matrix';
 const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
+const REGEX_MATRIXTO_MARKDOWN_GLOBAL = new RegExp(MATRIXTO_MD_LINK_PATTERN, 'g');
 
 import {asciiRegexp, shortnameToUnicode, emojioneList, asciiList, mapUnicodeToShort} from 'emojione';
 const EMOJI_SHORTNAMES = Object.keys(emojioneList);
@@ -778,6 +779,13 @@ export default class MessageComposerInput extends React.Component {
             sendTextFn = this.client.sendEmoteMessage;
         }
 
+        // Strip MD user mentions to preserve plaintext mention behaviour
+        // (MD links are very verbose and ugly)
+        contentText = contentText.replace(REGEX_MATRIXTO_MARKDOWN_GLOBAL,
+        (markdownLink, text, resource, prefix) => {
+            return prefix === '@' ? text : markdownLink;
+        });
+
         let sendMessagePromise;
         if (contentHTML) {
             sendMessagePromise = sendHtmlFn.call(
diff --git a/src/linkify-matrix.js b/src/linkify-matrix.js
index 01512a771a..e395b7986e 100644
--- a/src/linkify-matrix.js
+++ b/src/linkify-matrix.js
@@ -168,6 +168,8 @@ matrixLinkify.VECTOR_URL_PATTERN = "^(?:https?:\/\/)?(?:"
     + ")(#.*)";
 
 matrixLinkify.MATRIXTO_URL_PATTERN = "^(?:https?:\/\/)?(?:www\\.)?matrix\\.to/#/((#|@|!).*)";
+matrixLinkify.MATRIXTO_MD_LINK_PATTERN =
+    '\\[([^\\]]*)\\]\\((?:https?:\/\/)?(?:www\\.)?matrix\\.to/#/((#|@|!)[^\\)]*)\\)';
 matrixLinkify.MATRIXTO_BASE_URL= "https://matrix.to";
 
 matrixLinkify.options = {

From feaafc7a1a70f82446aa9c5b01558757a7273f7e Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 21 Jul 2017 17:18:48 +0100
Subject: [PATCH 23/34] Remove logging

---
 src/components/views/elements/Pill.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 2df5ddbe89..39987228e5 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -59,7 +59,6 @@ export default React.createClass({
         // 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) || [];
-        console.info(matrixToMatch);
 
         const resource = matrixToMatch[1]; // The room/user ID
         const prefix = matrixToMatch[2]; // The first character of prefix

From 397201a74d16f91c30d0c903524350fd1e8a42b3 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 24 Jul 2017 09:41:46 +0100
Subject: [PATCH 24/34] Remove subjective comment

---
 src/components/views/rooms/MessageComposerInput.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 0dab6ed9c0..10414ecbeb 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -732,7 +732,6 @@ export default class MessageComposerInput extends React.Component {
         }
 
         // Strip MD user mentions to preserve plaintext mention behaviour
-        // (MD links are very verbose and ugly)
         contentText = contentText.replace(REGEX_MATRIXTO_MARKDOWN_GLOBAL,
         (markdownLink, text, resource, prefix) => {
             return prefix === '@' ? text : markdownLink;

From 6945fa54eac5c3f9d92a38a956d889bf30c3c15e Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 24 Jul 2017 14:41:13 +0100
Subject: [PATCH 25/34] Reimplement so that only tab-completed mentions are
 stripped

Instead of blindly stripping all MD mentions, only strip those that were tab-completed. We do this by adding the `isCompleted` flag to the Entity data.
---
 src/components/views/elements/Pill.js         |  1 -
 .../views/rooms/MessageComposerInput.js       | 34 ++++++++++++++++---
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 39987228e5..89607f4eb8 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -92,7 +92,6 @@ export default React.createClass({
                 avatar = <RoomAvatar room={room} width={16} height={16}/>;
             }
         }
-
         const classes = classNames({
             "mx_UserPill": isUserPill,
             "mx_RoomPill": isRoomPill,
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 10414ecbeb..2863b13243 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -731,10 +731,33 @@ export default class MessageComposerInput extends React.Component {
             sendTextFn = this.client.sendEmoteMessage;
         }
 
-        // Strip MD user mentions to preserve plaintext mention behaviour
+        // Strip MD user (tab-completed) mentions to preserve plaintext mention behaviour
         contentText = contentText.replace(REGEX_MATRIXTO_MARKDOWN_GLOBAL,
-        (markdownLink, text, resource, prefix) => {
-            return prefix === '@' ? text : markdownLink;
+        (markdownLink, text, resource, prefix, offset) => {
+            // Calculate the offset relative to the current block that the offset is in
+            let sum = 0;
+            const blocks = contentState.getBlocksAsArray();
+            let block;
+            for (let i = 0; i < blocks.length; i++) {
+                block = blocks[i];
+                sum += block.getLength();
+                if (sum > offset) {
+                    sum -= block.getLength();
+                    break;
+                }
+            }
+            offset -= sum;
+
+            const entityKey = block.getEntityAt(offset);
+            const entity = entityKey ? Entity.get(entityKey) : null;
+            if (entity && entity.getData().isCompletion && prefix === '@') {
+                // This is a completed mention, so do not insert MD link, just text
+                return text;
+            } else {
+                // This is either a MD link that was typed into the composer or another
+                // type of pill (e.g. room pill)
+                return markdownLink;
+            }
         });
 
         let sendMessagePromise;
@@ -900,7 +923,10 @@ export default class MessageComposerInput extends React.Component {
         let entityKey;
         let mdCompletion;
         if (href) {
-            entityKey = Entity.create('LINK', 'IMMUTABLE', {url: href});
+            entityKey = Entity.create('LINK', 'IMMUTABLE', {
+                url: href,
+                isCompletion: true,
+            });
             if (!this.state.isRichtextEnabled) {
                 mdCompletion = `[${completion}](${href})`;
             }

From f7145941fda926a7a67b078d8b8de10960cbee57 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 24 Jul 2017 14:42:20 +0100
Subject: [PATCH 26/34] Add tests to assert correct MD mention link stripping

Tab-completed @Mentions should only be sent as display names in the `body` of the event. The HTML should be unaffected, and always sent as an anchor tag.
---
 .../views/rooms/MessageComposerInput-test.js  | 66 +++++++++++++++++++
 test/test-utils.js                            |  7 +-
 2 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/test/components/views/rooms/MessageComposerInput-test.js b/test/components/views/rooms/MessageComposerInput-test.js
index fe379afcff..e5d98e26c6 100644
--- a/test/components/views/rooms/MessageComposerInput-test.js
+++ b/test/components/views/rooms/MessageComposerInput-test.js
@@ -9,6 +9,7 @@ import sdk from 'matrix-react-sdk';
 import UserSettingsStore from '../../../../src/UserSettingsStore';
 const MessageComposerInput = sdk.getComponent('views.rooms.MessageComposerInput');
 import MatrixClientPeg from '../../../../src/MatrixClientPeg';
+import RoomMember from 'matrix-js-sdk';
 
 function addTextToDraft(text) {
     const components = document.getElementsByClassName('public-DraftEditor-content');
@@ -31,6 +32,7 @@ describe('MessageComposerInput', () => {
         testUtils.beforeEach(this);
         sandbox = testUtils.stubClient(sandbox);
         client = MatrixClientPeg.get();
+        client.credentials = {userId: '@me:domain.com'};
 
         parentDiv = document.createElement('div');
         document.body.appendChild(parentDiv);
@@ -236,4 +238,68 @@ describe('MessageComposerInput', () => {
         expect(spy.calledOnce).toEqual(true);
         expect(spy.args[0][1]).toEqual('Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\nFusce congue sapien sed neque molestie volutpat.');
     });
+
+    it('should strip tab-completed mentions so that only the display name is sent in the plain body in Markdown mode', () => {
+        // Sending a HTML message because we have entities in the composer (because of completions)
+        const spy = sinon.spy(client, 'sendHtmlMessage');
+        mci.enableRichtext(false);
+        mci.setDisplayedCompletion({
+            completion: 'Some Member',
+            selection: mci.state.editorState.getSelection(),
+            href: `https://matrix.to/#/@some_member:domain.bla`,
+        });
+
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.args[0][1]).toEqual(
+            'Some Member',
+            'the plaintext body should only include the display name',
+        );
+        expect(spy.args[0][2]).toEqual(
+            '<a href="https://matrix.to/#/@some_member:domain.bla">Some Member</a>',
+            'the html body should contain an anchor tag with a matrix.to href and display name text',
+        );
+    });
+
+    it('should strip tab-completed mentions so that only the display name is sent in the plain body in RTE mode', () => {
+        // Sending a HTML message because we have entities in the composer (because of completions)
+        const spy = sinon.spy(client, 'sendHtmlMessage');
+        mci.enableRichtext(true);
+        mci.setDisplayedCompletion({
+            completion: 'Some Member',
+            selection: mci.state.editorState.getSelection(),
+            href: `https://matrix.to/#/@some_member:domain.bla`,
+        });
+
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.args[0][1]).toEqual('Some Member');
+        expect(spy.args[0][2]).toEqual('<a href="https://matrix.to/#/@some_member:domain.bla">Some Member</a>');
+    });
+
+    it('should not strip non-tab-completed mentions when manually typing MD', () => {
+        // Sending a HTML message because we have entities in the composer (because of completions)
+        const spy = sinon.spy(client, 'sendHtmlMessage');
+        // Markdown mode enabled
+        mci.enableRichtext(false);
+        addTextToDraft('[My Not-Tab-Completed Mention](https://matrix.to/#/@some_member:domain.bla)');
+
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.args[0][1]).toEqual('[My Not-Tab-Completed Mention](https://matrix.to/#/@some_member:domain.bla)');
+        expect(spy.args[0][2]).toEqual('<a href="https://matrix.to/#/@some_member:domain.bla">My Not-Tab-Completed Mention</a>');
+    });
+
+    it('should not strip arbitrary typed (i.e. not tab-completed) MD links', () => {
+        // Sending a HTML message because we have entities in the composer (because of completions)
+        const spy = sinon.spy(client, 'sendHtmlMessage');
+        // Markdown mode enabled
+        mci.enableRichtext(false);
+        addTextToDraft('[Click here](https://some.lovely.url)');
+
+        mci.handleReturn(sinon.stub());
+
+        expect(spy.args[0][1]).toEqual('[Click here](https://some.lovely.url)');
+        expect(spy.args[0][2]).toEqual('<a href="https://some.lovely.url">Click here</a>');
+    });
 });
diff --git a/test/test-utils.js b/test/test-utils.js
index 23f16a2e4c..06d3c03c49 100644
--- a/test/test-utils.js
+++ b/test/test-utils.js
@@ -238,7 +238,12 @@ export function mkStubRoom(roomId = null) {
     return {
         roomId,
         getReceiptsForEvent: sinon.stub().returns([]),
-        getMember: sinon.stub().returns({}),
+        getMember: sinon.stub().returns({
+            userId: '@member:domain.bla',
+            name: 'Member',
+            roomId: roomId,
+            getAvatarUrl: () => 'mxc://avatar.url/image.png',
+        }),
         getJoinedMembers: sinon.stub().returns([]),
         getPendingEvents: () => [],
         getLiveTimeline: () => stubTimeline,

From dc09ad8db4b74a7f7bf414530a95c73e0e6972e6 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 24 Jul 2017 14:50:44 +0100
Subject: [PATCH 27/34] Re-add NL

---
 src/components/views/elements/Pill.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 89607f4eb8..39987228e5 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -92,6 +92,7 @@ export default React.createClass({
                 avatar = <RoomAvatar room={room} width={16} height={16}/>;
             }
         }
+
         const classes = classNames({
             "mx_UserPill": isUserPill,
             "mx_RoomPill": isRoomPill,

From 727b1ca545a94b1734a1cf7a0e27a592425688c6 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 24 Jul 2017 15:07:33 +0100
Subject: [PATCH 28/34] Remove disambiguation from user mentions, add tooltip
 for mxid

Also add a tooltip for room pills = room alias/ID

Requires: https://github.com/matrix-org/matrix-js-sdk/pull/513
---
 src/components/views/elements/Pill.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 39987228e5..294474a41a 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -78,7 +78,7 @@ export default React.createClass({
                 new RoomMember(null, resource);
             if (member) {
                 userId = member.userId;
-                linkText = member.name;
+                linkText = member.rawDisplayName;
                 avatar = <MemberAvatar member={member} width={16} height={16}/>;
             }
         } else if (isRoomPill) {
@@ -101,11 +101,11 @@ export default React.createClass({
 
         if ((isUserPill || isRoomPill) && avatar) {
             return this.props.inMessage ?
-                <a className={classes} href={this.props.url}>
+                <a className={classes} href={this.props.url} title={resource}>
                     {avatar}
                     {linkText}
                 </a> :
-                <span className={classes}>
+                <span className={classes} title={resource}>
                     {avatar}
                     {linkText}
                 </span>;

From 61c16569cb327be350dbd67a81f95e51fb8c18a5 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 24 Jul 2017 17:18:29 +0100
Subject: [PATCH 29/34] Get user pill profile remote data

Instead of relying on the local avatar/displayname of a user, request the data from the server and update the pill if it shows up.

This required a slight refactor which means we're not doing everything in `render` now. Also I noticed unknown rooms weren't being rendered _at all_! So now you get something that looks like a normal link but with the room alias/ID in it.
---
 src/components/views/elements/Pill.js | 133 ++++++++++++++++++++------
 1 file changed, 102 insertions(+), 31 deletions(-)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 39987228e5..b7d775fff7 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -28,7 +28,7 @@ const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
 // HttpUtils transformTags to relative links
 const REGEX_LOCAL_MATRIXTO = /^#\/(?:user|room)\/(([\#\!\@\+]).*)$/;
 
-export default React.createClass({
+const Pill = React.createClass({
     statics: {
         isPillUrl: (url) => {
             return !!REGEX_MATRIXTO.exec(url);
@@ -36,6 +36,8 @@ export default React.createClass({
         isMessagePillUrl: (url) => {
             return !!REGEX_LOCAL_MATRIXTO.exec(url);
         },
+        TYPE_USER_MENTION: 'TYPE_USER_MENTION',
+        TYPE_ROOM_MENTION: 'TYPE_ROOM_MENTION',
     },
 
     props: {
@@ -47,10 +49,21 @@ export default React.createClass({
         room: PropTypes.instanceOf(Room),
     },
 
-    render: function() {
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-        const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+    getInitialState() {
+        return {
+            // ID/alias of the room/user
+            resourceId: null,
+            // Type of pill
+            pillType: null,
 
+            // The member related to the user pill
+            member: null,
+            // The room related to the room pill
+            room: null,
+        };
+    },
+
+    componentWillMount() {
         let regex = REGEX_MATRIXTO;
         if (this.props.inMessage) {
             regex = REGEX_LOCAL_MATRIXTO;
@@ -60,46 +73,102 @@ export default React.createClass({
         // resource and prefix will be undefined instead of throwing
         const matrixToMatch = regex.exec(this.props.url) || [];
 
-        const resource = matrixToMatch[1]; // The room/user ID
+        const resourceId = 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 pillType = {
+            '@': Pill.TYPE_USER_MENTION,
+            '#': Pill.TYPE_ROOM_MENTION,
+            '!': Pill.TYPE_ROOM_MENTION,
+        }[prefix];
 
-        const isUserPill = prefix === '@';
-        const isRoomPill = prefix === '#' || prefix === '!';
+        let member;
+        let room;
+        switch (pillType) {
+            case Pill.TYPE_USER_MENTION: {
+                const localMember = this.props.room.getMember(resourceId);
+                member = localMember;
+                if (!localMember) {
+                    member = new RoomMember(null, resourceId);
+                    this.doProfileLookup(resourceId, member);
+                }
+            }
+                break;
+            case Pill.TYPE_ROOM_MENTION: {
+                const localRoom = resourceId[0] === '#' ?
+                    MatrixClientPeg.get().getRooms().find((r) => {
+                        return r.getAliases().includes(resourceId);
+                    }) : MatrixClientPeg.get().getRoom(resourceId);
+                room = localRoom;
+                if (!localRoom) {
+                    // TODO: This would require a new API to resolve a room alias to
+                    // a room avatar and name.
+                    // this.doRoomProfileLookup(resourceId, member);
+                }
+            }
+                break;
+        }
+        this.setState({resourceId, pillType, member, room});
+    },
+
+    doProfileLookup: function(userId, member) {
+        MatrixClientPeg.get().getProfileInfo(userId).done((resp) => {
+            member.name = resp.displayname;
+            member.rawDisplayName = resp.displayname;
+            member.events.member = {
+                getContent: () => {
+                    return {avatar_url: resp.avatar_url};
+                },
+            };
+
+            this.setState({member});
+        }, (err) => {
+            console.error(
+                'Could not retrieve profile data for ' + userId + ':',
+                err,
+            );
+        });
+    },
+
+    render: function() {
+        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+
+        const resource = this.state.resourceId;
 
         let avatar = null;
+        let linkText = resource;
+        let pillClass;
         let userId;
-        if (isUserPill) {
-            // If this user is not a member of this room, default to the empty member
-            // TODO: This could be improved by doing an async profile lookup
-            const member = this.props.room.getMember(resource) ||
-                new RoomMember(null, resource);
-            if (member) {
-                userId = member.userId;
-                linkText = member.name;
-                avatar = <MemberAvatar member={member} width={16} height={16}/>;
+        switch (this.state.pillType) {
+            case Pill.TYPE_USER_MENTION: {
+                    // If this user is not a member of this room, default to the empty member
+                    // TODO: This could be improved by doing an async profile lookup
+                    const member = this.state.member;
+                    if (member) {
+                        userId = member.userId;
+                        linkText = member.name;
+                        avatar = <MemberAvatar member={member} width={16} height={16}/>;
+                        pillClass = 'mx_UserPill';
+                    }
             }
-        } else if (isRoomPill) {
-            const room = prefix === '#' ?
-                MatrixClientPeg.get().getRooms().find((r) => {
-                    return r.getAliases().includes(resource);
-                }) : MatrixClientPeg.get().getRoom(resource);
-
-            if (room) {
-                linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
-                avatar = <RoomAvatar room={room} width={16} height={16}/>;
+                break;
+            case Pill.TYPE_ROOM_MENTION: {
+                const room = this.state.room;
+                if (room) {
+                    linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
+                    avatar = <RoomAvatar room={room} width={16} height={16}/>;
+                    pillClass = 'mx_RoomPill';
+                }
             }
+                break;
         }
 
-        const classes = classNames({
-            "mx_UserPill": isUserPill,
-            "mx_RoomPill": isRoomPill,
+        const classes = classNames(pillClass, {
             "mx_UserPill_me": userId === MatrixClientPeg.get().credentials.userId,
         });
 
-        if ((isUserPill || isRoomPill) && avatar) {
+        if (this.state.pillType) {
             return this.props.inMessage ?
                 <a className={classes} href={this.props.url}>
                     {avatar}
@@ -115,3 +184,5 @@ export default React.createClass({
         }
     },
 });
+
+export default Pill;

From 5efd5bf9279ff6fa81c3cc7b040f2da5a87932c9 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 25 Jul 2017 09:20:14 +0100
Subject: [PATCH 30/34] done -> then, style

---
 src/components/views/elements/Pill.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index b7d775fff7..b7731182f9 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -112,7 +112,7 @@ const Pill = React.createClass({
     },
 
     doProfileLookup: function(userId, member) {
-        MatrixClientPeg.get().getProfileInfo(userId).done((resp) => {
+        MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
             member.name = resp.displayname;
             member.rawDisplayName = resp.displayname;
             member.events.member = {
@@ -120,13 +120,9 @@ const Pill = React.createClass({
                     return {avatar_url: resp.avatar_url};
                 },
             };
-
             this.setState({member});
-        }, (err) => {
-            console.error(
-                'Could not retrieve profile data for ' + userId + ':',
-                err,
-            );
+        }).catch((err) => {
+            console.error('Could not retrieve profile data for ' + userId + ':', err);
         });
     },
 

From 026582bcf7a231d72b2be3abcbeb099ab368c952 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 25 Jul 2017 09:22:08 +0100
Subject: [PATCH 31/34] Add unmounted guard

---
 src/components/views/elements/Pill.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index b7731182f9..660c5604e5 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -64,6 +64,7 @@ const Pill = React.createClass({
     },
 
     componentWillMount() {
+        this._unmounted = false;
         let regex = REGEX_MATRIXTO;
         if (this.props.inMessage) {
             regex = REGEX_LOCAL_MATRIXTO;
@@ -111,8 +112,15 @@ const Pill = React.createClass({
         this.setState({resourceId, pillType, member, room});
     },
 
+    componentWillUnmount() {
+        this._unmounted = true;
+    },
+
     doProfileLookup: function(userId, member) {
         MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
+            if (this._unmounted) {
+                return;
+            }
             member.name = resp.displayname;
             member.rawDisplayName = resp.displayname;
             member.events.member = {

From ac597996e009f51adc618cb397843f3d1ce8278c Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 25 Jul 2017 09:37:18 +0100
Subject: [PATCH 32/34] Remove outdated comment

---
 src/components/views/elements/Pill.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 660c5604e5..45c6a03ad4 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -147,7 +147,6 @@ const Pill = React.createClass({
         switch (this.state.pillType) {
             case Pill.TYPE_USER_MENTION: {
                     // If this user is not a member of this room, default to the empty member
-                    // TODO: This could be improved by doing an async profile lookup
                     const member = this.state.member;
                     if (member) {
                         userId = member.userId;

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 33/34] 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 34/34] 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>
                 );
             },