Merge pull request #235 from easyops-cn/steve/elevo-sidebar

feat(): support mermaid in markdown

Author: weareoutman

bricks/ai-portal/src/cruise-canvas/CodeBlock/CodeBlock.module.css

@@ -19,3 +19,8 @@
 .failed::part(button) {
   color: var(--color-error);
 }
+
+.code-block:global(.mermaid) {
+  display: flex;
+  justify-content: center;
+}

bricks/markdown/docs/eo-markdown-display.md

@@ -57,4 +57,15 @@ properties:
       alert("Hello");
     }
     ```
+
+    ```mermaid
+    graph TD
+      A[Enter Chart Definition] --> B(Preview)
+      B --> C{decide}
+      C --> D[Keep]
+      C --> E[Edit Definition]
+      E --> B
+      D --> F[Save Image and Code]
+      F --> B
+    ```
 ````

shared/markdown/package.json

@@ -34,7 +34,9 @@
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --project tsconfig.build.json"
   },
   "dependencies": {
+    "hast-util-from-html-isomorphic": "^2.0.0",
     "hast-util-to-string": "^3.0.0",
+    "mermaid": "11.9.0",
     "prismjs": "^1.29.0",
     "react": "0.0.0-experimental-ee8509801-20230117",
     "refractor": "^4.8.1",

shared/markdown/src/MarkdownComponent.tsx

@@ -7,6 +7,7 @@ import remarkToRehype from "remark-rehype";
 import rehypeReact, { Options as RehypeReactOptions } from "rehype-react";
 import type { Components } from "hast-util-to-jsx-runtime";
 import { rehypePrism } from "./rehypePrism.js";
+import { rehypeMermaid } from "./rehypeMermaid.js";
 
 const production = { Fragment, jsx, jsxs };
 
@@ -29,6 +30,7 @@ export function MarkdownComponent({
       .use(remarkGfm)
       .use(remarkToRehype)
       .use([rehypePrism])
+      .use(rehypeMermaid)
       .use(rehypeReact, {
         ...production,
         passNode: true,

shared/markdown/src/rehypeMermaid.ts

@@ -0,0 +1,56 @@
+import { visit } from "unist-util-visit";
+import { toString } from "hast-util-to-string";
+import type { RefractorElement } from "refractor";
+import mermaid from "mermaid";
+import { fromHtmlIsomorphic } from "hast-util-from-html-isomorphic";
+import { getCodeLanguage } from "./utils.js";
+
+let count = 0;
+
+mermaid.initialize({
+  startOnLoad: false,
+  themeVariables: {
+    fontSize: "14px",
+  },
+});
+
+// Reference https://github.com/remcohaszing/rehype-mermaid
+export function rehypeMermaid() {
+  return async (tree: RefractorElement) => {
+    const promises: Promise<void>[] = [];
+
+    function visitor(
+      node: RefractorElement,
+      index: number | undefined,
+      parent: RefractorElement | undefined
+    ) {
+      if (!parent || parent.tagName !== "pre" || node.tagName !== "code") {
+        return;
+      }
+
+      const lang = getCodeLanguage(node);
+
+      if (lang !== "mermaid") {
+        return;
+      }
+
+      promises.push(
+        (async () => {
+          const id = `mermaid-${count++}`;
+
+          const { svg } = await mermaid.render(id, toString(node));
+          const replacements = fromHtmlIsomorphic(svg, { fragment: true })
+            .children as RefractorElement[];
+          parent.children.splice(index!, 1, ...replacements);
+          parent.properties.className = (
+            (parent.properties.className as string[]) || []
+          ).concat("mermaid");
+        })()
+      );
+    }
+
+    visit(tree, "element", visitor);
+
+    await Promise.all(promises);
+  };
+}

shared/markdown/src/rehypePrism.ts

@@ -1,6 +1,7 @@
 import { visit } from "unist-util-visit";
 import { toString } from "hast-util-to-string";
 import { refractor, type RefractorElement } from "refractor";
+import { getCodeLanguage } from "./utils.js";
 
 // Reference https://github.com/mapbox/rehype-prism
 export function rehypePrism() {
@@ -13,9 +14,9 @@ export function rehypePrism() {
       return;
     }
 
-    const lang = getLanguage(node);
+    const lang = getCodeLanguage(node);
 
-    if (lang === null) {
+    if (lang === null || lang === "mermaid") {
       return;
     }
 
@@ -35,15 +36,3 @@ export function rehypePrism() {
     visit(tree, "element", visitor);
   };
 }
-
-function getLanguage(node: RefractorElement) {
-  const className = (node.properties.className as string[]) || [];
-
-  for (const classListItem of className) {
-    if (classListItem.slice(0, 9) === "language-") {
-      return classListItem.slice(9).toLowerCase();
-    }
-  }
-
-  return null;
-}

shared/markdown/src/utils.ts

@@ -0,0 +1,13 @@
+import type { RefractorElement } from "refractor";
+
+export function getCodeLanguage(node: RefractorElement) {
+  const className = (node.properties.className as string[]) || [];
+
+  for (const classListItem of className) {
+    if (classListItem.slice(0, 9) === "language-") {
+      return classListItem.slice(9).toLowerCase();
+    }
+  }
+
+  return null;
+}