From 09922f1dbbf437dd7f4187aca9fbb35f18f49582 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Finn=20R=2E=20G=C3=A4rtner?= <65015656+FinnRG@users.noreply.github.com> Date: Tue, 1 Aug 2023 23:01:46 +0200 Subject: [PATCH] feat: Automatically link @mentions (#1571) --- .../components/Markdown/MarkownRenderer.tsx | 5 +- VocaDbWeb/New/package-lock.json | 159 ++++++++++++++++++ VocaDbWeb/New/package.json | 1 + 3 files changed, 164 insertions(+), 1 deletion(-) diff --git a/VocaDbWeb/New/components/Markdown/MarkownRenderer.tsx b/VocaDbWeb/New/components/Markdown/MarkownRenderer.tsx index e5abb8699..e0f90d8bc 100644 --- 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 ( - + {parse(String(processer.processSync(children)))} ); diff --git a/VocaDbWeb/New/package-lock.json b/VocaDbWeb/New/package-lock.json index 5a462db0d..96e841f70 100644 --- a/VocaDbWeb/New/package-lock.json +++ b/VocaDbWeb/New/package-lock.json @@ -34,6 +34,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", @@ -21642,6 +21643,95 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/remark-mentions": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/remark-mentions/-/remark-mentions-1.0.2.tgz", + "integrity": "sha512-Zzgof32quGhiW1kpXohFSoKTlFDy8lhBhlwUnAsDCEjvxUFlsY1bJK5UC1h3T+ZWpMIgnToaF8OKjUvyb82+6w==", + "dependencies": { + "@types/mdast": "^4.0.0", + "mdast-util-find-and-replace": "^3.0.0", + "unified": "^10.1.2", + "unist-util-visit": "^5.0.0" + } + }, + "node_modules/remark-mentions/node_modules/@types/mdast": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.0.tgz", + "integrity": "sha512-YLeG8CujC9adtj/kuDzq1N4tCDYKoZ5l/bnjq8d74+t/3q/tHquJOJKUQXJrLCflOHpKjXgcI/a929gpmLOEng==", + "dependencies": { + "@types/unist": "*" + } + }, + "node_modules/remark-mentions/node_modules/@types/unist": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz", + "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==" + }, + "node_modules/remark-mentions/node_modules/escape-string-regexp": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz", + "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/remark-mentions/node_modules/mdast-util-find-and-replace": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.0.tgz", + "integrity": "sha512-8wLPIKAvGdA5jgkI8AYKfSorV3og3vE6HA+gKeKEZydbi1EtUu2g4XCxIBj3R+AsFqY/uRtoYbH30tiWsFKkBQ==", + "dependencies": { + "@types/mdast": "^4.0.0", + "escape-string-regexp": "^5.0.0", + "unist-util-is": "^6.0.0", + "unist-util-visit-parents": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/remark-mentions/node_modules/unist-util-is": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", + "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/remark-mentions/node_modules/unist-util-visit": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", + "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0", + "unist-util-visit-parents": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/remark-mentions/node_modules/unist-util-visit-parents": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", + "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/remark-parse": { "version": "10.0.2", "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.2.tgz", @@ -42558,6 +42648,75 @@ } } }, + "remark-mentions": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/remark-mentions/-/remark-mentions-1.0.2.tgz", + "integrity": "sha512-Zzgof32quGhiW1kpXohFSoKTlFDy8lhBhlwUnAsDCEjvxUFlsY1bJK5UC1h3T+ZWpMIgnToaF8OKjUvyb82+6w==", + "requires": { + "@types/mdast": "^4.0.0", + "mdast-util-find-and-replace": "^3.0.0", + "unified": "^10.1.2", + "unist-util-visit": "^5.0.0" + }, + "dependencies": { + "@types/mdast": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.0.tgz", + "integrity": "sha512-YLeG8CujC9adtj/kuDzq1N4tCDYKoZ5l/bnjq8d74+t/3q/tHquJOJKUQXJrLCflOHpKjXgcI/a929gpmLOEng==", + "requires": { + "@types/unist": "*" + } + }, + "@types/unist": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz", + "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==" + }, + "escape-string-regexp": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz", + "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==" + }, + "mdast-util-find-and-replace": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.0.tgz", + "integrity": "sha512-8wLPIKAvGdA5jgkI8AYKfSorV3og3vE6HA+gKeKEZydbi1EtUu2g4XCxIBj3R+AsFqY/uRtoYbH30tiWsFKkBQ==", + "requires": { + "@types/mdast": "^4.0.0", + "escape-string-regexp": "^5.0.0", + "unist-util-is": "^6.0.0", + "unist-util-visit-parents": "^6.0.0" + } + }, + "unist-util-is": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", + "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", + "requires": { + "@types/unist": "^3.0.0" + } + }, + "unist-util-visit": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", + "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0", + "unist-util-visit-parents": "^6.0.0" + } + }, + "unist-util-visit-parents": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", + "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", + "requires": { + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" + } + } + } + }, "remark-parse": { "version": "10.0.2", "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.2.tgz", diff --git a/VocaDbWeb/New/package.json b/VocaDbWeb/New/package.json index d73b17c2a..5c16ad765 100644 --- 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",