Port over linkifyJS to shared-components.

apps/web/package.json

@@ -78,10 +78,6 @@
         "jsrsasign": "^11.0.0",
         "jszip": "^3.7.0",
         "katex": "^0.16.0",
-        "linkify-html": "4.3.2",
-        "linkify-react": "4.3.2",
-        "linkify-string": "4.3.2",
-        "linkifyjs": "4.3.2",
         "lodash": "npm:lodash-es@^4.17.21",
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",

apps/web/playwright/e2e/links/messages.spec.ts

@@ -38,8 +38,7 @@ test.describe("Message links", () => {
         const linkElement = page.locator(".mx_EventTile_last").getByRole("link", { name: "#aroom:example.org" });
         await expect(linkElement).toHaveAttribute("href", "https://matrix.to/#/#aroom:example.org");
     });
-    test("should linkify text inside a URL preview", { tag: "@screenshot" }, async ({ page, user, app, room, axe }) => {
-        axe.disableRules("color-contrast");
+    test("should linkify text inside a URL preview", async ({ page, user, app, room }) => {
         await page.route(/.*\/_matrix\/(client\/v1\/media|media\/v3)\/preview_url.*/, (route, request) => {
             const requestedPage = new URL(request.url()).searchParams.get("url");
             expect(requestedPage).toEqual("https://example.org/");

apps/web/src/HtmlUtils.tsx

@@ -21,10 +21,10 @@ import { getEmojiFromUnicode } from "@matrix-org/emojibase-bindings";
 import SettingsStore from "./settings/SettingsStore";
 import { stripHTMLReply, stripPlainReply } from "./utils/Reply";
 import { PERMITTED_URL_SCHEMES } from "./utils/UrlUtils";
-import { linkifyHtml, sanitizeHtmlParams, transformTags } from "./Linkify";
+import { sanitizeHtmlParams, transformTags, linkifyHtml } from "./Linkify";
 import { graphemeSegmenter } from "./utils/strings";
 
-export { Linkify, linkifyAndSanitizeHtml } from "./Linkify";
+export { linkifyAndSanitizeHtml } from "./Linkify";
 
 // Anything outside the basic multilingual plane will be a surrogate pair
 const SURROGATE_PAIR_PATTERN = /([\ud800-\udbff])([\udc00-\udfff])/;
@@ -323,13 +323,11 @@ function analyseEvent(content: IContent, highlights?: string[], opts: EventRende
     if (opts.linkify) {
         // Prevent mutating the source of sanitizeParams.
         sanitizeParams = { ...sanitizeParams };
-        sanitizeParams.allowedClasses ??= {};
-        if (typeof sanitizeParams.allowedClasses.a === "boolean") {
-            // All classes are already allowed for "a"
-        } else {
-            sanitizeParams.allowedClasses.a ??= [];
-            sanitizeParams.allowedClasses.a.push("linkified");
-        }
+        if (typeof sanitizeParams.allowedAttributes === "object") {
+            const attribs = { ...sanitizeParams.allowedAttributes };
+            attribs["a"] = [...sanitizeParams.allowedAttributes["a"], "data-linkified"];
+            sanitizeParams.allowedAttributes = attribs;
+        } // else: No attibutes are are allowed for "a"
     }
 
     try {

apps/web/src/Linkify.tsx

@@ -1,4 +1,5 @@
 /*
+Copyright 2026 Element Creations Ltd.
 Copyright 2024, 2025 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
@@ -8,13 +9,30 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ReactElement } from "react";
 import sanitizeHtml, { type IOptions } from "sanitize-html";
-import { merge } from "lodash";
-import _Linkify from "linkify-react";
+import {
+    PERMITTED_URL_SCHEMES,
+    type LinkedTextProps,
+    linkifyString as _linkifyString,
+    linkifyHtml as _linkifyHtml,
+    LinkedText,
+    LinkifyMatrixOpaqueIdType,
+    generateLinkedTextOptions,
+    type LinkEventListener,
+} from "@element-hq/web-shared-components";
+import { getHttpUriForMxc, User } from "matrix-js-sdk/src/matrix";
 
-import { _linkifyString, _linkifyHtml, ELEMENT_URL_PATTERN, options as linkifyMatrixOptions } from "./linkify-matrix";
-import { tryTransformPermalinkToLocalHref } from "./utils/permalinks/Permalinks";
+import { ELEMENT_URL_PATTERN } from "./linkify-matrix";
 import { mediaFromMxc } from "./customisations/Media";
-import { PERMITTED_URL_SCHEMES } from "./utils/UrlUtils";
+import {
+    parsePermalink,
+    tryTransformEntityToPermalink,
+    tryTransformPermalinkToLocalHref,
+} from "./utils/permalinks/Permalinks";
+import dis from "./dispatcher/dispatcher";
+import { Action } from "./dispatcher/actions";
+import { type ViewUserPayload } from "./dispatcher/payloads/ViewUserPayload";
+import { type ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload";
+import { MatrixClientPeg } from "./MatrixClientPeg";
 
 const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
 const MEDIA_API_MXC_REGEX = /\/_matrix\/media\/r0\/(?:download|thumbnail)\/(.+?)\/(.+?)(?:[?/]|$)/;
@@ -29,7 +47,7 @@ export const transformTags: NonNullable<IOptions["transformTags"]> = {
             const transformed = tryTransformPermalinkToLocalHref(attribs.href); // only used to check if it is a link that can be handled locally
             if (
                 transformed !== attribs.href || // it could be converted so handle locally symbols e.g. @user:server.tdl, matrix: and matrix.to
-                attribs.href.match(ELEMENT_URL_PATTERN) // for https links to Element domains
+                ELEMENT_URL_PATTERN.test(attribs.href) // for https links to Element domains
             ) {
                 delete attribs.target;
             }
@@ -193,43 +211,181 @@ export const sanitizeHtmlParams: IOptions = {
     nestingLimit: 50,
 };
 
-/* Wrapper around linkify-react merging in our default linkify options */
-export function Linkify({ as, options, children }: React.ComponentProps<typeof _Linkify>): ReactElement {
+function onUserClick(event: MouseEvent, userId: string): void {
+    event.preventDefault();
+    dis.dispatch<ViewUserPayload>({
+        action: Action.ViewUser,
+        member: new User(userId),
+    });
+}
+
+function onAliasClick(event: MouseEvent, roomAlias: string): void {
+    event.preventDefault();
+    dis.dispatch<ViewRoomPayload>({
+        action: Action.ViewRoom,
+        room_alias: roomAlias,
+        metricsTrigger: "Timeline",
+        metricsViaKeyboard: false,
+    });
+}
+
+function urlEventListeners(href: string, onClickAction?: () => void): LinkEventListener {
+    // intercept local permalinks to users and show them like userids (in userinfo of current room)
+    try {
+        const permalink = parsePermalink(href);
+        if (permalink?.userId) {
+            return {
+                click: function (e: MouseEvent) {
+                    onClickAction?.();
+                    onUserClick(e, permalink.userId!);
+                },
+            };
+        } else {
+            // for events, rooms etc. (anything other than users)
+            const localHref = tryTransformPermalinkToLocalHref(href);
+            if (localHref !== href) {
+                // it could be converted to a localHref -> therefore handle locally
+                return {
+                    click: function (e: MouseEvent) {
+                        e.preventDefault();
+                        onClickAction?.();
+                        globalThis.location.hash = localHref;
+                    },
+                };
+            }
+        }
+    } catch {
+        // OK fine, it's not actually a permalink
+    }
+    return {};
+}
+
+export function userIdEventListeners(href: string, onClickAction?: () => void): LinkEventListener {
+    return {
+        click: function (e: MouseEvent) {
+            e.preventDefault();
+            onClickAction?.();
+            const userId = parsePermalink(href)?.userId ?? href;
+            if (userId) onUserClick(e, userId);
+        },
+    };
+}
+
+export function roomAliasEventListeners(href: string, onClickAction?: () => void): LinkEventListener {
+    return {
+        click: function (e: MouseEvent) {
+            e.preventDefault();
+            onClickAction?.();
+            const alias = parsePermalink(href)?.roomIdOrAlias ?? href;
+            if (alias) onAliasClick(e, alias);
+        },
+    };
+}
+
+function urlTargetTransformFunction(href: string): string {
+    try {
+        const transformed = tryTransformPermalinkToLocalHref(href);
+        if (
+            transformed !== href || // if it could be converted to handle locally for matrix symbols e.g. @user:server.tdl and matrix.to
+            ELEMENT_URL_PATTERN.test(decodeURIComponent(href)) // for https links to Element domains
+        ) {
+            return "";
+        } else {
+            return "_blank";
+        }
+    } catch {
+        // malformed URI
+    }
+    return "";
+}
+
+export function formatHref(href: string, type: LinkifyMatrixOpaqueIdType): string {
+    switch (type) {
+        case LinkifyMatrixOpaqueIdType.URL:
+            if (href.startsWith("mxc://") && MatrixClientPeg.get()) {
+                return getHttpUriForMxc(
+                    MatrixClientPeg.get()!.baseUrl,
+                    href,
+                    undefined,
+                    undefined,
+                    undefined,
+                    false,
+                    true,
+                );
+            }
+        // fallthrough
+        case LinkifyMatrixOpaqueIdType.RoomAlias:
+        case LinkifyMatrixOpaqueIdType.UserId:
+        default: {
+            return tryTransformEntityToPermalink(MatrixClientPeg.safeGet(), href) ?? "";
+        }
+    }
+}
+const DefaultLinkifyOptions = {
+    userIdListener: userIdEventListeners,
+    roomAliasListener: roomAliasEventListeners,
+    urlListener: urlEventListeners,
+    hrefTransformer: formatHref,
+    urlTargetTransformer: urlTargetTransformFunction,
+};
+
+/**
+ * Wrapper around LinkedText providing Element Web specific hooks.
+ */
+export function ElementLinkedText({
+    children,
+    onLinkClick,
+    ...props
+}: LinkedTextProps & { onLinkClick?: () => void }): ReactElement {
+    // If the component requires an additional action on click, inject ith ere.
+    const options = onLinkClick
+        ? {
+              ...DefaultLinkifyOptions,
+              userIdListener: (href: string) => userIdEventListeners(href, onLinkClick),
+              roomAliasListener: (href: string) => roomAliasEventListeners(href, onLinkClick),
+              urlListener: (href: string) => urlEventListeners(href, onLinkClick),
+          }
+        : DefaultLinkifyOptions;
+    console.log("ElementLinkedText", children);
     return (
-        <_Linkify as={as} options={merge({}, linkifyMatrixOptions, options)}>
+        <LinkedText {...options} {...props}>
             {children}
-        </_Linkify>
+        </LinkedText>
     );
 }
 
 /**
  * Linkifies the given string. This is a wrapper around 'linkifyjs/string'.
  *
- * @param {string} str string to linkify
- * @param {object} [options] Options for linkifyString. Default: linkifyMatrixOptions
- * @returns {string} Linkified string
+ * @param str string to linkify
+ * @param [options] Options for linkifyString.
+ * @returns Linkified string
  */
-export function linkifyString(str: string, options = linkifyMatrixOptions): string {
-    return _linkifyString(str, options);
+export function linkifyString(value: string, options = generateLinkedTextOptions(DefaultLinkifyOptions)): string {
+    return _linkifyString(value, options);
 }
 
 /**
  * Linkifies the given HTML-formatted string. This is a wrapper around 'linkifyjs/html'.
  *
- * @param {string} str HTML string to linkify
- * @param {object} [options] Options for linkifyHtml. Default: linkifyMatrixOptions
- * @returns {string} Linkified string
+ * @param str HTML string to linkify
+ * @param [options] Options for linkifyHtml.
+ * @returns Linkified string
  */
-export function linkifyHtml(str: string, options = linkifyMatrixOptions): string {
-    return _linkifyHtml(str, options);
+export function linkifyHtml(value: string, options = generateLinkedTextOptions(DefaultLinkifyOptions)): string {
+    return _linkifyHtml(value, options);
 }
+
 /**
  * Linkify the given string and sanitize the HTML afterwards.
  *
- * @param {string} dirtyHtml The HTML string to sanitize and linkify
- * @param {object} [options] Options for linkifyString. Default: linkifyMatrixOptions
- * @returns {string}
+ * @param dirtyString The string to linkify, and then sanitize.
+ * @param [options] Options for linkifyString. Default: linkifyMatrixOptions
+ * @returns HTML string
  */
-export function linkifyAndSanitizeHtml(dirtyHtml: string, options = linkifyMatrixOptions): string {
+export function linkifyAndSanitizeHtml(
+    dirtyHtml: string,
+    options = generateLinkedTextOptions(DefaultLinkifyOptions),
+): string {
     return sanitizeHtml(linkifyString(dirtyHtml, options), sanitizeHtmlParams);
 }

apps/web/src/Markdown.ts

@@ -11,8 +11,7 @@ import "./@types/commonmark"; // import better types than @types/commonmark
 import * as commonmark from "commonmark";
 import { escape } from "lodash";
 import { logger } from "matrix-js-sdk/src/logger";
-
-import { linkify } from "./linkify-matrix";
+import { findLinksInString } from "@element-hq/web-shared-components";
 
 const ALLOWED_HTML_TAGS = ["sub", "sup", "del", "s", "u", "br", "br/"];
 
@@ -186,7 +185,7 @@ export default class Markdown {
                 // We should not do this if previous node was not a textnode, as we can't combine it then.
                 if ((node.type === "emph" || node.type === "strong") && previousNode?.type === "text") {
                     if (event.entering) {
-                        const foundLinks = linkify.find(text);
+                        const foundLinks = findLinksInString(text);
                         for (const { value } of foundLinks) {
                             if (node?.firstChild?.literal) {
                                 /**
@@ -197,7 +196,7 @@ export default class Markdown {
                                 const nonEmphasizedText = `${format}${innerNodeLiteral(node)}${format}`;
                                 const f = getTextUntilEndOrLinebreak(node);
                                 const newText = value + nonEmphasizedText + f;
-                                const newLinks = linkify.find(newText);
+                                const newLinks = findLinksInString(newText);
                                 // Should always find only one link here, if it finds more it means that the algorithm is broken
                                 if (newLinks.length === 1) {
                                     const emphasisTextNode = new commonmark.Node("text");

apps/web/src/components/structures/MatrixChat.tsx

@@ -125,7 +125,7 @@ import { viewUserDeviceSettings } from "../../actions/handlers/viewUserDeviceSet
 import GenericToast from "../views/toasts/GenericToast";
 import RovingSpotlightDialog from "../views/dialogs/spotlight/SpotlightDialog";
 import { findDMForUser } from "../../utils/dm/findDMForUser";
-import { getHtmlText, Linkify } from "../../HtmlUtils";
+import { getHtmlText } from "../../HtmlUtils";
 import { NotificationLevel } from "../../stores/notifications/NotificationLevel";
 import { type UserTab } from "../views/dialogs/UserTab";
 import { shouldSkipSetupEncryption } from "../../utils/crypto/shouldSkipSetupEncryption";
@@ -139,7 +139,7 @@ import { setTheme } from "../../theme";
 import { type OpenForwardDialogPayload } from "../../dispatcher/payloads/OpenForwardDialogPayload";
 import { ShareFormat, type SharePayload } from "../../dispatcher/payloads/SharePayload";
 import Markdown from "../../Markdown";
-import { sanitizeHtmlParams } from "../../Linkify";
+import { ElementLinkedText, sanitizeHtmlParams } from "../../Linkify";
 import { isOnlyAdmin } from "../../utils/membership";
 import { ModuleApi } from "../../modules/Api.ts";
 
@@ -1458,7 +1458,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     key,
                     title: userNotice.title,
                     props: {
-                        description: <Linkify>{userNotice.description}</Linkify>,
+                        description: <ElementLinkedText>{userNotice.description}</ElementLinkedText>,
                         primaryLabel: _t("action|ok"),
                         onPrimaryClick: () => {
                             ToastStore.sharedInstance().dismissToast(key);

apps/web/src/components/structures/SpaceHierarchy.tsx

@@ -55,7 +55,7 @@ import InfoTooltip from "../views/elements/InfoTooltip";
 import TextWithTooltip from "../views/elements/TextWithTooltip";
 import { useStateToggle } from "../../hooks/useStateToggle";
 import { getChildOrder } from "../../stores/spaces/SpaceStore";
-import { Linkify, topicToHtml } from "../../HtmlUtils";
+import { topicToHtml } from "../../HtmlUtils";
 import { useDispatcher } from "../../hooks/useDispatcher";
 import { Action } from "../../dispatcher/actions";
 import { type IState, RovingTabIndexProvider, useRovingTabIndex } from "../../accessibility/RovingTabIndex";
@@ -73,6 +73,7 @@ import SettingsStore from "../../settings/SettingsStore";
 import { filterBoolean } from "../../utils/arrays.ts";
 import { type RoomViewStore } from "../../stores/RoomViewStore.tsx";
 import RoomContext from "../../contexts/RoomContext.ts";
+import { ElementLinkedText } from "../../Linkify.tsx";
 
 interface IProps {
     space: Room;
@@ -234,19 +235,10 @@ const Tile: React.FC<ITileProps> = ({
     let topicSection: ReactNode | undefined;
     if (topic) {
         topicSection = (
-            <Linkify
-                options={{
-                    attributes: {
-                        onClick(ev: MouseEvent) {
-                            // prevent clicks on links from bubbling up to the room tile
-                            ev.stopPropagation();
-                        },
-                    },
-                }}
-            >
+            <ElementLinkedText canClick={false}>
                 {" · "}
                 {topic}
-            </Linkify>
+            </ElementLinkedText>
         );
     }