Spaces:
Running
Running
| # MonacoEditor | |
| Code editor, Gradio implementation of [Monaco Editor](https://microsoft.github.io/monaco-editor/), integrated based on [@monaco-editor/react](https://github.com/suren-atoyan/monaco-react). | |
| ## Examples | |
| ### Basic Usage | |
| <demo name="basic"></demo> | |
| ### Diff Editor | |
| <demo name="diff_editor"></demo> | |
| ### Monaco Editor Options | |
| You can directly pass in Monaco Editor configuration options [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html). | |
| In this example, we disable the `minimap` and `lineNumbers` of the editor. | |
| <demo name="monaco_editor_options"></demo> | |
| ### Customization via JavaScript | |
| If you need further customization of Monaco Editor, you can pass in JavaScript function strings for more advanced configuration. | |
| <demo name="javascript_customize"></demo> | |
| ## 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](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) 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](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) | | |
| | overrideServices | `dict \| None` | None | [IEditorOverrideServices](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOverrideServices.html) | | |
| | 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](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) 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](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) | | |
| | overrideServices | `dict \| None` | None | [IEditorOverrideServices](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOverrideServices.html) | | |
| | 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](https://microsoft.github.io/monaco-editor/), only languages with rich IntelliSense will trigger the validate event. | |
| - TypeScript | |
| - JavaScript | |
| - CSS | |
| - LESS | |
| - SCSS | |
| - JSON | |
| - HTML | |
| ### Slots | |
| ```python | |
| SLOTS=['loading'] | |
| ``` | |