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.GitHub

Playground

Verwende <MarkdownEditor />, um einen MarkdownEditor darzustellen.

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.

Character Count

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

0/100 characters

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.

Manuell

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

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.

Kombiniere mit ...

React Hook Form

Weitere Details zur Formularlogik und -validierung sind in der Component Form (React Hook Form) zu finden.

Components