feat: convert mention to a markdown link

client/src/components/CardModal/Activities/Activities.jsx

@@ -71,6 +71,7 @@ const Activities = React.memo(
                     canEdit={(item.user.isCurrent && canEdit) || canEditAllComments}
                     onUpdate={(data) => handleCommentUpdate(item.id, data)}
                     onDelete={() => handleCommentDelete(item.id)}
+                    boardMemberships={boardMemberships}
                   />
                 ) : (
                   <Item

client/src/components/CardModal/Activities/ItemComment.jsx

@@ -12,10 +12,12 @@ import User from '../../User';
 import DeleteStep from '../../DeleteStep';
 
 import styles from './ItemComment.module.scss';
+import replaceMentionsWithName from '../../../utils/replace-mentions-with-name';
 
 const ItemComment = React.memo(
-  ({ data, createdAt, isPersisted, user, canEdit, onUpdate, onDelete }) => {
+  ({ data, createdAt, isPersisted, user, canEdit, onUpdate, onDelete, boardMemberships }) => {
     const [t] = useTranslation();
+    const comment = replaceMentionsWithName(data.text, boardMemberships);
 
     const commentEdit = useRef(null);
 
@@ -43,7 +45,7 @@ const ItemComment = React.memo(
           <CommentEdit ref={commentEdit} defaultData={data} onUpdate={onUpdate}>
             <>
               <div className={styles.text}>
-                <Markdown linkTarget="_blank">{data.text}</Markdown>
+                <Markdown linkTarget="_blank">{comment}</Markdown>
               </div>
               {canEdit && (
                 <Comment.Actions>
@@ -83,6 +85,7 @@ ItemComment.propTypes = {
   canEdit: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
+  boardMemberships: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
 export default ItemComment;

client/src/hooks/use-mention.js

@@ -37,7 +37,8 @@ export default () => {
   const onSelectMention = (text, user) => {
     if (!isMentioning) return text;
 
-    const { username } = user;
+    const { username, email } = user;
+    const userTag = username ?? email;
     const wordLength = getWord(text, currentPos).length;
 
     const n = text.substring(currentPos).match(/^[^ ]+/);
@@ -46,7 +47,7 @@ export default () => {
     const startIndex = p ? p.index : n.index;
 
     setIsMentioning(false);
-    return `${text.substring(0, startIndex)}@mention[${username}]${text.substring(startIndex + wordLength)}`;
+    return `${text.substring(0, startIndex)}[@${userTag}]${text.substring(startIndex + wordLength)}`;
   };
 
   return {

client/src/utils/replace-mentions-with-name.js

@@ -0,0 +1,17 @@
+const findUserByUsernameOrEmail = (usernameOrEmail, users) => {
+  return users.find(
+    (member) => member.user.username === usernameOrEmail || member.user.email === usernameOrEmail,
+  );
+};
+
+const replaceMentionsWithName = (text, users) => {
+  const mentionRegex = /\[@(.*?)\]/g;
+  return text.replace(mentionRegex, function (matched) {
+    const nameOrEmail = mentionRegex.exec(text)[1];
+    const member = findUserByUsernameOrEmail(nameOrEmail, users);
+
+    return member ? `[${member.user.name}](#)` : matched;
+  });
+};
+
+export default replaceMentionsWithName;