CodeEditor.tsx

基本信息

• 类型: React 组件 (自定义)
• 路径: ./src/components/ui/code-editor.tsx

功能描述

基于 Monaco Editor 的代码编辑器组件，支持 JSON、YAML、Markdown 语言。具有防抖更新、主题适配、光标插入等功能。

导出内容

• CodeEditor - 代码编辑器组件（已使用 memo 优化）
• CodeEditorHandle - 编辑器句柄接口类型

Props 接口

CodeEditor

属性	类型	必填	默认值	说明
value	string	是	-	编辑器内容
onChange	(value: string) => void	是	-	内容变化回调
language	`'json' \	'yaml' \	'markdown'`	是	-	代码语言
placeholder	string	否	-	占位文本
className	string	否	-	自定义CSS类名
minHeight	string	否	'300px'	最小高度
debounceMs	number	否	0	防抖延迟毫秒数
readOnly	boolean	否	false	是否只读

CodeEditorHandle

属性	类型	说明
insertAtCursor	(text: string) => void	在光标位置插入文本

依赖

• @monaco-editor/react - Monaco Editor React 封装
• next-themes - 主题管理
• @/lib/utils - 工具函数 (cn)

使用示例

import { CodeEditor, CodeEditorHandle } from "@/components/ui/code-editor";
import { useRef, useState } from "react";

// 基础用法
const [code, setCode] = useState('{}');
<CodeEditor
  value={code}
  onChange={setCode}
  language="json"
  placeholder="输入 JSON..."
/>

// 带防抖
<CodeEditor
  value={code}
  onChange={setCode}
  language="yaml"
  debounceMs={500}
  minHeight="400px"
/>

// 使用 ref 插入文本
const editorRef = useRef<CodeEditorHandle>(null);
const handleInsert = () => {
  editorRef.current?.insertAtCursor('"key": "value"');
};
<CodeEditor
  ref={editorRef}
  value={code}
  onChange={setCode}
  language="json"
/>