# monaco-editor-wrapper LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/monaco-editor-wrapper` 的使用方式。

## 模块定位

基于 Monaco 的编辑器

## 导入方式

```ts
import { MonacoEditorWrapper } from '@flatbiz/antd/monaco-editor-wrapper';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `MONACO_BASE_URL`
- `MonacoEditorWrapper` - 基于 Monaco 的编辑器
- `MonacoEditorWrapperLanguage`
- `MonacoEditorWrapperProps`
- `registerGroovyLanguageForMonaco`
- `* from ./editor.jsx`
- `registerSqlLanguageForMonaco`
- `getSqlCompletionItems`

## Props / 配置要点

### MonacoEditorWrapperProps

- `className`（可选）：: string
- `style`（可选）：: CSSProperties
- `height`（可选）：: string；编辑器高度，默认值：100%，可输入值例如 300px、100%
- `resizableHeight`（可选）：: boolean；是否可拖拽调整编辑器高度，默认值：true
- `minHeight`（可选）：: number；拖拽调整高度时的最小高度，默认值：160
- `maxHeight`（可选）：: number；拖拽调整高度时的最大高度
- `onHeightResize`（可选）：: (height: number) => void；拖拽调整高度后的回调
- `value`（可选）：: string | TPlainObject | TPlainObject[]
- `onChange`（可选）：: (value?: string | TPlainObject | TPlainObject[]) => void
- `autoCompleterList`（可选）：: { name: string; desc?: string }[]；配置输入自动提示关键字
- `hiddenFormatterBtn`（可选）：: boolean；是否隐藏【格式化】按钮
- `hiddenErrorMsg`（可选）：: boolean；是否隐藏内部异常文案
- `theme`（可选）：: string；Monaco 主题，默认值：vs-dark
- `language`（可选）：: MonacoEditorWrapperLanguage；Monaco 语言，默认值：json；支持 json、sql、groovy，兼容 grovvy
- `readOnly`（可选）：: boolean；是否只读，默认值：false
- `placeholder`（可选）：: string；占位提示文案，内容为空时显示
- `options`（可选）：: TPlainObject；Monaco editor.create 的 options
- `onLoad`（可选）：: (editor: TAny, monaco: TAny) => void；Monaco editor 实例创建后触发
- `onBlur`（可选）：: (editor: TAny) => void；编辑器失焦
- `footerExtraRender`（可选）：: (children: ReactElement) => ReactElement；底部额外布局
- `footerStyle`（可选）：: CSSProperties

## 使用规则与行为

- Monaco loader 会在 window 上注入 AMD require/define。 sql-formatter 是 UMD 包，检测到 AMD 环境后会注册为 AMD 模块， 不会直接挂载到 window.sqlFormatter，所以这里通过 Monaco require 加载后手动赋值。
- 编辑器高度，默认值：100%，可输入值例如 300px、100%
- 是否可拖拽调整编辑器高度，默认值：true
- 拖拽调整高度时的最小高度，默认值：160
- 拖拽调整高度时的最大高度
- 拖拽调整高度后的回调
- 配置输入自动提示关键字
- 是否隐藏【格式化】按钮
- 是否隐藏内部异常文案
- Monaco 主题，默认值：vs-dark

## 默认值线索

- `height => '100%'`
- `resizableHeight => true`
- `minHeightNew => minHeight ?? DEFAULT_RESIZABLE_MIN_HEIGHT`
- `maxHeightNew => maxHeight ?? Number.POSITIVE_INFINITY`

## 基础示例

```tsx
import { MonacoEditorWrapper, type MonacoEditorWrapperProps } from '@flatbiz/antd/monaco-editor-wrapper';

const props: MonacoEditorWrapperProps = {
  // 按业务传入必要参数
};

<MonacoEditorWrapper {...props} />;
```

## 源码索引

- `src/monaco-editor-wrapper/editor.tsx`
- `src/monaco-editor-wrapper/groovy-language.ts`
- `src/monaco-editor-wrapper/index.ts`
- `src/monaco-editor-wrapper/sql-language.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/monaco-editor-wrapper` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。