Fix matrix.to links not being handled in the app (#30522)

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/linkify-matrix.ts

@@ -121,8 +121,8 @@ export const ELEMENT_URL_PATTERN =
     "(?:app|beta|staging|develop)\\.element\\.io/" +
     ")(#.*)";
 
-export const options: Opts = {
-    events: function (href: string, type: string): EventListeners {
+// Attach click handlers to links based on their type
+function events(href: string, type: string): EventListeners {
     switch (type as Type) {
         case Type.URL: {
             // intercept local permalinks to users and show them like userids (in userinfo of current room)
@@ -155,6 +155,7 @@ export const options: Opts = {
         case Type.UserId:
             return {
                 click: function (e: MouseEvent) {
+                    e.preventDefault();
                     const userId = parsePermalink(href)?.userId ?? href;
                     if (userId) onUserClick(e, userId);
                 },
@@ -162,6 +163,7 @@ export const options: Opts = {
         case Type.RoomAlias:
             return {
                 click: function (e: MouseEvent) {
+                    e.preventDefault();
                     const alias = parsePermalink(href)?.roomIdOrAlias ?? href;
                     if (alias) onAliasClick(e, alias);
                 },
@@ -169,7 +171,26 @@ export const options: Opts = {
     }
 
     return {};
-    },
+}
+
+// linkify-react doesn't respect `events` and needs it mapping to React attributes
+// so we need to manually add the click handler to the attributes
+// https://linkify.js.org/docs/linkify-react.html#events
+function attributes(href: string, type: string): Record<string, unknown> {
+    const attrs: Record<string, unknown> = {
+        rel: "noreferrer noopener",
+    };
+
+    const options = events(href, type);
+    if (options?.click) {
+        attrs.onClick = options.click;
+    }
+
+    return attrs;
+}
+
+export const options: Opts = {
+    events,
 
     formatHref: function (href: string, type: Type | string): string {
         switch (type) {
@@ -194,9 +215,7 @@ export const options: Opts = {
         }
     },
 
-    attributes: {
-        rel: "noreferrer noopener",
-    },
+    attributes,
 
     ignoreTags: ["a", "pre", "code"],