# CodeEditor

Der CodeEditor unterstützt beim Schreiben und Bearbeiten von Code innerhalb der Oberfläche. Er bietet ein Syntax-Highlighting für verschiedene Programmiersprachen und optionale Funktionen wie Zeilennummern, einklappbare Codebereiche sowie eine Kopierfunktion.

## Overview

# Playground

Verwende `<CodeEditor />`, um einen CodeEditor anzuzeigen. Gib den anzuzeigenden
Inhalt im `value` Property an. Nutze das `language` Property, um die
Programmiersprache (siehe
[unterstütze language imports](https://github.com/mittwald/flow/tree/main/packages/components/src/components/CodeEditor/languages/all.ts))
zu definieren. So erhält der Code das korrekte Syntax-Highlighting.

```tsx
import { CodeEditor } from "@mittwald/flow-react-components";

<CodeEditor
  language="tsx"
  value={
    'import React, { FC } from "react";\n' +
    "\n" +
    "const ExampleCodeComponent: FC = () => {\n" +
    "  \n" +
    "  useEffect(() => {\n" +
    "    // some effect \n" +
    "  }, []);\n" +
    "  \n" +
    "  return <>Example JSX</>;\n" +
    "};"
  }
/>
```

---

# Kombiniere mit ...

## React Hook Form

Weitere Details zur Formularlogik und -validierung sind in der Component
[Form (React Hook Form)](/04-components/react-hook-form/form/overview) zu
finden.

```tsx
import {
  Label,
  CodeEditor,
  Section,
  ActionGroup,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Field,
  Form,
  SubmitButton,
} from "@mittwald/flow-react-components/react-hook-form";

export default () => {
  const form = useForm({
    defaultValues: {
      code:
        'import React, { FC } from "react";\n' +
        "\n" +
        "const ExampleCodeComponent: FC = () => {\n" +
        "  \n" +
        "  useEffect(() => {\n" +
        "    // some effect\n" +
        "  }, []);\n" +
        "  \n" +
        "  return <>Example JSX</>;\n" +
        "};",
    },
  });
  return (
    <Section>
      <Form
        form={form}
        onSubmit={(v) => console.log(v.code)}
      >
        <Field
          name="code"
          rules={{
            required: "Bitte gib Quelltext ein",
          }}
        >
          <CodeEditor language="tsx">
            <Label>Quelltext</Label>
          </CodeEditor>
        </Field>
        <ActionGroup>
          <SubmitButton color="accent">Senden</SubmitButton>
        </ActionGroup>
      </Form>
    </Section>
  );
}
```