microsoft / microsoft/monaco-editor

[Bug] Support RTL layout in editor container without breaking rendering

Open
#5,291 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature-request
Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Description

The Monaco Editor is widely used in applications that serve a global audience, including users who primarily work in right-to-left (RTL) languages such as Arabic, Hebrew, Persian, and Urdu.

As we work toward building an editing experience for users worldwide, we discovered that the editor fails to render correctly when the container uses an RTL layout. Specifically, when dir="rtl" is applied to the editor container, the Monaco Editor UI appears broken.

Steps to Reproduce

  1. Create a container
  2. Set dir="rtl" on the container element before or after creating the editor
  3. Create a Monaco Editor instance inside that container
var container = document.getElementById('editor');
    container.dir = 'rtl';
    monaco.editor.create(container, {
      value: 'some test \n some test2',
      theme: 'vs',
      lineNumbers : 'on',
      automaticLayout: true
    });

Expected Behavior
The editor should render its content normally (or at minimum, degrade gracefully with a warning), even when the container has dir="rtl".

Actual Behavior
The editor appears completely empty — no text, no line numbers, no cursor.

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with dir="rtl" set before and after monaco.editor.create, using the provided container and editor options. Inspect the editor’s browser rendering behavior under RTL and verify the editor displays text, line numbers, and the cursor without breaking in either setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, internationalization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.