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

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

resources/ve-cm/ve.ui.CodeMirrorAction.v6.js

@@ -89,6 +89,9 @@ ve.ui.CodeMirrorAction.prototype.toggle = function ( enable ) {
 			surface.mirror.initialize( surface.mirror.defaultExtensions.concat( mediawikiLang( {
 				templateFolding: false
 			} ), 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.
 			surface.mirror.view.dispatch( {