fix @user bugs

server/internal/ui_config.go

@@ -10,6 +10,7 @@ import (
 
 type UIConfig struct {
 	Posts *PostsConfig `json:"posts"`
+	User  *UserConfig  `json:"user"`
 }
 
 type PostsConfig struct {
@@ -19,6 +20,11 @@ type PostsConfig struct {
 	MaxTags        int  `json:"maxTags"`
 }
 
+type UserConfig struct {
+	NicknameMaxLen int `json:"nicknameMaxLen"`
+	UsernameMaxLen int `json:"usernameMaxLen"`
+}
+
 // 在后台页面配置，存储到mysql中
 func GetUIConfig(c *gin.Context) {
 	conf := &UIConfig{
@@ -28,6 +34,10 @@ func GetUIConfig(c *gin.Context) {
 			WritingEnabled: config.Data.Posts.WritingEnabled,
 			MaxTags:        2,
 		},
+		User: &UserConfig{
+			UsernameMaxLen: 39,
+			NicknameMaxLen: 64,
+		},
 	}
 
 	c.JSON(http.StatusOK, common.RespSuccess(conf))

src/components/comments/reply.tsx

@@ -50,7 +50,7 @@ export const Reply = (props: Props) => {
         if (comment.creator.nickname === "") {
             setReply(`@${comment.creator.username}`)
         } else {
-            setReply(`[@${comment.creator.nickname}](/${comment.creator.username})`)
+            setReply(`@[${comment.creator.nickname}](/${comment.creator.username})`)
         }
         
         setReplyVisible(!replyVisible)

src/components/markdown-editor/editor.tsx

@@ -97,7 +97,13 @@ export function MarkdownEditor(props: Props) {
       }
     }
 
-    const newMd = md.substr(0,start) + '@'+user.username+ md.substr(end,md.length)
+    let newMd: string 
+    if (user.nickname === '') {
+      newMd = md.substr(0,start) + `@${user.username}`+ md.substr(end,md.length)
+    } else {
+      newMd = md.substr(0,start) + `@[${user.nickname}](${user.username})`+ md.substr(end,md.length)
+    }
+
     props.onChange(newMd)
     setShowTrigger(false)
 

src/components/markdown-editor/render.tsx

@@ -4,8 +4,9 @@ import hljs from 'highlight.js';
 import 'highlight.js/styles/atom-one-dark.css';
 import { chakra,PropsOf} from '@chakra-ui/react';
 import WebsiteLink from 'components/website-link';
-import { find, findIndex } from 'lodash';
+import { cloneDeep, find, findIndex } from 'lodash';
 import { isUsernameChar } from 'utils/user';
+import { config } from 'utils/config';
 
 
 type Props = PropsOf<typeof chakra.div> & {
@@ -26,27 +27,115 @@ export function MarkdownRender({ md,fontSize, ...rest }:Props) {
 
     // deal with @username feature
     const indexes: number[] = []
+
     for (var i=0;i<md.length;i++) {
       if (md[i] === '@') {
         indexes.push(i)
       }
     }
 
-    for (const index of indexes) {
+    if (indexes.length == 0) {
+      return 
+    }
+
+    const segments:string[] = []
+    if (indexes.length >= 1) {
+      if (md[0] !== '@') {
+        // 首个字符不是@，需要把这一段先加入到分段中来
+        segments.push(md.substr(0,indexes[0]))
+      }
+    }
+
+    for (var i=0;i<indexes.length;i++) {
+      if (i === indexes.length -1) {
+        segments.push(md.substr(indexes[i],(md.length - indexes[i])))
+        break
+      }
+
+      segments.push(md.substr(indexes[i],(indexes[i+1] - indexes[i])))
+    }
+
+
+    let newMd = ""
+    for (const seg of segments) {
       let nickname: string = ""
       let username:string = ""
-      for (var i=index+1;i<md.length;i++) {
+      let nickValid = false
-        if (isUsernameChar(md[i])) {
+      let userValid =false
-          username += md[i]
+      if (seg[0] !== '@') {
-        } else {
+        newMd += seg
-          break
+        continue 
+      }
+
+
+      if (seg[1] !== '[') {
+        // @username 形式
+        for (var i=1;i<seg.length;i++) {
+          if ((i - 1) > config .user.usernameMaxLen) {
+            break
+          }
+
+          if (isUsernameChar(seg[i])) {
+            username += seg[i]
+          } else {
+            nickValid = true
+            userValid = true
+            break
+          }
+        }
+      } else {
+        // @[nickname](username)形式
+        let tempI = 0
+        for (var i=2;i<seg.length;i++) {
+          // 超出nickname长度限制
+          if ((i - 2) > config.user.nicknameMaxLen) {
+            break
+          }
+
+          tempI = i
+          if (seg[i] !== ']') {
+            nickname += seg[i]
+            continue
+          }  else {
+            nickValid = true 
+            break
+          }
+        }
+
+        if (nickValid) {
+          if (seg[tempI+1] === '(') {
+            for (var i=tempI+2;i<seg.length;i++) {
+                // 超出username长度限制
+              if ((i - tempI -2) > config .user.usernameMaxLen) {
+                break
+              }
+              if (seg[i] === ')') {
+                userValid = true 
+                break 
+              }
+
+              if (isUsernameChar(seg[i])) {
+                username += seg[i]
+              } else {
+                break
+              }
+            }
+          }
         }
       }
-      
+
-      if (username !== '') {
+      if (userValid && nickValid && username !== '') {
-        setRenderMd(md.replace('@' + username, `[@${username}](/${username})`))
+        if (nickname === '') {
+          newMd +=  seg.replace(`@${username}`,`<a href="${username}" class="at-user-link">@${username}</a>`)
+        } else {
+          newMd +=  seg.replace(`@[${nickname}](${username})`,`<a href="${username}" class="at-user-link">${nickname}</a>`)
+        }
+      } else {
+        newMd += seg
       }
     }
+
+    setRenderMd(newMd)
   }, [md]);
 
   return (

src/utils/config.ts

@@ -6,6 +6,10 @@ export let config = {
         briefMaxLen: 128,
         writingEnabled: false,
         maxTags: 0
+    },
+    user: {
+        nicknameMaxLen: 64,
+        usernameMaxLen: 39
     }
 }
 

theme/markdown-render.ts

@@ -2,6 +2,7 @@ import { mode } from "@chakra-ui/theme-tools"
 import userCustomTheme from "./user-custom"
 
 export default function markdownRender(props) {
+    console.log(props)
     return  {
         '.markdown-render': {
            '.hljs' : {
@@ -59,6 +60,14 @@ export default function markdownRender(props) {
             },
             a: {
                 textDecoration: 'underline !important'
+            },
+            '.at-user-link': {
+                textDecoration: 'none !important',
+                borderBottom: '2px dashed rgb(158, 158, 158)',
+                margin:'0 3px',
+                color: mode(props.theme.colors.teal[600], props.theme.colors.teal[200])(props),
+                fontWeight: '550',
+                paddingBottom: '2px'
             }       
         }
     }