CodeEditor
The CodeEditor
provides a text input field that is specifically designed for
editing code. It further offers properties to configure e.g. syntax
highlighting, spell checks or line wrapping. Once the editor is focused via the
keyboard, the user must press "Enter" to start editing and "Escape" to quit
editing and return to the keyboard navigation flow.
CodeEditorProps
, , , ,
Name | Type | Default | Description |
---|---|---|---|
language? | | | | | | | | | 'other' | The language for syntax highlighting and autocompletion. |
id? | - | The ID for the DOM element. | |
value? | '' | The value (i.e. contents) of the editor. | |
onChange? | (value: ) => | - | Callback that is called when the value in the editor changes. |
placeholder? | - | Displayed initially in the editor when there is no other content. | |
spellCheck? | false | Whether spellcheck should be enabled. | |
fullHeight? | false | If set to true, the code editor uses the full height available in its parent. | |
defaultFolding? | [] | - | The start indices (character position) that should be folded initially in uncontrolled scenarios. |
folding? | [] | - | The start indices (character position) that should be folded initially in controlled scenarios. |
onFoldingChange? | (values: []) => | - | Callback that is called when folding changes. |
readOnly? | false | Whether the input is readonly. | |
lineWrap? | false | Whether long lines should be wrapped. | |
onBlur? | (e: ) => | - | Callback that is called when the editor loses focus. |
onFocus? | (e: ) => | - | Callback that is called when the editor receives focus. |
gutterConfiguration? | - | Provides the gutter configuration to display a gutter next to the fold gutter | |
size? | | | 'default' | Editor layout size, 'default' for standard spacing and 'condensed' for reduced font-size, padding and margins. |
required? | false | If set to true, |