From 2046b95337065a3da84f95475e1e0fce5be5fc0b Mon Sep 17 00:00:00 2001 From: sunface Date: Tue, 2 Mar 2021 10:20:36 +0800 Subject: [PATCH] fix @user bugs --- server/internal/ui_config.go | 10 ++ src/components/comments/reply.tsx | 2 +- src/components/markdown-editor/editor.tsx | 8 +- src/components/markdown-editor/render.tsx | 109 ++++++++++++++++++++-- src/utils/config.ts | 4 + theme/markdown-render.ts | 9 ++ 6 files changed, 130 insertions(+), 12 deletions(-) diff --git a/server/internal/ui_config.go b/server/internal/ui_config.go index 7f7b3607..87476482 100644 --- a/server/internal/ui_config.go +++ b/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)) diff --git a/src/components/comments/reply.tsx b/src/components/comments/reply.tsx index 01c4a3d5..9f19a555 100644 --- a/src/components/comments/reply.tsx +++ b/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) diff --git a/src/components/markdown-editor/editor.tsx b/src/components/markdown-editor/editor.tsx index 54cfd2fd..c3bb7c02 100644 --- a/src/components/markdown-editor/editor.tsx +++ b/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) diff --git a/src/components/markdown-editor/render.tsx b/src/components/markdown-editor/render.tsx index 73ef1774..766d5be0 100644 --- a/src/components/markdown-editor/render.tsx +++ b/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 & { @@ -26,27 +27,115 @@ export function MarkdownRender({ md,fontSize, ...rest }:Props) { // deal with @username feature const indexes: number[] = [] + for (var i=0;i= 1) { + if (md[0] !== '@') { + // 首个字符不是@，需要把这一段先加入到分段中来 + segments.push(md.substr(0,indexes[0])) + } + } + + for (var i=0;i 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 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 config .user.usernameMaxLen) { + break + } + if (seg[i] === ')') { + userValid = true + break + } + + if (isUsernameChar(seg[i])) { + username += seg[i] + } else { + break + } + } + } } } - - if (username !== '') { - setRenderMd(md.replace('@' + username, `[@${username}](/${username})`)) + + if (userValid && nickValid && username !== '') { + if (nickname === '') { + newMd += seg.replace(`@${username}`,`@${username}`) + } else { + newMd += seg.replace(`@[${nickname}](${username})`,`${nickname}`) + } + } else { + newMd += seg } } + + setRenderMd(newMd) }, [md]); return ( diff --git a/src/utils/config.ts b/src/utils/config.ts index edd4219a..699abf85 100644 --- a/src/utils/config.ts +++ b/src/utils/config.ts @@ -6,6 +6,10 @@ export let config = { briefMaxLen: 128, writingEnabled: false, maxTags: 0 + }, + user: { + nicknameMaxLen: 64, + usernameMaxLen: 39 } } diff --git a/theme/markdown-render.ts b/theme/markdown-render.ts index e7745704..d065e8bc 100644 --- a/theme/markdown-render.ts +++ b/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' } } }