Markdown shortcuts

Type Markdown and it converts in place: # becomes a heading, - a list, **bold** bold text. There is no toolbar.

Installation

This pattern is built from files in @intentui/editor. Install the editor, then copy the code above into a component of your own.

npx shadcn@latest add @intentui/editor

What's included

PieceWhy it is here
RichTextExtensionHeadings and quotes. Every pattern needs it.
ListExtensionBulleted and numbered lists. Without it the list shortcuts do nothing useful.
CheckListExtensionCheck lists.
LinkExtensionLinks created with [text](url).
CodeExtensionFenced code blocks created with three backticks.
HorizontalRuleExtensionDividers created with ---.
registerMarkdownShortcutsCalled in register. It listens for typing and applies the transformers. Remove it and nothing converts.
TRANSFORMERSThe list of syntaxes to recognize. Remove an entry to disable that syntax.

Each transformer needs the extension that provides its node. If you remove an extension, remove the matching transformer too.

Shortcuts

Type the syntax, then a space where one is shown.

TypeResult
# to ###### Heading 1 to 6
> Quote
- , * or + Bulleted list
1. Numbered list
[ ] or [x] Unchecked or checked item
--- , *** or ___ Divider
Three backticks and a spaceCode block
**text** or __text__ Bold
*text* or _text_ Italic
***text*** Bold and italic
~~text~~ Strikethrough
==text== Highlight
`code`Inline code
[text](url) Link

Inline formats convert when you type the closing mark and the character after it.

Choose the syntaxes

TRANSFORMERS is a plain array. Keep only what you need.

const TRANSFORMERS: Transformer[] = [
  ...ELEMENT_TRANSFORMERS,
  ...TEXT_FORMAT_TRANSFORMERS,
];

Drop HR, CHECK_LIST or the multiline and text match groups together with their extensions.

The full editor also registers table, image and emoji transformers. They are not part of this pattern, see Full editor.