Merge branch 'develop' into travis/feature/wellknown2

src/components/structures/MessagePanel.js

@@ -450,9 +450,14 @@ module.exports = React.createClass({
 
     _getTilesForEvent: function(prevEvent, mxEv, last) {
         const EventTile = sdk.getComponent('rooms.EventTile');
+        const MessageEditor = sdk.getComponent('elements.MessageEditor');
         const DateSeparator = sdk.getComponent('messages.DateSeparator');
         const ret = [];
 
+        if (this.props.editEvent && this.props.editEvent.getId() === mxEv.getId()) {
+            return [<MessageEditor key={mxEv.getId()} event={mxEv} />];
+        }
+
         // is this a continuation of the previous message?
         let continuation = false;
 
@@ -521,12 +526,13 @@ module.exports = React.createClass({
                 <EventTile mxEvent={mxEv}
                     continuation={continuation}
                     isRedacted={mxEv.isRedacted()}
+                    replacingEventId={mxEv.replacingEventId()}
                     onHeightChanged={this._onHeightChanged}
                     readReceipts={readReceipts}
                     readReceiptMap={this._readReceiptMap}
                     showUrlPreview={this.props.showUrlPreview}
                     checkUnmounting={this._isUnmounting}
-                    eventSendStatus={mxEv.status}
+                    eventSendStatus={mxEv.replacementOrOwnStatus()}
                     tileShape={this.props.tileShape}
                     isTwelveHour={this.props.isTwelveHour}
                     permalinkCreator={this.props.permalinkCreator}

src/components/structures/TimelinePanel.js

@@ -208,6 +208,7 @@ const TimelinePanel = React.createClass({
         MatrixClientPeg.get().on("Room.localEchoUpdated", this.onLocalEchoUpdated);
         MatrixClientPeg.get().on("Room.accountData", this.onAccountData);
         MatrixClientPeg.get().on("Event.decrypted", this.onEventDecrypted);
+        MatrixClientPeg.get().on("Event.replaced", this.onEventReplaced);
         MatrixClientPeg.get().on("sync", this.onSync);
 
         this._initTimeline(this.props);
@@ -286,6 +287,7 @@ const TimelinePanel = React.createClass({
             client.removeListener("Room.localEchoUpdated", this.onLocalEchoUpdated);
             client.removeListener("Room.accountData", this.onAccountData);
             client.removeListener("Event.decrypted", this.onEventDecrypted);
+            client.removeListener("Event.replaced", this.onEventReplaced);
             client.removeListener("sync", this.onSync);
         }
     },
@@ -402,6 +404,9 @@ const TimelinePanel = React.createClass({
         if (payload.action === 'ignore_state_changed') {
             this.forceUpdate();
         }
+        if (payload.action === "edit_event") {
+            this.setState({editEvent: payload.event});
+        }
     },
 
     onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) {
@@ -502,6 +507,17 @@ const TimelinePanel = React.createClass({
         this.forceUpdate();
     },
 
+    onEventReplaced: function(replacedEvent, room) {
+        if (this.unmounted) return;
+
+        // ignore events for other rooms
+        if (room !== this.props.timelineSet.room) return;
+
+        // we could skip an update if the event isn't in our timeline,
+        // but that's probably an early optimisation.
+        this.forceUpdate();
+    },
+
     onRoomReceipt: function(ev, room) {
         if (this.unmounted) return;
 
@@ -1244,6 +1260,7 @@ const TimelinePanel = React.createClass({
                 tileShape={this.props.tileShape}
                 resizeNotifier={this.props.resizeNotifier}
                 getRelationsForEvent={this.getRelationsForEvent}
+                editEvent={this.state.editEvent}
             />
         );
     },

src/components/views/elements/ImageView.js

@@ -195,13 +195,13 @@ export default class ImageView extends React.Component {
                     <img src={this.props.src} title={this.props.name} style={effectiveStyle} className="mainImage" />
                     <div className="mx_ImageView_labelWrapper">
                         <div className="mx_ImageView_label">
-                            <AccessibleButton className="mx_ImageView_rotateCounterClockwise" onClick={ this.rotateCounterClockwise }>
+                            <AccessibleButton className="mx_ImageView_rotateCounterClockwise" title={_t("Rotate Left")} onClick={ this.rotateCounterClockwise }>
                                 <img src={require("../../../../res/img/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
                             </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_rotateClockwise" onClick={ this.rotateClockwise }>
+                            <AccessibleButton className="mx_ImageView_rotateClockwise" title={_t("Rotate Right")} onClick={ this.rotateClockwise }>
                                 <img src={require("../../../../res/img/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="18" height="18" />
                             </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }>
+                            <AccessibleButton className="mx_ImageView_cancel" title={_t("Close")} onClick={ this.props.onFinished }>
                               <img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } />
                             </AccessibleButton>
                             <div className="mx_ImageView_shim">

src/components/views/elements/MessageEditor.js

@@ -0,0 +1,189 @@
+/*
+Copyright 2019 New Vector 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 {_t} from '../../../languageHandler';
+import PropTypes from 'prop-types';
+import dis from '../../../dispatcher';
+import EditorModel from '../../../editor/model';
+import {setCaretPosition} from '../../../editor/caret';
+import {getCaretOffsetAndText} from '../../../editor/dom';
+import {htmlSerialize, textSerialize, requiresHtml} from '../../../editor/serialize';
+import {parseEvent} from '../../../editor/deserialize';
+import Autocomplete from '../rooms/Autocomplete';
+import {PartCreator} from '../../../editor/parts';
+import {renderModel} from '../../../editor/render';
+import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
+
+export default class MessageEditor extends React.Component {
+    static propTypes = {
+        // the message event being edited
+        event: PropTypes.instanceOf(MatrixEvent).isRequired,
+    };
+
+    static contextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        const partCreator = new PartCreator(
+            () => this._autocompleteRef,
+            query => this.setState({query}),
+        );
+        this.model = new EditorModel(
+            parseEvent(this.props.event),
+            partCreator,
+            this._updateEditorState,
+        );
+        const room = this.context.matrixClient.getRoom(this.props.event.getRoomId());
+        this.state = {
+            autoComplete: null,
+            room,
+        };
+        this._editorRef = null;
+        this._autocompleteRef = null;
+    }
+
+    _updateEditorState = (caret) => {
+        renderModel(this._editorRef, this.model);
+        if (caret) {
+            try {
+                setCaretPosition(this._editorRef, this.model, caret);
+            } catch (err) {
+                console.error(err);
+            }
+        }
+        this.setState({autoComplete: this.model.autoComplete});
+    }
+
+    _onInput = (event) => {
+        const sel = document.getSelection();
+        const {caret, text} = getCaretOffsetAndText(this._editorRef, sel);
+        this.model.update(text, event.inputType, caret);
+    }
+
+    _onKeyDown = (event) => {
+        if (event.metaKey || event.altKey || event.shiftKey) {
+            return;
+        }
+        if (!this.model.autoComplete) {
+            return;
+        }
+        const autoComplete = this.model.autoComplete;
+        switch (event.key) {
+            case "Enter":
+                autoComplete.onEnter(event); break;
+            case "ArrowUp":
+                autoComplete.onUpArrow(event); break;
+            case "ArrowDown":
+                autoComplete.onDownArrow(event); break;
+            case "Tab":
+                autoComplete.onTab(event); break;
+            case "Escape":
+                autoComplete.onEscape(event); break;
+            default:
+                return; // don't preventDefault on anything else
+        }
+        event.preventDefault();
+    }
+
+    _onCancelClicked = () => {
+        dis.dispatch({action: "edit_event", event: null});
+    }
+
+    _onSaveClicked = () => {
+        const newContent = {
+            "msgtype": "m.text",
+            "body": textSerialize(this.model),
+        };
+        const contentBody = {
+            msgtype: newContent.msgtype,
+            body: ` * ${newContent.body}`,
+        };
+        if (requiresHtml(this.model)) {
+            newContent.format = "org.matrix.custom.html";
+            newContent.formatted_body = htmlSerialize(this.model);
+            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.event.getId(),
+            },
+        }, contentBody);
+
+        const roomId = this.props.event.getRoomId();
+        this.context.matrixClient.sendMessage(roomId, content);
+
+        dis.dispatch({action: "edit_event", event: null});
+    }
+
+    _onAutoCompleteConfirm = (completion) => {
+        this.model.autoComplete.onComponentConfirm(completion);
+    }
+
+    _onAutoCompleteSelectionChange = (completion) => {
+        this.model.autoComplete.onComponentSelectionChange(completion);
+    }
+
+    componentDidMount() {
+        this._updateEditorState();
+        const sel = document.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(this._editorRef);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        this._editorRef.focus();
+    }
+
+    render() {
+        let autoComplete;
+        if (this.state.autoComplete) {
+            const query = this.state.query;
+            const queryLen = query.length;
+            autoComplete = <div className="mx_MessageEditor_AutoCompleteWrapper">
+                <Autocomplete
+                    ref={ref => this._autocompleteRef = ref}
+                    query={query}
+                    onConfirm={this._onAutoCompleteConfirm}
+                    onSelectionChange={this._onAutoCompleteSelectionChange}
+                    selection={{beginning: true, end: queryLen, start: queryLen}}
+                    room={this.state.room}
+                />
+            </div>;
+        }
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        return <div className="mx_MessageEditor">
+                { autoComplete }
+                <div
+                    className="mx_MessageEditor_editor"
+                    contentEditable="true"
+                    tabIndex="1"
+                    onInput={this._onInput}
+                    onKeyDown={this._onKeyDown}
+                    ref={ref => this._editorRef = ref}
+                ></div>
+                <div className="mx_MessageEditor_buttons">
+                    <AccessibleButton kind="secondary" onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton>
+                    <AccessibleButton kind="primary" onClick={this._onSaveClicked}>{_t("Save")}</AccessibleButton>
+                </div>
+            </div>;
+    }
+}

src/components/views/elements/ReplyThread.js

@@ -63,6 +63,11 @@ export default class ReplyThread extends React.Component {
     static getParentEventId(ev) {
         if (!ev || ev.isRedacted()) return;
 
+        // XXX: For newer relations (annotations, replacements, etc.), we now
+        // have a `getRelation` helper on the event, and you might assume it
+        // could be used here for replies as well... However, the helper
+        // currently assumes the relation has a `rel_type`, which older replies
+        // do not, so this block is left as-is for now.
         const mRelatesTo = ev.getWireContent()['m.relates_to'];
         if (mRelatesTo && mRelatesTo['m.in_reply_to']) {
             const mInReplyTo = mRelatesTo['m.in_reply_to'];

src/components/views/messages/MessageActionBar.js

@@ -23,7 +23,7 @@ import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
 import { createMenu } from '../../structures/ContextualMenu';
 import SettingsStore from '../../../settings/SettingsStore';
-import { isContentActionable } from '../../../utils/EventUtils';
+import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
 
 export default class MessageActionBar extends React.PureComponent {
     static propTypes = {
@@ -58,6 +58,13 @@ export default class MessageActionBar extends React.PureComponent {
         });
     }
 
+    onEditClick = (ev) => {
+        dis.dispatch({
+            action: 'edit_event',
+            event: this.props.mxEvent,
+        });
+    }
+
     onOptionsClick = (ev) => {
         const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
         const buttonRect = ev.target.getBoundingClientRect();
@@ -96,6 +103,10 @@ export default class MessageActionBar extends React.PureComponent {
         return SettingsStore.isFeatureEnabled("feature_reactions");
     }
 
+    isEditingEnabled() {
+        return SettingsStore.isFeatureEnabled("feature_message_editing");
+    }
+
     renderAgreeDimension() {
         if (!this.isReactionsEnabled()) {
             return null;
@@ -128,6 +139,7 @@ export default class MessageActionBar extends React.PureComponent {
         let agreeDimensionReactionButtons;
         let likeDimensionReactionButtons;
         let replyButton;
+        let editButton;
 
         if (isContentActionable(this.props.mxEvent)) {
             agreeDimensionReactionButtons = this.renderAgreeDimension();
@@ -137,11 +149,18 @@ export default class MessageActionBar extends React.PureComponent {
                 onClick={this.onReplyClick}
             />;
         }
+        if (this.isEditingEnabled() && canEditContent(this.props.mxEvent)) {
+            editButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
+                title={_t("Edit")}
+                onClick={this.onEditClick}
+            />;
+        }
 
         return <div className="mx_MessageActionBar">
             {agreeDimensionReactionButtons}
             {likeDimensionReactionButtons}
             {replyButton}
+            {editButton}
             <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
                 title={_t("Options")}
                 onClick={this.onOptionsClick}

src/components/views/messages/MessageEvent.js

@@ -89,6 +89,7 @@ module.exports = React.createClass({
             showUrlPreview={this.props.showUrlPreview}
             tileShape={this.props.tileShape}
             maxImageHeight={this.props.maxImageHeight}
+            replacingEventId={this.props.replacingEventId}
             onHeightChanged={this.props.onHeightChanged} />;
     },
 });

src/components/views/messages/ReactionDimension.js

@@ -37,6 +37,7 @@ export default class ReactionDimension extends React.PureComponent {
 
         if (props.reactions) {
             props.reactions.on("Relations.add", this.onReactionsChange);
+            props.reactions.on("Relations.remove", this.onReactionsChange);
             props.reactions.on("Relations.redaction", this.onReactionsChange);
         }
     }
@@ -44,6 +45,7 @@ export default class ReactionDimension extends React.PureComponent {
     componentDidUpdate(prevProps) {
         if (prevProps.reactions !== this.props.reactions) {
             this.props.reactions.on("Relations.add", this.onReactionsChange);
+            this.props.reactions.on("Relations.remove", this.onReactionsChange);
             this.props.reactions.on("Relations.redaction", this.onReactionsChange);
             this.onReactionsChange();
         }
@@ -55,6 +57,10 @@ export default class ReactionDimension extends React.PureComponent {
                 "Relations.add",
                 this.onReactionsChange,
             );
+            this.props.reactions.removeListener(
+                "Relations.remove",
+                this.onReactionsChange,
+            );
             this.props.reactions.removeListener(
                 "Relations.redaction",
                 this.onReactionsChange,
@@ -82,7 +88,7 @@ export default class ReactionDimension extends React.PureComponent {
                 if (mxEvent.isRedacted()) {
                     return false;
                 }
-                return mxEvent.getContent()["m.relates_to"].key === option;
+                return mxEvent.getRelation().key === option;
             });
             if (!reactionForOption) {
                 continue;
@@ -107,7 +113,11 @@ export default class ReactionDimension extends React.PureComponent {
             return null;
         }
         const userId = MatrixClientPeg.get().getUserId();
-        return reactions.getAnnotationsBySender()[userId];
+        const myReactions = reactions.getAnnotationsBySender()[userId];
+        if (!myReactions) {
+            return null;
+        }
+        return [...myReactions.values()];
     }
 
     onOptionClick = (ev) => {

src/components/views/messages/ReactionsRow.js

@@ -34,6 +34,7 @@ export default class ReactionsRow extends React.PureComponent {
 
         if (props.reactions) {
             props.reactions.on("Relations.add", this.onReactionsChange);
+            props.reactions.on("Relations.remove", this.onReactionsChange);
             props.reactions.on("Relations.redaction", this.onReactionsChange);
         }
 
@@ -45,6 +46,7 @@ export default class ReactionsRow extends React.PureComponent {
     componentDidUpdate(prevProps) {
         if (prevProps.reactions !== this.props.reactions) {
             this.props.reactions.on("Relations.add", this.onReactionsChange);
+            this.props.reactions.on("Relations.remove", this.onReactionsChange);
             this.props.reactions.on("Relations.redaction", this.onReactionsChange);
             this.onReactionsChange();
         }
@@ -56,6 +58,10 @@ export default class ReactionsRow extends React.PureComponent {
                 "Relations.add",
                 this.onReactionsChange,
             );
+            this.props.reactions.removeListener(
+                "Relations.remove",
+                this.onReactionsChange,
+            );
             this.props.reactions.removeListener(
                 "Relations.redaction",
                 this.onReactionsChange,
@@ -80,7 +86,11 @@ export default class ReactionsRow extends React.PureComponent {
             return null;
         }
         const userId = MatrixClientPeg.get().getUserId();
-        return reactions.getAnnotationsBySender()[userId];
+        const myReactions = reactions.getAnnotationsBySender()[userId];
+        if (!myReactions) {
+            return null;
+        }
+        return [...myReactions.values()];
     }
 
     render() {
@@ -101,7 +111,7 @@ export default class ReactionsRow extends React.PureComponent {
                 if (mxEvent.isRedacted()) {
                     return false;
                 }
-                return mxEvent.getContent()["m.relates_to"].key === content;
+                return mxEvent.getRelation().key === content;
             });
             return <ReactionsRowButton
                 key={content}

src/components/views/messages/TextualBody.js

@@ -88,7 +88,10 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this._unmounted = false;
+        this._applyFormatting();
+    },
 
+    _applyFormatting() {
         // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
         // are still sent as plaintext URLs. If these are ever pillified in the composer,
         // we should be pillify them here by doing the linkifying BEFORE the pillifying.
@@ -123,7 +126,11 @@ module.exports = React.createClass({
         }
     },
 
-    componentDidUpdate: function() {
+    componentDidUpdate: function(prevProps) {
+        const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId;
+        if (messageWasEdited) {
+            this._applyFormatting();
+        }
         this.calculateUrlPreview();
     },
 
@@ -137,6 +144,7 @@ module.exports = React.createClass({
         // exploit that events are immutable :)
         return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() ||
                 nextProps.highlights !== this.props.highlights ||
+                nextProps.replacingEventId !== this.props.replacingEventId ||
                 nextProps.highlightLink !== this.props.highlightLink ||
                 nextProps.showUrlPreview !== this.props.showUrlPreview ||
                 nextState.links !== this.state.links ||

src/components/views/rooms/Autocomplete.js

@@ -60,18 +60,22 @@ export default class Autocomplete extends React.Component {
         };
     }
 
-    componentWillReceiveProps(newProps, state) {
-        if (this.props.room.roomId !== newProps.room.roomId) {
+    componentDidMount() {
+        this._applyNewProps();
+    }
+
+    _applyNewProps(oldQuery, oldRoom) {
+        if (oldRoom && this.props.room.roomId !== oldRoom.roomId) {
             this.autocompleter.destroy();
-            this.autocompleter = new Autocompleter(newProps.room);
+            this.autocompleter = new Autocompleter(this.props.room);
         }
 
         // Query hasn't changed so don't try to complete it
-        if (newProps.query === this.props.query) {
+        if (oldQuery === this.props.query) {
             return;
         }
 
-        this.complete(newProps.query, newProps.selection);
+        this.complete(this.props.query, this.props.selection);
     }
 
     componentWillUnmount() {
@@ -233,7 +237,8 @@ export default class Autocomplete extends React.Component {
         }
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps) {
+        this._applyNewProps(prevProps.query, prevProps.room);
         // this is the selected completion, so scroll it into view if needed
         const selectedCompletion = this.refs[`completion${this.state.selectionOffset}`];
         if (selectedCompletion && this.container) {
@@ -298,6 +303,9 @@ Autocomplete.propTypes = {
     // method invoked with range and text content when completion is confirmed
     onConfirm: PropTypes.func.isRequired,
 
+    // method invoked when selected (if any) completion changes
+    onSelectionChange: PropTypes.func,
+
     // The room in which we're autocompleting
     room: PropTypes.instanceOf(Room),
 };

src/components/views/rooms/EventTile.js

@@ -779,6 +779,7 @@ module.exports = withMatrixClient(React.createClass({
                             { thread }
                             <EventTileType ref="tile"
                                            mxEvent={this.props.mxEvent}
+                                           replacingEventId={this.props.replacingEventId}
                                            highlights={this.props.highlights}
                                            highlightLink={this.props.highlightLink}
                                            showUrlPreview={this.props.showUrlPreview}

src/components/views/rooms/MemberInfo.js

@@ -589,6 +589,7 @@ module.exports = withMatrixClient(React.createClass({
 
         can.kick = me.powerLevel >= powerLevels.kick;
         can.ban = me.powerLevel >= powerLevels.ban;
+        can.invite = me.powerLevel >= powerLevels.invite;
         can.mute = me.powerLevel >= editPowerLevel;
         can.modifyLevel = me.powerLevel >= editPowerLevel && (isMe || me.powerLevel > them.powerLevel);
         can.modifyLevelMax = me.powerLevel;
@@ -727,7 +728,7 @@ module.exports = withMatrixClient(React.createClass({
                 );
             }
 
-            if (!member || !member.membership || member.membership === 'leave') {
+            if (this.state.can.invite && (!member || !member.membership || member.membership === 'leave')) {
                 const roomId = member && member.roomId ? member.roomId : RoomViewStore.getRoomId();
                 const onInviteUserButton = async () => {
                     try {

src/components/views/rooms/MemberList.js

@@ -449,10 +449,23 @@ module.exports = React.createClass({
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.roomId);
         let inviteButton;
+
         if (room && room.getMyMembership() === 'join') {
+            // assume we can invite until proven false
+            let canInvite = true;
+
+            const plEvent = room.currentState.getStateEvents("m.room.power_levels", "");
+            const me = room.getMember(cli.getUserId());
+            if (plEvent && me) {
+                const content = plEvent.getContent();
+                if (content && content.invite > me.powerLevel) {
+                    canInvite = false;
+                }
+            }
+
             const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
             inviteButton =
-                <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
+                <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick} disabled={!canInvite}>
                     <span>{ _t('Invite to this room') }</span>
                 </AccessibleButton>;
         }