用途：在 React 应用中添加 Markdown 编辑能力，包括表单富文本编辑、实体描述、内容管理、带预览的所见即所得编辑、角色简介/地点描述/设定条目等叙事内容的格式化与笔记文档编辑界面。
主要能力：@uiw/react-md-editor 提供实时预览与 split/edit/preview 三种模式、语法高亮、Markdown 快捷方式与工具栏、主题定制、无 SSR 问题并支持 TypeScript。该技能覆盖安装配置、编辑器与预览组件创建、主题样式集成、服务端清洗、持久化模式与各类内容编辑场景。
使用方式：安装依赖 npm install @uiw/react-md-editor；清洗安全需 npm install rehype-sanitize。Next.js 项目在 next.config.js 的 webpack 中配置 @uiw/react-md-editor 别名以避免 SSR 问题。随后在 components/MarkdownEditor.tsx 与 components/MarkdownPreview.tsx 创建包装与预览组件，并按需配置主题。
常见用法：受控模式配合 useState 推荐用于表单，可与 React Hook Form、zod 集成；非受控模式使用 defaultValue 与 ref；预览模式用于只读展示。可配置 height（固定、vh、auto）、hideToolbar、preview 取值为 edit/live/preview、enablePreview=false，以及自定义 commands 与 extraCommands。主题可通过 data-color-mode 或全局 CSS 匹配 shadcn/ui。安全上支持客户端 previewOptions 的 rehypePlugins 与位于 lib/sanitize-markdown.ts 的服务端 isomorphic-dompurify 清洗。持久化可用防抖自动保存草稿、localStorage 或数据库乐观更新。
适用场景：角色传记、地点描述、设定条目、时间线事件、物品历史的 Markdown 编辑，以及带自定义工具栏按钮与图片粘贴上传的编辑器。
限制：需自行实现清洗与持久化逻辑；示例中的数据库、上传接口等外部依赖需按项目实际替换；未提供收费、价格或具体性能数据。