support mermaid diagrams in issue comments

ghackenberg · Dec 1, 2023 · 16e6384 · 16e6384
1 parent 76370ee
commit 16e6384
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -53,6 +53,7 @@
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "recharts": "^2.1.9",
+        "rehype-mermaid": "^2.0.1",
         "rehype-react": "^8.0.0",
         "remark-parse": "^11.0.0",
         "remark-rehype": "^11.0.0",

diff --git a/packages/frontend/src/scripts/components/widgets/CommentView.tsx b/packages/frontend/src/scripts/components/widgets/CommentView.tsx
@@ -74,8 +74,8 @@ export const CommentView = (props: { productId: string, issueId: string, comment
     const initialTextView = comment && comment.text
     const initialTextEdit = ''
 
-    const initialHtmlView = initialTextView && createProcessor(over, out, handleClick).processSync(initialTextView).result
-    const initialHtmlEdit = createProcessor(over, out, handleClick).processSync(initialTextEdit).result
+    const initialHtmlView = initialTextView && createProcessor(over, out, handleClick, false).processSync(initialTextView).result
+    const initialHtmlEdit = createProcessor(over, out, handleClick, false).processSync(initialTextEdit).result
 
     const initialPartsView = initialTextView && collectParts(initialTextView)
     const initialPartsEdit = collectParts(initialTextEdit)
@@ -126,7 +126,7 @@ export const CommentView = (props: { productId: string, issueId: string, comment
 
     React.useEffect(() => {
         if (textView) {
-            setHtmlView(createProcessor(over, out, handleClick).processSync(textView).result)
+            createProcessor(over, out, handleClick, true).process(textView).then(vfile => setTimeout(() => setHtmlView(vfile.result), 0))
             setPartsView(collectParts(textView))
         } else {
             setPartsView(undefined)
@@ -218,7 +218,7 @@ export const CommentView = (props: { productId: string, issueId: string, comment
 
     async function handlePreview() {
         if (textEdit) {
-            setHtmlEdit(createProcessor(over, out, handleClick).processSync(textEdit).result)
+            createProcessor(over, out, handleClick, true).process(textEdit).then(vfile => setHtmlEdit(vfile.result))
             setMode(Mode.PREVIEW)
         } else {
             alert('Please enter some text!')

diff --git a/packages/frontend/src/scripts/functions/markdown.tsx b/packages/frontend/src/scripts/functions/markdown.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { MouseEvent } from "react"
 
 import * as jsxRuntime from 'react/jsx-runtime'
+import rehypeMermaid from 'rehype-mermaid'
 import rehypeReact, { Options } from "rehype-react"
 import remarkParse from "remark-parse"
 import remarkRehype from "remark-rehype"
@@ -64,7 +65,7 @@ function collectPartsInternal(parent: Node, parts: Part[]) {
     }
 }
 
-export function createProcessor(handleMouseOver: Handler, handleMouseOut: Handler, handleClick: Handler) {
+export function createProcessor(handleMouseOver: Handler, handleMouseOut: Handler, handleClick: Handler, mermaid: boolean) {
     const options: Options = {
         ...JSX_RUNTIME,
         components: {
@@ -106,5 +107,10 @@ export function createProcessor(handleMouseOver: Handler, handleMouseOut: Handle
             }
         }
     }
-    return unified().use(remarkParse).use(remarkRehype).use(rehypeReact, options)
+    const rehype = unified().use(remarkParse).use(remarkRehype)
+    if (mermaid) {
+        return rehype.use(rehypeMermaid).use(rehypeReact, options)
+    } else {
+        return rehype.use(rehypeReact, options)
+    }
 }