Skip to content

Commit

Permalink
feat(zbugs): support mermaid diagrams
Browse files Browse the repository at this point in the history
  • Loading branch information
tantaman committed Oct 22, 2024
1 parent 36e436c commit e7fe259
Show file tree
Hide file tree
Showing 3 changed files with 7,773 additions and 19,413 deletions.
1 change: 1 addition & 0 deletions apps/zbugs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
13 changes: 12 additions & 1 deletion apps/zbugs/src/components/markdown-internal.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading

0 comments on commit e7fe259

Please sign in to comment.