Fix avatar text issue in rte (#10559)

* replace - with zwsp

* improve comments

* fix broken tests

* fix typo

Author: artcodespace

src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts

@@ -89,12 +89,14 @@ 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
- * @returns an object of attributes containing HTMLAnchor attributes or data-* attri
+ * @returns an object of attributes containing HTMLAnchor attributes or data-* attributes
  */
 export function getMentionAttributes(completion: ICompletion, client: MatrixClient, room: Room): Attributes {
-    // to ensure that we always have something set in the --avatar-letter CSS variable
-    // as otherwise alignment varies depending on whether the content is empty or not
-    const defaultLetterContent = "-";
+    // To ensure that we always have something set in the --avatar-letter CSS variable
+    // as otherwise alignment varies depending on whether the content is empty or not.
+
+    // Use a zero width space so that it counts as content, but does not display anything.
+    const defaultLetterContent = "\u200b";
 
     if (completion.type === "user") {
         // logic as used in UserPillPart.setAvatar in parts.ts

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

@@ -173,7 +173,7 @@ describe("getMentionAttributes", () => {
 
             expect(result).toEqual({
                 "data-mention-type": "user",
-                "style": `--avatar-background: url(${testAvatarUrlForMember}); --avatar-letter: '-'`,
+                "style": `--avatar-background: url(${testAvatarUrlForMember}); --avatar-letter: '\u200b'`,
             });
         });
 
@@ -200,7 +200,7 @@ describe("getMentionAttributes", () => {
 
             expect(result).toEqual({
                 "data-mention-type": "room",
-                "style": `--avatar-background: url(${testAvatarUrlForRoom}); --avatar-letter: '-'`,
+                "style": `--avatar-background: url(${testAvatarUrlForRoom}); --avatar-letter: '\u200b'`,
             });
         });