react markdown editor示例

采用了@monaco-editor/react进行编辑，react-markdown预览

import Editor from "@monaco-editor/react";
import { useState } from "react";
import Markdown from "react-markdown";
import rehypeHighlight from "rehype-highlight";
import rehypeRaw from "rehype-raw"; // 6.1.1 works! 7.0.0 don't
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
import remarkToc from "remark-toc";

export function Main() {
	const [text, setText] = useState("# hello");
	return (
		<div style={{ display: "flex", height: "40vh" }}>
			<div style={{ flex: "50%" }}>
				<Editor
          height={"100%"}
					defaultLanguage="markdown"
					defaultValue={text}
					onChange={(value, event) => setText(value || "")}
				/>
			</div>
			<div style={{ flex: "50%", height: "100%", overflow: "scroll" }}>
				<Markdown
					rehypePlugins={[rehypeHighlight, rehypeRaw, rehypeSlug]}
					remarkPlugins={[remarkGfm, remarkToc]}
				>
					{text}
				</Markdown>
			</div>
		</div>
	);
}

用Farm调试模式正常，正式版报错！用vite ts/swc编译，昨日（2024-8-6）去掉rehype-raw都正常，今天rehype-raw6.1.1和7.0.0都正常，估计rehype底层的依赖自动更新了（采用了pnpm up --latest命令）。