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.

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.

0/100 characters

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

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

Resizeable

Verwende die Property autoResizeMaxRows, um eine maximale Höhe festzulegen, bis zu der sich der MarkdownEditor automatisch an seinen Inhalt anpasst.

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

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

Kombiniere mit ...

React Hook Form

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

import {
  Label,
  MarkdownEditor,
  Button,
  Section,
  ActionGroup,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Field,
  Form,
} 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>
          <Button type="submit" color="accent">
            Senden
          </Button>
        </ActionGroup>
      </Form>
    </Section>
  );
}

Chat

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>
            <b>Max Mustermann</b>
          </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>
            <b>John Doe</b>
          </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>

Components