On this page
Overview
Show code, WriteNote.tsx
MarkdownEditor: a toolbar, and a preview of the text.
Show code, EditDescription.tsx
Variants
Editor sizing
A MarkdownEditor keeps its height for a long document, or grows with its text for a short one.
- Fixed height
A long document: the source keeps its height. The default.
- Grows with its text
A short description.
Toolbar
The toolbar holds the actions the text needs, as RichText's does, and can offer a link picker of the application's own.
Show code, LinkPicker.tsx
Anatomy
Editor
Tabs
Toolbar
Source
Description
Show code, MarkdownEditorAnatomy.tsx
Behaviour
What it renders
Common Markdown with tables, strikethrough, task lists, automatic links and footnotes.
- Raw HTML is ignored, except keys, which render as Kbd.
Show code, ProjectNote.tsx
Links
Links can open the application's own way, such as in a panel, while clicks with a modifier key stay the browser's.
Show code, OpenInPanel.tsx
Your own elements
The application can change how an element renders, here a quote as an Alert, and extend what the Markdown can hold.
Show code, CustomElements.tsx
Rules
Write the source so that every reader gets the whole document.
Use it when
- Content written in Markdown, such as a saved note or a document
- Writing formatted prose, with a toolbar and a previewMarkdownEditor
Content
Give images alternative text in the source.
Accessibility
On Apple keyboards, Cmd replaces Ctrl.
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves through links, tables, tabs, toolbar and source. |
| ←, → | Moves between tabs, or between toolbar actions. |
| Ctrl+B, I, K | Bold, italic or a link, in the source. |
| Ctrl+Z | Undoes. |
| Ctrl+Shift+Z, Ctrl+Y | Redoes. |