diff --git a/src/app/organisms/room/RoomViewCmdBar.jsx b/src/app/organisms/room/RoomViewCmdBar.jsx index e1a4e184..15f298e9 100644 --- a/src/app/organisms/room/RoomViewCmdBar.jsx +++ b/src/app/organisms/room/RoomViewCmdBar.jsx @@ -253,7 +253,7 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) { } if (myCmd.prefix === '@') { viewEvent.emit('cmd_fired', { - replace: myCmd.result.name, + replace: `@${myCmd.result.userId}`, }); } deactivateCmd(); diff --git a/src/app/organisms/room/RoomViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx index 37e02989..f4ba3f3f 100644 --- a/src/app/organisms/room/RoomViewInput.jsx +++ b/src/app/organisms/room/RoomViewInput.jsx @@ -129,7 +129,9 @@ function RoomViewInput({ function firedCmd(cmdData) { const msg = textAreaRef.current.value; textAreaRef.current.value = replaceCmdWith( - msg, cmdCursorPos, typeof cmdData?.replace !== 'undefined' ? cmdData.replace : '', + msg, + cmdCursorPos, + typeof cmdData?.replace !== 'undefined' ? cmdData.replace : '', ); deactivateCmd(); } diff --git a/src/client/state/RoomsInput.js b/src/client/state/RoomsInput.js index a9ecbb4d..1c78179d 100644 --- a/src/client/state/RoomsInput.js +++ b/src/client/state/RoomsInput.js @@ -111,6 +111,7 @@ function bindReplyToContent(roomId, reply, content) { function formatAndEmojifyText(mx, roomList, roomId, text) { const room = mx.getRoom(roomId); + const { userIdsToDisplayNames } = room.currentState; const parentIds = roomList.getAllParentSpaces(roomId); const parentRooms = [...parentIds].map((id) => mx.getRoom(id)); const allEmoji = getShortcodeToEmoji(mx, [room, ...parentRooms]); @@ -122,13 +123,24 @@ function formatAndEmojifyText(mx, roomList, roomId, text) { formattedText = text; } + const MXID_REGEX = /\B@\S+:\S+\.\S+/g; + Array.from(formattedText.matchAll(MXID_REGEX)) + .filter((mxidMatch) => userIdsToDisplayNames[mxidMatch[0]]) + .reverse() + .forEach((mxidMatch) => { + const tag = `${userIdsToDisplayNames[mxidMatch[0]]}`; + + formattedText = formattedText.substr(0, mxidMatch.index) + + tag + + formattedText.substr(mxidMatch.index + mxidMatch[0].length); + }); + const SHORTCODE_REGEX = /\B:([\w-]+):\B/g; Array.from(formattedText.matchAll(SHORTCODE_REGEX)) .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]); - console.log(shortcodeMatch); let tag; if (emoji.mxc) {