Skip to main content
Noor UI

Rich Text Editor

New

A 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

NameTypeDefaultDescription
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