Page MenuHomePhabricator

AceEditor in with RTL interface - text selection is broken
Closed, ResolvedPublic0 Story Points

Description

AceEditor is broken for mix of RTL and LTR content. Since it is totally broken users in RTL wikis have to use external editor to edit content that appear in AceEditor.
In particular:

  1. JS/CSS/ Module (Lua) - pages with content type of js/cs/module have AceEditor by default [note: there is a fallback button to get regular textarea]
  2. Graph Insert Dialog [note: there is no fallback]

Steps to reproduce (in Firefox):

  1. Enter to some random page in RTL wiki (important - use RTL interface) and enter to VE edit:

https://he.wikipedia.org/wiki/Special:Random?veaction=edit&uselang=he

  1. Insert=> Map - will open a map insert dialog
  2. Add a point on the map
  3. Try to change the coordinate in the aceeditor - note the text selection goes crazy

Notes:

  1. I couldn't reproduce it in Chromium, but @Mikey641 reported a similar issue with AceEditor of Module NS
  2. It seems that the JSON is already defined as LTR, so I'm not sure what wrongs here

Event Timeline

eranroz created this task.Jul 26 2016, 8:32 PM
Restricted Application added a project: I18n. · View Herald TranscriptJul 26 2016, 8:32 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

PS in general aceeditor sucks when you mix LTR and RTL (in both Chrome and Firefox). This is going to be a common scenario - as people will add Hebrew/Arabic titles for features.

So it would be nice to be able to toggle back to simple textarea instead of aceeditor similar to option in Lua/JS editing

Esanders added a comment.EditedJul 27 2016, 10:12 AM

Why has Kartographer been deployed to a Wikipedia?! Someone has jumped the gun here, there are three open blockers on T138057

K4-713 added a subscriber: K4-713.Jul 28 2016, 8:22 PM
Yurik added a project: Maps.Sep 4 2016, 4:19 AM
Restricted Application added a project: Discovery. · View Herald TranscriptSep 4 2016, 4:19 AM

I cannot reproduce following the provided steps in Firefox 49. Fixed?

@Nemo_bis in the above printscreen, place the cursor after the 573 and then press 9.
Expectation: ...5739...
Actual: 9 is will be somewhere else...

@Nemo_bis in the above printscreen, place the cursor after the 573 and then press 9.
Expectation: ...5739...
Actual: 9 is will be somewhere else...

Thanks for clarifying. I've tried, but works as expected for me.

  • This happen in Ubuntu, but I couldn't reproduce it on Android.
  • Validated with no browser plugins (firefox -safe-mode), as anonymous (no gadgets/scripts), and different settings of bidi.edit.caret_movement_style
Yurik removed a project: Maps.Dec 15 2016, 4:40 AM
eranroz renamed this task from AceEditor in Graph Insert Dialog with RTL interface - text selection is broken to AceEditor in with RTL interface - text selection is broken.Feb 5 2017, 9:28 PM
eranroz updated the task description. (Show Details)
eranroz added a subscriber: Mikey641.

@TheDJ thanks for the tip.

Seems that the issue is due to .ve-ui-mwAceEditorWidget .ace_editor css rule which assign font-family: monospace, "Courier"; - when removing the monospace (with Developer tools) the selection behaves OK and the issue is fixed. The issue doesn't appear in the upstream Ace (uses different font family)

Jdforrester-WMF set the point value for this task to 0.Feb 9 2017, 6:14 PM
Ebraminio added a subscriber: Ebraminio.

After all these years RTL editing issue of Ace is fixed https://github.com/ajaxorg/ace/pull/3137 when that is released as a stable version, the fix will be very beneficial for RTL wikis to have but there are still some issues with languages that don't have monospaced fonts for editing (e.g. Indic languages) which is also considered for fix but I guess that would also take some time.

(cross posting with T50826)

TheDJ added a comment.Jul 4 2017, 9:59 AM

Testable with:

https://rawgit.com/ajaxorg/ace/255c3a1793276b77eeba90e40df99c3ccc941780/kitchen-sink.html

RTL content can be retrieved from:
https://he.wikipedia.org/w/index.php?title=מדיה_ויקי:Common.js&action=edit

Still seems to have a few issues though.. at least for me on Mac with Safari and Chrome. But good to see that some progress is being made.

Please check if you set the editor font to "Courier New" will you get a better experience as I do here? Thanks.

TheDJ added a comment.Aug 8 2017, 5:25 AM

Right, so it's 'better', unless you have a browser with glyph replacement, like Safari or Chrome on a Mac. (If I understand correctly, it will fallback to the first font with the glyph, even if that is not monotype)

eranroz closed this task as Resolved.Sep 24 2017, 8:59 PM
eranroz assigned this task to Paladox.
eranroz added a subscriber: Paladox.

blaming @Paladox for fixing it here: https://gerrit.wikimedia.org/r/#/c/304044/
thanks :)

Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptSep 24 2017, 8:59 PM

Change 380438 had a related patch set uploaded (by Ebrahim; owner: Ebrahim):
[mediawiki/extensions/CodeEditor@master] Update ace to 2017-09-20

https://gerrit.wikimedia.org/r/380438

Ebraminio reopened this task as Open.Sep 25 2017, 6:44 AM
Ebraminio removed Paladox as the assignee of this task.

@eranroz that is not syncing it to a version after 2017-07-02 but https://gerrit.wikimedia.org/r/380438 does.

Ebraminio closed this task as Resolved.Sep 25 2017, 7:08 AM
Ebraminio assigned this task to Paladox.

I was wrong, I think date conversion misled me.

Change 380438 abandoned by Ebrahim:
Update ace to 2017-09-20

Reason:
Not needed it seems.

https://gerrit.wikimedia.org/r/380438