代码编辑器

@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
}