# CodeEditor

Der CodeEditor dient dem Bearbeiten von Code, mit 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" +
    "};"
  }
/>
```

---

# Best Practices

- Setze im `language` Property die Sprache passend zum Code-Inhalt. So wird das
  Syntax-Highlighting korrekt dargestellt.

---

# Kombiniere mit ...

## React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component
[Form (React Hook Form)](https://flow.mittwald.de/04-components/react-hook-form/form).

```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>Senden</SubmitButton>
        </ActionGroup>
      </Form>
    </Section>
  );
}
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `autoFocus` | `boolean` | - | focus on the editor. |
| `className` | `string` | - | The elements class name. |
| `copyable` | `boolean` | `true` | Whether a button to copy the code to the clipboard is shown. |
| `defaultValue` | `string` | - | The initial code of an uncontrolled editor. |
| `editable` | `boolean` | `true` | This disables editing of the editor content by the user. |
| `extensions` | `Extension[]` | - | Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information. They can either be built-in extension-providing objects, such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of), or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed. |
| `height` | `string` | - | - |
| `indentWithTab` | `boolean` | `true` | Controls whether pressing the `Tab` key inserts a tab character and indents the text (`true`) or behaves according to the browser's default behavior (`false`). |
| `initialState` | `{ json: any; fields?: Record<string, StateField<any>>; }` | - | Create a state from its JSON representation serialized with [toJSON](https://codemirror.net/docs/ref/#state.EditorState.toJSON) function |
| `isInvalid` | `boolean` | `false` | Whether the editor is displayed as invalid. |
| `isReadOnly` | `boolean` | `false` | Whether the code can be read but not edited. |
| `isRequired` | `boolean` | `false` | Whether the field must be filled in. Only marks the editor as required for assistive technology — the editor does not validate itself. |
| `language` | `"text" \| "go" \| "p" \| "b" \| "html" \| "map" \| "q" \| "s" \| "svg" \| "m" \| "markdown" \| "d" \| "in" \| "r" \| "apl" \| "asc" \| "asn" \| "asn1" \| "bash" \| "bf" \| "BUILD" \| "bzl" \| "c" \| "c++" \| "cc" \| ... 193 more ...` | - | The language the code is highlighted as. |
| `maxHeight` | `string` | - | - |
| `maxWidth` | `string` | - | - |
| `minHeight` | `string` | - | - |
| `minWidth` | `string` | - | - |
| `placeholder` | `string \| HTMLElement` | - | Enables a placeholder—a piece of example content to show when the editor is empty. |
| `root` | `ShadowRoot \| Document` | - | If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here. Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root) |
| `selection` | `EditorSelection \| { anchor: number; head?: number; }` | - | The starting selection. Defaults to a cursor at the very start of the document. |
| `showActiveLineMarker` | `boolean` | `true` | Whether the line the cursor is on is highlighted. |
| `showCodeFolding` | `boolean` | `true` | Whether the gutter offers controls to fold and unfold code blocks. |
| `showCodeIndentationMakers` | `boolean` | `true` | Whether indentation levels are visualized with guide lines. |
| `showLineNumbers` | `boolean` | `true` | Whether line numbers are shown in the gutter. |
| `showLinterMarkers` | `boolean` | `true` | Whether linter results are shown in the gutter. |
| `value` | `string` | - | value of the auto created model in the editor. |
| `width` | `string` | - | - |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

### Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `onChange` | `((value: string, viewUpdate: ViewUpdate) => void)` | - | Fired whenever a change occurs to the document. |
| `onCreateEditor` | `((view: EditorView, state: EditorState) => void)` | - | The first time the editor executes the event. |
| `onStatistics` | `((data: Statistics) => void)` | - | Some data on the statistics editor. |
| `onUpdate` | `((viewUpdate: ViewUpdate) => void)` | - | Fired whenever any state change occurs within the editor, including non-document changes like lint results. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |