代码编辑器

@aligov/components-code-editor

基于 Monaco Editor (v0.18) 包装的 react 组件。

支持的语言

import { LANGUAGES } from "@aligov/components-code-editor";
console.log(LANGUAGES); // 支持的所有语言

// ["javascript", "java", "html", "json", "ini", "xml", "yaml"]

CodeEditor API

代码编辑器

import CodeEditor from '@aligov/components-code-editor';

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | --------- | ----------------- | ------ | ----------------------- | ------ | ------------------------------------------------ | | className | 类名 | 否 | string | '' | | | prevValue | 值 | 是 | string | null | | | fontSize | 字体大小(单位 px) | number | 16 | null | | | dark | 黑色主题 | 否 | bool | false | | | readOnly | 只读模式 | 否 | bool | false | | | onChange | prevValue 变化监听 | 否 | (prevValue: string) => void | false | | | language | 编程语言 | 否 | string | '' | 不传则以纯文本展示, 传入的值必需为支持的语言类型 |

CodeDiffEditor API

除了代码编辑器，还提供了 Diff 编辑器，默认是左右分栏的只读对比。

import { CodeDiffEditor } from '@aligov/components-code-editor';

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ------ | ---- | ---- | ---- | ------ | ---- | | language | 代码语言 | | string | "" | | | value | 最新的内容 | 是 | string | | | | originalValue | 旧的内容 | 是 | | | | | options | Monaco 编辑器的配置 | | object | 见下 | | | height | 编辑器高度 | | string 或 number | | 合法的 react style 值 | | width | 编辑器宽度 | | string 或 | 100% | | | className | dom 容器额外 class | | | "" | | | style | dom 容器额外的样式 | | object | {} | |

Diff 编辑器支持在 options 中传入 monaco diff 编辑器的选项，具体选项见 IDiffEditorOptions，这里设定了以下默认值：

{
  fontSize: 16,
  readOnly: true,
  enableSplitViewResizing: false
}