feat: mention render in bbcode

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

@@ -20,4 +20,5 @@ regMessageTextDecorators(() => ({
 
     return `[img]${plain}[/img]`;
   },
+  mention: (userId, userName) => `[at=${userId}]${userName}[/at]`,
 }));

web/plugins/com.msgbyte.bbcode/src/tags/CodeTag.tsx

@@ -1,7 +1,8 @@
+import { Loadable } from '@capital/common';
 import React from 'react';
 import type { TagProps } from '../bbcode/type';
 
-const Highlight = React.lazy(() => import('../components/Highlight'));
+const Highlight = Loadable(() => import('../components/Highlight'));
 
 export const CodeTag: React.FC<TagProps> = React.memo((props) => {
   const { node } = props;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { TagProps } from '../bbcode/type';
+
+export const MentionTag: React.FC<TagProps> = React.memo((props) => {
+  const { node } = props;
+  const userName = node.content.join('');
+  const userId = node.attrs.at;
+
+  return (
+    <span className="plugin-bbcode-mention-tag" data-userid={userId}>
+      @{userName}
+    </span>
+  );
+});
+MentionTag.displayName = 'MentionTag';

web/plugins/com.msgbyte.bbcode/src/tags/__all__.ts

@@ -1,10 +1,14 @@
 import { registerBBCodeTag } from '../bbcode/parser';
 import { CodeTag } from './CodeTag';
 import { ImgTag } from './ImgTag';
+import { MentionTag } from './MentionTag';
 import { PlainText } from './PlainText';
 import { UrlTag } from './UrlTag';
 
+import './styles.less';
+
 registerBBCodeTag('_text', PlainText);
 registerBBCodeTag('url', UrlTag);
 registerBBCodeTag('img', ImgTag);
 registerBBCodeTag('code', CodeTag);
+registerBBCodeTag('at', MentionTag);

web/plugins/com.msgbyte.bbcode/src/tags/styles.less

@@ -0,0 +1,9 @@
+.plugin-bbcode-mention-tag {
+  background-color: rgba(88, 101, 242, 0.3);
+  border-radius: 2px;
+  padding: 0 4px;
+
+  &:hover {
+    background-color: rgb(88, 101, 242);
+  }
+}

web/src/plugin/common/reg.ts

@@ -103,15 +103,11 @@ export const [getMessageRender, regMessageRender] = buildRegFn<
  */
 const defaultMessageTextDecorators = {
   url: (plain: string) => plain,
-  image: (plain: string) => plain,
+  image: (plain: string, attrs: Record<string, unknown>) => plain,
   mention: (userId: string, userName: string) => `@${userName}`,
 };
 const [_getMessageTextDecorators, regMessageTextDecorators] = buildRegFn<
-  () => {
-    url: (plain: string) => string;
-    image: (plain: string, attrs: Record<string, unknown>) => string;
-    mention: (userId: string, userName: string) => string;
-  }
+  () => Partial<typeof defaultMessageTextDecorators>
 >('message-text-decorators', () => defaultMessageTextDecorators);
 function getMessageTextDecorators() {
   return {