From a2692e1469c57430545421b616f5f1d648415464 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:43:54 +1100
Subject: [PATCH] Fix room mention (#1459)

* create room mention with alias if possible

* display room mention text as they were sent
---
 .../autocomplete/RoomMentionAutocomplete.tsx       | 14 ++++++++------
 src/app/components/editor/input.ts                 |  2 +-
 src/app/plugins/react-custom-html-parser.tsx       |  5 +----
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
index 31acd2c..b9fee87 100644
--- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
@@ -32,14 +32,14 @@ function UnknownRoomMentionItem({
   const mx = useMatrixClient();
   const roomAlias: string = roomAliasFromQueryText(mx, query.text);
 
+  const handleSelect = () => handleAutocomplete(roomAlias, roomAlias);
+
   return (
     <MenuItem
       as="button"
       radii="300"
-      onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
-        onTabPress(evt, () => handleAutocomplete(roomAlias, roomAlias))
-      }
-      onClick={() => handleAutocomplete(roomAlias, roomAlias)}
+      onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) => onTabPress(evt, handleSelect)}
+      onClick={handleSelect}
       before={
         <Avatar size="200">
           <Icon src={Icons.Hash} size="100" />
@@ -140,15 +140,17 @@ export function RoomMentionAutocomplete({
           const avatarUrl = getRoomAvatarUrl(mx, room);
           const iconSrc = !dm && joinRuleToIconSrc(Icons, room.getJoinRule(), room.isSpaceRoom());
 
+          const handleSelect = () => handleAutocomplete(room.getCanonicalAlias() ?? rId, room.name);
+
           return (
             <MenuItem
               key={rId}
               as="button"
               radii="300"
               onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
-                onTabPress(evt, () => handleAutocomplete(rId, room.name))
+                onTabPress(evt, handleSelect)
               }
-              onClick={() => handleAutocomplete(room.getCanonicalAlias() ?? rId, room.name)}
+              onClick={handleSelect}
               after={
                 <Text size="T200" priority="300" truncate>
                   {room.getCanonicalAlias() ?? ''}
diff --git a/src/app/components/editor/input.ts b/src/app/components/editor/input.ts
index 37aa724..91386a8 100644
--- a/src/app/components/editor/input.ts
+++ b/src/app/components/editor/input.ts
@@ -74,7 +74,7 @@ const elementToInlineNode = (node: Element): MentionElement | EmoticonElement |
     if (typeof href !== 'string') return undefined;
     const [mxId] = parseMatrixToUrl(href);
     if (mxId) {
-      return createMentionElement(mxId, mxId, false);
+      return createMentionElement(mxId, parseNodeText(node) || mxId, false);
     }
   }
   return undefined;
diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx
index aba5997..09f09d8 100644
--- a/src/app/plugins/react-custom-html-parser.tsx
+++ b/src/app/plugins/react-custom-html-parser.tsx
@@ -180,10 +180,7 @@ export const getReactCustomHtmlParser = (
                 mentionPrefix === '#'
                   ? getRoomWithCanonicalAlias(mx, mentionId)
                   : mx.getRoom(mentionId);
-              const mentionName = mentionRoom?.name;
 
-              const mentionDisplayName =
-                mentionName && (mentionName.startsWith('#') ? mentionName : `#${mentionName}`);
               return (
                 <span
                   {...props}
@@ -198,7 +195,7 @@ export const getReactCustomHtmlParser = (
                   onClick={params.handleMentionClick}
                   style={{ cursor: 'pointer' }}
                 >
-                  {mentionDisplayName ?? mentionId}
+                  {domToReact(children, opts)}
                 </span>
               );
             }