## Markdown Editor (S—199)

A Write/Preview markdown box with a format toolbar, keyboard shortcuts, list continuation and a live word count.

- URL: https://sundaeui.dev/components/markdown-editor
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/markdown-editor.json`
- Tags: preview, editor, textarea, comment, toolbar, markdown

Toolbar buttons and ⌘B / ⌘I / ⌘K wrap the selection in markdown. Pressing Enter inside a list continues it; Enter on an empty item ends it.
Preview renders headings, bold, italic, code, links and lists with a tiny built-in parser, no dependency.

### Usage

```tsx
import { MarkdownEditor } from '@/components/sundae/markdown-editor'

<MarkdownEditor />
```

### Props

- `value / defaultValue` (`string`): Markdown text.
- `onValueChange` (`(v: string) => void`): Called on change.
- `rows` (`number`, default `7`): Visible rows.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Comments, issue descriptions, notes, READMEs.

### When not to use

- Non-technical audiences: offer a rich-text editor.

### Accessibility

- Write and Preview are tabs; the toolbar is a labelled toolbar of buttons with their shortcuts in the label.
- Preview is a region with real headings and lists.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ⌘/Ctrl + B: Bold
- ⌘/Ctrl + I: Italic
- ⌘/Ctrl + K: Link
- Enter in a list: Continue the list