Skip to content

Conversation

remcohaszing
Copy link
Contributor

This adds RTL support to Monaco editor. A line can be marked as RTL using decorations. Decorations can now specify a text direction. For every line, the decorations on that line are counted which specify the text direction. If there are more RTL decorations than there are RTL decorations, the line is considered RTL.

If a line is RTL, the content is aligned to the right side of the screen, taking the scrollbar into account.

If text content matches the text direction, pressing a left or right arrow key, moves the cursor into the same direction. If the content is of the inverse direction, the cursor is moved into the opposite direction.

The Home key moves the cursor to the start of the line. In case of RTL, this is the right.

The End key moves the cursor to the end of the line. In case of RTL, this is the left.

These cursor movements also work for multi selections.

Both RTL and LTR work with or without text wrapping, even with the advanced text wrapping strategy.

This adds RTL support to Monaco editor. A line can be marked as RTL
using decorations. Decorations can now specify a text direction. For
every line, the decorations on that line are counted which specify the
text direction. If there are more RTL decorations than there are RTL
decorations, the line is considered RTL.

If a line is RTL, the content is aligned to the right side of the
screen, taking the scrollbar into account.

If text content matches the text direction, pressing a left or right
arrow key, moves the cursor into the same direction. If the content is
of the inverse direction, the cursor is moved into the opposite
direction.

The `Home` key moves the cursor to the start of the line. In case of
RTL, this is the right.

The `End` key moves the cursor to the end of the line. In case of RTL,
this is the left.

These cursor movements also work for multi selections.

Both RTL and LTR work with or without text wrapping, even with the
advanced text wrapping strategy.
Dishaino

This comment was marked as spam.

@remcohaszing
Copy link
Contributor Author

I forgot to mention a couple of details.

  1. Adding a decoration with textDirection, does not trigger a rerender yet. For my testing I used a decoration with an additional inlineClassName.
  2. This change only affects Monaco editor yet. There should be an option for VSCode as well.
  3. I’ve also thought about detecting RTL content. I don’t think it can be done. The meaning of a line in plain text really depends on context, e.g. the programming language. Also people have different preferences. I think this is best left to third party extensions.
  4. This PR fixes a number of open issues.

I see you’re making some changes to my PR. Let me know if you need more info or I can help otherwise.

Copy link
Member

@alexdima alexdima left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@alexdima alexdima enabled auto-merge (squash) July 14, 2025 19:57
@vs-code-engineering vs-code-engineering bot added this to the July 2025 milestone Jul 14, 2025
@alexdima alexdima merged commit 4846a42 into microsoft:main Jul 14, 2025
27 of 28 checks passed
@remcohaszing remcohaszing deleted the rtl branch July 15, 2025 08:26
@vs-code-engineering vs-code-engineering bot locked and limited conversation to collaborators Aug 28, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants