# @web/editor

CodeMirror 6 封装的现代代码编辑器组件，专为 `@web/base` 和 `@web/state` 生态设计。原生 ESM，零打包开箱即用。

## 核心特性
- **轻量原生**：基于 ESM，直接在浏览器运行。
- **AutoForm 集成**：作为 `AutoForm` 的高阶组件，支持 `type: 'CodeEditor'`。
- **响应式绑定**：深度集成 `@web/state` 的 `$bind` 机制。
- **语法支持**：内置 JS、JSON、HTML 高亮。
- **双轨产物**：提供源码级 `editor.js` 和压缩版 `editor.min.js`。

## 安装与引入
严禁使用 `npm install`。请通过 `loader.js` 或 `importmap` 引入。

### Importmap 配置
```json
{
  "imports": {
    "@web/editor": "/path/to/editor.js"
  }
}
```

## API 手册

### `<CodeEditor>` 组件
#### 属性 (Attributes)
- `lang`: 语言类型，支持 `javascript` (默认), `json`, `html`。
- `theme`: 主题，支持 `dark` (默认, One Dark), `light`。
- `value`: 初始值。
- `readonly`: 是否只读。

#### 属性 (Properties)
- `value`: 获取或设置编辑器文本内容。
- `view`: 获取底层的 CodeMirror `EditorView` 实例。

#### 事件 (Events)
- `input`: 内容变化时触发（符合标准表单行为）。
- `change`: 内容变化时触发，`event.detail` 包含最新内容。

## 使用示例

### 基础用法
```html
<CodeEditor lang="json" value='{"test": 123}'></CodeEditor>
```

### 在 AutoForm 中使用
```javascript
const schema = [
  { name: 'config', label: '配置', type: 'CodeEditor', setting: { lang: 'json' } }
];
```

## 构建
```bash
npm run build
```
产出 `dist/editor.js` (源码) 和 `dist/editor.min.js` (压缩)。