Fix issue with redacting via edit composer flow causing stuck editStates (#8184)

src/Editing.ts

@@ -0,0 +1,20 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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 { TimelineRenderingType } from "./contexts/RoomContext";
+
+export const editorRoomKey = (roomId: string, context: TimelineRenderingType) => `mx_edit_room_${roomId}_${context}`;
+export const editorStateKey = (eventId: string) => `mx_edit_state_${eventId}`;

src/components/structures/MessagePanel.tsx

@@ -53,6 +53,7 @@ import EditorStateTransfer from "../../utils/EditorStateTransfer";
 import { Action } from '../../dispatcher/actions';
 import { getEventDisplayInfo } from "../../utils/EventUtils";
 import { IReadReceiptInfo } from "../views/rooms/ReadReceiptMarker";
+import { editorRoomKey } from "../../Editing";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
@@ -307,9 +308,10 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
         const pendingEditItem = this.pendingEditItem;
         if (!this.props.editState && this.props.room && pendingEditItem) {
+            const event = this.props.room.findEventById(pendingEditItem);
             defaultDispatcher.dispatch({
                 action: Action.EditEvent,
-                event: this.props.room.findEventById(pendingEditItem),
+                event: !event?.isRedacted() ? event : null,
                 timelineRenderingType: this.context.timelineRenderingType,
             });
         }
@@ -613,13 +615,15 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         if (!this.props.room) {
             return undefined;
         }
+
         try {
-            return localStorage.getItem(`mx_edit_room_${this.props.room.roomId}_${this.context.timelineRenderingType}`);
+            return localStorage.getItem(editorRoomKey(this.props.room.roomId, this.context.timelineRenderingType));
         } catch (err) {
             logger.error(err);
             return undefined;
         }
     }
+
     private getEventTiles(): ReactNode[] {
         let i;
 
@@ -722,10 +726,8 @@ export default class MessagePanel extends React.Component<IProps, IState> {
     ): ReactNode[] {
         const ret = [];
 
-        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
-        // as 'today' for the date separators.
+        const isEditing = this.props.editState?.getEvent().getId() === mxEv.getId();
+        // local echoes have a fake date, which could even be yesterday. Treat them as 'today' for the date separators.
         let ts1 = mxEv.getTs();
         let eventDate = mxEv.getDate();
         if (mxEv.status) {

src/components/structures/RoomView.tsx

@@ -366,7 +366,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         this.checkWidgets(this.state.room);
     };
 
-    private checkWidgets = (room) => {
+    private checkWidgets = (room: Room): void => {
         this.setState({
             hasPinnedWidgets: WidgetLayoutStore.instance.hasPinnedWidgets(room),
             mainSplitContentType: this.getMainSplitContentType(room),
@@ -374,7 +374,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         });
     };
 
-    private getMainSplitContentType = (room) => {
+    private getMainSplitContentType = (room: Room) => {
         if (SettingsStore.getValue("feature_voice_rooms") && room.isCallRoom()) {
             return MainSplitContentType.Video;
         }

src/components/views/rooms/EditMessageComposer.tsx

@@ -47,6 +47,7 @@ import { ComposerType } from "../../../dispatcher/payloads/ComposerInsertPayload
 import { getSlashCommand, isSlashCommand, runSlashCommand, shouldSendAnyway } from "../../../editor/commands";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { PosthogAnalytics } from "../../../PosthogAnalytics";
+import { editorRoomKey, editorStateKey } from "../../../Editing";
 
 function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
     const html = mxEvent.getContent().formatted_body;
@@ -224,11 +225,11 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
     }
 
     private get editorRoomKey(): string {
-        return `mx_edit_room_${this.getRoom().roomId}_${this.context.timelineRenderingType}`;
+        return editorRoomKey(this.props.editState.getEvent().getRoomId(), this.context.timelineRenderingType);
     }
 
     private get editorStateKey(): string {
-        return `mx_edit_state_${this.props.editState.getEvent().getId()}`;
+        return editorStateKey(this.props.editState.getEvent().getId());
     }
 
     private get events(): MatrixEvent[] {
@@ -316,6 +317,9 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
             this.cancelPreviousPendingEdit();
             createRedactEventDialog({
                 mxEvent: editedEvent,
+                onCloseDialog: () => {
+                    this.cancelEdit();
+                },
             });
             return;
         }