From 45227324ce7d16ea6b75cd3820187d4699bf9f30 Mon Sep 17 00:00:00 2001 From: Alun Turner Date: Fri, 16 Jun 2023 13:43:52 +0100 Subject: [PATCH 1/6] add at room avatar logic --- .../rooms/wysiwyg_composer/utils/autocomplete.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts index 7f48d8afea6..87a0be7d7ab 100644 --- a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts +++ b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts @@ -133,7 +133,19 @@ export function getMentionAttributes(completion: ICompletion, client: MatrixClie "style": `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`, }; } else if (completion.type === "at-room") { - return { "data-mention-type": completion.type }; + // logic as used in RoomPillPart.setAvatar in parts.ts, but now we know the current room + // from the arguments passed + let initialLetter = defaultLetterContent; + let avatarUrl = Avatar.avatarUrlForRoom(room, 16, 16, "crop"); + if (!avatarUrl) { + initialLetter = Avatar.getInitialLetter(room.name); + avatarUrl = Avatar.defaultAvatarUrlForString(room.roomId); + } + + return { + "data-mention-type": completion.type, + "style": `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`, + }; } return {}; } From 4dd29d201506e3da4bb19b1b1f29d592e29302f4 Mon Sep 17 00:00:00 2001 From: Alun Turner Date: Fri, 16 Jun 2023 14:20:34 +0100 Subject: [PATCH 2/6] fix broken test --- .../views/rooms/wysiwyg_composer/utils/autocomplete-test.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts b/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts index 0553f61f14a..e5d2f2384b0 100644 --- a/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts +++ b/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts @@ -233,7 +233,10 @@ describe("getMentionAttributes", () => { const result = getMentionAttributes(atRoomCompletion, mockClient, mockRoom); - expect(result).toEqual({ "data-mention-type": "at-room" }); + expect(result).toEqual({ + "data-mention-type": "at-room", + "style": `--avatar-background: url(${testAvatarUrlForRoom}); --avatar-letter: '\u200b'`, + }); }); }); }); From ae5e913908d91166349762fd8d1c839476d25838 Mon Sep 17 00:00:00 2001 From: Alun Turner Date: Fri, 16 Jun 2023 15:07:43 +0100 Subject: [PATCH 3/6] fix TS error --- .../views/rooms/wysiwyg_composer/utils/autocomplete.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts index 87a0be7d7ab..f66e3a24d76 100644 --- a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts +++ b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts @@ -137,8 +137,9 @@ export function getMentionAttributes(completion: ICompletion, client: MatrixClie // from the arguments passed let initialLetter = defaultLetterContent; let avatarUrl = Avatar.avatarUrlForRoom(room, 16, 16, "crop"); + if (!avatarUrl) { - initialLetter = Avatar.getInitialLetter(room.name); + initialLetter = Avatar.getInitialLetter(room.name) ?? defaultLetterContent; avatarUrl = Avatar.defaultAvatarUrlForString(room.roomId); } From a86393d80ca60e43a957c83dce6ffc318a76e823 Mon Sep 17 00:00:00 2001 From: Alun Turner Date: Fri, 16 Jun 2023 15:12:38 +0100 Subject: [PATCH 4/6] add param comment --- .../views/rooms/wysiwyg_composer/utils/autocomplete.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts index f66e3a24d76..67be31734ad 100644 --- a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts +++ b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts @@ -89,6 +89,7 @@ export function getMentionDisplayText(completion: ICompletion, client: MatrixCli * * @param completion - the item selected from the autocomplete * @param client - the MatrixClient is required for us to look up the correct room mention text + * @param room - the room the composer is currently in * @returns an object of attributes containing HTMLAnchor attributes or data-* attributes */ export function getMentionAttributes(completion: ICompletion, client: MatrixClient, room: Room): Attributes { From ce1820bfc5139d0a8e0d538290f7f861d31f345a Mon Sep 17 00:00:00 2001 From: Alun Turner Date: Fri, 16 Jun 2023 16:15:02 +0100 Subject: [PATCH 5/6] increase test coverage --- .../wysiwyg_composer/utils/autocomplete-test.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts b/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts index e5d2f2384b0..47b8e63012e 100644 --- a/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts +++ b/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts @@ -228,7 +228,7 @@ describe("getMentionAttributes", () => { }); describe("at-room mentions", () => { - it("returns expected attributes", () => { + it("returns expected attributes when avatar url for room is truthyf", () => { const atRoomCompletion = createMockCompletion({ type: "at-room" }); const result = getMentionAttributes(atRoomCompletion, mockClient, mockRoom); @@ -238,5 +238,19 @@ describe("getMentionAttributes", () => { "style": `--avatar-background: url(${testAvatarUrlForRoom}); --avatar-letter: '\u200b'`, }); }); + + it("returns expected style attributes when avatar url for room is falsy", () => { + const atRoomCompletion = createMockCompletion({ type: "at-room" }); + + // mock a single implementation of avatarUrlForRoom to make it falsy + mockAvatar.avatarUrlForRoom.mockReturnValueOnce(null); + + const result = getMentionAttributes(atRoomCompletion, mockClient, mockRoom); + + expect(result).toEqual({ + "data-mention-type": "at-room", + "style": `--avatar-background: url(${testAvatarUrlForString}); --avatar-letter: '${testInitialLetter}'`, + }); + }); }); }); From 0d0c8d7b15f938dd8a34e5c48e335abd5d358aec Mon Sep 17 00:00:00 2001 From: Alun Turner Date: Mon, 19 Jun 2023 16:37:35 +0100 Subject: [PATCH 6/6] update code to solve conflict --- .../wysiwyg_composer/utils/autocomplete.ts | 6 ++--- .../utils/autocomplete-test.ts | 23 ++++++++++++------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts index ab18ecf3ce9..c89e9d706bb 100644 --- a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts +++ b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts @@ -144,10 +144,8 @@ export function getMentionAttributes( avatarUrl = Avatar.defaultAvatarUrlForString(room.roomId); } - return { - "data-mention-type": completion.type, - "style": `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`, - }; + attributes.set("data-mention-type", completion.type); + attributes.set("style", `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`); } return attributes; diff --git a/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts b/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts index c37d30836ab..2cb049932d9 100644 --- a/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts +++ b/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts @@ -247,10 +247,12 @@ describe("getMentionAttributes", () => { const result = getMentionAttributes(atRoomCompletion, mockClient, mockRoom); - expect(result).toEqual({ - "data-mention-type": "at-room", - "style": `--avatar-background: url(${testAvatarUrlForRoom}); --avatar-letter: '\u200b'`, - }); + expect(result).toEqual( + new Map([ + ["data-mention-type", "at-room"], + ["style", `--avatar-background: url(${testAvatarUrlForRoom}); --avatar-letter: '\u200b'`], + ]), + ); }); it("returns expected style attributes when avatar url for room is falsy", () => { @@ -261,10 +263,15 @@ describe("getMentionAttributes", () => { const result = getMentionAttributes(atRoomCompletion, mockClient, mockRoom); - expect(result).toEqual({ - "data-mention-type": "at-room", - "style": `--avatar-background: url(${testAvatarUrlForString}); --avatar-letter: '${testInitialLetter}'`, - }); + expect(result).toEqual( + new Map([ + ["data-mention-type", "at-room"], + [ + "style", + `--avatar-background: url(${testAvatarUrlForString}); --avatar-letter: '${testInitialLetter}'`, + ], + ]), + ); }); }); });