 () => {
  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>
  );
};

Props

No props data available for CodeEditor.

Usage

Syntax highlighting

Syntax highlighting is provided by the extensions prop.

 () => {
  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

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.

 () => {
  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}>
      <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>
  );
};

CSS Autocomplete

 () => {
  const [value, setValue] = React.useState(`body {

}`);

  return (
    <CodeEditor.Root
      value={value}
      onChange={setValue}
      autoComplete={CodeEditor.cssAutocomplete({
        classNames: ['ak-Footer'],
      })}
      lang="css"
    >
      <CodeEditor.Frame>
        <CodeEditor.Header>
          <Text size="2" weight="bold">
            Some CSS
          </Text>
        </CodeEditor.Header>
        <CodeEditor.Content />
      </CodeEditor.Frame>
    </CodeEditor.Root>
  );
};

Variants

Dashboard

2 variants found

CodeEditor in Custom Element Accordiondashboard

/branding/edit

CodeEditor in Custom Element Accordiondashboard

/branding/edit

Context

Usage

Used 24 times across 1 package

Dashboard

Variant Distribution

align

center

100%

Where it's used

6 files

/branding/edit

packages/dashboard/src/app/(private)/(chromeless)/branding/edit/edit-branding.tsx10

packages/dashboard/src/app/(private)/(chromeless)/branding/edit/custom-element-accordion.tsx3

packages/dashboard/src/components/authentication/jwt-template/template-code-editor.tsx5

packages/dashboard/src/components/authentication/jwt-template/jwt-template-page.tsx4

packages/dashboard/src/components/authentication/jwt-template/template-code-editor.stories.tsx1

packages/dashboard/src/components/authentication/jwt-template/template-preview.tsx1

Code Editor

On this page

Anatomy

Props

Usage

Syntax highlighting

Syntax Error

CSS Autocomplete

Variants

Dashboard

Context

Usage Statistics

Usage

Variant Distribution

Where it's used