Autosize Textarea
Inputs
Source and install need .
pnpm dlx shadcn@latest add @assembli/markdown-editorMarkdown Editor
A Markdown text area with Write and Preview tabs. Toolbar buttons and shortcuts wrap or prefix the selection, toggle off when pressed again and stay on the browser's undo stack. Enter continues lists and quotes and ends them on an empty item, Tab indents list items, and pasting a link over text makes a Markdown link. Preview renders lists, task lists, quotes and code without raw HTML.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
value
string
defaultValue
string
Default
""onValueChange
(value: string) => void
label
React.ReactNode
hint
React.ReactNode
Quiet text to the right of the label, such as "Optional".
description
React.ReactNode
error
React.ReactNode
Replaces the description and marks the field invalid.
minRows
number
Default
5maxRows
number
Default
16Past this the box stops growing and scrolls.
tools
MarkdownTool[][]
Default
GROUPSWhich buttons show, in groups. Shortcuts work either way.
defaultMode
"write" | "preview"
Default
"write"fieldClassName
string
Classes for the field box;
classNamegoes on the root.
| Description | |||
|---|---|---|---|
| value | string | – | |
| defaultValue | string | "" | |
| onValueChange | (value: string) => void | – | |
| label | React.ReactNode | – | |
| hint | React.ReactNode | – | Quiet text to the right of the label, such as "Optional". |
| description | React.ReactNode | – | |
| error | React.ReactNode | – | Replaces the description and marks the field invalid. |
| minRows | number | 5 | |
| maxRows | number | 16 | Past this the box stops growing and scrolls. |
| tools | MarkdownTool[][] | GROUPS | Which buttons show, in groups. Shortcuts work either way. |
| defaultMode | "write" | "preview" | "write" | |
| fieldClassName | string | – | Classes for the field box; |
