wikimedia/mediawiki-extensions-CodeMirror
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror synced 2024-11-23 22:03:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

ve.ui.CodeMirrorAction.v6: use infinity viewport to avoid misalignment

Browse source 
The 2017 editor has an infinite viewport, meaning the entire document is
printed on page load. CodeMirror 6 meanwhile only processes text in the
visible viewport. This presents a situation where if large chunks of
text are inserted outside the visible range (such as the "Changes
recovered" feature of VE), it can cause misalignment of the VE surface
and visible CodeMirror layer, as CodeMirror has not accounted for the
off-screen lines of text.

CodeMirror 5 had a `viewportMargin: infinity` option that prevented this
issue, but at the cost of performance. CodeMirror 6 removed this option,
but the same effect can be achieved by tricking CodeMirror into thinking
we're printing the document, in which case it will process all lines.
This seriously hurts performance, and is a nasty hack, but until the
2017 editor is reworked to have a viewport, there may be no other means
to prevent the misalignment.

The discovery of this issue and the fix are courtesy of Fandom engineers

Bug: T357482
Change-Id: If11ce48459e8faf55015108e8c2eabdc16e0d917
(cherry picked from commit 2ad096a580)
This commit is contained in:
MusikAnimal 2024-08-20 13:52:42 -04:00
parent 84c9051241
commit 0506a10eab
1 changed files with 3 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
resources/ve-cm/ve.ui.CodeMirrorAction.v6.js
View file

@ -89,6 +89,9 @@ ve.ui.CodeMirrorAction.prototype.toggle = function ( enable ) {
surface.mirror.initialize( surface.mirror.defaultExtensions.concat( mediawikiLang( { surface.mirror.initialize( surface.mirror.defaultExtensions.concat( mediawikiLang( {
templateFolding: false templateFolding: false
} ), lineHeightExtension ) ); } ), lineHeightExtension ) );
// Force infinite viewport in CodeMirror to prevent misalignment of
// the VE surface and the CodeMirror view. See T357482#10076432.
surface.mirror.view.viewState.printing = true;
// Disable the Extension that highlights special characters. // Disable the Extension that highlights special characters.
surface.mirror.view.dispatch( { surface.mirror.view.dispatch( {