From 96c62ea03d0e7fd3f9b9219599a9bec54b6717f8 Mon Sep 17 00:00:00 2001
From: alunturner <56027671+alunturner@users.noreply.github.com>
Date: Tue, 11 Apr 2023 09:13:48 +0100
Subject: [PATCH] Fix avatar text issue in rte (#10559)

* replace - with zwsp

* improve comments

* fix broken tests

* fix typo
---
 .../views/rooms/wysiwyg_composer/utils/autocomplete.ts | 10 ++++++----
 .../rooms/wysiwyg_composer/utils/autocomplete-test.ts  |  4 ++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts b/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts
index 86dd2791a7..2bf68f5c76 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/autocomplete.ts
+++ b/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
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 dc89caba65..7629a5a291 100644
--- a/test/components/views/rooms/wysiwyg_composer/utils/autocomplete-test.ts
+++ b/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'`,
             });
         });