Forms

MarkdownEditor

Write Markdown with a toolbar and shortcuts, preview it, and render it safely anywhere.

Ant Design: Mentions / third-party editors

import { MarkdownEditor, Markdown } from '@alea/ui';

Examples

Toolbar, ⌘B ⌘I ⌘K shortcuts, a countdown and a safe preview.

Release notesMarkdown works: **bold**, _italic_, lists and links.

Write

Preview

399 characters left

Markdown builds React elements, so HTML and javascript: links are ignored.

A normal link works, a script link) does not.

<img src=x onerror=alert(1)> stays text.

npm i @alea/ui

Write Markdown with a formatting toolbar and shortcuts, and preview it (Mantine RichTextEditor, GitHub comment box).

Prop	Type	Default	Description
`label`required	`ReactNode`	-	The visible label.
`className`	`string`	-	Extra class names for the root element.
`defaultValue`	`string`	`''`	The Markdown to start with.
`description`	`ReactNode`	-	Help text shown under the field.
`maxLength`	`number`	-	Shows a character count; with maxLength it counts down.
`onChange`	`((v: string) => void)`	-	Called with the Markdown on every change.
`placeholder`	`string`	`'Write in Markdown…'`	Shown while there is no value.
`rows`	`number`	`8`	Rows of the text area. Default 8.
`value`	`string`	-	The Markdown (controlled).

Prop	Type	Default	Description
`source`required	`string`	-	The Markdown text.
`className`	`string`	-	Extra class names.

A labelled text area; toolbar buttons name their shortcuts.
Markdown is rendered as React elements, never as an HTML string, so pasted HTML or javascript: links do nothing.

Don't