feat(zbugs): support mermaid diagrams

Author: tantaman

apps/zbugs/package.json

@@ -37,6 +37,7 @@
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",
     "use-debounce": "^10.0.4",
+    "remark-mermaidjs": "4.1.1",
     "wouter": "^3.3.5"
   },
   "devDependencies": {

apps/zbugs/src/components/markdown-internal.tsx

@@ -1,9 +1,20 @@
 import MarkdownBase from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import mermaid from 'remark-mermaidjs';
+
+// We have to use an old version of remark-mermaidjs until they resolve this issue: remarkjs/react-markdown#680
+// Alternatively, just do this ourselves and remove `react-markdown`.
+// It isn't that hard: https://github.com/tantaman/strut/blob/main/src/components/editor/well/WellSlidePreview.tsx#L63-L79
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type TODO_old_mermaid = any;
 
 /**
  * Do not import this component directly. Use `Markdown` instead.
  */
 export default function Markdown({children}: {children: string}) {
-  return <MarkdownBase rehypePlugins={[remarkGfm]}>{children}</MarkdownBase>;
+  return (
+    <MarkdownBase remarkPlugins={[remarkGfm, mermaid as TODO_old_mermaid]}>
+      {children}
+    </MarkdownBase>
+  );
 }