Skip to content

feat(compose): auto-detect RTL text direction while writing#469

Open
shukiv wants to merge 1 commit into
bulwarkmail:mainfrom
shukiv:feat/auto-rtl-direction
Open

feat(compose): auto-detect RTL text direction while writing#469
shukiv wants to merge 1 commit into
bulwarkmail:mainfrom
shukiv:feat/auto-rtl-direction

Conversation

@shukiv

@shukiv shukiv commented Jun 22, 2026

Copy link
Copy Markdown
Contributor

What

The compose surface now auto-detects text direction: typing Hebrew, Arabic,
or any RTL script flips that paragraph to right-to-left, per paragraph, while
LTR text stays left-to-right. Mixed messages (some RTL lines, some LTR) each
align correctly.

How

Pure dir="auto" — the browser's built-in bidi detection picks direction from
each block's first strong character. No new dependency.

  • rich-text-editor: the Paragraph and Heading nodes are extended with a
    dir attribute defaulting to auto, so every block renders dir="auto".
    Because serializeEditorContent uses ProseMirror's DOMSerializer, the
    attribute is preserved in the sent HTML — so recipients see the same
    direction, not just the author. The editor root also gets dir="auto".
  • email-composer: dir="auto" on the subject input and the plain-text body
    textarea, so those fields flip too.

Notes

  • Per-block (not whole-editor) detection means a Hebrew paragraph followed by
    an English one each get the right direction.
  • Existing dir on pasted/quoted content is preserved (the attribute parses the
    element's existing dir).
  • Reading view is unaffected: the message body already renders true-to-life in
    its iframe, where the email's own markup controls direction.

Test plan

  • npm run typecheck, npm run build — green
  • Type Hebrew/Arabic in the rich editor → that line flips RTL; English stays LTR
  • Type a Hebrew subject → subject field flips RTL
  • Plain-text mode → RTL detection works in the textarea
  • Send an RTL message → received HTML carries dir="auto" (recipient sees RTL)

Hebrew/Arabic now flip to right-to-left automatically while writing, per
paragraph, using the browser's bidi detection.

- rich-text-editor: extend the Paragraph/Heading nodes with a 'dir' attribute
  defaulting to 'auto', so each block picks its direction from its first strong
  character (mixed LTR/RTL paragraphs each align correctly). The attribute is
  serialized via the ProseMirror DOM serializer, so the sent HTML carries
  dir=auto and recipients see the same direction. Also set dir=auto on the
  editor root.
- email-composer: dir=auto on the subject input and the plain-text body textarea.

No new dependency - pure dir=auto.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant