Merge branch 'develop' into travis/soft-logout-design

.eslintignore.errorfiles

@@ -17,7 +17,6 @@ src/components/views/dialogs/SetPasswordDialog.js
 src/components/views/dialogs/UnknownDeviceDialog.js
 src/components/views/elements/AddressSelector.js
 src/components/views/elements/DirectorySearchBox.js
-src/components/views/elements/ImageView.js
 src/components/views/elements/MemberEventListSummary.js
 src/components/views/elements/TintableSvg.js
 src/components/views/elements/UserSelector.js

CHANGELOG.md

@@ -1,3 +1,120 @@
+Changes in [1.3.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.3.0) (2019-07-08)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.3.0-rc.1...v1.3.0)
+
+No changes since rc.1
+
+Changes in [1.3.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.3.0-rc.1) (2019-07-03)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.2.2...v1.3.0-rc.1)
+
+ * MELS handle m.room.third_party_invite
+   [\#3173](https://github.com/matrix-org/matrix-react-sdk/pull/3173)
+ * Fix logic around MemberList invites section, specifically regarding 3pid
+   [\#3172](https://github.com/matrix-org/matrix-react-sdk/pull/3172)
+ * Update from Weblate
+   [\#3176](https://github.com/matrix-org/matrix-react-sdk/pull/3176)
+ * Track the user's own typing state external to the composer
+   [\#3150](https://github.com/matrix-org/matrix-react-sdk/pull/3150)
+ * Handle associated event send failures
+   [\#3170](https://github.com/matrix-org/matrix-react-sdk/pull/3170)
+ * Improve interactive tooltip hover behaviour
+   [\#3169](https://github.com/matrix-org/matrix-react-sdk/pull/3169)
+ * Fix login type selector border
+   [\#3171](https://github.com/matrix-org/matrix-react-sdk/pull/3171)
+ * Use the event sender instead of event ID for viaServers off a tombstone
+   [\#3159](https://github.com/matrix-org/matrix-react-sdk/pull/3159)
+ * Append keyshare request dialogs instead of replacing the current dialog
+   [\#3160](https://github.com/matrix-org/matrix-react-sdk/pull/3160)
+ * Add AccessibleTooltipButton and use it for RoomSubList buttons
+   [\#3165](https://github.com/matrix-org/matrix-react-sdk/pull/3165)
+ * MemberInfo wrap Device Name/ID
+   [\#3166](https://github.com/matrix-org/matrix-react-sdk/pull/3166)
+ * Correctly populate the dispatch for joining a room via servers
+   [\#3161](https://github.com/matrix-org/matrix-react-sdk/pull/3161)
+ * Clean up legacy breadcrumbs persistence fallback
+   [\#3162](https://github.com/matrix-org/matrix-react-sdk/pull/3162)
+ * Update from Weblate
+   [\#3168](https://github.com/matrix-org/matrix-react-sdk/pull/3168)
+ * Add ability to render null-rejoins in Timeline and MELS
+   [\#3135](https://github.com/matrix-org/matrix-react-sdk/pull/3135)
+ * Add /myavatar command
+   [\#3155](https://github.com/matrix-org/matrix-react-sdk/pull/3155)
+ * Update config.json docs location
+   [\#3158](https://github.com/matrix-org/matrix-react-sdk/pull/3158)
+ * If on trackpad, don't mess with horizontal scrolling.
+   [\#3148](https://github.com/matrix-org/matrix-react-sdk/pull/3148)
+ * Limit reactions row on initial display
+   [\#3152](https://github.com/matrix-org/matrix-react-sdk/pull/3152)
+ * Unpin highlight.js
+   [\#3156](https://github.com/matrix-org/matrix-react-sdk/pull/3156)
+ * Flexboxify generic error page
+   [\#3154](https://github.com/matrix-org/matrix-react-sdk/pull/3154)
+ * Fix weird scrollbar when devtools is in a narrow browser
+   [\#3153](https://github.com/matrix-org/matrix-react-sdk/pull/3153)
+ * Show a loading state for slow peeks
+   [\#3142](https://github.com/matrix-org/matrix-react-sdk/pull/3142)
+ * Don't show error dialog when user has no webcam
+   [\#3146](https://github.com/matrix-org/matrix-react-sdk/pull/3146)
+ * Make edit history work in encrypted rooms.
+   [\#3151](https://github.com/matrix-org/matrix-react-sdk/pull/3151)
+ * Change interactive tooltip to only flip when required
+   [\#3147](https://github.com/matrix-org/matrix-react-sdk/pull/3147)
+ * Edit history dialog
+   [\#3144](https://github.com/matrix-org/matrix-react-sdk/pull/3144)
+ * Fix the scrollbar in the community bar
+   [\#3143](https://github.com/matrix-org/matrix-react-sdk/pull/3143)
+ * Add focus border to edit composer
+   [\#3145](https://github.com/matrix-org/matrix-react-sdk/pull/3145)
+ * Supply oobData to RoomPreviewBar
+   [\#3141](https://github.com/matrix-org/matrix-react-sdk/pull/3141)
+ * Don't boost trackpad users in breadcrumbs
+   [\#3140](https://github.com/matrix-org/matrix-react-sdk/pull/3140)
+ * Fix room upgrade warning being chopped off and a spelling mistake
+   [\#3139](https://github.com/matrix-org/matrix-react-sdk/pull/3139)
+ * Add quick reaction buttons in tooltip
+   [\#3138](https://github.com/matrix-org/matrix-react-sdk/pull/3138)
+ * When joining from room directory, use auto_join
+   [\#3136](https://github.com/matrix-org/matrix-react-sdk/pull/3136)
+ * Improve API and interactivity of new tooltip
+   [\#3137](https://github.com/matrix-org/matrix-react-sdk/pull/3137)
+ * Use feature flag for displaying edits as well
+   [\#3132](https://github.com/matrix-org/matrix-react-sdk/pull/3132)
+ * Add interactive tooltip style
+   [\#3131](https://github.com/matrix-org/matrix-react-sdk/pull/3131)
+ * Remove redundant extra chevrons from ContextualMenu
+   [\#3129](https://github.com/matrix-org/matrix-react-sdk/pull/3129)
+ * Editor caret improvements
+   [\#3126](https://github.com/matrix-org/matrix-react-sdk/pull/3126)
+ * Disable left/right arrow navigating completions for now
+   [\#3130](https://github.com/matrix-org/matrix-react-sdk/pull/3130)
+ * Take list nesting into account for indenting
+   [\#3128](https://github.com/matrix-org/matrix-react-sdk/pull/3128)
+ * Add file size to UploadConfirmDialog
+   [\#3127](https://github.com/matrix-org/matrix-react-sdk/pull/3127)
+ * Consider cancelled verifications when mounting IncomingSasDialog
+   [\#3123](https://github.com/matrix-org/matrix-react-sdk/pull/3123)
+ * Make the verification cancelled dialog say OK instead of Cancel
+   [\#3124](https://github.com/matrix-org/matrix-react-sdk/pull/3124)
+ * Update from Weblate
+   [\#3125](https://github.com/matrix-org/matrix-react-sdk/pull/3125)
+ * Remove unused ContextualMenu features
+   [\#3122](https://github.com/matrix-org/matrix-react-sdk/pull/3122)
+ * Fix casing of TooltipButton
+   [\#3119](https://github.com/matrix-org/matrix-react-sdk/pull/3119)
+ * De-duplicate notif badge code
+   [\#3120](https://github.com/matrix-org/matrix-react-sdk/pull/3120)
+ * Fix favicon/title badge count
+   [\#3121](https://github.com/matrix-org/matrix-react-sdk/pull/3121)
+ * Switch ugly password boxes to Field or styled input
+   [\#3071](https://github.com/matrix-org/matrix-react-sdk/pull/3071)
+ * Restore warning for if you're already logged in
+   [\#3118](https://github.com/matrix-org/matrix-react-sdk/pull/3118)
+ * Provide default name if device label is missing
+   [\#3113](https://github.com/matrix-org/matrix-react-sdk/pull/3113)
+ * Support @room pills while editing
+   [\#3108](https://github.com/matrix-org/matrix-react-sdk/pull/3108)
+
 Changes in [1.2.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.2.2) (2019-06-19)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.2.2-rc.2...v1.2.2)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -81,7 +81,7 @@
     "linkifyjs": "^2.1.6",
     "lodash": "^4.13.1",
     "lolex": "2.3.2",
-    "matrix-js-sdk": "2.0.1",
+    "matrix-js-sdk": "2.1.0",
     "optimist": "^0.6.1",
     "pako": "^1.0.5",
     "png-chunks-extract": "^1.0.0",

res/css/views/dialogs/_MessageEditHistoryDialog.scss

@@ -42,5 +42,10 @@ limitations under the License.
     .mx_EventTile_line, .mx_EventTile_content {
         margin-right: 0px;
     }
+
+    .mx_MessageActionBar .mx_AccessibleButton {
+        font-size: 10px;
+        padding: 0 8px;
+    }
 }
 

res/css/views/messages/_MessageActionBar.scss

@@ -30,9 +30,9 @@ limitations under the License.
     z-index: 1;
 
     > * {
+        white-space: nowrap;
         display: inline-block;
         position: relative;
-        width: 27px;
         border: 1px solid $message-action-bar-border-color;
         margin-left: -1px;
 
@@ -55,6 +55,11 @@ limitations under the License.
     }
 }
 
+
+.mx_MessageActionBar_maskButton {
+    width: 27px;
+}
+
 .mx_MessageActionBar_maskButton::after {
     content: '';
     position: absolute;

src/MatrixClientPeg.js

@@ -199,7 +199,7 @@ class MatrixClientPeg {
      * Throws an error if unable to deduce the homeserver name
      * (eg. if the user is not logged in)
      */
-    getHomeServerName() {
+    getHomeserverName() {
         const matches = /^@.+:(.+)$/.exec(this.matrixClient.credentials.userId);
         if (matches === null || matches.length < 1) {
             throw new Error("Failed to derive homeserver name from user ID!");

src/components/structures/RoomDirectory.js

@@ -145,7 +145,7 @@ module.exports = React.createClass({
         // too. If it's changed, appending to the list will corrupt it.
         const my_next_batch = this.nextBatch;
         const opts = {limit: 20};
-        if (my_server != MatrixClientPeg.getHomeServerName()) {
+        if (my_server != MatrixClientPeg.getHomeserverName()) {
             opts.server = my_server;
         }
         if (this.state.instanceId) {

src/components/structures/auth/SoftLogout.js

@@ -52,7 +52,7 @@ export default class SoftLogout extends React.Component {
         const hsUrl = MatrixClientPeg.get().getHomeserverUrl();
         const domainName = hsUrl === defaultServerConfig.hsUrl
             ? defaultServerConfig.hsName
-            : MatrixClientPeg.get().getHomeServerName();
+            : MatrixClientPeg.getHomeserverName();
 
         const userId = MatrixClientPeg.get().getUserId();
         const user = MatrixClientPeg.get().getUser(userId);
@@ -66,13 +66,20 @@ export default class SoftLogout extends React.Component {
             userId,
             displayName,
             loginView: LOGIN_VIEW.LOADING,
+            keyBackupNeeded: true, // assume we do while we figure it out (see componentWillMount)
 
             busy: false,
             password: "",
             errorText: "",
         };
+    }
 
+    componentDidMount(): void {
         this._initLogin();
+
+        MatrixClientPeg.get().flagAllGroupSessionsForBackup().then(remaining => {
+            this.setState({keyBackupNeeded: remaining > 0});
+        });
     }
 
     onClearAll = () => {
@@ -160,9 +167,16 @@ export default class SoftLogout extends React.Component {
                 error = <span className='mx_Login_error'>{this.state.errorText}</span>;
             }
 
+            let introText = _t("Enter your password to sign in and regain access to your account.");
+            if (this.state.keyBackupNeeded) {
+                introText = _t(
+                    "Regain access your account and recover encryption keys stored on this device. " +
+                    "Without them, you won’t be able to read all of your secure messages on any device.");
+            }
+
             return (
                 <form onSubmit={this.onPasswordLogin}>
-                    <p>{_t("Enter your password to sign in and regain access to your account.")}</p>
+                    <p>{introText}</p>
                     {error}
                     <Field
                         id="softlogout_password"

src/components/views/dialogs/ConfirmAndWaitRedactDialog.js

@@ -0,0 +1,90 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+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 { _t } from '../../../languageHandler';
+
+/*
+ * A dialog for confirming a redaction.
+ * Also shows a spinner (and possible error) while the redaction is ongoing,
+ * and only closes the dialog when the redaction is done or failed.
+ *
+ * This is done to prevent the edit history dialog racing with the redaction:
+ * if this dialog closes and the MessageEditHistoryDialog is shown again,
+ * it will fetch the relations again, which will race with the ongoing /redact request.
+ * which will cause the edit to appear unredacted.
+ *
+ * To avoid this, we keep the dialog open as long as /redact is in progress.
+ */
+export default class ConfirmAndWaitRedactDialog extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isRedacting: false,
+            redactionErrorCode: null,
+        };
+    }
+
+    onParentFinished = async (proceed) => {
+        if (proceed) {
+            this.setState({isRedacting: true});
+            try {
+                await this.props.redact();
+                this.props.onFinished(true);
+            } catch (error) {
+                const code = error.errcode || error.statusCode;
+                if (typeof code !== "undefined") {
+                    this.setState({redactionErrorCode: code});
+                } else {
+                    this.props.onFinished(true);
+                }
+            }
+        } else {
+            this.props.onFinished(false);
+        }
+    };
+
+    render() {
+        if (this.state.isRedacting) {
+            if (this.state.redactionErrorCode) {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                const code = this.state.redactionErrorCode;
+                return (
+                    <ErrorDialog
+                        onFinished={this.props.onFinished}
+                        title={_t('Error')}
+                        description={_t('You cannot delete this message. (%(code)s)', {code})}
+                    />
+                );
+            } else {
+                const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
+                const Spinner = sdk.getComponent('elements.Spinner');
+                return (
+                    <BaseDialog
+                        onFinished={this.props.onFinished}
+                        hasCancel={false}
+                        title={_t("Removing…")}>
+                        <Spinner />
+                    </BaseDialog>
+                );
+            }
+        } else {
+            const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
+            return <ConfirmRedactDialog onFinished={this.onParentFinished} />;
+        }
+    }
+}

src/components/views/dialogs/MessageEditHistoryDialog.js

@@ -46,12 +46,13 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
         const opts = {from: this.state.nextBatch};
         const roomId = this.props.mxEvent.getRoomId();
         const eventId = this.props.mxEvent.getId();
+        const client = MatrixClientPeg.get();
         let result;
         let resolve;
         let reject;
         const promise = new Promise((_resolve, _reject) => {resolve = _resolve; reject = _reject;});
         try {
-            result = await MatrixClientPeg.get().relations(
+            result = await client.relations(
                 roomId, eventId, "m.replace", "m.room.message", opts);
         } catch (error) {
             // log if the server returned an error
@@ -61,8 +62,11 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
             this.setState({error}, () => reject(error));
             return promise;
         }
+
+        const newEvents = result.events;
+        this._locallyRedactEventsIfNeeded(newEvents);
         this.setState({
-            events: this.state.events.concat(result.events),
+            events: this.state.events.concat(newEvents),
             nextBatch: result.nextBatch,
             isLoading: false,
         }, () => {
@@ -72,6 +76,21 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
         return promise;
     }
 
+    _locallyRedactEventsIfNeeded(newEvents) {
+        const roomId = this.props.mxEvent.getRoomId();
+        const client = MatrixClientPeg.get();
+        const room = client.getRoom(roomId);
+        const pendingEvents = room.getPendingEvents();
+        for (const e of newEvents) {
+            const pendingRedaction = pendingEvents.find(pe => {
+                return pe.getType() === "m.room.redaction" && pe.getAssociatedId() === e.getId();
+            });
+            if (pendingRedaction) {
+                e.markLocallyRedacted(pendingRedaction);
+            }
+        }
+    }
+
     componentDidMount() {
         this.loadMoreEdits();
     }

src/components/views/directory/NetworkDropdown.js

@@ -37,7 +37,7 @@ export default class NetworkDropdown extends React.Component {
 
         this.inputTextBox = null;
 
-        const server = MatrixClientPeg.getHomeServerName();
+        const server = MatrixClientPeg.getHomeserverName();
         this.state = {
             expanded: false,
             selectedServer: server,
@@ -138,8 +138,8 @@ export default class NetworkDropdown extends React.Component {
             servers = servers.concat(roomDirectory.servers);
         }
 
-        if (!servers.includes(MatrixClientPeg.getHomeServerName())) {
+        if (!servers.includes(MatrixClientPeg.getHomeserverName())) {
-            servers.unshift(MatrixClientPeg.getHomeServerName());
+            servers.unshift(MatrixClientPeg.getHomeserverName());
         }
 
         // For our own HS, we can use the instance_ids given in the third party protocols
@@ -148,7 +148,7 @@ export default class NetworkDropdown extends React.Component {
         // we can only show the default room list.
         for (const server of servers) {
             options.push(this._makeMenuOption(server, null, true));
-            if (server === MatrixClientPeg.getHomeServerName()) {
+            if (server === MatrixClientPeg.getHomeserverName()) {
                 options.push(this._makeMenuOption(server, null, false));
                 if (this.props.protocols) {
                     for (const proto of Object.keys(this.props.protocols)) {

src/components/views/elements/EditableItemList.js

@@ -88,6 +88,7 @@ export class EditableItem extends React.Component {
 
 export default class EditableItemList extends React.Component {
     static propTypes = {
+        id: PropTypes.string.isRequired,
         items: PropTypes.arrayOf(PropTypes.string).isRequired,
         itemsLabel: PropTypes.string,
         noItemsLabel: PropTypes.string,
@@ -121,10 +122,8 @@ export default class EditableItemList extends React.Component {
         return (
             <form onSubmit={this._onItemAdded} autoComplete={false}
                   noValidate={true} className="mx_EditableItemList_newItem">
-                <Field id="newEmailAddress" label={this.props.placeholder}
+                <Field id={`mx_EditableItemList_new_${this.props.id}`} label={this.props.placeholder} type="text"
-                       type="text" autoComplete="off" value={this.props.newItem}
+                       autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged} />
-                       onChange={this._onNewItemChanged}
-                />
                 <AccessibleButton onClick={this._onItemAdded} kind="primary">
                     {_t("Add")}
                 </AccessibleButton>
@@ -135,11 +134,11 @@ export default class EditableItemList extends React.Component {
     render() {
         const editableItems = this.props.items.map((item, index) => {
             if (!this.props.canRemove) {
-                return <li>{item}</li>;
+                return <li key={item}>{item}</li>;
             }
 
             return <EditableItem
-                key={index}
+                key={item}
                 index={index}
                 value={item}
                 onRemove={this._onItemRemoved}

src/components/views/elements/ImageView.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -60,7 +61,7 @@ export default class ImageView extends React.Component {
     }
 
     onKeyDown = (ev) => {
-        if (ev.keyCode == 27) { // escape
+        if (ev.keyCode === 27) { // escape
             ev.stopPropagation();
             ev.preventDefault();
             this.props.onFinished();
@@ -72,7 +73,6 @@ export default class ImageView extends React.Component {
         Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
             onFinished: (proceed) => {
                 if (!proceed) return;
-                const self = this;
                 MatrixClientPeg.get().redactEvent(
                     this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(),
                 ).catch(function(e) {
@@ -153,32 +153,38 @@ export default class ImageView extends React.Component {
             size = filesize(this.props.fileSize);
         }
 
-        let size_res;
+        let sizeRes;
         if (size && res) {
-            size_res = size + ", " + res;
+            sizeRes = size + ", " + res;
         } else {
-            size_res = size || res;
+            sizeRes = size || res;
         }
 
+        let mayRedact = false;
         const showEventMeta = !!this.props.mxEvent;
 
         let eventMeta;
         if (showEventMeta) {
             // Figure out the sender, defaulting to mxid
             let sender = this.props.mxEvent.getSender();
-            const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+            const cli = MatrixClientPeg.get();
+            const room = cli.getRoom(this.props.mxEvent.getRoomId());
             if (room) {
+                mayRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
                 const member = room.getMember(sender);
                 if (member) sender = member.name;
             }
 
             eventMeta = (<div className="mx_ImageView_metadata">
-                { _t('Uploaded on %(date)s by %(user)s', {date: formatDate(new Date(this.props.mxEvent.getTs())), user: sender}) }
+                { _t('Uploaded on %(date)s by %(user)s', {
+                    date: formatDate(new Date(this.props.mxEvent.getTs())),
+                    user: sender,
+                }) }
             </div>);
         }
 
         let eventRedact;
-        if (showEventMeta) {
+        if (mayRedact) {
             eventRedact = (<div className="mx_ImageView_button" onClick={this.onRedactClick}>
                 { _t('Remove') }
             </div>);
@@ -213,7 +219,7 @@ export default class ImageView extends React.Component {
                             <a className="mx_ImageView_link" href={ this.props.src } download={ this.props.name } target="_blank" rel="noopener">
                                 <div className="mx_ImageView_download">
                                         { _t('Download this file') }<br />
-                                         <span className="mx_ImageView_size">{ size_res }</span>
+                                         <span className="mx_ImageView_size">{ sizeRes }</span>
                                 </div>
                             </a>
                             { eventRedact }

src/components/views/elements/MessageEditor.js

@@ -33,6 +33,80 @@ import {MatrixClient} from 'matrix-js-sdk';
 import classNames from 'classnames';
 import {EventStatus} from 'matrix-js-sdk';
 
+function _isReply(mxEvent) {
+    const relatesTo = mxEvent.getContent()["m.relates_to"];
+    const isReply = !!(relatesTo && relatesTo["m.in_reply_to"]);
+    return isReply;
+}
+
+function getHtmlReplyFallback(mxEvent) {
+    const html = mxEvent.getContent().formatted_body;
+    if (!html) {
+        return "";
+    }
+    const rootNode = new DOMParser().parseFromString(html, "text/html").body;
+    const mxReply = rootNode.querySelector("mx-reply");
+    return (mxReply && mxReply.outerHTML) || "";
+}
+
+function getTextReplyFallback(mxEvent) {
+    const body = mxEvent.getContent().body;
+    const lines = body.split("\n").map(l => l.trim());
+    if (lines.length > 2 && lines[0].startsWith("> ") && lines[1].length === 0) {
+        return `${lines[0]}\n\n`;
+    }
+    return "";
+}
+
+function _isEmote(model) {
+    const firstPart = model.parts[0];
+    return firstPart && firstPart.type === "plain" && firstPart.text.startsWith("/me ");
+}
+
+function createEditContent(model, editedEvent) {
+    const isEmote = _isEmote(model);
+    if (isEmote) {
+        // trim "/me "
+        model = model.clone();
+        model.removeText({index: 0, offset: 0}, 4);
+    }
+    const isReply = _isReply(editedEvent);
+    let plainPrefix = "";
+    let htmlPrefix = "";
+
+    if (isReply) {
+        plainPrefix = getTextReplyFallback(editedEvent);
+        htmlPrefix = getHtmlReplyFallback(editedEvent);
+    }
+
+    const body = textSerialize(model);
+
+    const newContent = {
+        "msgtype": isEmote ? "m.emote" : "m.text",
+        "body": plainPrefix + body,
+    };
+    const contentBody = {
+        msgtype: newContent.msgtype,
+        body: `${plainPrefix} * ${body}`,
+    };
+
+    const formattedBody = htmlSerializeIfNeeded(model, {forceHTML: isReply});
+    if (formattedBody) {
+        newContent.format = "org.matrix.custom.html";
+        newContent.formatted_body = htmlPrefix + formattedBody;
+        contentBody.format = newContent.format;
+        contentBody.formatted_body = `${htmlPrefix} * ${formattedBody}`;
+    }
+
+    return Object.assign({
+        "m.new_content": newContent,
+        "m.relates_to": {
+            "rel_type": "m.replace",
+            "event_id": editedEvent.getId(),
+        },
+    }, contentBody);
+}
+
 export default class MessageEditor extends React.Component {
     static propTypes = {
         // the message event being edited
@@ -53,7 +127,7 @@ export default class MessageEditor extends React.Component {
         };
         this._editorRef = null;
         this._autocompleteRef = null;
-        this._hasModifications = false;
+        this._modifiedFlag = false;
     }
 
     _getRoom() {
@@ -73,7 +147,7 @@ export default class MessageEditor extends React.Component {
     }
 
     _onInput = (event) => {
-        this._hasModifications = true;
+        this._modifiedFlag = true;
         const sel = document.getSelection();
         const {caret, text} = getCaretOffsetAndText(this._editorRef, sel);
         this.model.update(text, event.inputType, caret);
@@ -131,7 +205,7 @@ export default class MessageEditor extends React.Component {
         } else if (event.key === "Escape") {
             this._cancelEdit();
         } else if (event.key === "ArrowUp") {
-            if (this._hasModifications || !this._isCaretAtStart()) {
+            if (this._modifiedFlag || !this._isCaretAtStart()) {
                 return;
             }
             const previousEvent = findEditableEvent(this._getRoom(), false, this.props.editState.getEvent().getId());
@@ -140,7 +214,7 @@ export default class MessageEditor extends React.Component {
                 event.preventDefault();
             }
         } else if (event.key === "ArrowDown") {
-            if (this._hasModifications || !this._isCaretAtEnd()) {
+            if (this._modifiedFlag || !this._isCaretAtEnd()) {
                 return;
             }
             const nextEvent = findEditableEvent(this._getRoom(), true, this.props.editState.getEvent().getId());
@@ -159,45 +233,28 @@ export default class MessageEditor extends React.Component {
         dis.dispatch({action: 'focus_composer'});
     }
 
-    _isEmote() {
+    _hasModifications(newContent) {
-        const firstPart = this.model.parts[0];
+        // if nothing has changed then bail
-        return firstPart && firstPart.type === "plain" && firstPart.text.startsWith("/me ");
+        const oldContent = this.props.editState.getEvent().getContent();
+        if (!this._modifiedFlag ||
+            (oldContent["msgtype"] === newContent["msgtype"] && oldContent["body"] === newContent["body"] &&
+            oldContent["format"] === newContent["format"] &&
+            oldContent["formatted_body"] === newContent["formatted_body"])) {
+            return false;
+        }
+        return true;
     }
 
     _sendEdit = () => {
-        const isEmote = this._isEmote();
+        const editedEvent = this.props.editState.getEvent();
-        let model = this.model;
+        const editContent = createEditContent(this.model, editedEvent);
-        if (isEmote) {
+        const newContent = editContent["m.new_content"];
-            // trim "/me "
+        if (!this._hasModifications(newContent)) {
-            model = model.clone();
+            return;
-            model.removeText({index: 0, offset: 0}, 4);
         }
-        const newContent = {
+        const roomId = editedEvent.getRoomId();
-            "msgtype": isEmote ? "m.emote" : "m.text",
-            "body": textSerialize(model),
-        };
-        const contentBody = {
-            msgtype: newContent.msgtype,
-            body: ` * ${newContent.body}`,
-        };
-        const formattedBody = htmlSerializeIfNeeded(model);
-        if (formattedBody) {
-            newContent.format = "org.matrix.custom.html";
-            newContent.formatted_body = formattedBody;
-            contentBody.format = newContent.format;
-            contentBody.formatted_body = ` * ${newContent.formatted_body}`;
-        }
-        const content = Object.assign({
-            "m.new_content": newContent,
-            "m.relates_to": {
-                "rel_type": "m.replace",
-                "event_id": this.props.editState.getEvent().getId(),
-            },
-        }, contentBody);
-
-        const roomId = this.props.editState.getEvent().getRoomId();
         this._cancelPreviousPendingEdit();
-        this.context.matrixClient.sendMessage(roomId, content);
+        this.context.matrixClient.sendMessage(roomId, editContent);
 
         dis.dispatch({action: "edit_event", event: null});
         dis.dispatch({action: 'focus_composer'});

src/components/views/messages/EditHistoryMessage.js

@@ -20,6 +20,11 @@ import * as HtmlUtils from '../../../HtmlUtils';
 import {formatTime} from '../../../DateUtils';
 import {MatrixEvent} from 'matrix-js-sdk';
 import {pillifyLinks} from '../../../utils/pillify';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import Modal from '../../../Modal';
+import classNames from 'classnames';
 
 export default class EditHistoryMessage extends React.PureComponent {
     static propTypes = {
@@ -27,35 +32,130 @@ export default class EditHistoryMessage extends React.PureComponent {
         mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,
     };
 
+    constructor(props) {
+        super(props);
+        const cli = MatrixClientPeg.get();
+        const {userId} = cli.credentials;
+        const event = this.props.mxEvent;
+        const room = cli.getRoom(event.getRoomId());
+        if (event.localRedactionEvent()) {
+            event.localRedactionEvent().on("status", this._onAssociatedStatusChanged);
+        }
+        const canRedact = room.currentState.maySendRedactionForEvent(event, userId);
+        this.state = {canRedact, sendStatus: event.getAssociatedStatus()};
+    }
+
+    _onAssociatedStatusChanged = () => {
+        this.setState({sendStatus: this.props.mxEvent.getAssociatedStatus()});
+    };
+
+    _onRedactClick = async () => {
+        const event = this.props.mxEvent;
+        const cli = MatrixClientPeg.get();
+        const ConfirmAndWaitRedactDialog = sdk.getComponent("dialogs.ConfirmAndWaitRedactDialog");
+
+        Modal.createTrackedDialog('Confirm Redact Dialog', 'Edit history', ConfirmAndWaitRedactDialog, {
+            redact: () => cli.redactEvent(event.getRoomId(), event.getId()),
+        }, 'mx_Dialog_confirmredact');
+    };
+
+    _onViewSourceClick = () => {
+        const ViewSource = sdk.getComponent('structures.ViewSource');
+        Modal.createTrackedDialog('View Event Source', 'Edit history', ViewSource, {
+            roomId: this.props.mxEvent.getRoomId(),
+            eventId: this.props.mxEvent.getId(),
+            content: this.props.mxEvent.event,
+        }, 'mx_Dialog_viewsource');
+    };
+
+    pillifyLinks() {
+        // not present for redacted events
+        if (this.refs.content) {
+            pillifyLinks(this.refs.content.children, this.props.mxEvent);
+        }
+    }
+
     componentDidMount() {
-        pillifyLinks(this.refs.content.children, this.props.mxEvent);
+        this.pillifyLinks();
+    }
+
+    componentWillUnmount() {
+        const event = this.props.mxEvent;
+        if (event.localRedactionEvent()) {
+            event.localRedactionEvent().off("status", this._onAssociatedStatusChanged);
+        }
     }
 
     componentDidUpdate() {
-        pillifyLinks(this.refs.content.children, this.props.mxEvent);
+        this.pillifyLinks();
+    }
+
+    _renderActionBar() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        // hide the button when already redacted
+        let redactButton;
+        if (!this.props.mxEvent.isRedacted()) {
+            redactButton = (
+                <AccessibleButton onClick={this._onRedactClick} disabled={!this.state.canRedact}>
+                    {_t("Remove")}
+                </AccessibleButton>
+            );
+        }
+        const viewSourceButton = (
+            <AccessibleButton onClick={this._onViewSourceClick}>
+                {_t("View Source")}
+            </AccessibleButton>
+        );
+        // disabled remove button when not allowed
+        return (
+            <div className="mx_MessageActionBar">
+                {redactButton}
+                {viewSourceButton}
+            </div>
+        );
     }
 
     render() {
         const {mxEvent} = this.props;
         const originalContent = mxEvent.getOriginalContent();
         const content = originalContent["m.new_content"] || originalContent;
-        const contentElements = HtmlUtils.bodyToHtml(content);
         let contentContainer;
-        if (mxEvent.getContent().msgtype === "m.emote") {
+        if (mxEvent.isRedacted()) {
-            const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+            const UnknownBody = sdk.getComponent('messages.UnknownBody');
-            contentContainer = (<div className="mx_EventTile_content" ref="content">*&nbsp;
+            contentContainer = <UnknownBody mxEvent={this.props.mxEvent} />;
-                <span className="mx_MEmoteBody_sender">{ name }</span>
-                &nbsp;{contentElements}
-            </div>);
         } else {
-            contentContainer = (<div className="mx_EventTile_content" ref="content">{contentElements}</div>);
+            const contentElements = HtmlUtils.bodyToHtml(content, null, {stripReplyFallback: true});
+            if (mxEvent.getContent().msgtype === "m.emote") {
+                const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+                contentContainer = (
+                    <div className="mx_EventTile_content" ref="content">*&nbsp;
+                        <span className="mx_MEmoteBody_sender">{ name }</span>
+                        &nbsp;{contentElements}
+                    </div>
+                );
+            } else {
+                contentContainer = <div className="mx_EventTile_content" ref="content">{contentElements}</div>;
+            }
         }
+
         const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour);
-        return <li className="mx_EventTile">
+        const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.state.sendStatus) !== -1);
-            <div className="mx_EventTile_line">
+        const classes = classNames({
-                <span className="mx_MessageTimestamp">{timestamp}</span>
+            "mx_EventTile": true,
-                { contentContainer }
+            "mx_EventTile_redacted": mxEvent.isRedacted(),
-            </div>
+            "mx_EventTile_sending": isSending,
-        </li>;
+            "mx_EventTile_notSent": this.state.sendStatus === 'not_sent',
+        });
+        return (
+            <li>
+                <div className={classes}>
+                    <div className="mx_EventTile_line">
+                        <span className="mx_MessageTimestamp">{timestamp}</span>
+                        { contentContainer }
+                        { this._renderActionBar() }
+                    </div>
+                </div>
+            </li>
+        );
     }
 }

src/components/views/messages/TextualBody.js

@@ -364,11 +364,11 @@ module.exports = React.createClass({
         let editedTooltip;
         if (this.state.editedMarkerHovered) {
             const Tooltip = sdk.getComponent('elements.Tooltip');
-            const editEvent = this.props.mxEvent.replacingEvent();
+            const date = this.props.mxEvent.replacingEventDate();
-            const date = editEvent && formatDate(editEvent.getDate());
+            const dateString = date && formatDate(date);
             editedTooltip = <Tooltip
                 tooltipClassName="mx_Tooltip_timeline"
-                label={_t("Edited at %(date)s. Click to view edits.", {date})}
+                label={_t("Edited at %(date)s. Click to view edits.", {date: dateString})}
             />;
         }
         return (

src/components/views/room_settings/AliasSettings.js

@@ -234,6 +234,7 @@ export default class AliasSettings extends React.Component {
             <div className='mx_AliasSettings'>
                 {canonicalAliasSection}
                 <EditableItemList
+                    id="roomAliases"
                     className={"mx_RoomSettings_localAliases"}
                     items={this.state.domainToAliases[localDomain] || []}
                     newItem={this.state.newAlias}

src/components/views/room_settings/RelatedGroupSettings.js

@@ -103,6 +103,7 @@ export default class RelatedGroupSettings extends React.Component {
         const EditableItemList = sdk.getComponent('elements.EditableItemList');
         return <div>
             <EditableItemList
+                id="relatedGroups"
                 items={this.state.newGroupsList}
                 className={"mx_RelatedGroupSettings"}
                 newItem={this.state.newGroupId}

src/components/views/rooms/MessageComposerInput.js

@@ -1143,7 +1143,7 @@ export default class MessageComposerInput extends React.Component {
 
         const editingEnabled = SettingsStore.isFeatureEnabled("feature_message_editing");
         const shouldSelectHistory = (editingEnabled && e.altKey) || !editingEnabled;
-        const shouldEditLastMessage = editingEnabled && !e.altKey && up;
+        const shouldEditLastMessage = editingEnabled && !e.altKey && up && !RoomViewStore.getQuotingEvent();
 
         if (shouldSelectHistory) {
             // Try select composer history

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js

@@ -139,7 +139,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
                     {minimizeToTrayOption}
                     {autoLaunchOption}
                     <Field id={"autocompleteDelay"} label={_t('Autocomplete delay (ms)')} type='number'
-                           value={SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay')}
+                           value={SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay').toString(10)}
                            onChange={this._onAutocompleteDelayChange} />
                 </div>
             </div>

src/editor/serialize.js

@@ -33,10 +33,10 @@ export function mdSerialize(model) {
     }, "");
 }
 
-export function htmlSerializeIfNeeded(model) {
+export function htmlSerializeIfNeeded(model, {forceHTML = false}) {
     const md = mdSerialize(model);
     const parser = new Markdown(md);
-    if (!parser.isPlainText()) {
+    if (!parser.isPlainText() || forceHTML) {
         return parser.toHTML();
     }
 }

src/i18n/strings/en_EN.json

@@ -93,6 +93,7 @@
     "Failed to add the following rooms to %(groupId)s:": "Failed to add the following rooms to %(groupId)s:",
     "Unnamed Room": "Unnamed Room",
     "Error": "Error",
+    "You cannot delete this message. (%(code)s)": "You cannot delete this message. (%(code)s)",
     "Unable to load! Check your network connectivity and try again.": "Unable to load! Check your network connectivity and try again.",
     "Dismiss": "Dismiss",
     "Riot does not have permission to send you notifications - please check your browser settings": "Riot does not have permission to send you notifications - please check your browser settings",
@@ -1126,6 +1127,7 @@
     "Start chatting": "Start chatting",
     "Click on the button below to start chatting!": "Click on the button below to start chatting!",
     "Start Chatting": "Start Chatting",
+    "Removing…": "Removing…",
     "Confirm Removal": "Confirm Removal",
     "Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.": "Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.",
     "Clear all data on this device?": "Clear all data on this device?",
@@ -1310,7 +1312,6 @@
     "Reject invitation": "Reject invitation",
     "Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",
     "Unable to reject invite": "Unable to reject invite",
-    "You cannot delete this message. (%(code)s)": "You cannot delete this message. (%(code)s)",
     "Resend": "Resend",
     "Resend edit": "Resend edit",
     "Resend %(unsentCount)s reaction(s)": "Resend %(unsentCount)s reaction(s)",
@@ -1586,8 +1587,10 @@
     "You can now close this window or <a>log in</a> to your new account.": "You can now close this window or <a>log in</a> to your new account.",
     "Registration Successful": "Registration Successful",
     "Create your account": "Create your account",
+    "Failed to re-authenticate due to a homeserver problem": "Failed to re-authenticate due to a homeserver problem",
     "Failed to re-authenticate": "Failed to re-authenticate",
     "Enter your password to sign in and regain access to your account.": "Enter your password to sign in and regain access to your account.",
+    "Regain access your account and recover encryption keys stored on this device. Without them, you won’t be able to read all of your secure messages on any device.": "Regain access your account and recover encryption keys stored on this device. Without them, you won’t be able to read all of your secure messages on any device.",
     "Forgotten your password?": "Forgotten your password?",
     "Cannot re-authenticate with your account. Please contact your homeserver admin for more information.": "Cannot re-authenticate with your account. Please contact your homeserver admin for more information.",
     "You're signed out": "You're signed out",

yarn.lock

@@ -4943,10 +4943,10 @@ mathml-tag-names@^2.0.1:
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.1.tgz#6dff66c99d55ecf739ca53c492e626f1d12a33cc"
   integrity sha512-pWB896KPGSGkp1XtyzRBftpTzwSOL0Gfk0wLvxt4f2mgzjY19o0LxJ3U25vNWTzsh7da+KTbuXQoQ3lOJZ8WHw==
 
-matrix-js-sdk@2.0.1:
+matrix-js-sdk@2.1.0:
-  version "2.0.1"
+  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-2.0.1.tgz#e9691c7fc142793aa8cd79e92d45698bcc5da8c4"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-2.1.0.tgz#a8192d700e4d96028cdb64f3453935292e76faaf"
-  integrity sha512-+yj9fBdIE65v1+46TL/eLQGohtNZGBEtOD1n3nTAVBMogyVb2bpUWnqTli0ghiOCG9MKq7tWi+G4bDBTABxuxA==
+  integrity sha512-fVgqxp9rrcGhQ9cnU2WW3KJCOIn/WJu/G2tTgWEtzeDkUl22JXiB6iYfrJO7XF8nm8W5DbJVtxWRRnV8BvWatQ==
   dependencies:
     another-json "^0.2.0"
     babel-runtime "^6.26.0"