# @fc-components/monaco-editor

基于 Monaco Editor 的多语言编辑器组件集合，提供开箱即用的语法高亮、代码补全、语法校验等功能。

## 编辑器列表

| 编辑器                                                        | 说明                                     |
| ------------------------------------------------------------- | ---------------------------------------- |
| [PromQLMonacoEditor](src/promql/README.md)                    | PromQL 查询编辑器，支持异步指标/标签补全 |
| [LogQLMonacoEditor](src/logql/README.md)                      | 多厂商日志查询编辑器（SLS/CLS/TLS/LTS/BLS）|
| [SqlMonacoEditor](src/sql/README.md)                          | SQL 编辑器，支持语法补全与校验           |
| [ExprMonacoEditor](src/expr/README.md)                        | 表达式编辑器                             |
| [YamlMonacoEditor](src/yaml/README.md)                        | YAML 编辑器，支持 Schema 驱动的补全      |

## 安装

```bash
npm install @fc-components/monaco-editor
```

## 通用 Props

各编辑器共享以下基础属性：

| 参数               | 类型                                      | 默认值      | 说明                   |
| ------------------ | ----------------------------------------- | ----------- | ---------------------- |
| `size`             | `'small' \| 'middle' \| 'large'`          | `'middle'`  | 编辑器尺寸             |
| `theme`            | `'light' \| 'dark'`                       | `'light'`   | 主题                   |
| `value`            | `string`                                  | -           | 编辑器内容             |
| `placeholder`      | `string`                                  | -           | 占位符文本             |
| `enableAutocomplete`| `boolean`                                | `true`      | 启用代码补全           |
| `readOnly`         | `boolean`                                 | `false`     | 只读模式               |
| `disabled`         | `boolean`                                 | `false`     | 禁用编辑               |
| `onChange`         | `(value: string) => void`                 | -           | 内容变化回调           |
| `onEnter`          | `(value: string) => void`                 | -           | Enter 键时触发         |
| `onBlur`           | `(value: string) => void`                 | -           | 编辑器失焦时触发       |
| `editorDidMount`   | `(editor) => void`                        | -           | 编辑器挂载完成后的回调 |

各编辑器特有的 Props 请查看对应子目录的 README。

## 导出

```ts
import { PromQLMonacoEditor, LogQLMonacoEditor, SqlMonacoEditor, ExprMonacoEditor, YamlMonacoEditor } from '@fc-components/monaco-editor';
```

每个编辑器的详细用法、完整 Props 列表和功能说明，请点击上方表格中的链接查看对应 README。