show message editor in textual body instead of replacing event tile

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()) {
+        const isEditing = 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;
 
@@ -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}

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} />;
     },
 });

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();

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}