Stop sending mxid in body for pills

src/client/state/RoomsInput.js

@@ -10,6 +10,8 @@ import cons from './cons';
 import settings from './settings';
 
 const blurhashField = 'xyz.amorgan.blurhash';
+const MXID_REGEX = /\B@\S+:\S+\.\S+[^.,:;?!\s]/g;
+const SHORTCODE_REGEX = /\B:([\w-]+):\B/g;
 
 function encodeBlurhash(img) {
   const canvas = document.createElement('canvas');
@@ -130,10 +132,25 @@ function bindReplyToContent(roomId, reply, content) {
   return newContent;
 }
 
-function formatAndEmojifyText(mx, roomList, roomId, text) {
+function findAndReplace(text, regex, filter, replace) {
-  const room = mx.getRoom(roomId);
+  let copyText = text;
+  Array.from(copyText.matchAll(regex))
+    .filter(filter)
+    .reverse() /* to replace backward to forward */
+    .forEach((match) => {
+      const matchText = match[0];
+      const tag = replace(match);
+
+      copyText = copyText.substr(0, match.index)
+        + tag
+        + copyText.substr(match.index + matchText.length);
+    });
+  return copyText;
+}
+
+function formatAndEmojifyText(mx, roomList, room, text) {
   const { userIdsToDisplayNames } = room.currentState;
-  const parentIds = roomList.getAllParentSpaces(roomId);
+  const parentIds = roomList.getAllParentSpaces(room.roomId);
   const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
   const allEmoji = getShortcodeToEmoji(mx, [room, ...parentRooms]);
 
@@ -144,24 +161,20 @@ function formatAndEmojifyText(mx, roomList, roomId, text) {
     formattedText = text;
   }
 
-  const MXID_REGEX = /\B@\S+:\S+\.\S+[^.,:;?!\s]/g;
+  formattedText = findAndReplace(
-  Array.from(formattedText.matchAll(MXID_REGEX))
+    formattedText,
-    .filter((mxidMatch) => userIdsToDisplayNames[mxidMatch[0]])
+    MXID_REGEX,
-    .reverse()
+    (match) => userIdsToDisplayNames[match[0]],
-    .forEach((mxidMatch) => {
+    (match) => (
-      const tag = `<a href="https://matrix.to/#/${mxidMatch[0]}">${userIdsToDisplayNames[mxidMatch[0]]}</a>`;
+      `<a href="https://matrix.to/#/${match[0]}">@${userIdsToDisplayNames[match[0]]}</a>`
-
+    ),
-      formattedText = formattedText.substr(0, mxidMatch.index)
+  );
-        + tag
+  formattedText = findAndReplace(
-        + formattedText.substr(mxidMatch.index + mxidMatch[0].length);
+    formattedText,
-    });
+    SHORTCODE_REGEX,
-
+    (match) => allEmoji.has(match[1]),
-  const SHORTCODE_REGEX = /\B:([\w-]+):\B/g;
+    (match) => {
-  Array.from(formattedText.matchAll(SHORTCODE_REGEX))
+      const emoji = allEmoji.get(match[1]);
-    .filter((shortcodeMatch) => allEmoji.has(shortcodeMatch[1]))
-    .reverse() /* Reversing the array ensures that indices are preserved as we start replacing */
-    .forEach((shortcodeMatch) => {
-      const emoji = allEmoji.get(shortcodeMatch[1]);
 
       let tag;
       if (emoji.mxc) {
@@ -175,11 +188,9 @@ function formatAndEmojifyText(mx, roomList, roomId, text) {
       } else {
         tag = emoji.unicode;
       }
-
+      return tag;
-      formattedText = formattedText.substr(0, shortcodeMatch.index)
+    },
-        + tag
+  );
-        + formattedText.substr(shortcodeMatch.index + shortcodeMatch[0].length);
-    });
 
   return formattedText;
 }
@@ -274,6 +285,7 @@ class RoomsInput extends EventEmitter {
   }
 
   async sendInput(roomId) {
+    const room = this.matrixClient.getRoom(roomId);
     const input = this.getInput(roomId);
     input.isSending = true;
     this.roomIdToInput.set(roomId, input);
@@ -292,9 +304,15 @@ class RoomsInput extends EventEmitter {
       const formattedBody = formatAndEmojifyText(
         this.matrixClient,
         this.roomList,
-        roomId,
+        room,
         input.message,
       );
+      content.body = findAndReplace(
+        content.body,
+        MXID_REGEX,
+        (match) => room.currentState.userIdsToDisplayNames[match[0]],
+        (match) => `@${room.currentState.userIdsToDisplayNames[match[0]]}`,
+      );
       if (formattedBody !== input.message) {
         // Formatting was applied, and we need to switch to custom HTML
         content.format = 'org.matrix.custom.html';
@@ -446,6 +464,7 @@ class RoomsInput extends EventEmitter {
   }
 
   async sendEditedMessage(roomId, mEvent, editedBody) {
+    const room = this.matrixClient.getRoom(roomId);
     const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
 
     const content = {
@@ -465,9 +484,15 @@ class RoomsInput extends EventEmitter {
     const formattedBody = formatAndEmojifyText(
       this.matrixClient,
       this.roomList,
-      roomId,
+      room,
       editedBody,
     );
+    content.body = findAndReplace(
+      content.body,
+      MXID_REGEX,
+      (match) => room.currentState.userIdsToDisplayNames[match[0]],
+      (match) => `@${room.currentState.userIdsToDisplayNames[match[0]]}`,
+    );
     if (formattedBody !== editedBody) {
       content.formatted_body = ` * ${formattedBody}`;
       content.format = 'org.matrix.custom.html';