matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-07 21:23:00 +03:00
Code Activity

Add at room avatar for RTE (#11106)

Browse Source 
* add at room avatar logic

* fix broken test

* fix TS error

* add param comment

* increase test coverage

* update code to solve conflict
This commit is contained in:
alunturner
2023-06-21 08:57:22 +01:00
committed by GitHub
parent 985bde70c5
commit ac3d6ab7dd
2 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts
View File

@@ -89,6 +89,7 @@ export function getMentionDisplayText(completion: ICompletion, client: MatrixCli
* *
* @param completion - the item selected from the autocomplete * @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 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 * @returns an object of attributes containing HTMLAnchor attributes or data-* attributes
*/ */
export function getMentionAttributes( export function getMentionAttributes(
@@ -133,8 +134,18 @@ export function getMentionAttributes(
attributes.set("data-mention-type", completion.type); attributes.set("data-mention-type", completion.type);
attributes.set("style", `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`); attributes.set("style", `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`);
} else if (completion.type === "at-room") { } else if (completion.type === "at-room") {
// TODO add avatar logic for at-room // 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) ?? defaultLetterContent;
avatarUrl = Avatar.defaultAvatarUrlForString(room.roomId);
}
attributes.set("data-mention-type", completion.type); attributes.set("data-mention-type", completion.type);
attributes.set("style", `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`);
} }
return attributes; return attributes;

28
test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts
View File

@@ -242,12 +242,36 @@ describe("getMentionAttributes", () => {
}); });
describe("at-room mentions", () => { 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 atRoomCompletion = createMockCompletion({ type: "at-room" });
const result = getMentionAttributes(atRoomCompletion, mockClient, mockRoom); const result = getMentionAttributes(atRoomCompletion, mockClient, mockRoom);
expect(result).toEqual(new Map([["data-mention-type", "at-room"]])); 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", () => {
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(
new Map([
["data-mention-type", "at-room"],
[
"style",
`--avatar-background: url(${testAvatarUrlForString}); --avatar-letter: '${testInitialLetter}'`,
],
]),
);
}); });
}); });
}); });