From 9a3752c5713e2b05bfa9f9ac68b7b8f78e52971f Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 17 May 2019 15:30:07 +0100
Subject: [PATCH] show message editor in textual body instead of replacing
 event tile

---
 src/components/structures/MessagePanel.js     | 7 ++-----
 src/components/views/messages/MessageEvent.js | 1 +
 src/components/views/messages/TextualBody.js  | 5 +++++
 src/components/views/rooms/EventTile.js       | 1 +
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index dbaab57adf..001097f846 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -450,14 +450,10 @@ 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} />];
-        }
-
+        const isEditing = this.props.editEvent && this.props.editEvent.getId() === mxEv.getId();
         // is this a continuation of the previous message?
         let continuation = false;
 
@@ -527,6 +523,7 @@ module.exports = React.createClass({
                     continuation={continuation}
                     isRedacted={mxEv.isRedacted()}
                     replacingEventId={mxEv.replacingEventId()}
+                    isEditing={isEditing}
                     onHeightChanged={this._onHeightChanged}
                     readReceipts={readReceipts}
                     readReceiptMap={this._readReceiptMap}
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 357da1cd10..8c90ec5a46 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -90,6 +90,7 @@ module.exports = React.createClass({
             tileShape={this.props.tileShape}
             maxImageHeight={this.props.maxImageHeight}
             replacingEventId={this.props.replacingEventId}
+            isEditing={this.props.isEditing}
             onHeightChanged={this.props.onHeightChanged} />;
     },
 });
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 44c807e4e4..c4a60c3bab 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -148,6 +148,7 @@ module.exports = React.createClass({
                 nextProps.replacingEventId !== this.props.replacingEventId ||
                 nextProps.highlightLink !== this.props.highlightLink ||
                 nextProps.showUrlPreview !== this.props.showUrlPreview ||
+                nextProps.isEditing !== this.props.isEditing ||
                 nextState.links !== this.state.links ||
                 nextState.editedMarkerHovered !== this.state.editedMarkerHovered ||
                 nextState.widgetHidden !== this.state.widgetHidden);
@@ -463,6 +464,10 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        if (this.props.isEditing) {
+            const MessageEditor = sdk.getComponent('elements.MessageEditor');
+            return <MessageEditor event={this.props.mxEvent} />;
+        }
         const EmojiText = sdk.getComponent('elements.EmojiText');
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index f38e3c3946..9977d10395 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -780,6 +780,7 @@ module.exports = withMatrixClient(React.createClass({
                             <EventTileType ref="tile"
                                            mxEvent={this.props.mxEvent}
                                            replacingEventId={this.props.replacingEventId}
+                                           isEditing={this.props.isEditing}
                                            highlights={this.props.highlights}
                                            highlightLink={this.props.highlightLink}
                                            showUrlPreview={this.props.showUrlPreview}