feat(docs): add mermaid styling of codeblock (#2006)

.changeset/khaki-beds-swim.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/docs/package.json

@@ -49,6 +49,7 @@
     "js-yaml": "~4.1.0",
     "mdast-util-to-markdown": "~1.5.0",
     "mdast-util-to-string": "~3.2.0",
+    "mermaid": "^10.9.0",
     "mobx": "~6.9.0",
     "next": "14.2.2",
     "next-themes": "^0.2.1",

packages/apps/docs/src/components/Markdown/Code/Code.tsx

@@ -1,16 +1,23 @@
 import type { FC, ReactNode } from 'react';
 import React from 'react';
+import { Mermaid } from './Mermaid';
 import { code, codeLine, inlineCode } from './style.css';
 
 interface IProp {
   children: ReactNode;
+  'data-language'?: string;
 }
 
 export const Code: FC<IProp> = ({ children, ...props }) => {
+  const language = props && props['data-language'];
+
   if (typeof children === 'string') {
     return <code className={inlineCode}>{children}</code>;
   }
 
+  if (language?.toLowerCase() === 'mermaid') {
+    return <Mermaid {...props}>{children}</Mermaid>;
+  }
   return (
     <code className={code} {...props}>
       {React.Children.map(children, (child) => {

packages/apps/docs/src/components/Markdown/Code/Mermaid.tsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import mermaid from 'mermaid';
+import type { FC, PropsWithChildren } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { code, mermaidClass } from './style.css';
+
+mermaid.initialize({
+  theme: 'base',
+  startOnLoad: true,
+  themeVariables: {
+    primaryColor: '#2767a3',
+    primaryTextColor: '#fff',
+    primaryBorderColor: '#fff',
+    lineColor: '#fff',
+    secondaryColor: '#006100',
+  },
+});
+
+export const Mermaid: FC<PropsWithChildren> = ({ children, ...props }) => {
+  const ref = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.innerHTML = ref.current.innerText;
+
+      setTimeout(() => {
+        mermaid.contentLoaded();
+      }, 100);
+    }
+  }, []);
+
+  return (
+    <pre
+      ref={ref}
+      className={classNames(code, mermaidClass, 'mermaid')}
+      {...props}
+    >
+      {children}
+    </pre>
+  );
+};

packages/apps/docs/src/components/Markdown/Code/style.css.ts

@@ -260,3 +260,9 @@ export const codeTitle = style([
     },
   },
 ]);
+
+export const mermaidClass = style({});
+
+globalStyle(`${code}${mermaidClass}::before`, {
+  backgroundColor: 'transparent',
+});