Support Bidirectional Content Editing for RTL Languages

[rabdulwahhab]

Problem

The rich-text editor assumes left-to-right presentation, which makes right-to-left languages (e.g. Arabic, Farsi, Urdu, etc.) difficult to write and review. Mixed-direction content can render with incorrect alignment, misplaced list markers and quote borders, and hard-to-read inline code. This is a meaningful usability and accessibility gap for RTL-language users and limits who can comfortably use PagesCMS. Supporting bidirectional editing makes the product meaningfully more inclusive without changing how content is stored!

Solution

Resolve text direction automatically within the editor while keeping stored Markdown unchanged.

• Detect the first strong directional character and apply automatic direction to semantic text blocks, blockquotes, list items, and table cells through presentation-only ProseMirror decorations.
• Keep code blocks LTR and isolate inline code so technical content remains readable inside RTL text.
• Replace physical left and right side editor styles with logical start and end side properties so lists, quotes, and tables adapt correctly to both LTR and RTL content.
• Keep direction metadata out of the stored Markdown and HTML.
• Let empty and direction-neutral blocks inherit the surrounding document direction, and use logical placeholder alignment so editing starts correctly in both LTR and RTL interfaces.

Testing

Tested locally with side-by-side before and after versions of the editor using mixed Arabic and English Markdown (screenshots below). Verified headings, paragraphs, inline code, blockquotes, lists, tables, and fenced code blocks; each block resolved to the correct direction, code remained left-to-right, and Markdown round-tripped without injected direction attributes or HTML. The lint, TypeScript, and production build checks also pass.

Notes

• Future editor CSS should prefer logical start and end properties, such as margin-inline, padding-inline, and border-inline, instead of physical left and right properties. This preserves correct layout behavior for both LTR and RTL content.
• I can also submit a PR highlighting this feature on the official website repo

Screenshots

Before

After

---

I really like PagesCMS and think that RTL editing support could help PagesCMS reach more users and stand out amongst other CMS editors that don't have RTL support.

Thanks!