Switch to linkify-react for element Linkification as it handles React subtrees without exploding (#10060

* Switch to linkify-react instead of our faulty implementation

Fixes a series of soft crashes where errors include "The node to be removed is not a child of this node."

* Improve types

* Fix types

* Update snapshots

* Add test

* Fix test

src/components/views/elements/Linkify.tsx

@@ -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,
-    });
-}

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<HTMLDivElement> {
     room?: Room;
@@ -71,12 +70,14 @@ export default function RoomTopic({ room, ...props }: IProps): JSX.Element {
                 description: (
                     <div>
                         <Linkify
-                            as="p"
-                            onClick={(ev: MouseEvent) => {
-                                if ((ev.target as HTMLElement).tagName.toUpperCase() === "A") {
-                                    modal.close();
-                                }
+                            options={{
+                                attributes: {
+                                    onClick() {
+                                        modal.close();
+                                    },
+                                },
                             }}
+                            as="p"
                         >
                             {body}
                         </Linkify>