fix: Improve mentions behavior

client/src/components/comments/Comments/Edit.jsx

@@ -4,6 +4,7 @@
  */
 
 import { dequal } from 'dequal';
+import { keyBy } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
@@ -15,6 +16,7 @@ import { useClickAwayListener } from '../../../lib/hooks';
 import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import { useForm, useNestedRef } from '../../../hooks';
+import { isUsernameChar, mentionTextToMarkup } from '../../../utils/mentions';
 import { focusEnd } from '../../../utils/element-helpers';
 import { isModifierKeyPressed } from '../../../utils/event-helpers';
 import UserAvatar from '../../users/UserAvatar';
@@ -48,10 +50,19 @@ const Edit = React.memo(({ commentId, onClose }) => {
   const [submitButtonRef, handleSubmitButtonRef] = useNestedRef();
   const [cancelButtonRef, handleCancelButtonRef] = useNestedRef();
 
+  const userByUsername = useMemo(
+    () =>
+      keyBy(
+        boardMemberships.flatMap(({ user }) => (user.username ? user : [])),
+        'username',
+      ),
+    [boardMemberships],
+  );
+
   const submit = useCallback(() => {
     const cleanData = {
       ...data,
-      text: data.text.trim(),
+      text: mentionTextToMarkup(data.text.trim(), userByUsername),
     };
 
     if (cleanData.text && !dequal(cleanData, defaultData)) {
@@ -59,7 +70,7 @@ const Edit = React.memo(({ commentId, onClose }) => {
     }
 
     onClose();
-  }, [commentId, onClose, dispatch, defaultData, data]);
+  }, [commentId, onClose, dispatch, defaultData, data, userByUsername]);
 
   const handleSubmit = useCallback(() => {
     submit();
@@ -68,10 +79,10 @@ const Edit = React.memo(({ commentId, onClose }) => {
   const handleFieldChange = useCallback(
     (_, text) => {
       setData({
-        text,
+        text: !isUsernameChar(text.slice(-1)) ? mentionTextToMarkup(text, userByUsername) : text,
       });
     },
-    [setData],
+    [setData, userByUsername],
   );
 
   const handleFieldKeyDown = useCallback(