fix: mention (#1095)

- Fix the issue where the mention feature does not work properly in the
input component
- Fix the issue where unnecessary spaces are added between mention texts
when editing an already mentioned message

src/ui/MessageInput/index.tsx

@@ -218,17 +218,15 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
             .map((token) => {
               if (token.type === TOKEN_TYPES.mention) {
                 const mentionedUser = mentionedUsers.find((user) => user.userId === token.userId);
-                const nickname = `${USER_MENTION_PREFIX}${
-                  mentionedUser?.nickname || token.value || stringSet.MENTION_NAME__NO_NAME
-                }`;
+                const nickname = `${USER_MENTION_PREFIX}${mentionedUser?.nickname || token.value || stringSet.MENTION_NAME__NO_NAME}`;
                 return renderMentionLabelToString({
                   userId: token.userId,
                   nickname,
                 });
               }
               return sanitizeString(token.value);
             })
-            .join(' ');
+            .join('');
         }
       } else {
         /* mention disabled */
@@ -267,15 +265,15 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
     if (isMentionEnabled && mentionSelectedUser) {
       const { targetString, startNodeIndex, startOffsetIndex, endNodeIndex, endOffsetIndex } = targetStringInfo;
       const textField = internalRef?.current;
-      if (targetString && startNodeIndex && startOffsetIndex && textField && endNodeIndex) {
+      if (targetString && startNodeIndex !== null && startOffsetIndex !== null && endOffsetIndex !== null && endNodeIndex !== null && textField) {
         // const textField = document.getElementById(textFieldId);
         const childNodes = nodeListToArray(textField?.childNodes);
         const startNodeTextContent: string = childNodes[startNodeIndex]?.textContent ?? '';
-        const frontTextNode = document?.createTextNode(
+        const frontTextNode = document.createTextNode(
           startNodeTextContent.slice(0, startOffsetIndex),
         );
         const endNodeTextContent: string = childNodes[endNodeIndex]?.textContent ?? '';
-        const backTextNode = endOffsetIndex && document?.createTextNode(
+        const backTextNode = endOffsetIndex && document.createTextNode(
           `\u00A0${endNodeTextContent.slice(endOffsetIndex)}`,
         );
         const mentionLabel = renderMentionLabelToString({
@@ -374,7 +372,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
            * targetString could be ''
            * startNodeIndex and startOffsetIndex could be null
            */
-          const targetString = textStack && startOffsetIndex ? textStack.slice(startOffsetIndex) : ''; // include template character
+          const targetString = textStack && startOffsetIndex !== null ? textStack.slice(startOffsetIndex) : ''; // include template character
           setTargetStringInfo({
             targetString,
             startNodeIndex,