@rspress-theme-anatole/rspress-plugin-mermaid 0.0.1

package/components/MermaidRender.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useId, useState } from 'react';
+
+import mermaid, { type MermaidConfig } from 'mermaid';
+
+import type { MermaidRendererProps } from '../dist/typings';
+
+const MermaidRenderer: React.FC<MermaidRendererProps> = (props) => {
+  const { code, config = {} } = props;
+
+  const id = useId();
+
+  const [svg, setSvg] = useState('');
+
+  const [renderError, setRenderError] = useState(false);
+
+  async function renderMermaid2SVG() {
+    // https://github.com/mermaid-js/mermaid/blob/1b40f552b20df4ab99a986dd58c9d254b3bfd7bc/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue#L53
+    const hasDarkClass = document.documentElement.classList.contains('dark');
+
+    const mermaidConfig: MermaidConfig = {
+      securityLevel: 'loose',
+      startOnLoad: false,
+      theme: hasDarkClass ? 'dark' : 'default',
+      ...config,
+    };
+
+    try {
+      mermaid.initialize(mermaidConfig);
+
+      const { svg } = await mermaid.render(
+        id.replace(/:/g, ''),
+        code as string,
+      );
+
+      setSvg(svg);
+    } catch (error) {
+      setRenderError(true);
+    }
+  }
+
+  useEffect(() => {
+    renderMermaid2SVG();
+  }, [code]);
+
+  return (
+    <>
+      {renderError ? null : <div dangerouslySetInnerHTML={{ __html: svg }} />}
+    </>
+  );
+};
+
+export default MermaidRenderer;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import type { RspressPlugin } from '@rspress-theme-anatole/shared';
+import type { MermaidConfig } from 'mermaid';
+interface RspressPluginMermaidOptions {
+    mermaidConfig?: MermaidConfig;
+}
+export default function rspressPluginMermaid(options?: RspressPluginMermaidOptions): RspressPlugin;
+export {};

package/dist/index.js

@@ -0,0 +1,33 @@
+import path from 'node:path';
+import { PresetConfigMutator, RemarkCodeBlockToGlobalComponentPluginFactory, } from '@rspress-theme-anatole/rspress-plugin-devkit';
+export default function rspressPluginMermaid(options = {}) {
+    const { mermaidConfig = {} } = options;
+    const remarkMermaid = new RemarkCodeBlockToGlobalComponentPluginFactory({
+        components: [
+            {
+                lang: 'mermaid',
+                componentPath: path.join(__dirname, '../components', 'MermaidRender.tsx'),
+                childrenProvider() {
+                    return [];
+                },
+                propsProvider(code) {
+                    return {
+                        code,
+                        config: mermaidConfig,
+                    };
+                },
+            },
+        ],
+    });
+    return {
+        name: '@rspress-theme-anatole/rspress-plugin-mermaid',
+        config(config) {
+            return new PresetConfigMutator(config).disableMdxRs().toConfig();
+        },
+        markdown: {
+            remarkPlugins: [remarkMermaid.remarkPlugin],
+            globalComponents: remarkMermaid.mdxComponents,
+        },
+        builderConfig: remarkMermaid.builderConfig,
+    };
+}

package/dist/typings.d.ts

@@ -0,0 +1,5 @@
+import type { MermaidConfig } from 'mermaid';
+export interface MermaidRendererProps {
+    code: string;
+    config?: MermaidConfig;
+}

package/dist/typings.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@rspress-theme-anatole/rspress-plugin-mermaid",
+  "version": "0.0.1",
+  "files": [
+    "dist",
+    "components"
+  ],
+  "keywords": [
+    "rspress",
+    "plugin",
+    "mermaid"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@rspress-theme-anatole/shared": "0.1.19",
+    "mermaid": "^10.9.0",
+    "@rspress-theme-anatole/rspress-plugin-devkit": "0.1.19"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.5",
+    "@types/react": "^18.2.74",
+    "typescript": "^5.4.4"
+  },
+  "peerDependencies": {
+    "rspress": "*"
+  }
+}