Linkify room topic (#11631)

src/components/views/rooms/RoomHeader.tsx

@@ -47,6 +47,7 @@ import { useRoomState } from "../../../hooks/useRoomState";
 import RoomAvatar from "../avatars/RoomAvatar";
 import { formatCount } from "../../../utils/FormattingUtils";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
+import { Linkify, topicToHtml } from "../../../HtmlUtils";
 
 /**
  * A helper to transform a notification color to the what the Compound Icon Button
@@ -100,6 +101,11 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
 
     const notificationsEnabled = useFeatureEnabled("feature_notifications");
 
+    const roomTopicBody = useMemo(
+        () => topicToHtml(roomTopic?.text, roomTopic?.html),
+        [roomTopic?.html, roomTopic?.text],
+    );
+
     return (
         <Flex
             as="header"
@@ -159,7 +165,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                 </BodyText>
                 {roomTopic && (
                     <BodyText as="div" size="sm" className="mx_RoomHeader_topic">
-                        {roomTopic.text}
+                        <Linkify>{roomTopicBody}</Linkify>
                     </BodyText>
                 )}
             </Box>

src/hooks/room/useTopic.ts

@@ -32,6 +32,11 @@ export const getTopic = (room?: Room): Optional<ContentHelpers.TopicState> => {
     return !!content ? ContentHelpers.parseTopicContent(content) : null;
 };
 
+/**
+ * Helper to retrieve the room topic for given room
+ * @param room
+ * @returns the raw text and an html parsion version of the room topic
+ */
 export function useTopic(room?: Room): Optional<ContentHelpers.TopicState> {
     const [topic, setTopic] = useState(getTopic(room));
     useTypedEventEmitter(room?.currentState, RoomStateEvent.Events, (ev: MatrixEvent) => {

test/components/views/rooms/RoomHeader-test.tsx

@@ -21,6 +21,7 @@ import {
     fireEvent,
     getAllByLabelText,
     getByLabelText,
+    getByRole,
     getByText,
     render,
     screen,
@@ -78,7 +79,7 @@ describe("RoomHeader", () => {
     });
 
     it("renders the room topic", async () => {
-        const TOPIC = "Hello World!";
+        const TOPIC = "Hello World! http://element.io";
 
         const roomTopic = new MatrixEvent({
             type: EventType.RoomTopic,
@@ -96,6 +97,7 @@ describe("RoomHeader", () => {
             withClientContextRenderOptions(MatrixClientPeg.get()!),
         );
         expect(container).toHaveTextContent(TOPIC);
+        expect(getByRole(container, "link")).toHaveTextContent("http://element.io");
     });
 
     it("opens the room summary", async () => {