Merge "CodeMirror: sync text editor font preference"

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', () => {