feat: use Mermaid (openRin#237)

* feat: use Mermaid

* chore: use loadash to debounce rendering

* chore: update lockfile

client/src/components/markdown.tsx

@@ -9,6 +9,7 @@ import {
 import rehypeKatex from "rehype-katex";
 import rehypeRaw from "rehype-raw";
 import gfm from "remark-gfm";
+import remarkMermaid from "../remark/remarkMermaid";
 import { remarkAlert } from "remark-github-blockquote-alert";
 import remarkMath from "remark-math";
 import Lightbox, { SlideImage } from "yet-another-react-lightbox";
@@ -18,6 +19,7 @@ import Zoom from "yet-another-react-lightbox/plugins/zoom";
 import "yet-another-react-lightbox/styles.css";
 import { useColorMode } from "../utils/darkModeUtils";
 
+
 const countNewlinesBeforeNode = (text: string, offset: number) => {
   let newlinesBefore = 0;
   for (let i = offset - 1; i >= 0; i--) {
@@ -58,7 +60,7 @@ export function Markdown({ content }: { content: string }) {
   const Content = useMemo(() => (
     <ReactMarkdown
       className="toc-content dark:text-neutral-300"
-      remarkPlugins={[gfm, remarkMath, remarkAlert]}
+      remarkPlugins={[gfm, remarkMermaid, remarkMath, remarkAlert]}
       children={content}
       rehypePlugins={[rehypeKatex, rehypeRaw]}
       components={{

client/src/page/feed.tsx

@@ -17,6 +17,7 @@ import { timeago } from "../utils/timeago";
 import { Button } from "../components/button";
 import { Tips } from "../components/tips";
 import { useLoginModal } from "../hooks/useLoginModal";
+import mermaid from "mermaid";
 
 type Feed = {
   id: number;
@@ -128,6 +129,26 @@ export function FeedPage({ id, TOC, clean }: { id: string, TOC: () => JSX.Elemen
       });
     ref.current = id;
   }, [id]);
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: "default",
+    });
+    mermaid.run({
+      suppressErrors: true,
+      nodes: document.querySelectorAll("pre.mermaid_default")
+    }).then(()=>{
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: "dark",
+      });
+      mermaid.run({
+        suppressErrors: true,
+        nodes: document.querySelectorAll("pre.mermaid_dark")
+      });
+    })
+  }, [feed]);
+
   return (
     <Waiting for={feed || error}>
       {feed && (

client/src/page/writing.tsx

@@ -1,10 +1,11 @@
 import Editor from '@monaco-editor/react';
 import i18n from 'i18next';
+import _ from 'lodash';
 import { editor } from 'monaco-editor';
 import { Calendar } from 'primereact/calendar';
 import 'primereact/resources/primereact.css';
 import 'primereact/resources/themes/lara-light-indigo/theme.css';
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import Loading from 'react-loading';
@@ -16,6 +17,7 @@ import { headersWithAuth } from "../utils/auth";
 import { Cache, useCache } from '../utils/cache';
 import { siteName } from "../utils/constants";
 import { useColorMode } from "../utils/darkModeUtils";
+import mermaid from 'mermaid';
 
 async function publish({
   title,
@@ -250,7 +252,7 @@ export function WritingPage({ id }: { id?: number }) {
     const t = i18n.t
     const upChange = (event: any) => {
       for (let i = 0; i < event.currentTarget.files.length; i++) {
-        let file = event.currentTarget.files[i]; ///获得input的第一个图片
+        const file = event.currentTarget.files[i]; ///获得input的第一个图片
         if (file.size > 5 * 1024000) {
           showAlert(t("upload.failed$size", { size: 5 }))
           uploadRef.current!.value = "";
@@ -306,6 +308,31 @@ export function WritingPage({ id }: { id?: number }) {
         });
     }
   }, []);
+  const debouncedUpdate = useCallback(
+    _.debounce(() => {
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: "default",
+      });
+      mermaid.run({
+        suppressErrors: true,
+        nodes: document.querySelectorAll("pre.mermaid_default")
+      }).then(()=>{
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: "dark",
+        });
+        mermaid.run({
+          suppressErrors: true,
+          nodes: document.querySelectorAll("pre.mermaid_dark")
+        });
+      })
+    }, 100),
+    []
+  );
+  useEffect(() => {
+    debouncedUpdate();
+  }, [content, debouncedUpdate]);
   function MetaInput({ className }: { className?: string }) {
     return (
       <>

client/src/remark/remarkMermaid.ts

@@ -0,0 +1,26 @@
+import type { Plugin } from 'unified';
+import type { Content, Root } from 'mdast';
+
+function processNode(child: Content, index: number, siblings: Content[]) {
+  if (child.type !== 'code') {
+    if ('children' in child) {
+      child.children.map(processNode);
+    }
+    return;
+  }
+  const { lang, value } = child;
+  if (lang !== 'mermaid') return;
+  siblings[index] = {
+    type: 'html',
+    value: `
+    <pre class="mermaid_default dark:hidden">${value}</pre>
+    <pre class="mermaid_dark dark:block hidden">${value}</pre>
+    `
+  }
+}
+
+const remarkMermaid: Plugin<[], Root> = () => (root: Root) => {
+  root.children.map(processNode)
+};
+
+export default remarkMermaid;

package.json

@@ -31,9 +31,12 @@
     "vitest": "1.3.0"
   },
   "dependencies": {
+    "@types/lodash": "^4.17.7",
     "@types/react-syntax-highlighter": "^15.5.13",
     "fast-xml-parser": "^4.4.0",
     "html-to-md": "^0.8.5",
+    "lodash": "^4.17.21",
+    "mermaid": "^10.9.1",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-katex": "^7.0.0",