wire up editor component (somewhat hacky)

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,42 @@
+/*
+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: 10px;
+
+    .editor {
+        border-radius: 4px;
+        border: solid 1px #e9edf1;
+        background-color: #ffffff;
+    }
+
+    .buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+        padding: 5px 0;
+
+        .mx_AccessibleButton {
+            background-color: $button-bg-color;
+            border-radius: 4px;
+            padding: 5px 40px;
+            color: $button-fg-color;
+            font-weight: 600;
+        }
+    }
+}

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

res/img/edit.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="15.093"
+   height="14.865319"
+   viewBox="0 0 15.093 14.865319"
+   version="1.1"
+   id="svg21"
+   sodipodi:docname="edit.svg"
+   inkscape:version="0.92.4 (unknown)">
+  <metadata
+     id="metadata25">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="816"
+     inkscape:window-height="480"
+     id="namedview23"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="3.5223881"
+     inkscape:cx="7.7965"
+     inkscape:cy="4.5141283"
+     inkscape:window-x="416"
+     inkscape:window-y="116"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg21" />
+  <defs
+     id="defs15">
+    <filter
+       id="a"
+       width="1.118"
+       height="1.158"
+       x="-0.059"
+       y="-0.079000004"
+       filterUnits="objectBoundingBox">
+      <feOffset
+         dy="2"
+         in="SourceAlpha"
+         result="shadowOffsetOuter1"
+         id="feOffset2" />
+      <feGaussianBlur
+         in="shadowOffsetOuter1"
+         result="shadowBlurOuter1"
+         stdDeviation="16"
+         id="feGaussianBlur4" />
+      <feColorMatrix
+         in="shadowBlurOuter1"
+         result="shadowMatrixOuter1"
+         values="0 0 0 0 0 0 0 0 0 0.473684211 0 0 0 0 1 0 0 0 0.241258741 0"
+         id="feColorMatrix6" />
+      <feMerge
+         id="feMerge12">
+        <feMergeNode
+           in="shadowMatrixOuter1"
+           id="feMergeNode8" />
+        <feMergeNode
+           in="SourceGraphic"
+           id="feMergeNode10" />
+      </feMerge>
+    </filter>
+  </defs>
+  <g
+     transform="translate(-1048.2035,-582.14881)"
+     id="g19"
+     style="fill:none;fill-rule:evenodd;stroke:#2e2f32;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;filter:url(#a)">
+    <path
+       d="m 1055.75,596 h 6.75 m -3.375,-12.375 a 1.591,1.591 0 0 1 2.25,2.25 l -9.375,9.375 -3,0.75 0.75,-3 z"
+       id="path17"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

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

@@ -402,6 +402,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) {
@@ -1244,6 +1247,7 @@ const TimelinePanel = React.createClass({
                 tileShape={this.props.tileShape}
                 resizeNotifier={this.props.resizeNotifier}
                 getRelationsForEvent={this.getRelationsForEvent}
+                editEvent={this.state.editEvent}
             />
         );
     },

src/components/views/elements/MessageEditor.js

@@ -0,0 +1,56 @@
+/*
+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 {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
+
+export default class MessageEditor extends React.Component {
+    static propTypes = {
+        // the latest event in this chain of replies
+        event: PropTypes.instanceOf(MatrixEvent).isRequired,
+        // called when the ReplyThread contents has changed, including EventTiles thereof
+        // onHeightChanged: PropTypes.func.isRequired,
+    };
+
+    static contextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = {};
+        this._onCancelClicked = this._onCancelClicked.bind(this);
+    }
+
+    _onCancelClicked() {
+        dis.dispatch({action: "edit_event", event: null});
+    }
+
+    render() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        return <div className="mx_MessageEditor">
+                <div className="editor" contentEditable="true">
+                    {this.props.event.getContent().body}
+                </div>
+                <div className="buttons">
+                    <AccessibleButton onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton>
+                </div>
+            </div>;
+    }
+}

src/components/views/messages/MessageActionBar.js

@@ -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();
@@ -128,6 +135,7 @@ export default class MessageActionBar extends React.PureComponent {
         let agreeDimensionReactionButtons;
         let likeDimensionReactionButtons;
         let replyButton;
+        let editButton;
 
         if (isContentActionable(this.props.mxEvent)) {
             agreeDimensionReactionButtons = this.renderAgreeDimension();
@@ -136,12 +144,17 @@ export default class MessageActionBar extends React.PureComponent {
                 title={_t("Reply")}
                 onClick={this.onReplyClick}
             />;
+            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}