components/pro/monaco_editor/README.md

MonacoEditor

Code editor, Gradio implementation of Monaco Editor, integrated based on @monaco-editor/react.

Examples

Basic Usage

Diff Editor

Monaco Editor Options

You can directly pass in Monaco Editor configuration options IStandaloneEditorConstructionOptions.

In this example, we disable the minimap and lineNumbers of the editor.

Customization via JavaScript

If you need further customization of Monaco Editor, you can pass in JavaScript function strings for more advanced configuration.

API

Props

MonacoEditor

Attribute	Type	Default	Description
value	str| None	None	The value of the editor.
language	str| None	None	The language of the editor (all languages supported by monaco-editor).
line	number| None	None	Vertically scroll the editor to the specified line.
read_only	bool| None	None	Whether the editor is read-only.
loading	str| None	'Editor is loading...'	The loading text when the editor is initializing.
options	dict | None	None	IStandaloneEditorConstructionOptions
overrideServices	dict | None	None	IEditorOverrideServices
height	str | float | int	400	The height of the component. If the value is a number, it is specified in pixels. If a string is passed, it is specified in CSS units.
before_mount	str | None	None	Pass in a JavaScript function string to execute before the editor loads, which can access the monaco object.
after_mount	str | None	None	Pass in a JavaScript function string to execute after the editor loads, which can access the editor object and monaco object.

MonacoEditor.DiffEditor

Property	Type	Default	Description
value	str| None	None	The modified source (right one) value.
original	str| None	None	The original source (left one) value.
language	str| None	None	The language of the editor (all languages supported by monaco-editor).
original_language	str| None	None	Specifies the language of the original source separately. Otherwise, it will take the value of the language property.
modified_language	str| None	None	Specifies the language of the modified source separately. Otherwise, it will take the value of the language property.
line	number| None	None	Vertically scroll the editor to the specified line.
read_only	bool| None	None	Whether the editor is read-only.
loading	str| None	'Editor is loading...'	The loading text when the editor is initializing.
options	dict | None	None	IStandaloneEditorConstructionOptions
overrideServices	dict | None	None	IEditorOverrideServices
height	str | float | int	400	The height of the component. If the value is a number, it is specified in pixels. If a string is passed, it is specified in CSS units.
before_mount	str | None	None	Pass in a JavaScript function string to execute before the editor loads, which can access the monaco object.
after_mount	str | None	None	Pass in a JavaScript function string to execute after the editor loads, which can access the editor object and monaco object.

Events

Event	Description
pro.(MonacoEditor | MonacoEditor.DiffEditor).mount(fn, ···)	Triggered when the editor is mounted.
pro.(MonacoEditor | MonacoEditor.DiffEditor).change(fn, ···)	Triggered when the editor value changes.
pro.(MonacoEditor | MonacoEditor.DiffEditor).validate(fn, ···)	Triggered when the editor triggers validation and error markers exist.

Note: According to monaco-editor, only languages with rich IntelliSense will trigger the validate event.

• TypeScript
• JavaScript
• CSS
• LESS
• SCSS
• JSON
• HTML

Slots

SLOTS=['loading']