What is the problem?
Bug found by @Bhsd in T357482#10112821.
While using the 2017 Source Editor with syntax highlighting (CodeMirror) enabled, if I click "View as right-to-left" (or "View as left-to-right" in an RTL wiki) the text can get misaligned.
It is particularly noticeable when you start typing. What seems to happen is when you first switch from LTR to RTL the div.ve-ce-documentNode style attribute is margin-left: 0px; margin-right: 22px. But, when you start typing (at least in an LTR language) it changes to margin-left: 22px; margin-right: 0px.
Steps to reproduce problem
- https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Conflict-title-0.745086650833999-Iñtërnâtiônàlizætiøn&veaction=editsource
- Open the Page options menu (burger) and click "View as right-to-left" (or press ctrl shift x)
- Type something
Expected behaviour: The text you type is aligned with the current cursor position.
Observed behaviour: The text appears in a different place.
Another way:
- https://ar.wikipedia.beta.wmflabs.org/w/index.php?title=النيجر&veaction=editsource
- Switch to LTR
- Open the devtools, go to the JS Console and run $(".ve-ce-documentNode-codeEditor-webkit-hide").css('-webkit-text-fill-color', 'black')
Expected behaviour: No notable change.
Observed behaviour: Text becomes blurred (see the last screenshot below).
Environment
Browser: Firefox 115, Chromium 120, Chrome 128.
Wiki(s): https://en.wikipedia.beta.wmflabs.org MediaWiki 1.43.0-alpha (910d89a) 06:57, 6 September 2024.
Editor: VisualEditor – (cefa56e) 10:21, 5 September 2024. CodeMirror 6.0.0 (b8cf07f) 07:23, 5 September 2024.
Screenshots
Example of this article before switching to LTR:
After switching to LTR:
