refactor: change bbcode mention format

Keep origin field into content part for plain mode can display correct
user name

client/web/plugins/com.msgbyte.bbcode/src/index.tsx

@@ -36,7 +36,7 @@ regMessageTextDecorators(() => ({
 
     return `[${h}]${plain}[/card]`;
   },
-  mention: (userId, userName) => `[at=${userId} origin="${userName}"][/at]`, // keep empty content to auto generate with context, useful for friend nickname. NOTE: `origin` is not meaningless just for react-mention to locate text.
+  mention: (userId, userName) => `[at=${userId}]${userName}[/at]`,
   emoji: (emojiCode) => `[emoji]${stripColons(emojiCode)}[/emoji]`,
   serialize: (plain: string) => (serialize ? serialize(plain) : plain),
 }));

client/web/plugins/com.msgbyte.bbcode/src/tags/MentionTag.tsx

@@ -4,14 +4,12 @@ import type { TagProps } from '../bbcode/type';
 
 export const MentionTag: React.FC<TagProps> = React.memo((props) => {
   const { node } = props;
-  const userName = node.content.join('');
+  const fallbackName = node.content.join('');
   const userId = node.attrs.at;
 
-  const hasUserName = userName !== '';
-
   return (
     <span className="plugin-bbcode-mention-tag" data-userid={userId}>
-      @{hasUserName ? userName : <UserName userId={userId} />}
+      @{<UserName userId={userId} fallbackName={fallbackName} />}
     </span>
   );
 });

client/web/src/components/UserName.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
-import { useCachedUserInfo, useFriendNickname } from 'tailchat-shared';
+import {
+  isValidStr,
+  useCachedUserInfo,
+  useFriendNickname,
+} from 'tailchat-shared';
 
 interface UserNameProps {
   userId: string;
   className?: string;
   style?: React.CSSProperties;
   showDiscriminator?: boolean;
+  fallbackName?: string;
 }
 
 /**
@@ -31,7 +36,7 @@ UserNamePure.displayName = 'UserNamePure';
  * 增加好友名称patch的 UserName
  */
 export const UserName: React.FC<UserNameProps> = React.memo((props) => {
-  const { userId, showDiscriminator, className, style } = props;
+  const { userId, showDiscriminator, className, style, fallbackName } = props;
   const cachedUserInfo = useCachedUserInfo(userId);
   const friendNickname = useFriendNickname(userId);
 
@@ -43,7 +48,8 @@ export const UserName: React.FC<UserNameProps> = React.memo((props) => {
           <span className="opacity-60">({cachedUserInfo.nickname})</span>
         </>
       ) : (
-        cachedUserInfo.nickname ?? <span>&nbsp;</span>
+        cachedUserInfo.nickname ??
+        (isValidStr(fallbackName) ? fallbackName : <span>&nbsp;</span>)
       )}
 
       {showDiscriminator && (