Rich Text Editor
NewA powerful WYSIWYG editor built with Tiptap. Includes text formatting, headings, lists, and full RTL support for Arabic content.
Preview
Usage
Reacttsx
Features
Text Formatting
Bold, italic, underline with keyboard shortcuts (Ctrl+B, Ctrl+I, Ctrl+U)
Headings
Three heading levels (H1, H2, H3) for content structure
Lists
Bullet lists and numbered lists with RTL support
Text Alignment
Direction-aware alignment (left, center, right)
Blockquotes & Code
Quote blocks and syntax-highlighted code blocks
History
Undo/Redo with keyboard shortcuts (Ctrl+Z, Ctrl+Y)
Examples
With Initial Content
tsx
Arabic Content with RTL
tsx
Read Only Mode
tsx
Custom Height
tsx
Keyboard Shortcuts
BoldCtrl+B
ItalicCtrl+I
UnderlineCtrl+U
UndoCtrl+Z
RedoCtrl+Y
Code BlockCtrl+Alt+C
RTL Support
Automatic Direction Detection
The editor automatically adapts to the current text direction
- •Text direction automatically follows the global direction setting
- •Alignment buttons adapt to RTL (left becomes right, right becomes left)
- •Lists and blockquotes are properly indented in RTL mode
- •Default text alignment matches the current direction
- •Placeholder text is positioned correctly for RTL
Props
| Name | Type | Default | Description |
|---|---|---|---|
content | string | — | The HTML content of the editor |
onChange | (content: string) => void | — | Callback fired when the content changes |
placeholder | string | — | Placeholder text shown when editor is empty |
className | string | — | Additional CSS classes |
editable | boolean | — | Whether the editor is editable |
minHeight | string | — | Minimum height of the editor |
Accessibility
- ✓Full keyboard navigation support
- ✓Toolbar buttons have proper focus management
- ✓All buttons include descriptive titles for screen readers
- ✓Keyboard shortcuts follow standard conventions
- ✓Active states are clearly indicated
Use Cases
Blog post and article editing
Email composition with formatting
Documentation and wiki content
Comment and feedback forms with formatting
Best Practices
Do
- ✓ Provide a clear toolbar with essential formatting options
- ✓ Support keyboard shortcuts for common operations
- ✓ Handle paste from external sources cleanly
Don't
- ✗ Don't include too many toolbar options — show essentials
- ✗ Don't allow arbitrary HTML injection
- ✗ Don't lose content on accidental navigation