DQLEditor

The DQLEditor is specifically designed for editing DQL queries.

It further offers syntax highlighting and autocomplete functionality specific to the Dynatrace Query Language (DQL). 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.

OverviewPropertiesUsage

Import

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

Demo

By default, the DQLEditor is uncontrolled and manages its own internal state. To pre-fill the editor with an initial value, use the defaultValue prop.

Disable editing

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

Enable linewrap

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

Enable the actions menu

To display a built-in actions menu in the top-right corner of the editor, render DQLEditor.ActionsMenu as a child. The menu provides the following actions:

• Copy query: Copies the current editor content to the clipboard.
• Format query: Formats the DQL query for improved readability. Requires the optional peer dependency @dynatrace-sdk/dqlint to be installed. If the package is absent, this action is hidden. The format can also be triggered with the keyboard shortcut Ctrl+Shift+F (Windows / Linux) or Cmd+Shift+F (macOS).
• Open documentation: Opens the DQL documentation in a new tab.

Add custom actions

Pass children to DQLEditor.ActionsMenu to render additional content between the built-in actions (Copy query / Format query) and Open documentation. Only Menu.* components are accepted. Unsupported children are ignored.

Expand 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.

Folding

The DQLEditor supports folding of multi-line block comments (/*…*/) and subqueries ([…]). Folding can be triggered via the gutter icons or keyboard shortcuts:

• Fold the current block: Ctrl+Shift+[ (Windows/Linux) / Cmd+Option+[ (macOS).
• Unfold the current block: Ctrl+Shift+] (Windows/Linux) / Cmd+Option+] (macOS).
• Fold all: Ctrl+Alt+[ (Windows/Linux) / Control+Option+[ (macOS).
• Unfold all: Ctrl+Alt+] (Windows/Linux) / Control+Option+] (macOS).

Controlled

To control which blocks are folded from outside the DQLEditor, pass an array of character start positions to the folding prop.

The onFoldingChange callback is called whenever the folding state changes — for example, when the user folds or unfolds a block via the gutter or keyboard shortcut. It receives the updated array of folded character positions and is typically paired with the folding prop to keep the external state in sync.

Uncontrolled

For uncontrolled scenarios where the parent doesn't need to track fold positions, use defaultFolding to set the initial folds without managing state externally.

Query autocomplete

The DQLEditor supports autocomplete functionality to assist with writing DQL queries more efficiently. Autocomplete suggestions appear automatically as you type, or can be manually triggered using Ctrl+Space.

Note

In the following example, the autocomplete suggestions are limited for demonstration purposes. In a real-world environment, the suggestions will be more comprehensive, depending on the query context.

Control state

The DQLEditor also supports controlled behavior, enabling direct management of its state. To do so, pass a handler to onChange and assign the updated value via the value prop.

Caution

isControlled is deprecated and will be removed in a future major version when the true uncontrolled and controlled behaviors become the default. Adopting it now lets you opt in early and try out.

Set isControlled to make the DQLEditor strictly reflect its value prop. User input is not applied to the editor directly. Instead, every change calls onChange with the new value, and the editor only updates when value changes. This ensures the displayed content always matches the state you control.