Text direction & RTL support

Tiptap includes built-in support for right-to-left (RTL) languages and bidirectional text. This example demonstrates how to set global text direction and control direction on individual nodes.

Features

• Global direction control: Set the default text direction for all content (ltr, rtl, or auto)
• Per-node direction: Override direction for specific nodes using commands
• Bidirectional text: Properly render mixed LTR and RTL content
• Multiple languages: Support for English, Arabic, Hebrew, and other languages

The auto setting is particularly useful for bidirectional content, as it automatically detects the text direction based on the first strong directional character in each node.

How to use

Set global direction

Configure the editor with a default text direction:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [StarterKit],
  textDirection: 'auto', // or 'ltr', 'rtl'
})

Control direction with commands

Override direction for specific content:

// Set RTL direction on selected text
editor.commands.setTextDirection('rtl')

// Set LTR direction on selected text
editor.commands.setTextDirection('ltr')

// Use automatic detection
editor.commands.setTextDirection('auto')

// Remove direction override
editor.commands.unsetTextDirection()

Use with frameworks

The text direction can be changed dynamically by recreating the editor with a new textDirection option. This is demonstrated in the example above with React's useEditor hook.