based on @alilc/lowcode-plugin-base-monaco-editor and react-monaco-editor.
MonacoEditor
import { MonacoEditor } from '@yuntijs/ui';based on @alilc/lowcode-plugin-base-monaco-editor and react-monaco-editor.
import { MonacoEditor } from '@yuntijs/ui';based on @alilc/lowcode-plugin-base-monaco-editor and react-monaco-editor.
import { MonacoEditor } from '@yuntijs/ui';
export default () => {
return (
<MonacoEditor
defaultValue={`const myEditor = monaco.editor.create(document.getElementById("container"), {
language: "javascript",
automaticLayout: true,
});`}
height={200}
language="javascript"
onChange={next => {
// eslint-disable-next-line no-console
console.log(next);
}}
onFullScreenChange={isFullScreen => {
console.log(isFullScreen);
}}
supportFullScreen={true}
width={740}
/>
);
};width width of editor. Defaults to 100%.
height height of editor. Defaults to 100%.
value value of the auto created model in the editor.
original value of the original model in the diff editor.
defaultValue the initial value of the auto created model in the editor.
language the initial language of the auto created model in the editor.
theme the theme of the editor. The default is vs or vs-dark, which will automatically change with the antd theme according to the antd theme, also supports vs-dark, hc-light, hc-black. If you specify this field, this theme will be fixed.
readOnly Should the editor be read only. See also domReadOnly. Defaults to false.
lineNumbers Control the rendering of line numbers. If it is a function, it will be invoked when rendering a line number and the return value will be rendered. Otherwise, if it is a truthy, line numbers will be rendered normally (equivalent of using an identity function). Otherwise, line numbers will not be rendered. Defaults to on.
wordWrap
options refer to Monaco interface IStandaloneEditorConstructionOptions, diff editor see IStandaloneDiffEditorConstructionOptions
path path of the current model, useful when creating a multi-model editor
requireConfig config passing to require, can be used to upgrade monaco-editor.
overrideServices refer to Monaco Interface IEditorOverrideServices. It depends on Monaco's internal implementations and may change over time, check github issue for more details.
onChange(input, event) an event emitted when the content of the current model has changed.
onFullScreenChange(isFullScreen) an event emitted when the full-screen of the current model has changed.
editorWillMount(monaco) an event emitted before the editor mounted (similar to componentWillMount of React).
editorDidMount(editor, monaco) an event emitted when the editor has been mounted (similar to componentDidMount of React).
editorWillUnmount(editor, monaco) an event emitted before the editor unmount (similar to componentWillUnmount of React).
| Name | Description | Type | Default |
|---|---|---|---|
| readOnly | Should the editor be read only. See also domReadOnly. Defaults to false. | boolean | -- |
| lineNumbers | Control the rendering of line numbers. Defaults to on. | on|off|relative|interval|(lineNumber:number)=>string | -- |
| wordWrap | Control the wrapping of the editor. Defaults to off. | "off"|"on"|"wordWrapColumn"|"bounded" | -- |
| contextmenu | Enable custom contextmenu. Defaults to true. | boolean | -- |
| minimapEnabled | Enable the rendering of the minimap. Defaults to false. | boolean | -- |
| version | Control the version of monaco-editor be loaded. Defaults to 0.45.0 | string | -- |
| onChange | An event emitted when the content of the current model has changed. | (input:string,event:any)=>void | -- |
| variant | Variants of Editor, Defaults to outlined. | "outlined"|"borderless"|"filled"|"underlined" | -- |
| options | [Monaco editor options](https://microsoft.github.io/monaco-editor/) | {} | -- |
| editorDidMount | callback after monaco's loaded and after editor's loaded | (monaco:typeof import("/node_modules/monaco-editor/esm/vs/editor/editor.api"),editor:import("/src/MonacoEditor/base/helper").IEditorInstance)=>void | -- |
| editorWillMount | callback after monaco's loaded and before editor's loaded | (monaco:typeof import("/node_modules/monaco-editor/esm/vs/editor/editor.api"))=>void | -- |
| path | path of the current model, useful when creating a multi-model editor | string | -- |
| saveViewState | whether to save the models' view states between model changes or not | boolean | -- |
| language | language of the editor @see https://microsoft.github.io/monaco-editor/ for available languages | string | -- |
| theme | theme of the editor | any | -- |
| requireConfig | [config passing to require](https://github.com/suren-atoyan/monaco-react#loader-config), can be used to upgrade monaco-editor | {} | -- |
| value | value, controlled | string | -- |
| defaultValue | defaultValue for creating model, uncontrolled | string | -- |
| className | className of wrapper | string | -- |
| width | width of wrapper | number|string | -- |
| height | height of wrapper | number|string | -- |
| enableOutline | whether to enable outline of wrapper or not | boolean | -- |
| style | style of wrapper | {} | -- |
| enhancers | -- | EditorEnhancer[] | -- |
| placeholder | -- | string | -- |
| type | Only for BaseMonacoEditor. | "single"|"diff" | -- |
| supportFullScreen | Is show fullscreen button | boolean | -- |
| Name | Description | Type | Default |
|---|---|---|---|
| onChange | -- | (input:string,event:import("/node_modules/monaco-editor/esm/vs/editor/editor.api").editor.IModelContentChangedEvent)=>void | -- |
| supportFullScreen | -- | boolean | -- |
| onFullScreenChange | -- | (isFullScreen:boolean)=>void | -- |
| original | -- | string | -- |
| options | [Monaco editor options](https://microsoft.github.io/monaco-editor/) | {} | -- |
| editorDidMount | callback after monaco's loaded and after editor's loaded | (monaco:typeof import("/node_modules/monaco-editor/esm/vs/editor/editor.api"),editor:import("/src/MonacoEditor/base/helper").IEditorInstance)=>void | -- |
| editorWillMount | callback after monaco's loaded and before editor's loaded | (monaco:typeof import("/node_modules/monaco-editor/esm/vs/editor/editor.api"))=>void | -- |
| path | path of the current model, useful when creating a multi-model editor | string | -- |
| saveViewState | whether to save the models' view states between model changes or not | boolean | -- |
| language | language of the editor @see https://microsoft.github.io/monaco-editor/ for available languages | string | -- |
| theme | theme of the editor | any | -- |
| requireConfig | [config passing to require](https://github.com/suren-atoyan/monaco-react#loader-config), can be used to upgrade monaco-editor | {} | -- |
| value | value, controlled | string | -- |
| defaultValue | defaultValue for creating model, uncontrolled | string | -- |
| className | className of wrapper | string | -- |
| width | width of wrapper | number|string | -- |
| height | height of wrapper | number|string | -- |
| enableOutline | whether to enable outline of wrapper or not | boolean | -- |
| style | style of wrapper | {} | -- |
| enhancers | -- | EditorEnhancer[] | -- |
| placeholder | -- | string | -- |
| inlineView | Render the differences in one editor. Defaults to off, render the differences in two side-by-side editors | "off"|"on"|"auto" | -- |