CodeMirror: sync text editor font preference

This only effects users of the CM6 CodeMirror class, so doesn't (yet)
solve the issue for the 2017 editor which is partly what T245568 is for.

I135bf0f7bf supposedly fixed it for the 2010 editor, but that fix
apparently doesn't work anymore, and thus those styles have simply been
removed (the .CodeMirror element is never a child of the edit font
classes).

This change also incidentally fixes font sizing issues by ensuring the
styles are applied to `.cm-content` and not `.cm-editor`. This prior bug
was most notably visible in other skins such as Timeless and Monobook.
The colorblind CSS class is now applied in the same way using the
EditorView.contrentAttributes facet.

Bug: T245568
Change-Id: Iaaf65e47ce8ed9303147aadc7e18a9aaa051405b

resources/ext.CodeMirror.less

@@ -2,16 +2,6 @@
 
 /* TODO: Remove styles below following CM6 upgrade, or move them to ext.CodeMirror.v6.WikiEditor.less */
 
-.mw-editfont-monospace,
-.mw-editfont-sans-serif,
-.mw-editfont-serif {
-	.CodeMirror {
-		// Don't let CodeMirror set the font to monospace if it's set on an ancestor.
-		// See T245568
-		font-family: inherit;
-	}
-}
-
 .wikiEditor-ui .CodeMirror {
 	line-height: 1.5em;
 	padding: 0.1em;

src/codemirror.js

@@ -51,12 +51,29 @@ export default class CodeMirror {
 	 * @return {Extension}
 	 */
 	get contentAttributesExtension() {
+		const classList = [];
+		// T245568: Sync text editor font preferences with CodeMirror
+		const fontClass = Array.from( this.$textarea[ 0 ].classList )
+			.find( ( style ) => style.startsWith( 'mw-editfont-' ) );
+		if ( fontClass ) {
+			classList.push( fontClass );
+		}
+		// Add colorblind mode if preference is set.
+		// This currently is only to be used for the MediaWiki markup language.
+		if (
+			mw.user.options.get( 'usecodemirror-colorblind' ) &&
+			mw.config.get( 'wgPageContentModel' ) === 'wikitext'
+		) {
+			classList.push( 'cm-mw-colorblind-colors' );
+		}
+
 		return EditorView.contentAttributes.of( {
 			// T259347: Use accesskey of the original textbox
 			accesskey: this.$textarea.attr( 'accesskey' ),
 			// use direction and language of the original textbox
 			dir: this.$textarea.attr( 'dir' ),
-			lang: this.$textarea.attr( 'lang' )
+			lang: this.$textarea.attr( 'lang' ),
+			class: classList.join( ' ' )
 		} );
 	}
 
@@ -162,15 +179,6 @@ export default class CodeMirror {
 			parent: this.$textarea.parent()[ 0 ]
 		} );
 
-		// Add colorblind mode if preference is set.
-		// This currently is only to be used for the MediaWiki markup language.
-		if (
-			mw.user.options.get( 'usecodemirror-colorblind' ) &&
-			mw.config.get( 'wgPageContentModel' ) === 'wikitext'
-		) {
-			this.view.dom.classList.add( 'cm-mw-colorblind-colors' );
-		}
-
 		// Hide native textarea and sync CodeMirror contents upon submission.
 		this.$textarea.hide();
 		if ( this.$textarea[ 0 ].form ) {

tests/jest/codemirror.test.js

@@ -34,6 +34,12 @@ describe( 'initialize', () => {
 		initializeWithForm();
 		expect( cm.$textarea[ 0 ].form.addEventListener ).toHaveBeenCalledTimes( 1 );
 	} );
+
+	it( 'should retain the mw-editfont- class present on the textarea', () => {
+		cm.$textarea.addClass( 'mw-editfont-monospace' );
+		cm.initialize();
+		expect( cm.view.dom.querySelector( '.cm-content' ).classList ).toContain( 'mw-editfont-monospace' );
+	} );
 } );
 
 describe( 'logUsage', () => {