Skip to main content

CodeEditor

  • Changelog

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.

OverviewPropertiesUsageChangelog

Package @dynatrace/strato-components, latest version 3.15.1. Below are the changes to CodeEditor. See Components changelog for all changes to the package.

3.15.0 Released Oct 1, 2026​

Updates​

  • Fixed onValidityChange emitting a spurious 'aborted' state on every keystroke during async linting, which caused validation messages to flicker mid-edit; errors are now preserved from the last settled lint run while revalidation is in progress. (APPDEV-20042)

3.14.0 Released Sep 17, 2026​

Updates​

  • You can now subscribe to validation state changes via onValidityChange and trigger validation programmatically via editorRef.current.validate(). (APPDEV-18656)
Usage example
import { useRef, useState } from 'react';
import {
  CodeEditor,
  type CodeEditorRef,
} from '`@dynatrace/strato-components/editors';`
import {
  FormField,
  FormFieldMessages,
  Label,
} from '`@dynatrace/strato-components/forms';`
import type { ValidationState } from '`@dynatrace/strato-components/forms';`

const MyEditor = () => {
  const editorRef = useRef<CodeEditorRef>(null);
  const [state, setState] = useState<ValidationState>();

  return (
    <FormField>
      <Label>JSON configuration</Label>
      <CodeEditor
        ref={editorRef}
        name="config"
        language="json"
        required
        onValidityChange={setState}
      />
      <FormFieldMessages />
    </FormField>
  );
};

3.13.0 Released Sep 3, 2026​

Updates​

  • Introduced the new showOffScreenDiagnosticIndicators prop that renders floating pill buttons at the top and bottom edges of the editor indicating off-screen error-severity diagnostics, each showing the count of off-screen errors. Clicking a pill scrolls the nearest such error into view. (APPDEV-17072)

3.11.0 Released Aug 10, 2026​

Deprecations​

  • Deprecated gutterConfiguration prop. Use the diagnostics and showLintGutter props for per-line validation markers instead. (APPDEV-17071)

Updates​

  • Fold gutter markers are no longer announced by screen readers during virtual cursor navigation. Folding remains operable via keyboard shortcuts. (APPDEV-18645)
  • Added showLintGutter prop to show per-line severity markers in a gutter column. (APPDEV-17071)

3.10.0 Released Jul 28, 2026​

Updates​

  • Added diagnostics prop to display per-range inline validation feedback with a hover tooltip. Supports error, warning, and info severity levels. Takes precedence over the built-in JSON linter when language="json" is set. (APPDEV-17070)

3.9.0 Released Jul 10, 2026​

Updates​

  • Improved the line highlight animation that plays when the editor value changes externally. The highlight now appears instantly and fades out smoothly, using a subtler color that no longer inverts the text color. (APPDEV-18552)
  • Fixed controlled folding from failing to unfold when positions were removed from the folding prop (APPDEV-18343)
  • Fixed folding not working when cursor was positioned inside the block in controlled setting. (APPDEV-18343)

3.8.0 Released Jul 1, 2026​

Deprecations​

  • isControlled is deprecated from the start and will be removed when fully controlled behavior becomes the default. (APPDEV-5775)

Updates​

  • Keyboard shortcuts for code folding are now possible. See documentation for keybindings.(APPDEV-3639)
  • Tooltips on autocomplete suggestions are now also shown on mouse hover. (APPDEV-17382)
  • Fixed an editor crash that occurred sometimes when clicking on an editor while it was hidden, detached, or mid-layout (e.g. inside a re-rendering or collapsing container). (APPDEV-17855)
  • You can now opt in to fully controlled editor behavior. Set isControlled={true} to have the editor always reflect value and forward user input via onChange. When false (default), existing value behavior stays unchanged. As this prop will be removed when fully controlled behavior becomes the standard, it is already deprecated. (APPDEV-5775)

3.7.0 Released Jun 12, 2026​

Updates​

  • Added a defaultValue prop for uncontrolled usage. It sets the initial editor content. Existing value behavior is unchanged. (APPDEV-17373)
  • Fixed an editor crash that could occur when hovering over an editor while it was hidden, detached, or mid-layout (e.g. inside a re-rendering or collapsing container). (APPDEV-17905)

3.5.0 Released May 13, 2026​

Updates​

  • Virtual focus styles now use consistent design token-based colors and animations. (APPDEV-17187)

3.2.0 Released Apr 7, 2026​

Updates​

  • The line-number gutter no longer disappears when the gutter marker is placed at an out-of-bounds line number. (APPDEV-16705)
Still have questions?
Find answers in the Dynatrace Community