microsoft / microsoft/monaco-editor
[Bug] Support RTL layout in editor container without breaking rendering
Nobody has claimed this yet.
- 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
- Create a container
- Set dir="rtl" on the container element before or after creating the editor
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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