sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Add URL preview above message composer (#33964)

Browse Source 
* Modify LinkPreview to export shared atomics

* Implement MessageComposerUrlPreviewView

* Create UrlPreviewFetcher utility function

* Modify view models

* Implement in composer

* Support running tests in dom-less vitest environment

* Add a playwright test

* hide another one

* fmt

* cleanup

* test rte too

* fixup

* Add back docstring

* cleanup

* off by one

* remove description check

* Cleanup hacks

* Remove another hack

* cleanup

* one more

* fixup window here too

* whoops type

* Rename to be cleaeer

* Trim URLs first

* fix bug
This commit is contained in:
Will Hunt
2026-06-30 16:58:03 +00:00
committed by GitHub
parent bbbd050f50
commit be91d19e31
29 changed files with 1386 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts
+5 -153
View File
@@ -8,7 +8,7 @@
import { expect } from "@jest/globals";
import type { MockedObject } from "jest-mock-vitest-adapter";
import type { MatrixClient, IPreviewUrlResponse } from "matrix-js-sdk/src/matrix";
import type { MatrixClient } from "matrix-js-sdk/src/matrix";
import {
BUNDLED_LINK_PREVIEWS,
UrlPreviewGroupViewModel,
@@ -42,6 +42,7 @@ function getViewModel(
mediaVisible,
visible,
onImageClicked,
showTooltips: false,
mxEvent: mkEvent({
event: true,
user: "@foo:bar",
@@ -89,15 +90,9 @@ describe("UrlPreviewGroupViewModel", () => {
const { previews } = vm.getSnapshot();
expect(previews).toHaveLength(3);
expect(previews).toMatchObject([
{
link: "https://example.org/1",
},
{
link: "https://example.org/2",
},
{
link: "https://example.org/3",
},
{ link: "https://example.org/1" },
{ link: "https://example.org/2" },
{ link: "https://example.org/3" },
]);
});
it("should hide preview when invisible", async () => {
@@ -108,56 +103,6 @@ describe("UrlPreviewGroupViewModel", () => {
expect(vm.getSnapshot()).toMatchSnapshot();
expect(client.getUrlPreview).not.toHaveBeenCalled();
});
it("should preview a URL with media", async () => {
const { vm, client } = getViewModel();
client.getUrlPreview.mockResolvedValueOnce({
"og:title": "This is an example!",
"og:type": "document",
"og:url": "https://example.org",
"og:image": IMAGE_MXC,
"og:image:height": 128,
"og:image:width": 128,
"matrix:image:size": 10000,
});
// eslint-disable-next-line no-restricted-properties
client.mxcUrlToHttp.mockImplementation((url, width) => {
expect(url).toEqual(IMAGE_MXC);
if (width) {
return "https://example.org/image/thumb";
}
return "https://example.org/image/src";
});
const msg = document.createElement("div");
msg.innerHTML = '<a href="https://example.org">Test</a>';
await vm.updateEventElement(msg);
expect(vm.getSnapshot()).toMatchSnapshot();
});
it.each<Partial<IPreviewUrlResponse>>([
{ "matrix:image:size": 8191 },
{ "og:image:width": 95 },
{ "og:image:height": 95 },
])("should preview a URL with a site icon", async (extraResp) => {
const { vm, client } = getViewModel();
client.getUrlPreview.mockResolvedValueOnce({
"og:title": "This is an example!",
"og:type": "document",
"og:url": "https://example.org",
"og:image": IMAGE_MXC,
"og:image:height": 128,
"og:image:width": 128,
"matrix:image:size": 8193,
...extraResp,
});
// eslint-disable-next-line no-restricted-properties
client.mxcUrlToHttp.mockImplementation((url) => {
expect(url).toEqual(IMAGE_MXC);
return "https://example.org/image/src";
});
const msg = document.createElement("div");
msg.innerHTML = '<a href="https://example.org">Test</a>';
await vm.updateEventElement(msg);
expect(vm.getSnapshot().previews[0].siteIcon).toBeTruthy();
});
it("should ignore media when mediaVisible is false", async () => {
const { vm, client } = getViewModel({ mediaVisible: false, visible: true, showPreview: true });
client.getUrlPreview.mockResolvedValueOnce({
@@ -248,41 +193,6 @@ describe("UrlPreviewGroupViewModel", () => {
`);
});
describe("calculates author", () => {
it("should use the profile:username if provided", async () => {
const { vm, client } = getViewModel();
client.getUrlPreview.mockResolvedValueOnce({ ...BASIC_PREVIEW_OGDATA, "profile:username": "my username" });
const msg = document.createElement("div");
msg.innerHTML = '<a href="https://example.org">Test</a>';
await vm.updateEventElement(msg);
expect(vm.getSnapshot().previews[0].author).toEqual("my username");
});
it("should use author if the og:type is an article", async () => {
const { vm, client } = getViewModel();
client.getUrlPreview.mockResolvedValueOnce({
...BASIC_PREVIEW_OGDATA,
"og:type": "article",
"article:author": "my name",
});
const msg = document.createElement("div");
msg.innerHTML = '<a href="https://example.org">Test</a>';
await vm.updateEventElement(msg);
expect(vm.getSnapshot().previews[0].author).toEqual("my name");
});
it("should NOT use author if the author is a URL", async () => {
const { vm, client } = getViewModel();
client.getUrlPreview.mockResolvedValueOnce({
...BASIC_PREVIEW_OGDATA,
"og:type": "article",
"article:author": "https://junk.example.org/foo",
});
const msg = document.createElement("div");
msg.innerHTML = '<a href="https://example.org">Test</a>';
await vm.updateEventElement(msg);
expect(vm.getSnapshot().previews[0].author).toBeUndefined();
});
});
it.each([
{ text: "", href: "", hasPreview: false },
{ text: "test", href: "noprotocol.example.org", hasPreview: false },
@@ -297,62 +207,4 @@ describe("UrlPreviewGroupViewModel", () => {
await vm.updateEventElement(msg);
expect(vm.getSnapshot().previews).toHaveLength(item.hasPreview ? 1 : 0);
});
// og:url, og:type are ignored.
const baseOg = {
"og:url": "https://example.org",
"og:type": "document",
};
it.each<IPreviewUrlResponse>([
{ ...baseOg, "og:title": "Basic title" },
{ ...baseOg, "og:site_name": "Site name", "og:title": "" },
{ ...baseOg, "og:description": "A description", "og:title": "" },
{ ...baseOg, "og:title": "Cool blog", "og:site_name": "Cool site" },
{
...baseOg,
"og:title": "Media test",
// API *may* return a string, so check we parse correctly.
"og:image:height": "500" as unknown as number,
"og:image:width": 500,
"matrix:image:size": 10000,
"og:image": IMAGE_MXC,
},
])("handles different kinds of opengraph responses %s", async (og) => {
const { vm, client } = getViewModel();
// eslint-disable-next-line no-restricted-properties
client.mxcUrlToHttp.mockImplementation((url, width) => {
expect(url).toEqual(IMAGE_MXC);
if (width) {
return "https://example.org/image/thumb";
}
return "https://example.org/image/src";
});
client.getUrlPreview.mockResolvedValueOnce(og);
const msg = document.createElement("div");
msg.innerHTML = `<a href="https://example.org">test</a>`;
await vm.updateEventElement(msg);
expect(vm.getSnapshot().previews[0]).toMatchSnapshot();
});
it.each<string>(["og:video", "og:video:type", "og:audio"])("detects playable links via %s", async (property) => {
const { vm, client } = getViewModel();
// eslint-disable-next-line no-restricted-properties
client.mxcUrlToHttp.mockImplementation((url, width) => {
expect(url).toEqual(IMAGE_MXC);
if (width) {
return "https://example.org/image/thumb";
}
return "https://example.org/image/src";
});
client.getUrlPreview.mockResolvedValueOnce({
...BASIC_PREVIEW_OGDATA,
"og:image": IMAGE_MXC,
[property]: "anything",
});
const msg = document.createElement("div");
msg.innerHTML = `<a href="https://example.org">test</a>`;
await vm.updateEventElement(msg);
expect(vm.getSnapshot().previews[0].image?.playable).toEqual(true);
});
});
apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewGroupViewModel-test.ts.snap
-101
View File
@@ -1,78 +1,5 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n 'og:url': 'https://example.org',\\n 'og:type': 'document',\\n 'og:description': 'A description',\\n 'og:title': ''\\n} 1`] = `
{
"author": undefined,
"description": undefined,
"image": undefined,
"link": "https://example.org",
"showTooltipOnLink": false,
"siteIcon": undefined,
"siteName": "example.org",
"title": "A description",
}
`;
exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n 'og:url': 'https://example.org',\\n 'og:type': 'document',\\n 'og:site_name': 'Site name',\\n 'og:title': ''\\n} 1`] = `
{
"author": undefined,
"description": undefined,
"image": undefined,
"link": "https://example.org",
"showTooltipOnLink": false,
"siteIcon": undefined,
"siteName": "Site name",
"title": "Site name",
}
`;
exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n 'og:url': 'https://example.org',\\n 'og:type': 'document',\\n 'og:title': 'Basic title'\\n} 1`] = `
{
"author": undefined,
"description": undefined,
"image": undefined,
"link": "https://example.org",
"showTooltipOnLink": false,
"siteIcon": undefined,
"siteName": "example.org",
"title": "Basic title",
}
`;
exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n 'og:url': 'https://example.org',\\n 'og:type': 'document',\\n 'og:title': 'Cool blog',\\n 'og:site_name': 'Cool site'\\n} 1`] = `
{
"author": undefined,
"description": undefined,
"image": undefined,
"link": "https://example.org",
"showTooltipOnLink": false,
"siteIcon": undefined,
"siteName": "Cool site",
"title": "Cool blog",
}
`;
exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n 'og:url': 'https://example.org',\\n 'og:type': 'document',\\n 'og:title': 'Media test',\\n 'og:image:height': '500',\\n 'og:image:width': 500,\\n 'matrix:image:size': 10000,\\n 'og:image': 'mxc://example.org/abc'\\n} 1`] = `
{
"author": undefined,
"description": undefined,
"image": {
"alt": undefined,
"fileSize": 10000,
"height": 478,
"imageFull": "https://example.org/image/src",
"imageThumb": "https://example.org/image/thumb",
"playable": false,
"width": 478,
},
"link": "https://example.org",
"showTooltipOnLink": false,
"siteIcon": undefined,
"siteName": "example.org",
"title": "Media test",
}
`;
exports[`UrlPreviewGroupViewModel should deduplicate multiple versions of the same URL 1`] = `
{
"overPreviewLimit": false,
@@ -160,34 +87,6 @@ exports[`UrlPreviewGroupViewModel should ignore media when mediaVisible is false
}
`;
exports[`UrlPreviewGroupViewModel should preview a URL with media 1`] = `
{
"overPreviewLimit": false,
"previews": [
{
"author": undefined,
"description": undefined,
"image": {
"alt": undefined,
"fileSize": 10000,
"height": 128,
"imageFull": "https://example.org/image/src",
"imageThumb": "https://example.org/image/thumb",
"playable": false,
"width": 128,
},
"link": "https://example.org",
"showTooltipOnLink": false,
"siteIcon": undefined,
"siteName": "example.org",
"title": "This is an example!",
},
],
"previewsLimited": true,
"totalPreviewCount": 1,
}
`;
exports[`UrlPreviewGroupViewModel should preview a single valid URL 1`] = `
{
"overPreviewLimit": false,