code-editor-react

基于 CodeMirror 6 的 React 代码编辑器组件。

功能

• 亮色与暗色主题
• 动态切换 basic / minimal setup
• 内置或自定义语言列表
• 只读、禁用、占位文本、缩进、换行与空白高亮
• className、style、aria-*、data-*、焦点事件等宿主 div 属性透传
• 支持 Document 与 ShadowRoot

安装

pnpm add @aiao/code-editor @aiao/code-editor-react

基础用法

import { useState } from 'react';
import { CodeEditor } from '@aiao/code-editor-react';

export function App() {
  const [code, setCode] = useState('SELECT * FROM users');

  return (
    <CodeEditor
      aria-label="SQL editor"
      className="query-editor"
      language="sql"
      onBlur={() => console.log('blur')}
      onChange={setCode}
      onFocus={() => console.log('focus')}
      setup="basic"
      style={{ minHeight: 240 }}
      theme="dark"
      value={code}
    />
  );
}

value 在外部属性变化时同步到 CodeMirror，并通过 onChange 上报用户编辑。它不是原生 input 那种强制回滚的严格受控语义：如果父组件忽略 onChange 且不重新渲染，编辑器会保留用户输入。

自定义语言列表

import { SUPPORT_LANGUAGES } from '@aiao/code-editor';
import { CodeEditor } from '@aiao/code-editor-react';

export function SqlEditor() {
  return <CodeEditor language="sql" languages={SUPPORT_LANGUAGES} />;
}

传入空数组会清除语言扩展；未知语言或加载失败会回退到纯文本并输出错误。

初始化选项

root 和 autoFocus 只在 CodeMirror 实例创建时读取。需要更换根节点时，应使用新的 React key 重新挂载组件。其余编辑器选项可在运行时更新。

<CodeEditor autoFocus key={shadowRoot === undefined ? 'document' : 'shadow'} root={shadowRoot} />

Interfaces

Interface	Description
CodeEditorProps	-

Type Aliases

Type Alias	Description
CodeEditorSetup	-
CodeEditorTheme	CodeEditor 主题类型

Functions

Function	Description
CodeEditor	@aiao/code-editor-react