Review CodeMirror tickets about cursor position/text selections being misaligned
Closed, ResolvedPublic3 Estimated Story Points
Actions

Description

There is a long-known but rather random issue with the CodeMirror integration in VisualEditor. It happens only there because the way the two extensions interact is a little special. Roughly speaking, VisualEditor sits on top of CodeMirror, but is set to opacity: 0. The text cursor and text selections are done in the upper VisualEditor layer.

Sometimes these layers don't align:

Sometimes it's a special character in a line that's rendered different in the two layers. In cases like this the cursor is misplaced one or more characters to the left/right.
Apparently there are also situations where the cursor is misaligned an entire line up/down. This might be related to extremely long articles, or specific skins.

So what's this task about? Review all existing tickets here on Phabricator and check if any of them is related to what we, the WMDE-TechWish team, did. Especially make sure that the line number gutter we introduced didn't made any of the existing issues worse.

Discussed in story time on 2021-08-25, see https://docs.google.com/document/d/1Fj5ljAEtb_bEUeK-hMb3KzVzGohopp9WCakVnTar5Tc/edit#heading=h.4coyz4cwoadg.

Related Objects

Mentioned Here: T252965: The cursor of New wikitext mode moves wrongly in Chinese Wikipedia.
T184857: Problems with editing huge pages
T188839: When editing source, sometimes characters get put in strange places if you have too many characters on a line (due to space collapsing)
T198276: VE Wikitext editor cursor is misplaced on Minerva desktop when syntax highlighting enabled
T212680: Cursor off by several lines where the text is edited in new wikitext mode
T238678: Syntax highlighting moves cursor out from the actual writing place when using New Wikitext Mode at euwiki
T250468: Korean character input unexpectedly moves lines or last letter disappears
T274814: In VisualEditor clicking white space to the right of the end of a paragraph does not place cursor correctly
T275439: UI: JS code editor has text cursor offset
T288161: Enable CodeMirror's Syntax Highlighting on English Wikipedia by default

Event Timeline

thiemowmde created this task.Sep 2 2021, 1:17 PM

Restricted Application added a project: Community-Tech. · View Herald TranscriptSep 2 2021, 1:17 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Apparently there are also situations where the cursor is misaligned an entire line up/down. This might be related to extremely long articles, or specific skins.

That's because one line break happens at a slightly different point. These bugs tend to be very difficult, because text measuring is delicate as can be. You'll basically need the exact same rendering of every single glyph and the exact same CSS and dimensions for all surfaces at all times and the measuring that CodeMirror does needs to exactly match what the OS measures. Any potential subpixel of misalignment can throw something off, also think of client side extensions being able to interfere, or things like client side spelling checking perhaps..
Another candidate could be differing font-family fallbacks, as that might influence glyph replacement if a specific glyph is not in the primary font.

Uh, thanks a lot for the hint. That's super helpful.

I still wonder why that layering is even necessary. Why not just let CodeMirror do it's job? Is it because VisualEditor tries to keep track of all wikitext changes in an actual document model in the background? Or something with undo?

Lena_WMDE moved this task from Backlog to Ready for pickup on the WMDE-Templates-FocusArea board.Sep 6 2021, 2:22 PM

thiemowmde moved this task from Ready for pickup to In sprint on the WMDE-Templates-FocusArea board.Sep 7 2021, 2:29 PM

thiemowmde added a project: WMDE-TechWish-Sprint-2021-09-01.

thiemowmde set the point value for this task to 3.

Things to search for:

Recently added/changed MediaWiki-extensions-CodeMirror tickets.
Users might not know where a bug is and report under VisualEditor, VisualEditor-MediaWiki-2017WikitextEditor, MediaWiki-Page-editing, or similar.
Search for stuff like "cursor position", just "cursor", "text selection" and such. Note you can use title:… to search only in ticket titles. Or core:… to search in titles and descriptions, but not comments (Phabricator manual).

MusikAnimal removed a project: Community-Tech.Sep 9 2021, 12:21 AM

I did some rather broad searches for "cursor", "selection", and "misplaced". I limited myself to recently updated ticket, as older ones can't be about changes we did. Some notable ones I found:

T184857: Problems with editing huge pages comes with a nice video demoing a series of issues, including heavily misplaced text selection. But to old. Unrelated.
T188839: When editing source, sometimes characters get put in strange places if you have too many characters on a line (due to space collapsing) is about the cursor being misplaced horizontally. But this is from 2018. This can't be us.
T198276: VE Wikitext editor cursor is misplaced on Minerva desktop when syntax highlighting enabled is another one about the cursor being shifted down. But to old.
T212680: Cursor off by several lines where the text is edited in new wikitext mode is about the cursor being in the wrong line. This can't be us. It's also reported long before we touched the code.
T238678: Syntax highlighting moves cursor out from the actual writing place when using New Wikitext Mode at euwiki is another displacement bug, but as old and actually fixed.
T250468: Korean character input unexpectedly moves lines or last letter disappears is specific to Korean. Also to old.
T252965: The cursor of New wikitext mode moves wrongly in Chinese Wikipedia. is from May 2020, long before line numbering was a thing. The screenshots don't show line numbers.
T274814: In VisualEditor clicking white space to the right of the end of a paragraph does not place cursor correctly is from February 2021. Pretty sure it's unrelated.
T275439: UI: JS code editor has text cursor offset sounds a lot like what we are looking for. But it's from February 2021 and not about CodeMirror but the CodeEditor extension, as far as I can see.
T288161: Enable CodeMirror's Syntax Highlighting on English Wikipedia by default is especially relevant. But there is nothing related in the comments (yet).

That's what I could find. Did I miss something?

Looking through these bugs, +1 that no additional comments have come in since we deployed line numbering.

In T290251#7342159, @thiemowmde wrote:

That's what I could find. Did I miss something?

I meet this bug and I just commented in T252965 (because I have thought this was this issue, but I’m not that task’s author).

In T290251#7336767, @thiemowmde wrote:

Users might not know where a bug is and report under VisualEditor, VisualEditor-MediaWiki-2017WikitextEditor, MediaWiki-Page-editing, or similar.

So, shouldn’t this task tagged with VisualEditor-MediaWiki-2017WikitextEditor to make it easier to find?

@Pols12, thanks a lot for the hint. I added the ticket to the list above. Unfortunately it's one of these older bugs our team is currently unable to tackle.

Maintenance_bot added a project: VisualEditor.Sep 13 2021, 6:45 AM

thiemowmde closed this task as Resolved.Sep 14 2021, 8:09 AM

thiemowmde moved this task from Demo to Done on the WMDE-TechWish-Sprint-2021-09-01 board.

Izno moved this task from Backlog to Done on the MediaWiki-extensions-CodeMirror board.Oct 11 2021, 10:04 PM

Review CodeMirror tickets about cursor position/text selections being misalignedClosed, ResolvedPublic3 Estimated Story PointsActions

Description

Related Objects

Event Timeline

Review CodeMirror tickets about cursor position/text selections being misaligned
Closed, ResolvedPublic3 Estimated Story Points
Actions