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.

Import

import { CodeEditor } from '@dynatrace/strato-components-preview/editors';

Use cases

CodeSandbox

Set a language

To enable syntax highlighting, specify the desired language with the language property.

CodeSandbox

Disable editing

To disable editing of the content, use the readOnly property.

CodeSandbox

Enable line wrap

To enable line wrap as soon as the content overflows, use the lineWrap property.

CodeSandbox

Expand editor to full height

To expand the CodeEditor to the full available height of its parent, use the fullHeight property. If you want the CodeEditor to respect the min-height and max-height of the parent, use a flex container.

CodeSandbox

Default folding in editor

To provide default folding at specific character positions in the CodeEditor, use the defaultFolding property that accepts an array of positions.

CodeSandbox

Change the size

The CodeEditor component offers a size prop with default and condensed options. The condensed option enables a more compact code display by optimizing space, while the prop defaults to default for a regular view.

CodeSandbox

Props

CodeEditorProps

extends, , ,

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?	|	is 'default'.	Editor layout size, 'default' for standard spacing and 'condensed' for reduced font-size, padding and margins.