MarkdownEditor
markdown-editorEdits Markdown through a WYSIWYG TipTap surface with Markdown input and output.
Usage
Basic usage
Uncontrolled writing method, use defaultValue to fill in the initial markdown, with its own toolbar.
<MarkdownEditor defaultValue="# Title\n\nText Paragraph" className="w-[32rem]" />Placeholder + line height
placeholder prompts empty state, minRows controls the minimum height of the content area.
<MarkdownEditor placeholder="Write something..." minRows={3} className="w-[32rem]" />In the form (Field)
Works with Field, invalid triggers the danger shell, and name bridges the native form.
<Field label="Order details (required)" error="Details cannot be empty" className="w-[32rem]">
<MarkdownEditor name="detail" invalid placeholder="Required" />
</Field>Disabled
disabled Hide the toolbar and lock editing, and reduce the overall transparency.
<MarkdownEditor disabled defaultValue="# Read-only content" className="w-[32rem]" />When to use
Use MarkdownEditor to edit long-form content such as order notes, articles, or formatted descriptions while storing the result as a Markdown string. Set name to bridge the value into a native form or Field. Use Input for short plain text, or Mentions when the only advanced requirement is @-mentions.
Import
import { MarkdownEditor } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled markdown string |
| defaultValue | string | — | Initial value when uncontrolled. |
| name | string | — | Name of the hidden input used to bridge native forms and Field. |
| placeholder | string | — | Placeholder shown when the editor is empty. |
| invalid | boolean | false | Applies the danger style; an enclosing Field may also drive this through data-invalid. |
| disabled | boolean | false | Disables editing. |
| minRows | number | 6 | Content area minimum height (rows) |
| className | string | — | Additional class name for the editor shell. |
| aria-label | string | ConfigProvider locale | Accessible name for the editor. An explicit value takes precedence over the locale. |
Events
| Event | Type | Description |
|---|---|---|
| onChange | (markdown: string) => void | Content change callback, parameter is markdown string |
Localization
The editor and formatting-toolbar accessible names, every formatting action,
and the link URL prompt follow the nearest ConfigProvider locale. An explicitaria-label takes precedence. A legacy custom locale withoutcomponents.markdownEditor keeps the original Chinese compatibility labels.
Example
// Controlled
const [md, setMd] = useState("# Title");
<MarkdownEditor value={md} onChange={setMd} />
// Field bridge: the hidden input carries form values and validation state
<Field label="Order details (required)" error="Details cannot be empty" className="w-[32rem]">
<MarkdownEditor name="detail" invalid placeholder="Required" />
</Field>Usage guidelines
- Values enter and leave as Markdown strings, not TipTap document JSON. Do not pass TipTap's internal rich-text structure as
value. - Inside Field, either pass
invaliddirectly or let the enclosing Field drivedata-invalid; setting both is unnecessary.
Related
SecretField · Combobox · Listbox · Mentions · InputOTP · Rating
Playground
<MarkdownEditor placeholder="Enter markdown..." minRows={6} />