feat: Automatically link @mentions (#1571)

VocaDB · Aug 1, 2023 · 09922f1 · 09922f1
1 parent 035bafb
commit 09922f1
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 1 deletion.
diff --git a/VocaDbWeb/New/components/Markdown/MarkownRenderer.tsx b/VocaDbWeb/New/components/Markdown/MarkownRenderer.tsx
@@ -3,6 +3,7 @@ import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import rehypeStringify from 'rehype-stringify';
 import remarkBreaks from 'remark-breaks';
+import remarkMentions from 'remark-mentions';
 import parse from '@/Helpers/markdown';
 import { TypographyStylesProvider } from '@mantine/core';
 
@@ -14,10 +15,12 @@ export default function MarkdownRenderer({ children }: MarkdownProps) {
 	const processer = unified()
 		.use(remarkParse)
 		.use(remarkBreaks)
+		.use(remarkMentions, { usernameLink: (username) => `/Profile/${username}` })
 		.use(remarkRehype)
 		.use(rehypeStringify);
+
 	return (
-		<TypographyStylesProvider className="description">
+		<TypographyStylesProvider fz="sm" className="description">
 			{parse(String(processer.processSync(children)))}
 		</TypographyStylesProvider>
 	);

diff --git a/VocaDbWeb/New/package-lock.json b/VocaDbWeb/New/package-lock.json
diff --git a/VocaDbWeb/New/package.json b/VocaDbWeb/New/package.json
@@ -45,6 +45,7 @@
 		"rehype-sanitize": "^5.0.1",
 		"rehype-stringify": "^9.0.3",
 		"remark-breaks": "^3.0.3",
+		"remark-mentions": "^1.0.2",
 		"remark-parse": "^10.0.2",
 		"remark-rehype": "^10.1.0",
 		"sharp": "^0.32.1",