DQLEditor

The DQLEditor is specifically designed for editing DQL queries. It further offers syntax highlighting and autocomplete functionality specific to the Dynatrace Query Language. 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 { DQLEditor } from '@dynatrace/strato-components-preview/editors';

Use cases

CodeSandbox

Disable editing

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

CodeSandbox

Enable linewrap

To enable linewrap as soon as the content overflows, use the linewrap property.

CodeSandbox

Expand editor to full height

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

CodeSandbox

Props

DQLEditorProps

extends, , ,

Name	Type	Default	Description
id?		-	The ID for the DOM element.
'data-testid'?		'dql-editor'	Test id used for matching the editor container.
value?		''	The value (i.e. contents) of the editor.
onChange?	(value: ) =>	-	Handler that is called when the value 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 DQL 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.
onValidityChange?	(validityInfo: []) =>	-	Callback fired when new diagnostic information is available. Use this to get validity information from outside the editor.
onBlur?	(e: ) =>	-	Callback that is called when the editor loses focus.
onFocus?	(e: ) =>	-	Callback that is called when the editor receives focus.