Initial support for editing messages

res/css/_components.scss

@@ -89,6 +89,7 @@
 @import "./views/elements/_InlineSpinner.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_MemberEventListSummary.scss";
+@import "./views/elements/_MessageEditor.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
 @import "./views/elements/_ReplyThread.scss";

res/css/views/elements/_MessageEditor.scss

@@ -0,0 +1,72 @@
+/*
+Copyright 2019 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.
+*/
+
+.mx_MessageEditor {
+    border-radius: 4px;
+    background-color: #f3f8fd;
+    padding: 11px 13px 7px 56px;
+
+    .editor {
+        border-radius: 4px;
+        border: solid 1px #e9edf1;
+        background-color: #ffffff;
+        padding: 10px;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        outline: none;
+
+        span {
+            display: inline-block;
+            padding: 0 5px;
+            border-radius: 4px;
+            color: white;
+        }
+
+        span.user-pill, span.room-pill {
+            border-radius: 16px;
+            display: inline-block;
+            color: $primary-fg-color;
+            background-color: $other-user-pill-bg-color;
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+    }
+
+    .buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        padding: 5px 0;
+
+        .mx_AccessibleButton {
+            margin-left: 5px;
+            padding: 5px 40px;
+        }
+    }
+
+    .model {
+        background: lightgrey;
+        padding: 5px;
+        display: none;
+        white-space: pre;
+        font-size: 12px;
+    }
+
+    .mx_MessageEditor_AutoCompleteWrapper {
+        position: relative;
+        height: 0;
+    }
+}

res/css/views/messages/_MessageActionBar.scss

@@ -69,6 +69,10 @@ limitations under the License.
     mask-image: url('$(res)/img/reply.svg');
 }
 
+.mx_MessageActionBar_editButton::after {
+    mask-image: url('$(res)/img/edit.svg');
+}
+
 .mx_MessageActionBar_optionsButton::after {
     mask-image: url('$(res)/img/icon_context.svg');
 }

src/MatrixClientPeg.js

@@ -176,6 +176,7 @@ class MatrixClientPeg {
 
     _createClient(creds: MatrixClientCreds) {
         const aggregateRelations = SettingsStore.isFeatureEnabled("feature_reactions");
+        const enableEdits = SettingsStore.isFeatureEnabled("feature_message_editing");
 
         const opts = {
             baseUrl: creds.homeserverUrl,
@@ -187,6 +188,7 @@ class MatrixClientPeg {
             forceTURN: !SettingsStore.getValue('webRtcAllowPeerToPeer', false),
             verificationMethods: [verificationMethods.SAS],
             unstableClientRelationAggregation: aggregateRelations,
+            unstableClientRelationReplacements: enableEdits,
         };
 
         this.matrixClient = createMatrixClient(opts);

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;
 

src/components/structures/TimelinePanel.js

@@ -204,6 +204,7 @@ const TimelinePanel = React.createClass({
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
         MatrixClientPeg.get().on("Room.timelineReset", this.onRoomTimelineReset);
         MatrixClientPeg.get().on("Room.redaction", this.onRoomRedaction);
+        MatrixClientPeg.get().on("Room.replaceEvent", this.onRoomReplaceEvent);
         MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
         MatrixClientPeg.get().on("Room.localEchoUpdated", this.onLocalEchoUpdated);
         MatrixClientPeg.get().on("Room.accountData", this.onAccountData);
@@ -282,6 +283,7 @@ const TimelinePanel = React.createClass({
             client.removeListener("Room.timeline", this.onRoomTimeline);
             client.removeListener("Room.timelineReset", this.onRoomTimelineReset);
             client.removeListener("Room.redaction", this.onRoomRedaction);
+            client.removeListener("Room.replaceEvent", this.onRoomReplaceEvent);
             client.removeListener("Room.receipt", this.onRoomReceipt);
             client.removeListener("Room.localEchoUpdated", this.onLocalEchoUpdated);
             client.removeListener("Room.accountData", this.onAccountData);
@@ -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();
     },
 
+    onRoomReplaceEvent: function(replacedEvent, newEvent, 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._reloadEvents();
+    },
+
     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}
             />
         );
     },