OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Code Editor

Displays a code block with an optional header and output area.

Some JSON

 () => {
  const [value, setValue] = React.useState(`
  {
    "id": 1,
    "name": "John Smith",
    "email": "john.smith@example.com",
    "phone": "01242 654 000",
    "contract": "Full-time",
    "thumbnail": ""
  }
  `);

  return (
    <CodeEditor.Root value={value} onChange={setValue}>
      <CodeEditor.Frame>
        <CodeEditor.Header>
          <Text size="2" weight="bold">
            Some JSON
          </Text>
        </CodeEditor.Header>
        <CodeEditor.Content height="200px" />
        <CodeEditor.Footer>
          <CodeEditor.Diagnostics />
        </CodeEditor.Footer>
      </CodeEditor.Frame>
    </CodeEditor.Root>
  );
};

Anatomy

Import the component and piece the parts together.

 import { CodeEditor } from '@workos-inc/design-system';
import { json, jsonParseLinter } from '@codemirror/lang-json';
import { linter, lintGutter } from '@codemirror/lint';

const jsonLinter = jsonParseLinter();
const codeMirrorExtensions = [json(), lintGutter(), linter(jsonParseLinter())];

export default () => {
  const [value, setValue] = React.useState(`
  {
    "id": 1,
    "name": "John Smith",
    "email": "john.smith@example.com",
    "phone": "01242 654 000",
    "contract": "Full-time",
    "thumbnail": ""
  }
  `);

  return (
    <CodeEditor.Root
      value={value}
      onChange={setValue}
      extensions={codeMirrorExtensions}
    >
      <CodeEditor.Frame>
        <CodeEditor.Header></CodeEditor.Header>
        <CodeEditor.Content />
        <CodeEditor.Footer>
          <CodeEditor.Diagnostics />
        </CodeEditor.Footer>
      </CodeEditor.Frame>
    </CodeEditor.Root>
  );
};

API Reference

The Code Block component is made up of six parts: Root, Output, Header, Content, Line Group, and Line. View source

Root

A provider of the code editor context. Passes through the ref to the underlying codemirror editor.

Frame

A container for the code editor parts. Based on the div element, implements Flex props.

An optional area to display elements related to the Code Block, like its title, tabs, or current language. This component is based on the div element.

Content

Code contents of the Code Block. This component is based on the div element, and uses codemirror’s EditorView to render the code.

In order to add syntax highlighting, you must pass in the appropriate extensions to the Root component. Codemirror implements many of these, but you may also implement a Lezer grammar for custom languages.

An optional area to display elements related to the Code Block, like diagnostics. This component is based on the div element.

Diagnostics

An optional component that displays linting diagnostics. This component is based on the button element. Clicking it will navigate to the next diagnostic in the content.

Examples

Syntax highlighting

Syntax highlighting is provided by the extensions prop.

Some JSON

 () => {
  const [value, setValue] = React.useState(`
  {
    "id": 1,
    "name": "John Smith",
    "email": "john.smith@example.com",
    "phone": "01242 654 000",
    "contract": "Full-time",
    "thumbnail": ""
  }
  `);

  return (
    <CodeEditor.Root
      value={value}
      onChange={setValue}
      extensions={codeMirrorExtensions}
    >
      <CodeEditor.Frame>
        <CodeEditor.Header>
          <Text size="2" weight="bold">
            Some JSON
          </Text>
        </CodeEditor.Header>
        <CodeEditor.Content />
        <CodeEditor.Footer>
          <CodeEditor.Diagnostics />
        </CodeEditor.Footer>
      </CodeEditor.Frame>
    </CodeEditor.Root>
  );
};

###Syntax Error

Syntax highlighting

Linting can be done using @codemirror/lint, and a linter for a given language. The linter can be an async function, and codemirror will track the position of the error while the code changes until the next linting passes.

Some JSON

 () => {
  const [value, setValue] = React.useState(`
  {
    "id": 1,
    "name": "John Smith",
    "email": "john.smith@example.com",
    "phone": "01242 654 000",
    "contract": "Full-time"s,
    "thumbnail": ""
  }
  `);

  return (
    <CodeEditor.Root
      value={value}
      onChange={setValue}
      extensions={codeMirrorExtensions}
    >
      <CodeEditor.Frame>
        <CodeEditor.Header>
          <Text size="2" weight="bold">
            Some JSON
          </Text>
        </CodeEditor.Header>
        <CodeEditor.Content />
        <CodeEditor.Footer>
          <CodeEditor.Diagnostics />
        </CodeEditor.Footer>
      </CodeEditor.Frame>
    </CodeEditor.Root>
  );
};