MarkdownEditor
markdown-editorMarkdown 编辑器 · WYSIWYG 罩 TipTap + 值进出 markdown 字符串 + 隐藏 input 桥 Field + 标准集工具栏
用法
基础用法
非受控写法，用 defaultValue 灌初始 markdown，自带工具栏。
tsx
<MarkdownEditor defaultValue="# 标题\n\n正文段落" className="w-[32rem]" />占位符 + 行高
placeholder 提示空态，minRows 控制内容区最小高度。
tsx
<MarkdownEditor placeholder="写点什么…" minRows={3} className="w-[32rem]" />表单内（Field）
配 Field 用，invalid 触发 danger 外壳，name 桥接原生表单。
详情不能为空
tsx
<Field label="订单详情（必填）" error="详情不能为空" className="w-[32rem]">
<MarkdownEditor name="detail" invalid placeholder="必填" />
</Field>禁用
disabled 隐藏工具栏并锁定编辑，整体降透明度。
tsx
<MarkdownEditor disabled defaultValue="# 只读内容" className="w-[32rem]" />何时用
需要所见即所得地编辑长文本（订单备注、文章详情、富文本说明）且最终存 markdown 字符串时用。值进出都是 markdown 串，可经 name 桥接原生表单 / Field。纯短文本用普通输入框；只需 @ 提及用 Mentions。
导入
ts
import { MarkdownEditor } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | string | — | 受控 markdown 字符串 |
| defaultValue | string | — | 非受控初值 |
| name | string | — | 桥给原生表单 / Field 的隐藏 input name |
| placeholder | string | "输入 markdown…" | 空内容占位文案 |
| invalid | boolean | false | 校验失败态：外壳变 danger（也可由外层 Field 经 data-invalid 驱动） |
| disabled | boolean | false | 禁用 |
| minRows | number | 6 | 内容区最小高度（行） |
| className | string | — | 透传到外壳 |
| aria-label | string | — | 无障碍标签 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onChange | (markdown: string) => void | 内容变化回调，参数为 markdown 字符串 |
禁忌 / 坑
- 值进出是 markdown 字符串而非 TipTap 文档 JSON；不要把内部富文本结构当 value 传入。
- 放进 Field 校验时，
invalid既可自传、也可由外层 Field 的data-invalid驱动，二选一即可，不必两边都设。
相关
SecretField · Combobox · Listbox · Mentions · InputOTP · Rating
Playground
<MarkdownEditor placeholder="输入 markdown…" minRows={6} />