Files
SiriusandGitHub 84653bb416 Sending URL Preview Bundles (MSC 4095) (#34150)
* Fetches link previews for all links in message (instead of just the first one)

* message url component to display preview for multiple urls

* Revert visible behaviour back to only showing one URL preview

While fetching all link previews in the text message.

* Moved URL preview VM to MessageComposer

* Added com.beeper.linkpreviews to messages sent with the markdown compositor

* MSC 4452 implemented for the older (markdown) composer

* claude told me to use logger instead of console

* Previews generated with snapshot instead of vm

* moved attachPreviews to a separate file

* added attach URL previews to rich text editor

* don't let attachUrlPreviews block clearning the composer

* fixed linter errors

* moved url preview behind labs feature gate

* passed linters

* moved lab feature checking to where attach preview is used

* claude wrote some unit tests for url previewing

* fixed linter errors

* added feature to labs.md

* fixed linter errors

* fixed oxfmt error

* set previews to none if all previews failed

* resolved PR reviews besides the ones that requires a larger code change

* moved url preview VM creation to message composer

* removed delay when clearing composer url preview on message send

* minor changes to stop using globals everywhere

* moved debouncing responsibility to urlpreviewVM

* minor lint fixes

* added comment

* remove composer content from the state of urlpreview, moved it to the vm

* urlpreviewwrapper depends on the vm only

* added comments

* edited the comment

* updated snapshots

* claude fixed tests

* enable feature for tests that requires MSC4095

* updated snapshot
2026-07-13 15:31:18 +00:00

268 lines
10 KiB
TypeScript

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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 IContent } from "matrix-js-sdk/src/matrix";
import { type MessageComposerUrlPreviewSnapshot } from "@element-hq/web-shared-components";
import { attachMentions, attachUrlPreviews } from "../../../src/utils/messages";
import EditorModel from "../../../src/editor/model";
import { mkEvent } from "../../test-utils";
import { createPartCreator } from "../editor/mock";
import { type RoomMessageEventContent } from "../../../@types/url-preview";
import SettingsStore from "../../../src/settings/SettingsStore";
describe("attachUrlPreviews", () => {
beforeEach(() => {
const original = SettingsStore.getValue;
jest.spyOn(SettingsStore, "getValue").mockImplementation(
(setting) => setting === "feature_msc4095_url_preview_bundle" || original(setting),
);
});
afterEach(() => {
jest.restoreAllMocks();
});
const makeContent = (): RoomMessageEventContent =>
({ msgtype: "m.text", body: "hi https://example.com" }) as RoomMessageEventContent;
const snapshot = (image?: object): MessageComposerUrlPreviewSnapshot => ({
previews: [
{
link: "https://example.com",
showTooltipOnLink: false,
title: "Example",
siteName: "example.com",
description: "desc",
...(image ? { image } : {}),
} as any,
],
content: "https://example.com",
});
it("does nothing when there are no previews", () => {
const content = makeContent();
attachUrlPreviews({ previews: [], content: "" }, content);
expect(content["com.beeper.linkpreviews"]).toBeUndefined();
});
it("attaches a preview with no image", () => {
const content = makeContent();
attachUrlPreviews(snapshot(), content);
expect(content["com.beeper.linkpreviews"]).toEqual([
expect.objectContaining({ "og:title": "Example", "og:image": undefined }),
]);
});
it("embeds the mxc url from the preview image", () => {
const content = makeContent();
attachUrlPreviews(
snapshot({
imageThumb: "",
imageFull: "https://example.com/full.png",
mxcImageFull: "mxc://server/img",
imageType: "image/png",
fileSize: 1234,
width: 100,
height: 50,
playable: false,
}),
content,
);
expect(content["com.beeper.linkpreviews"]![0]).toEqual(
expect.objectContaining({
"og:image": "mxc://server/img",
"og:image:width": 100,
"og:image:type": "image/png",
"matrix:image:size": 1234,
}),
);
});
});
describe("attachMentions", () => {
const partsCreator = createPartCreator();
it("no mentions", () => {
const model = new EditorModel([], partsCreator);
const content: IContent = {};
attachMentions("@alice:test", content, model, undefined);
expect(content).toEqual({
"m.mentions": {},
});
});
it("test user mentions", () => {
const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
const content: IContent = {};
attachMentions("@alice:test", content, model, undefined);
expect(content).toEqual({
"m.mentions": { user_ids: ["@bob:test"] },
});
});
it("test reply", () => {
// Replying to an event adds the sender to the list of mentioned users.
const model = new EditorModel([], partsCreator);
let replyToEvent = mkEvent({
type: "m.room.message",
user: "@bob:test",
room: "!abc:test",
content: { "m.mentions": {} },
event: true,
});
let content: IContent = {};
attachMentions("@alice:test", content, model, replyToEvent);
expect(content).toEqual({
"m.mentions": { user_ids: ["@bob:test"] },
});
// It no longer adds any other mentioned users
replyToEvent = mkEvent({
type: "m.room.message",
user: "@bob:test",
room: "!abc:test",
content: { "m.mentions": { user_ids: ["@alice:test", "@charlie:test"] } },
event: true,
});
content = {};
attachMentions("@alice:test", content, model, replyToEvent);
expect(content).toEqual({
"m.mentions": { user_ids: ["@bob:test"] },
});
});
it("test room mention", () => {
const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
const content: IContent = {};
attachMentions("@alice:test", content, model, undefined);
expect(content).toEqual({
"m.mentions": { room: true },
});
});
it("test reply to room mention", () => {
// Replying to a room mention shouldn't automatically be a room mention.
const model = new EditorModel([], partsCreator);
const replyToEvent = mkEvent({
type: "m.room.message",
user: "@alice:test",
room: "!abc:test",
content: { "m.mentions": { room: true } },
event: true,
});
const content: IContent = {};
attachMentions("@alice:test", content, model, replyToEvent);
expect(content).toEqual({
"m.mentions": {},
});
});
it("test broken mentions", () => {
// Replying to a room mention shouldn't automatically be a room mention.
const model = new EditorModel([], partsCreator);
const replyToEvent = mkEvent({
type: "m.room.message",
user: "@alice:test",
room: "!abc:test",
// @ts-ignore - Purposefully testing invalid data.
content: { "m.mentions": { user_ids: "@bob:test" } },
event: true,
});
const content: IContent = {};
attachMentions("@alice:test", content, model, replyToEvent);
expect(content).toEqual({
"m.mentions": {},
});
});
describe("attachMentions with edit", () => {
it("no mentions", () => {
const model = new EditorModel([], partsCreator);
const content: IContent = { "m.new_content": {} };
const prevContent: IContent = {};
attachMentions("@alice:test", content, model, undefined, prevContent);
expect(content).toEqual({
"m.mentions": {},
"m.new_content": { "m.mentions": {} },
});
});
it("mentions do not propagate", () => {
const model = new EditorModel([], partsCreator);
const content: IContent = { "m.new_content": {} };
const prevContent: IContent = {
"m.mentions": { user_ids: ["@bob:test"], room: true },
};
attachMentions("@alice:test", content, model, undefined, prevContent);
expect(content).toEqual({
"m.mentions": {},
"m.new_content": { "m.mentions": {} },
});
});
it("test user mentions", () => {
const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
const content: IContent = { "m.new_content": {} };
const prevContent: IContent = {};
attachMentions("@alice:test", content, model, undefined, prevContent);
expect(content).toEqual({
"m.mentions": { user_ids: ["@bob:test"] },
"m.new_content": { "m.mentions": { user_ids: ["@bob:test"] } },
});
});
it("test prev user mentions", () => {
const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
const content: IContent = { "m.new_content": {} };
const prevContent: IContent = { "m.mentions": { user_ids: ["@bob:test"] } };
attachMentions("@alice:test", content, model, undefined, prevContent);
expect(content).toEqual({
"m.mentions": {},
"m.new_content": { "m.mentions": { user_ids: ["@bob:test"] } },
});
});
it("test room mention", () => {
const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
const content: IContent = { "m.new_content": {} };
const prevContent: IContent = {};
attachMentions("@alice:test", content, model, undefined, prevContent);
expect(content).toEqual({
"m.mentions": { room: true },
"m.new_content": { "m.mentions": { room: true } },
});
});
it("test prev room mention", () => {
const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
const content: IContent = { "m.new_content": {} };
const prevContent: IContent = { "m.mentions": { room: true } };
attachMentions("@alice:test", content, model, undefined, prevContent);
expect(content).toEqual({
"m.mentions": {},
"m.new_content": { "m.mentions": { room: true } },
});
});
it("test broken mentions", () => {
// Replying to a room mention shouldn't automatically be a room mention.
const model = new EditorModel([], partsCreator);
const content: IContent = { "m.new_content": {} };
// @ts-ignore - Purposefully testing invalid data.
const prevContent: IContent = { "m.mentions": { user_ids: "@bob:test" } };
attachMentions("@alice:test", content, model, undefined, prevContent);
expect(content).toEqual({
"m.mentions": {},
"m.new_content": { "m.mentions": {} },
});
});
});
});