Skip to main content

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.

OverviewPropertiesUsageChangelog3.14.0

Changes to CodeEditor. The full components changelog also lists package-wide and cross-cutting entries.

3.14.0​

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​

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​

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​

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​

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​

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​

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​

Updates​

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

3.2.0​

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