优化 Mermaid 流程图的支持

This commit is contained in:
tianyaxiang 2025-02-02 18:43:45 +08:00
parent 57967258a9
commit 0b11f5d7bf
2 changed files with 37 additions and 3 deletions

View File

@ -1 +1,18 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
// Ensure external packages are handled correctly
transpilePackages: ['mermaid', 'katex'],
// Configure webpack if needed
webpack: (config) => {
// Handle mermaid.js
config.resolve.fallback = {
...config.resolve.fallback,
fs: false,
};
return config;
},
}
module.exports = nextConfig

View File

@ -1,10 +1,27 @@
import WechatEditor from '@/components/editor/WechatEditor'
import dynamic from 'next/dynamic'
import { Suspense } from 'react'
// Dynamically import WechatEditor with no SSR
const WechatEditor = dynamic(() => import('@/components/editor/WechatEditor'), {
ssr: false,
loading: () => (
<div className="h-full bg-background flex items-center justify-center">
<div className="animate-pulse">Loading editor...</div>
</div>
),
})
export default function WechatPage() {
return (
<main className="h-full bg-background flex flex-col">
<div className="flex-1 relative">
<WechatEditor />
<Suspense fallback={
<div className="h-full flex items-center justify-center">
<div className="animate-pulse">Loading editor...</div>
</div>
}>
<WechatEditor />
</Suspense>
</div>
</main>
)