Check for a pending edit only once per render and clear any pending events while switching between edits

src/components/structures/MessagePanel.js

@@ -472,6 +472,10 @@ export default class MessagePanel extends React.Component {
         return {nextEvent, nextTile};
     }
 
+    get _roomHasPendingEdit() {
+        return localStorage.getItem(`mx_edit_room_${this.props.room.roomId}`);
+    }
+
     _getEventTiles() {
         this.eventNodes = {};
 
@@ -560,6 +564,13 @@ export default class MessagePanel extends React.Component {
             }
         }
 
+        if (!this.props.editState && this._roomHasPendingEdit) {
+            defaultDispatcher.dispatch({
+                action: "edit_event",
+                event: this.props.room.findEventById(this._roomHasPendingEdit),
+            });
+        }
+
         if (grouper) {
             ret.push(...grouper.getTiles());
         }
@@ -567,21 +578,12 @@ export default class MessagePanel extends React.Component {
         return ret;
     }
 
-    _wasEventBeingEdited = (mxEv) => {
-        return localStorage.getItem(`mx_edit_state_${mxEv.getRoomId()}
-        _${mxEv.getId()}`) !== null;
-    }
-
     _getTilesForEvent(prevEvent, mxEv, last, isGrouped=false, nextEvent, nextEventWithTile) {
         const TileErrorBoundary = sdk.getComponent('messages.TileErrorBoundary');
         const EventTile = sdk.getComponent('rooms.EventTile');
         const DateSeparator = sdk.getComponent('messages.DateSeparator');
         const ret = [];
 
-        if (!this.props.editState && this._wasEventBeingEdited(mxEv) ) {
-            defaultDispatcher.dispatch({action: "edit_event", event: mxEv});
-        }
-
         const isEditing = this.props.editState &&
             this.props.editState.getEvent().getId() === mxEv.getId();
         // local echoes have a fake date, which could even be yesterday. Treat them

src/components/views/rooms/EditMessageComposer.js

@@ -177,6 +177,14 @@ export default class EditMessageComposer extends React.Component {
         }
     }
 
+    get _editorRoomKey() {
+        return `mx_edit_room_${this._getRoom().roomId}`;
+    }
+
+    get _editorStateKey() {
+        return `mx_edit_state_${this.props.editState.getEvent().getId()}`;
+    }
+
     _cancelEdit = () => {
         this._clearStoredEditorState();
         dis.dispatch({action: "edit_event", event: null});
@@ -184,7 +192,7 @@ export default class EditMessageComposer extends React.Component {
     }
 
     get _shouldSaveStoredEditorState() {
-        return localStorage.getItem(this._editorStateKey) !== null;
+        return localStorage.getItem(this._editorRoomKey) !== null;
     }
 
     _restoreStoredEditorState(partCreator) {
@@ -200,17 +208,21 @@ export default class EditMessageComposer extends React.Component {
         }
     }
 
-    get _editorStateKey() {
+    _clearStoredEditorState() {
-        return `mx_edit_state_${this.props.editState.getEvent().getRoomId()}
+        localStorage.removeItem(this._editorRoomKey);
-        _${this.props.editState.getEvent().event.event_id}`;
+        localStorage.removeItem(this._editorStateKey);
     }
 
-    _clearStoredEditorState() {
+    _clearPreviousEdit() {
-        localStorage.removeItem(this._editorStateKey);
+        if (localStorage.getItem(this._editorRoomKey)) {
+            localStorage.removeItem(`mx_edit_state_${localStorage.getItem(this._editorRoomKey)}`);
+        }
     }
 
     _saveStoredEditorState() {
         const item = SendHistoryManager.createItem(this.model);
+        this._clearPreviousEdit();
+        localStorage.setItem(this._editorRoomKey, this.props.editState.getEvent().getId());
         localStorage.setItem(this._editorStateKey, JSON.stringify(item));
     }