diff --git a/src/components/views/elements/RoomTopic.tsx b/src/components/views/elements/RoomTopic.tsx index 02a9bfe2d77c..9cbee3bdccad 100644 --- a/src/components/views/elements/RoomTopic.tsx +++ b/src/components/views/elements/RoomTopic.tsx @@ -31,6 +31,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext"; import AccessibleButton from "./AccessibleButton"; import TooltipTarget from "./TooltipTarget"; import { Linkify, topicToHtml } from "../../../HtmlUtils"; +import { tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks"; interface IProps extends React.HTMLProps { room: Room; @@ -46,12 +47,27 @@ export default function RoomTopic({ room, ...props }: IProps): JSX.Element { const onClick = useCallback( (e: React.MouseEvent) => { props.onClick?.(e); + const target = e.target as HTMLElement; - if (target.tagName.toUpperCase() === "A") { + + if (target.tagName.toUpperCase() !== "A") { + dis.fire(Action.ShowRoomTopic); + return; + } + + const anchor: HTMLLinkElement | null = e.target as HTMLLinkElement; + + if (!anchor) { return; } - dis.fire(Action.ShowRoomTopic); + const localHref = tryTransformPermalinkToLocalHref(anchor.href); + + if (localHref !== anchor.href) { + // it could be converted to a localHref -> therefore handle locally + e.preventDefault(); + window.location.hash = localHref; + } }, [props], ); diff --git a/test/components/views/elements/RoomTopic-test.tsx b/test/components/views/elements/RoomTopic-test.tsx new file mode 100644 index 000000000000..6a9dfa53448e --- /dev/null +++ b/test/components/views/elements/RoomTopic-test.tsx @@ -0,0 +1,64 @@ +/* +Copyright 2023 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 React from "react"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { fireEvent, render, screen } from "@testing-library/react"; + +import { mkEvent, stubClient } from "../../../test-utils"; +import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; +import RoomTopic from "../../../../src/components/views/elements/RoomTopic"; + +describe("", () => { + const originalHref = window.location.href; + + afterEach(() => { + window.location.href = originalHref; + }); + + function runClickTest(topic, clickText, expectedHref) { + stubClient(); + + const room = new Room("!pMBteVpcoJRdCJxDmn:matrix.org", MatrixClientPeg.safeGet(), "@alice:example.org"); + const topicEvent = mkEvent({ + type: "m.room.topic", + room: "!pMBteVpcoJRdCJxDmn:matrix.org", + user: "@alice:example.org", + content: { topic }, + ts: 123, + event: true, + }); + + room.addLiveEvents([topicEvent]); + + render(); + + fireEvent.click(screen.getByText(clickText)); + expect(window.location.href).toEqual(expectedHref); + } + + it("should capture permalink clicks", () => { + const permalink = "https://matrix.to/#/!pMBteVpcoJRdCJxDmn:matrix.org/$K4Kg0fL-GKpW1EQ6lS36bP4eUXadWJFkdK_FH73Df8A?via=matrix.org"; + const expectedHref = "http://localhost/#/room/!pMBteVpcoJRdCJxDmn:matrix.org/$K4Kg0fL-GKpW1EQ6lS36bP4eUXadWJFkdK_FH73Df8A?via=matrix.org"; + runClickTest(`... ${permalink} ...`, permalink, expectedHref); + }); + + it("should not capture non-permalink clicks", () => { + const link = "https://matrix.org"; + const expectedHref = originalHref; + runClickTest(`... ${link} ...`, link, expectedHref); + }); +});