Page MenuHomePhabricator
Create Task
Maniphest T303964

SyntaxHighlight in VisualEditor behaves wrongly with a sort of align right when typing
Closed, ResolvedPublicBUG REPORT
Actions

Description

List of steps to reproduce (step by step, including full links if applicable):

  • Edit a page with VisualEditor, e.g. Wikipedia Sandbox
  • Select in the menu Insert > Code block
  • Start typing some code

What happens?:

When typing the textarea is always moved on the right of the cursor, and consequently we don’t see what we are typing on the left of the cursor. See video below.

This issue seems to occur when the page is newly opened (after a hard refresh Ctrl+F5/Ctrl+R), but it occurs no more the second time we open the dialog box in the same page, or possibly when we edit another page without hard refresh (but this could depend on the browser, I’m not sure about the exact conditions).

Task 303964.gif (1,236×620 px, 3 MB)

What should have happened instead?:

The textarea should not move on the right.

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:

  • MediaWiki 1.38.0-alpha (git 2b818a6) (current version on English Wikipedia)
  • SyntaxHighlight - git 1ae9ab5
  • VisualEditor - git afde13a
  • Occurs on all skins currently deployed (Vector, Vector 2022, Monobook, MinervaNeue, Timeless)
  • Occurs on Firefox 97-98, Brave 1.35.103, Chromium 90.0.4430.212, Opera 84.0.4316.14 on Debian 10, as well as Firefox 97 on Windows 10

Occurs also on an independant MediaWiki 1.36 with SyntaxHighlight and VisualEditor in REL1_36.

Details

Related Changes in Gerrit:
SubjectAuthorRepoBranchLines +/-
Fix resize of MWAceEditorWidget when setting upEsandersmediawiki/extensions/VisualEditormaster+2 -1
Customize query in gerrit

Related Objects

Event Timeline

Seb35 created this task.Mar 16 2022, 3:19 PM
Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptMar 16 2022, 3:19 PM
Seb35 updated the task description. (Show Details)Mar 16 2022, 3:26 PM
Seb35 added a project: VisualEditor.Mar 16 2022, 3:36 PM
Seb35 added a project: CodeEditor.Mar 16 2022, 7:22 PM

I’m investigating. I’m pretty sure the issue is related to the RL module ext.codeEditor.ace which is dynamically loaded by VE in ve.ui.MWAceEditorWidget, and it seems there is some incomplete initialisation when the promise is returned.

Note: there is no issue when the extension CodeEditor is not activated (tested on a MW 1.36 where I reproduce the issue).

Seb35 added a comment.EditedMar 16 2022, 9:15 PM

Below is a fix inside the extension VisualEditor (for my installation with MW 1.36), but given I don’t know well Ace it should be double-checked:

diff --git modules/ve-mw/ui/widgets/ve.ui.MWAceEditorWidget.js modules/ve-mw/ui/widgets/ve.ui.MWAceEditorWidget.js
index 14ed4abae..1cadd3c19 100644
--- modules/ve-mw/ui/widgets/ve.ui.MWAceEditorWidget.js
+++ modules/ve-mw/ui/widgets/ve.ui.MWAceEditorWidget.js
@@ -142,3 +142,3 @@ ve.ui.MWAceEditorWidget.prototype.setupEditor = function () {
 	this.setEditorValue( this.getValue() );
-	this.editor.resize();
+	this.editor.resize( true );
 };

According to the API Reference of Ace, the method resize has a parameter force, and it seems setting it to true solves the issue.

gerritbot added a comment.Mar 18 2022, 10:31 PM

Change 771967 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Fix resize of MWAceEditorWidget when setting up

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

gerritbot added a project: Patch-For-Review.Mar 18 2022, 10:31 PM
Esanders moved this task from To Triage to Triaged on the VisualEditor board.Mar 19 2022, 9:59 PM
TheDJ subscribed.Mar 21 2022, 9:18 AM
gerritbot added a comment.Mar 22 2022, 1:03 AM

Change 771967 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Fix resize of MWAceEditorWidget when setting up

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

Maintenance_bot removed a project: Patch-For-Review.Mar 22 2022, 1:10 AM
• matmarex subscribed.Mar 22 2022, 1:48 AM

Thanks for the investigation @Seb35!

• matmarex added a project: Editing-team (Kanban Board).Mar 22 2022, 1:48 AM
• matmarex moved this task from Inbox to QA on the Editing-team (Kanban Board) board.
• matmarex added a project: Editing QA.
ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.4; 2022-03-23).Mar 22 2022, 2:00 AM
Esanders claimed this task.Mar 23 2022, 2:36 PM
EAkinloose subscribed.Mar 24 2022, 4:49 PM

The text area behaves as expected, even for long lines.
See https://photos.app.goo.gl/xAsBqYVTzkPmABmd7.

EAkinloose edited projects, added: Verified; removed: Editing QA.Mar 24 2022, 4:51 PM
EAkinloose moved this task from QA to Ready for Sign Off on the Editing-team (Kanban Board) board.
ppelberg closed this task as Resolved.Mar 26 2022, 1:19 AM
Krinkle awarded a token.Apr 5 2022, 11:10 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits