Improve rendering of empty topics in the timeline (#29152)

* Improve display of empty topic events in the timeline.

* Use topic parser for topic events.

* Revert changes i18n for the moment

* Use the correct import pattern

* Add tests for topic rendering

src/TextForEvent.tsx

@@ -17,6 +17,7 @@ import {
     MsgType,
     M_POLL_START,
     M_POLL_END,
+    ContentHelpers,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -227,11 +228,16 @@ function textForMemberEvent(
 
 function textForTopicEvent(ev: MatrixEvent): (() => string) | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+    const topic = ContentHelpers.parseTopicContent(ev.getContent()).text;
     return () =>
-        _t("timeline|m.room.topic", {
-            senderDisplayName,
-            topic: ev.getContent().topic,
-        });
+        topic
+            ? _t("timeline|m.room.topic|changed", {
+                  senderDisplayName,
+                  topic,
+              })
+            : _t("timeline|m.room.topic|removed", {
+                  senderDisplayName,
+              });
 }
 
 function textForRoomAvatarEvent(ev: MatrixEvent): (() => string) | null {