Port over linkifyJS to shared-components. (#32731)

* Port over linkifyJS to shared-components.

* Drop rubbish

* update lock

* quickfix test

* drop group id

* Modernize tests

* Remove stories that aren't in use.

* Complete working version

* Add copyright

* tidy up

* update lock

* Update snaps

* update snap

* undo change

* remove unused

* More test updates

* fix typo

* fix margin on preview

* move margin block

* snapupdate

* prettier

* cleanup a test mistake

* Fixup sonar issues

* Don't expose linkifyjs to applications, just provide helper functions.

* Add story for documentation.

* remove $

* Use a const

* typo

* cleanup var name

* remove console line

* Changes checkpoint

* Convert to context

* Revert unrelated change.

* more cleanup

* Add a test to cover ignoring incoming data elements

* Make tests happy

* Update tests for LinkedText

* Underlines!

* fix lock

* remove unused linkify packages

* import move

* Remove mod to remove underline

* undo

* fix snap

* another snapshot fix

* Tidy up based on review.

* fix story

* Pass in args
This commit is contained in:
Will Hunt
2026-03-12 15:54:01 +00:00
committed by GitHub
parent d38eb4fdb4
commit c02db4ebb8
44 changed files with 1508 additions and 839 deletions
+22 -1
View File
@@ -101,7 +101,7 @@ describe("bodyToHtml", () => {
);
expect(html).toMatchInlineSnapshot(
`"foo <a href="http://link.example/test/path" class="linkified" target="_blank" rel="noreferrer noopener">http://link.example/<span class="mx_EventTile_searchHighlight">test</span>/path</a> bar"`,
`"foo <a href="http://link.example/test/path" target="_blank" rel="noreferrer noopener" data-linkified="true">http://link.example/<span class="mx_EventTile_searchHighlight">test</span>/path</a> bar"`,
);
});
@@ -124,6 +124,27 @@ describe("bodyToHtml", () => {
);
});
it("should ignore data-linkified in incoming links but should be applied to linkified links", () => {
getMockClientWithEventEmitter({});
const html = bodyToHtml(
{
body: "foo http://link.example/test/path bar",
msgtype: "m.text",
formatted_body:
'foo <a data-linkfied="true" href="http://link.example/test/path">http://link.example/test/path</a> bar with https://example.org',
format: "org.matrix.custom.html",
},
[],
{
linkify: true,
},
);
expect(html).toMatchInlineSnapshot(
`"foo <a href="http://link.example/test/path" target="_blank" rel="noreferrer noopener">http://link.example/test/path</a> bar with <a href="https://example.org" target="_blank" rel="noreferrer noopener" data-linkified="true">https://example.org</a>"`,
);
});
it("does not mistake characters in text presentation mode for emoji", () => {
const { asFragment } = render(
<span className="mx_EventTile_body translate" dir="auto">
@@ -10,6 +10,7 @@ import React from "react";
import { Room } from "matrix-js-sdk/src/matrix";
import { fireEvent, render, screen, waitFor } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import { LinkedTextContext } from "@element-hq/web-shared-components";
import { mkEvent, stubClient } from "../../../../test-utils";
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
@@ -52,7 +53,9 @@ describe("<RoomTopic/>", () => {
*/
const renderRoom = (topic: string) => {
const room = createRoom(topic);
render(<RoomTopic room={room} />);
render(<RoomTopic room={room} />, {
wrapper: ({ children }) => <LinkedTextContext.Provider value={{}}>{children}</LinkedTextContext.Provider>,
});
};
/**
@@ -193,7 +193,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev });
const content = container.querySelector(".mx_EventTile_body");
expect(content.innerHTML).toMatchInlineSnapshot(
`"Chat with <a href="https://matrix.to/#/@user:example.com" class="linkified" rel="noreferrer noopener">@user:example.com</a>"`,
`"Chat with <a href="https://matrix.to/#/@user:example.com" rel="noreferrer noopener" data-linkified="true">@user:example.com</a>"`,
);
});
@@ -211,7 +211,7 @@ describe("<TextualBody />", () => {
const { container } = getComponent({ mxEvent: ev });
const content = container.querySelector(".mx_EventTile_body");
expect(content.innerHTML).toMatchInlineSnapshot(
`"Visit <a href="https://matrix.to/#/#room:example.com" class="linkified" rel="noreferrer noopener">#room:example.com</a>"`,
`"Visit <a href="https://matrix.to/#/#room:example.com" rel="noreferrer noopener" data-linkified="true">#room:example.com</a>"`,
);
});
@@ -557,7 +557,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly linkification get a
>
Visit
<a
class="linkified"
data-linkified="true"
href="https://matrix.org/"
rel="noreferrer noopener"
target="_blank"
@@ -11,6 +11,7 @@ import { render, fireEvent, screen } from "jest-matrix-react";
import { Room, type MatrixClient, JoinRule, MatrixEvent, HistoryVisibility } from "matrix-js-sdk/src/matrix";
import { mocked, type MockedObject } from "jest-mock";
import userEvent from "@testing-library/user-event";
import { LinkedTextContext } from "@element-hq/web-shared-components";
import RoomSummaryCardView from "../../../../../src/components/views/right_panel/RoomSummaryCardView";
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
@@ -44,7 +45,9 @@ describe("<RoomSummaryCard />", () => {
return render(<RoomSummaryCardView {...defaultProps} {...props} />, {
wrapper: ({ children }) => (
<MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
<MatrixClientContext.Provider value={mockClient}>
<LinkedTextContext.Provider value={{}}>{children}</LinkedTextContext.Provider>
</MatrixClientContext.Provider>
),
});
};
@@ -142,9 +142,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
>
<span
dir="auto"
class="_container_15awj_8"
>
This is the room's topic.
<span
dir="auto"
>
This is the room's topic.
</span>
</span>
</p>
<button
@@ -1574,9 +1578,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
>
<span
dir="auto"
class="_container_15awj_8"
>
This is the room's topic.
<span
dir="auto"
>
This is the room's topic.
</span>
</span>
</p>
<button
@@ -11,6 +11,7 @@ import React from "react";
import { render, screen } from "jest-matrix-react";
import { EventTimeline, type MatrixClient, Room } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { LinkedTextContext } from "@element-hq/web-shared-components";
import { LocalRoom } from "../../../../../src/models/LocalRoom";
import {
@@ -32,7 +33,9 @@ const renderNewRoomIntro = (client: MatrixClient, room: Room | LocalRoom) => {
render(
<MatrixClientContext.Provider value={client}>
<ScopedRoomContextProvider {...({ room, roomId: room.roomId } as unknown as RoomContextType)}>
<NewRoomIntro />
<LinkedTextContext.Provider value={{}}>
<NewRoomIntro />
</LinkedTextContext.Provider>
</ScopedRoomContextProvider>
</MatrixClientContext.Provider>,
);
@@ -7,17 +7,21 @@ exports[`NewRoomIntro topic should render a link in the topic 1`] = `
<span>
Topic:
<span
dir="auto"
class="_container_15awj_8"
>
This is a link:
<a
class="linkified"
href="https://matrix.org/"
rel="noreferrer noopener"
target="_blank"
<span
dir="auto"
>
https://matrix.org/
</a>
This is a link:
<a
data-linkified="true"
href="https://matrix.org/"
rel="noreferrer noopener"
target="_blank"
>
https://matrix.org/
</a>
</span>
</span>
</span>
</p>
+3 -387
View File
@@ -5,331 +5,16 @@ Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { type EventListeners } from "linkifyjs";
import { linkify, Type, options } from "../../src/linkify-matrix";
import { roomAliasEventListeners, userIdEventListeners } from "../../src/Linkify";
import dispatcher from "../../src/dispatcher/dispatcher";
import { Action } from "../../src/dispatcher/actions";
describe("linkify-matrix", () => {
const linkTypesByInitialCharacter: Record<string, string> = {
"#": "roomalias",
"@": "userid",
};
/**
*
* @param testName Due to all the tests using the same logic underneath, it makes to generate it in a bit smarter way
* @param char
*/
function genTests(char: "#" | "@" | "+") {
const type = linkTypesByInitialCharacter[char];
it("should not parse " + char + "foo without domain", () => {
const test = char + "foo";
const found = linkify.find(test);
expect(found).toEqual([]);
});
describe("ip v4 tests", () => {
it("should properly parse IPs v4 as the domain name", () => {
const test = char + "potato:1.2.3.4";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "potato:1.2.3.4",
type,
isLink: true,
start: 0,
end: test.length,
value: char + "potato:1.2.3.4",
},
]);
});
it("should properly parse IPs v4 with port as the domain name with attached", () => {
const test = char + "potato:1.2.3.4:1337";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "potato:1.2.3.4:1337",
type,
isLink: true,
start: 0,
end: test.length,
value: char + "potato:1.2.3.4:1337",
},
]);
});
it("should properly parse IPs v4 as the domain name while ignoring missing port", () => {
const test = char + "potato:1.2.3.4:";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "potato:1.2.3.4",
type,
isLink: true,
start: 0,
end: test.length - 1,
value: char + "potato:1.2.3.4",
},
]);
});
});
// Currently those tests are failing, as there's missing implementation.
describe.skip("ip v6 tests", () => {
it("should properly parse IPs v6 as the domain name", () => {
const test = char + "username:[1234:5678::abcd]";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "username:[1234:5678::abcd]",
type,
isLink: true,
start: 0,
end: test.length,
value: char + "username:[1234:5678::abcd]",
},
]);
});
it("should properly parse IPs v6 with port as the domain name", () => {
const test = char + "username:[1234:5678::abcd]:1337";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "username:[1234:5678::abcd]:1337",
type,
isLink: true,
start: 0,
end: test.length,
value: char + "username:[1234:5678::abcd]:1337",
},
]);
});
// eslint-disable-next-line max-len
it("should properly parse IPs v6 while ignoring dangling comma when without port name as the domain name", () => {
const test = char + "username:[1234:5678::abcd]:";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "username:[1234:5678::abcd]:",
type,
isLink: true,
start: 0,
end: test.length - 1,
value: char + "username:[1234:5678::abcd]:",
},
]);
});
});
it("properly parses " + char + "_foonetic_xkcd:matrix.org", () => {
const test = "" + char + "_foonetic_xkcd:matrix.org";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "_foonetic_xkcd:matrix.org",
type,
value: char + "_foonetic_xkcd:matrix.org",
start: 0,
end: test.length,
isLink: true,
},
]);
});
it("properly parses " + char + "localhost:foo.com", () => {
const test = char + "localhost:foo.com";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "localhost:foo.com",
type,
value: char + "localhost:foo.com",
start: 0,
end: test.length,
isLink: true,
},
]);
});
it("properly parses " + char + "foo:localhost", () => {
const test = char + "foo:localhost";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "foo:localhost",
type,
value: char + "foo:localhost",
start: 0,
end: test.length,
isLink: true,
},
]);
});
it("accept " + char + "foo:bar.com", () => {
const test = "" + char + "foo:bar.com";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "foo:bar.com",
type,
value: char + "foo:bar.com",
start: 0,
end: test.length,
isLink: true,
},
]);
});
it("accept " + char + "foo:com (mostly for (TLD|DOMAIN)+ mixing)", () => {
const test = "" + char + "foo:com";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "foo:com",
type,
value: char + "foo:com",
start: 0,
end: test.length,
isLink: true,
},
]);
});
it("accept repeated TLDs (e.g .org.uk)", () => {
const test = "" + char + "foo:bar.org.uk";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "foo:bar.org.uk",
type,
value: char + "foo:bar.org.uk",
start: 0,
end: test.length,
isLink: true,
},
]);
});
it("accept hyphens in name " + char + "foo-bar:server.com", () => {
const test = "" + char + "foo-bar:server.com";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "foo-bar:server.com",
type,
value: char + "foo-bar:server.com",
start: 0,
end: test.length,
isLink: true,
},
]);
});
it("ignores trailing `:`", () => {
const test = "" + char + "foo:bar.com:";
const found = linkify.find(test);
expect(found).toEqual([
{
type,
value: char + "foo:bar.com",
href: char + "foo:bar.com",
start: 0,
end: test.length - ":".length,
isLink: true,
},
]);
});
it("accept :NUM (port specifier)", () => {
const test = "" + char + "foo:bar.com:2225";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "foo:bar.com:2225",
type,
value: char + "foo:bar.com:2225",
start: 0,
end: test.length,
isLink: true,
},
]);
});
it("ignores duplicate :NUM (double port specifier)", () => {
const test = "" + char + "foo:bar.com:2225:1234";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "foo:bar.com:2225",
type,
value: char + "foo:bar.com:2225",
start: 0,
end: 17,
isLink: true,
},
]);
});
it("ignores all the trailing :", () => {
const test = "" + char + "foo:bar.com::::";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "foo:bar.com",
type,
value: char + "foo:bar.com",
end: test.length - 4,
start: 0,
isLink: true,
},
]);
});
it("properly parses room alias with dots in name", () => {
const test = "" + char + "foo.asdf:bar.com::::";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "foo.asdf:bar.com",
type,
value: char + "foo.asdf:bar.com",
start: 0,
end: test.length - ":".repeat(4).length,
isLink: true,
},
]);
});
it("does not parse room alias with too many separators", () => {
const test = "" + char + "foo:::bar.com";
const found = linkify.find(test);
expect(found).toEqual([
{
href: "http://bar.com",
type: "url",
value: "bar.com",
isLink: true,
start: 7,
end: test.length,
},
]);
});
it("properly parses room alias with hyphen in domain part", () => {
const test = "" + char + "foo:bar.com-baz.com";
const found = linkify.find(test);
expect(found).toEqual([
{
href: char + "foo:bar.com-baz.com",
type,
value: char + "foo:bar.com-baz.com",
end: 20,
start: 0,
isLink: true,
},
]);
});
}
describe("roomalias plugin", () => {
genTests("#");
it("should intercept clicks with a ViewRoom dispatch", () => {
const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
const handlers = (options.events as (href: string, type: string) => EventListeners)(
"#room:server.com",
"roomalias",
);
const handlers = roomAliasEventListeners("#room:server.com");
const event = new MouseEvent("mousedown");
event.preventDefault = jest.fn();
handlers!.click(event);
@@ -344,31 +29,10 @@ describe("linkify-matrix", () => {
});
describe("userid plugin", () => {
genTests("@");
it("allows dots in localparts", () => {
const test = "@test.:matrix.org";
const found = linkify.find(test);
expect(found).toEqual([
{
href: test,
type: "userid",
value: test,
start: 0,
end: test.length,
isLink: true,
},
]);
});
it("should intercept clicks with a ViewUser dispatch", () => {
const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
const handlers = (options.events as (href: string, type: string) => EventListeners)(
"@localpart:server.com",
"userid",
);
const handlers = userIdEventListeners("@localpart:server.com");
const event = new MouseEvent("mousedown");
event.preventDefault = jest.fn();
@@ -384,52 +48,4 @@ describe("linkify-matrix", () => {
);
});
});
describe("matrix uri", () => {
const acceptedMatrixUris = [
"matrix:u/foo_bar:server.uk",
"matrix:r/foo-bar:server.uk",
"matrix:roomid/somewhere:example.org?via=elsewhere.ca",
"matrix:r/somewhere:example.org",
"matrix:r/somewhere:example.org/e/event",
"matrix:roomid/somewhere:example.org/e/event?via=elsewhere.ca",
"matrix:u/alice:example.org?action=chat",
];
for (const matrixUri of acceptedMatrixUris) {
it("accepts " + matrixUri, () => {
const test = matrixUri;
const found = linkify.find(test);
expect(found).toEqual([
{
href: matrixUri,
type: Type.URL,
value: matrixUri,
end: matrixUri.length,
start: 0,
isLink: true,
},
]);
});
}
});
describe("matrix-prefixed domains", () => {
const acceptedDomains = ["matrix.org", "matrix.to", "matrix-help.org", "matrix123.org"];
for (const domain of acceptedDomains) {
it("accepts " + domain, () => {
const test = domain;
const found = linkify.find(test);
expect(found).toEqual([
{
href: `http://${domain}`,
type: Type.URL,
value: domain,
end: domain.length,
start: 0,
isLink: true,
},
]);
});
}
});
});