⚡feat: update mermaid plugin (#54)

Author: pdsuwwz

components.d.ts

@@ -1,4 +1,4 @@
-
+/* eslint-disable */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399

eslint.config.js

@@ -1,5 +1,5 @@
 import globals from 'globals'
-import { defineFlatConfig } from 'eslint-define-config'
+import { defineConfig } from 'eslint/config'
 
 import * as parserTypeScript from '@typescript-eslint/parser'
 import pluginTypeScript from '@typescript-eslint/eslint-plugin'
@@ -22,7 +22,7 @@ function renameRules(rules, map) {
   )
 }
 
-export default defineFlatConfig([
+export default defineConfig([
   {
     ignores: [
       'public',

package.json

@@ -27,13 +27,13 @@
     "url": "https://github.com/pdsuwwz/chatgpt-vue3-light-mvp/issues"
   },
   "dependencies": {
+    "@nzoth/markdown-it-mermaid-sse": "^0.0.1",
     "@vueuse/core": "^13.0.0",
     "axios": "1.8.4",
     "dompurify": "^3.2.4",
     "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
     "marked": "^15.0.7",
-    "mermaid": "^11.6.0",
     "naive-ui": "^2.41.0",
     "nprogress": "^0.2.0",
     "pinia": "^3.0.1",
@@ -67,7 +67,6 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.2.0",
     "eslint": "^9.23.0",
-    "eslint-define-config": "^2.1.0",
     "eslint-plugin-html": "8.1.2",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-vue": "^10.0.0",

pnpm-lock.yaml

@@ -48,4 +48,13 @@ function hljsDefineVue() {
 
 hljs.registerLanguage('vue', hljsDefineVue)
 
+
+const hljsDefineMermaid = () => {
+  return {
+    name: 'Mermaid',
+    contains: []
+  }
+}
+hljs.registerLanguage('mermaid', hljsDefineMermaid)
+
 export default hljs

src/components/MarkdownPreview/plugins/highlight.ts

@@ -9,7 +9,11 @@ import splitAtDelimiters from 'katex/contrib/auto-render/splitAtDelimiters'
 import 'katex/dist/katex.min.css'
 import 'katex/dist/contrib/mhchem.min.js'
 
-import { mermaidPlugin, processMermaid } from './mermaid'
+import {
+  markdownItMermaidPlugin,
+  renderMermaidSSE,
+  transformMermaid
+} from '@nzoth/markdown-it-mermaid-sse'
 
 const md = new MarkdownIt({
   html: true,
@@ -24,12 +28,7 @@ md.use(markdownItHighlight, {
     hasSingleTheme: true
   })
   .use(markdownItKatex)
-  .use(mermaidPlugin)
-
-
-const transformMermaid = (content: string): string => {
-  return content.replace(/(```mermaid)(?![^]*?```)/g, '```')
-}
+  .use(markdownItMermaidPlugin)
 
 
 const transformMathMarkdown = (markdownText: string) => {
@@ -118,11 +117,7 @@ export const renderMarkdownText = (content: string) => {
   return md.render(mermaidTransformed)
 }
 
-const debounceRenderMermaid = _.debounce((callback = () => {}) => {
-  processMermaid.fn(callback)
-}, 10)
-
 // 触发 Mermaid 渲染
 export const renderMermaidProcess = (callback = () => {}) => {
-  debounceRenderMermaid(callback)
+  renderMermaidSSE(callback)
 }