Spaces:
Running
Running
File size: 7,958 Bytes
3488c13 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
# 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']
```
|