e && linkifyElement(e)}
- onClick={(ev) => {
- // prevent clicks on links from bubbling up to the room tile
- if ((ev.target as HTMLElement).tagName === "A") {
- ev.stopPropagation();
- }
- }}
- >
+
{description}
- {topic && " · "}
- {topic}
+ {topicSection}
diff --git a/src/components/views/elements/Linkify.tsx b/src/components/views/elements/Linkify.tsx
deleted file mode 100644
index 077ccd76d0..0000000000
--- a/src/components/views/elements/Linkify.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
-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 React, { useLayoutEffect, useRef } from "react";
-
-import { linkifyElement } from "../../../HtmlUtils";
-
-interface Props {
- as?: string;
- children: React.ReactNode;
- onClick?: (ev: MouseEvent) => void;
-}
-
-export function Linkify({ as = "div", children, onClick }: Props): JSX.Element {
- const ref = useRef();
-
- useLayoutEffect(() => {
- linkifyElement(ref.current);
- }, [children]);
-
- return React.createElement(as, {
- children,
- ref,
- onClick,
- });
-}
diff --git a/src/components/views/elements/RoomTopic.tsx b/src/components/views/elements/RoomTopic.tsx
index 7f2d068d35..e760d38218 100644
--- a/src/components/views/elements/RoomTopic.tsx
+++ b/src/components/views/elements/RoomTopic.tsx
@@ -29,9 +29,8 @@ import InfoDialog from "../dialogs/InfoDialog";
import { useDispatcher } from "../../../hooks/useDispatcher";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import AccessibleButton from "./AccessibleButton";
-import { Linkify } from "./Linkify";
import TooltipTarget from "./TooltipTarget";
-import { topicToHtml } from "../../../HtmlUtils";
+import { Linkify, topicToHtml } from "../../../HtmlUtils";
interface IProps extends React.HTMLProps
{
room?: Room;
@@ -71,12 +70,14 @@ export default function RoomTopic({ room, ...props }: IProps): JSX.Element {
description: (
{
- if ((ev.target as HTMLElement).tagName.toUpperCase() === "A") {
- modal.close();
- }
+ options={{
+ attributes: {
+ onClick() {
+ modal.close();
+ },
+ },
}}
+ as="p"
>
{body}
diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
index 1679c08f12..9f6bed732d 100644
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@@ -436,7 +436,7 @@ export default class TextualBody extends React.Component
{
private onBodyLinkClick = (e: MouseEvent): void => {
let target = e.target as HTMLLinkElement;
// links processed by linkifyjs have their own handler so don't handle those here
- if (target.classList.contains(linkifyOpts.className)) return;
+ if (target.classList.contains(linkifyOpts.className as string)) return;
if (target.nodeName !== "A") {
// Jump to parent as the `` may contain children, e.g. an anchor wrapping an inline code section
target = target.closest("a");
diff --git a/src/components/views/rooms/LinkPreviewWidget.tsx b/src/components/views/rooms/LinkPreviewWidget.tsx
index 225434db00..23bd19ff4d 100644
--- a/src/components/views/rooms/LinkPreviewWidget.tsx
+++ b/src/components/views/rooms/LinkPreviewWidget.tsx
@@ -19,7 +19,7 @@ import { decode } from "html-entities";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { IPreviewUrlResponse } from "matrix-js-sdk/src/client";
-import { linkifyElement } from "../../../HtmlUtils";
+import { Linkify } from "../../../HtmlUtils";
import SettingsStore from "../../../settings/SettingsStore";
import Modal from "../../../Modal";
import * as ImageUtils from "../../../ImageUtils";
@@ -35,21 +35,8 @@ interface IProps {
}
export default class LinkPreviewWidget extends React.Component {
- private readonly description = createRef();
private image = createRef();
- public componentDidMount(): void {
- if (this.description.current) {
- linkifyElement(this.description.current);
- }
- }
-
- public componentDidUpdate(): void {
- if (this.description.current) {
- linkifyElement(this.description.current);
- }
- }
-
private onImageClick = (ev): void => {
const p = this.props.preview;
if (ev.button != 0 || ev.metaKey) return;
@@ -155,8 +142,8 @@ export default class LinkPreviewWidget extends React.Component {
{" - " + p["og:site_name"]}
)}
-
- {description}
+
+ {description}