Add at room avatar for RTE

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(
@@ -133,8 +134,18 @@ export function getMentionAttributes(
         attributes.set("data-mention-type", completion.type);
         attributes.set("style", `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`);
     } 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("style", `--avatar-background: url(${avatarUrl}); --avatar-letter: '${initialLetter}'`);
     }
 
     return attributes;

test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts

@@ -242,12 +242,36 @@ 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);
 
-            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}'`,
+                    ],
+                ]),
+            );
         });
     });
 });