Editors

TextEditor

Block-based rich text editor (Notion-style) with 14 block types, slash-menu insertion, and drag-and-drop reordering.

Example

⠿

Props

Prop	Type	Default	Description
`value`	`Block[]`	[]	The current block array. Uncontrolled internally (updates flow through onChange), but value seeds the initial content.
`placeholder`	`string`	"Type / for blocks..."	Aria-label for the editor root and the empty-paragraph placeholder text.

value

Block[]

Default: []

The current block array. Uncontrolled internally (updates flow through onChange), but value seeds the initial content.

placeholder

string

Default: "Type / for blocks..."

Aria-label for the editor root and the empty-paragraph placeholder text.

Prop	Type	Default	Description
`allowedBlocks`	`BlockType[]`	all 14 types	Restricts the slash menu and the drag-handle's convert-cycle button to this list.
`readOnly`	`boolean`	false	Disables every block's contentEditable region and hides the drag handle/per-block controls.
`autoFocus`	`boolean`	false	Focuses the first block on mount.

allowedBlocks

BlockType[]

Default: all 14 types

Restricts the slash menu and the drag-handle's convert-cycle button to this list.

readOnly

boolean

Default: false

Disables every block's contentEditable region and hides the drag handle/per-block controls.

autoFocus

boolean

Default: false

Focuses the first block on mount.

Prop	Type	Default	Description
`onChange`	`(blocks: Block[]) => void`	—	Called with the full block array whenever content changes.
`onImageUpload`	`(file: File) => Promise<string>`	—	Delegating upload callback for ImageBlock's drop zone — oks-ui doesn't own file storage, it just calls this and displays the returned URL. Without it, ImageBlock accepts a pasted URL only.

onChange

(blocks: Block[]) => void

Default: —

Called with the full block array whenever content changes.

onImageUpload

(file: File) => Promise<string>

Default: —

Delegating upload callback for ImageBlock's drop zone — oks-ui doesn't own file storage, it just calls this and displays the returned URL. Without it, ImageBlock accepts a pasted URL only.

Prop	Type	Default	Description
`className`	`string`	—	Class applied to the root element.

className

string

Default: —

Class applied to the root element.