feat(zbugs): support mermaid diagrams

Author: tantaman

apps/zbugs/package.json

@@ -31,12 +31,16 @@
     "postgres": "^3.4.4",
     "react": ">=16.0 <19.0",
     "react-dom": ">=16.0 <19.0",
-    "react-markdown": "^9.0.1",
     "react-textarea-autosize": "^8.5.3",
     "react-window": "^1.8.10",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.0",
+    "remark-mermaidjs": "^7.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "unified": "^11.0.5",
     "use-debounce": "^10.0.4",
     "wouter": "^3.3.5"
   },

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

@@ -0,0 +1,30 @@
+import remarkMermaid from 'remark-mermaidjs';
+import {useMarkdownAsync} from '../hooks/use-markdown.js';
+import {useEffect, useState} from 'react';
+
+const plugins = [remarkMermaid];
+export default function MarkdownExtended({
+  children,
+  fallback,
+}: {
+  children: string;
+  fallback: string;
+}) {
+  const mdPromise = useMarkdownAsync(children, plugins);
+
+  const [md, setMd] = useState<string>(fallback);
+  useEffect(() => {
+    let mounted = true;
+    mdPromise.then(result => {
+      if (!mounted) {
+        return;
+      }
+      setMd(result);
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [mdPromise]);
+
+  return <div dangerouslySetInnerHTML={{__html: md}}></div>;
+}

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

@@ -1,9 +1,19 @@
-import MarkdownBase from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import {lazy, Suspense} from 'react';
+import {useMarkdown} from '../hooks/use-markdown.js';
+
+// Mermaid is a pretty huge library so we're going to lazy load it
+const MarkdownExtended = lazy(() => import('./markdown-extended.js'));
 
-/**
- * Do not import this component directly. Use `Markdown` instead.
- */
 export default function Markdown({children}: {children: string}) {
-  return <MarkdownBase rehypePlugins={[remarkGfm]}>{children}</MarkdownBase>;
+  const text = useMarkdown(children);
+
+  if (children.includes('```mermaid')) {
+    return (
+      <Suspense fallback={<div dangerouslySetInnerHTML={{__html: text}}></div>}>
+        <MarkdownExtended fallback={text}>{children}</MarkdownExtended>
+      </Suspense>
+    );
+  }
+
+  return <div dangerouslySetInnerHTML={{__html: text}}></div>;
 }

apps/zbugs/src/components/markdown.tsx

@@ -0,0 +1,35 @@
+import {useMemo} from 'react';
+import rehypeStringify from 'rehype-stringify';
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import {unified, type Plugin} from 'unified';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type P = Plugin<any, any, any>;
+
+const emptyArray: P[] = [];
+export function useMarkdown(text: string, plugins: P[] = emptyArray) {
+  return useMemo(
+    () => configureUnified(plugins).processSync(text).value.toString(),
+    [text, plugins],
+  );
+}
+
+export function useMarkdownAsync(text: string, plugins: P[] = emptyArray) {
+  return useMemo(
+    () =>
+      configureUnified(plugins)
+        .process(text)
+        .then(result => result.value.toString()),
+    [text, plugins],
+  );
+}
+
+function configureUnified(plugins: P[]) {
+  let u = unified().use(remarkParse);
+  for (const plugin of plugins) {
+    u = u.use(plugin);
+  }
+  return u.use(remarkGfm).use(remarkRehype).use(rehypeStringify);
+}