fix: revert @muyajs/core to 0.0.39 to unblock Features/Themes preview (#103)

@muyajs/core@0.1.0 ships its mermaid integration as separate ESM chunks
that have a circular import between chunk-5ZQYHXKU and mermaid.core. The
consumer chunk runs `var Ie = pe()` at module init while `pe` (the
default-export of mermaid.core, lazily wrapped through the `t` helper)
hasn't been assigned yet, so it throws `TypeError: pe is not a function`
inside MarkdownToHtml.renderHtml(). The promise rejects and both
Feature.tsx and Theme.tsx fall into their `.catch` branches, rendering
"Error rendering content" / "Error rendering theme content" on the live
site (https://marktext.me) and any local build using 0.1.0.

Revert PR #99 to restore @muyajs/core@^0.0.39, the explicit `mermaid`
dependency, and the existing `rewrapMermaidSource` + manual
`mermaid.run()` workaround for 0.0.39's walkTokens accumulation bug.
Re-upgrade once @muyajs/core ships a release that fixes the circular
chunk init.

This reverts commit aae5452.

Author: Jocs

package.json

@@ -11,8 +11,9 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@muyajs/core": "^0.1.0",
+    "@muyajs/core": "^0.0.39",
     "katex": "^0.16.9",
+    "mermaid": "^11.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

pnpm-lock.yaml

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
+import mermaid from 'mermaid'
 import tableMd from '../markdowns/table.md'
 import diagramMd from '../markdowns/diagram.md'
 import inlineFormatsMd from '../markdowns/inlineFormats.md'
@@ -45,6 +46,38 @@ const features: FeatureItem[] = [
 const Feature: React.FC = () => {
   const [selectedFeature, setSelectedFeature] = useState<FeatureItem>(features[0])
   const [htmlContent, setHtmlContent] = useState<string>('')
+  const muyaContainerRef = useRef<HTMLDivElement>(null)
+
+  // 初始化 mermaid 配置
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: 'default'
+    })
+  }, [])
+
+  const renderMermaid = async () => {
+    if (!muyaContainerRef.current) return
+
+    const codes = muyaContainerRef.current.querySelectorAll('code.language-mermaid')
+    codes.forEach((code) => {
+      const preEle = code.parentNode as HTMLElement
+      const mermaidContainer = document.createElement('div')
+      mermaidContainer.textContent = code.textContent ?? ''
+      mermaidContainer.classList.add('mermaid')
+      preEle.replaceWith(mermaidContainer)
+    })
+
+    const divs = muyaContainerRef.current.querySelectorAll<HTMLElement>('div.mermaid')
+    const unrendered = Array.from(divs).filter((d) => !d.querySelector('svg'))
+    if (unrendered.length === 0) return
+
+    try {
+      await mermaid.run({ nodes: unrendered })
+    } catch (error) {
+      console.error('Mermaid render error:', error)
+    }
+  }
 
   useEffect(() => {
     let cancelled = false
@@ -61,6 +94,13 @@ const Feature: React.FC = () => {
     }
   }, [selectedFeature])
 
+  useEffect(() => {
+    if (!htmlContent) return
+    if (selectedFeature.title === 'Diagram') {
+      void renderMermaid()
+    }
+  }, [htmlContent, selectedFeature])
+
   const handleSelect = (feature: FeatureItem) => {
     setSelectedFeature(feature)
   }
@@ -91,7 +131,10 @@ const Feature: React.FC = () => {
               <span className="dot green"></span>
               <span className="feature-name">{selectedFeature.title}</span>
             </div>
-            <div dangerouslySetInnerHTML={{ __html: htmlContent }}></div>
+            <div
+              dangerouslySetInnerHTML={{ __html: htmlContent }}
+              ref={muyaContainerRef}
+            ></div>
           </div>
         </div>
       </div>