Page MenuHomePhabricator

Syntax highlight overlay misalignment with text area in 2017 wikitext editor
Closed, ResolvedPublic

Description

Step to reproduce:
Edit in 2017 wikitext editor mode in Visual Editor with Syntax Highlighting on. The bug is reproducible in all WMF wikis and also in a few non-WMF 1.31 wikis.

Actual result:
The text area is misaligned with the syntax highlight overlay provided by the extension CodeMirror, and the text cursor is not aligned with the actual text when editing.

Expected result:
The text area and cursor line up perfectly.

Cause:
The bug is caused by incorrect padding of the CodeMirror class div element under the ve-ce-surface class div element. The CodeMirror div should have the same padding as the other div element under ve-ce-surface, but instead, it has extra top padding, causing the misalignment.

Solution:
Remove the top padding of the CodeMirror div.

Use the below CSS rules in the skinstyle VisualEditor.core

.ve-init-mw-desktopArticleTarget .CodeMirror {
    padding-top: 0;  // Lining up syntax highlighter
}

Event Timeline

Restricted Application added a project: Community-Tech. · View Herald TranscriptAug 19 2019, 10:44 PM

Change 531307 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/skins/Timeless@master] Fix offsets for CodeMirror in VE

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

Change 531305 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/extensions/CodeMirror@master] Remove Timeless VE styles, too many variables to do them properly here

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

Change 531305 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Remove Timeless VE styles, too many variables to do them properly here

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

matmarex moved this task from To Triage to Freezer on the VisualEditor board.Aug 20 2019, 10:49 PM
matmarex added a subscriber: matmarex.

Change 531307 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Fix offsets for CodeMirror in VE

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

matmarex closed this task as Resolved.Aug 20 2019, 11:10 PM
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptAug 20 2019, 11:10 PM