Fix msgtype changes from edits not rerendering timeline tiles (#33416)

* Fix msgtype changes from edits not rerendering timeline tiles

* Change approach to view model listeners instead

* Repaint the mounted tile on MatrixEventEvent.Replaced

apps/web/src/components/views/rooms/EventTile.tsx

@@ -620,6 +620,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
     /** called when the event is edited after we show it. */
     private readonly onReplaced = (): void => {
+        this.forceUpdate();
         // re-verify the event if it is replaced (the edit may not be verified)
         this.verifyEvent();
     };
@@ -995,6 +996,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
     public render(): ReactNode {
         const msgtype = this.props.mxEvent.getContent().msgtype;
         const eventType = this.props.mxEvent.getType();
+        const replacingEventId = this.props.mxEvent.replacingEventId();
 
         const {
             hasRenderer,
@@ -1335,6 +1337,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
                                 // overrides
                                 ref: this.tile,
+                                replacingEventId,
                                 isSeeingThroughMessageHiddenForModeration,
 
                                 // appease TS

apps/web/src/viewmodels/message-body/EventContentBodyViewModel.ts

@@ -5,7 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type IContent, type MatrixClient, type MatrixEvent, MsgType, PushRuleKind } from "matrix-js-sdk/src/matrix";
+import {
+    type IContent,
+    type MatrixClient,
+    type MatrixEvent,
+    MatrixEventEvent,
+    MsgType,
+    PushRuleKind,
+} from "matrix-js-sdk/src/matrix";
 import parse from "html-react-parser";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 import {
@@ -169,6 +176,8 @@ export class EventContentBodyViewModel
     extends BaseViewModel<EventContentBodyViewSnapshot, EventContentBodyViewModelProps>
     implements EventContentBodyViewModelInterface
 {
+    private watchedEvent?: MatrixEvent;
+
     private static readonly computeBodySnapshot = (
         props: EventContentBodyViewModelProps,
     ): Pick<EventContentBodyViewSnapshot, "body" | "formattedBody" | "className"> => {
@@ -226,6 +235,8 @@ export class EventContentBodyViewModel
         };
 
         super(propsWithSettingDefaults, EventContentBodyViewModel.computeSnapshot(propsWithSettingDefaults));
+        this.watchEvent(propsWithSettingDefaults.mxEvent);
+        this.disposables.track(this.unwatchEvent);
 
         const enableBigEmojiWatcherRef = SettingsStore.watchSetting(
             "TextualBody.enableBigEmoji",
@@ -246,7 +257,26 @@ export class EventContentBodyViewModel
         this.disposables.track(() => SettingsStore.unwatchSetting(shouldShowPillAvatarWatcherRef));
     }
 
+    private readonly onEventContentChanged = (): void => {
+        const mxEvent = this.props.mxEvent;
+        if (!mxEvent) return;
+        this.setEventContent(mxEvent, mxEvent.getContent());
+    };
+
+    private watchEvent(mxEvent?: MatrixEvent): void {
+        if (this.watchedEvent === mxEvent) return;
+        this.unwatchEvent();
+        this.watchedEvent = mxEvent;
+        this.watchedEvent?.on(MatrixEventEvent.Replaced, this.onEventContentChanged);
+    }
+
+    private readonly unwatchEvent = (): void => {
+        this.watchedEvent?.off(MatrixEventEvent.Replaced, this.onEventContentChanged);
+        this.watchedEvent = undefined;
+    };
+
     public setEventContent = (mxEvent: MatrixEvent | undefined, content: IContent): void => {
+        this.watchEvent(mxEvent);
         this.props.mxEvent = mxEvent;
         this.props.content = content;
         const { body, formattedBody, className } = EventContentBodyViewModel.computeBodySnapshot(this.props);

apps/web/src/viewmodels/room/timeline/event-tile/body/TextualBodyViewModel.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { type MouseEvent } from "react";
-import { MsgType, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { MatrixEventEvent, MsgType, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import {
     BaseViewModel,
     LINKIFIED_DATA_ATTRIBUTE,
@@ -60,6 +60,8 @@ export class TextualBodyViewModel
     extends BaseViewModel<TextualBodyViewSnapshot, TextualBodyViewModelProps>
     implements TextualBodyViewModelInterface
 {
+    private watchedEvent?: MatrixEvent;
+
     private static readonly getKind = (mxEvent: MatrixEvent): TextualBodyViewKind => {
         const msgtype = mxEvent.getContent().msgtype as MsgType | undefined;
 
@@ -120,7 +122,8 @@ export class TextualBodyViewModel
         | "editedMarkerTooltip"
         | "editedMarkerCaption"
     > => {
-        if (!props.replacingEventId) {
+        const replacingEventId = props.replacingEventId ?? props.mxEvent.replacingEventId();
+        if (!replacingEventId) {
             return {
                 showEditedMarker: false,
                 editedMarkerText: undefined,
@@ -197,8 +200,26 @@ export class TextualBodyViewModel
 
     public constructor(props: TextualBodyViewModelProps) {
         super(props, TextualBodyViewModel.computeSnapshot(props));
+        this.watchEvent(props.mxEvent);
+        this.disposables.track(this.unwatchEvent);
     }
 
+    private readonly onEventContentChanged = (): void => {
+        this.snapshot.merge(TextualBodyViewModel.computeEventSnapshot(this.props));
+    };
+
+    private watchEvent(mxEvent: MatrixEvent): void {
+        if (this.watchedEvent === mxEvent) return;
+        this.unwatchEvent();
+        this.watchedEvent = mxEvent;
+        this.watchedEvent.on(MatrixEventEvent.Replaced, this.onEventContentChanged);
+    }
+
+    private readonly unwatchEvent = (): void => {
+        this.watchedEvent?.off(MatrixEventEvent.Replaced, this.onEventContentChanged);
+        this.watchedEvent = undefined;
+    };
+
     public setId(id: string | undefined): void {
         this.props = {
             ...this.props,
@@ -213,6 +234,7 @@ export class TextualBodyViewModel
             ...this.props,
             mxEvent,
         };
+        this.watchEvent(mxEvent);
 
         this.snapshot.merge(TextualBodyViewModel.computeEventSnapshot(this.props));
     }