# MarkdownEditor

Der MarkdownEditor ist eine Komponente zur Erstellung und Formatierung von Textinhalten mithilfe von Markdown-Syntax. Er unterstützt User bei der schnellen und konsistenten Textformatierung und stellt eine Vorschauansicht zur Verfügung.

## Overview

# Playground

Verwende `<MarkdownEditor />`, um einen MarkdownEditor darzustellen.

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

<MarkdownEditor
  aria-label="Nachricht"
  placeholder="Schreibe eine Nachricht ..."
/>
```

---

# Disabled

Nutze das Property `isDisabled`, um den MarkdownEditor als disabled anzuzeigen.

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

<MarkdownEditor
  isDisabled
  aria-label="Nachricht"
  placeholder="Schreibe eine Nachricht ..."
/>
```

---

# Character Count

Mit der Property `showCharacterCount` wird automatisch eine
`<FieldDescription />` ergänzt, die die aktuelle Zeichenanzahl und – sofern
angegeben – die maximale Zeichenanzahl anzeigt.

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

<MarkdownEditor
  showCharacterCount
  maxLength={100}
  aria-label="Nachricht"
  placeholder="Schreibe eine Nachricht ..."
/>
```

---

# Resize

## Automatisch

Mit der Property `autoResizeMaxRows` lässt sich eine maximale Höhe definieren,
bis zu der sich der MarkdownEditor automatisch an den Inhalt anpasst.

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

<MarkdownEditor
  rows={1}
  autoResizeMaxRows={5}
  aria-label="Nachricht"
  placeholder="Schreibe eine Nachricht ..."
/>
```

## Manuell

Über die Properties `allowResize`, `allowVerticalResize` oder
`allowHorizontalResize` kann die Größe des MarkdownEditors manuell verändert
werden.

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

<MarkdownEditor
  allowResize
  aria-label="Nachricht"
  placeholder="Schreibe eine Nachricht ..."
/>
```

## Kombiniert

Beide Resize-Varianten lassen sich auch miteinander kombinieren. In diesem Fall
passt sich der MarkdownEditor zunächst automatisch an, bis die Größe einmal
manuell geändert wird. Danach bleibt er in der eingestellten Größe bestehen.

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

<MarkdownEditor
  allowResize
  aria-label="Nachricht"
  placeholder="Schreibe eine Nachricht ..."
  rows={1}
  autoResizeMaxRows={5}
/>
```

---

# 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,
  MarkdownEditor,
  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: { message: "" },
  });
  return (
    <Section>
      <Form
        form={form}
        onSubmit={(v) => console.log(v.message)}
      >
        <Field
          name="message"
          rules={{
            required: "Bitte gib eine Nachricht ein",
          }}
        >
          <MarkdownEditor placeholder="Schreibe eine Nachricht ...">
            <Label>Nachricht</Label>
          </MarkdownEditor>
        </Field>
        <ActionGroup>
          <SubmitButton color="accent">Senden</SubmitButton>
        </ActionGroup>
      </Form>
    </Section>
  );
}
```

## Chat

```tsx
import {
  Align,
  Avatar,
  Button,
  Chat,
  Content,
  Header,
  Initials,
  Message,
  MessageSeparator,
  MessageThread,
  Text,
  MarkdownEditor,
} from "@mittwald/flow-react-components";

<Chat height={400}>
  <MessageThread>
    <MessageSeparator>Ticket geöffnet</MessageSeparator>
    <Message>
      <Header>
        <Align>
          <Avatar>
            <Initials>Max Mustermann</Initials>
          </Avatar>
          <Text>
            <strong>Max Mustermann</strong>
          </Text>
        </Align>
      </Header>
      <Content>
        <Text>
          Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Cumque eius quam quas vel voluptas, ullam
          aliquid fugit. Voluptate harum accusantium rerum
          ullam modi blanditiis vitae, laborum ea tempore,
          dolore voluptas. Earum pariatur, similique
          corrupti id officia perferendis. Labore,
          similique. Earum, quas in. At dolorem corrupti
          blanditiis nulla deserunt laborum! Corrupti
          delectus aspernatur nihil nulla obcaecati ipsam
          porro sequi rem? Quam.
        </Text>
      </Content>
    </Message>
    <Message type="sender">
      <Header>
        <Align>
          <Avatar>
            <Initials>John Doe</Initials>
          </Avatar>
          <Text>
            <strong>John Doe</strong>
          </Text>
        </Align>
      </Header>
      <Content>
        <Text>
          Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Cumque eius quam quas vel voluptas, ullam
          aliquid fugit. Voluptate harum accusantium rerum
          ullam modi blanditiis vitae, laborum ea tempore,
          dolore voluptas. Earum pariatur, similique
          corrupti id officia perferendis. Labore,
          similique. Earum, quas in.
        </Text>
      </Content>
    </Message>
  </MessageThread>
  <MarkdownEditor aria-label="Nachricht" />
  <Button color="accent">Senden</Button>
</Chat>
```