Marks, headings, lists, quote, and a link control with a popover. Type, select text, press the bold button.
Select a word: a small menu floats above it.
value and onValueChange carry Tiptap JSON. Replace it from outside and the editor follows.
{
"type": "doc",
"content": [
{
"type": "heading",
"attrs": {
"level": 2
},
"content": [
{
"type": "text",
"text": "Drop notes (sample)"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Select some of this text to bring up the "
},
{
"type": "text",
"marks": [
{
"type": "bold"
}
],
"text": "bubble menu"
},
{
"type": "text",
"text": ", or use the toolbar above. Everything here is "
},
{
"type": "text",
"marks": [
{
"type": "italic"
}
],
"text": "sample content"
},
{
"type": "text",
"text": "."
}
]
},
{
"type": "bulletList",
"content": [
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Three colorways, one blank"
}
]
}
]
},
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Ship the first batch on Friday"
}
]
}
]
}
]
}
]
}maxLength is a hard cap. The count warns at 90 percent and stops at the limit.
Disabled is dimmed and inert. Read only keeps the text selectable and drops the toolbar.
Pass commands={[{ id, label, icon, run, isActive }]}: divider, undo and redo sit after the built-ins.
Content, bubble menu, your own footer with three commands, the count and a send button.