Rich Editor
InputTiptap-based WYSIWYG editor with full toolbar, bubble menu, slash commands, tables, and markdown shortcuts.
Rich EditorInput · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import RichEditor from @otfdashkit/ui.
Code
// Rich Editor — Tiptap-based WYSIWYG editor with full toolbar, bubble menu, slash commands, tables, and markdown shortcuts.
//
// Install:
// bun add @otfdashkit/ui
import { RichEditor } from '@otfdashkit/ui'
export function Example() {
return (
<RichEditor>
{/* your content */}
</RichEditor>
)
}Props
Props declared in the RichEditor source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | (readonly string[] & string) | Initial uncontrolled HTML content. | |
| editable | boolean | true | Default true. When false the toolbar is visually disabled and content read-only. |
| maxLength | number | Optional character cap. Shows a counter and clamps content via onUpdate. | |
| onChange | (html: string) => void | Fired (debounced 100ms) when the editor's HTML changes. | |
| placeholder | string | 'Write something...' | Placeholder shown when the document is empty. |
| toolbar | 'full' | 'minimal' | 'bubble' | 'full' | Toolbar layout. Default 'full'. |
| value | string | Controlled HTML content. |