CodeMirrorWikiEditor: add button to open preferences panel

Add a 'Settings' button next to the search button in the advanced menu.

Refactor CodeMirrorPreferences to use its own toggle method.

Bug: T359498
Change-Id: Ib65d47e98908b6a888d24157a235de4efe95a33b

resources/codemirror.preferences.js

@@ -218,21 +218,10 @@ class CodeMirrorPreferences extends CodeMirrorPanel {
 	 */
 	get extension() {
 		return [
-			keymap.of( {
+			// Keymap for toggling the preferences panel.
-				key: 'Mod-Shift-,',
+			keymap.of( [
-				run: ( view ) => {
+				{ key: 'Mod-Shift-,', run: ( view ) => this.toggle( view, true ) }
-					this.view = view;
+			] ),
-					const effects = [ this.prefsToggleEffect.of( true ) ];
-					if ( !this.view.state.field( this.panelStateField, false ) ) {
-						effects.push( StateEffect.appendConfig.of( [ this.panelStateField ] ) );
-					}
-					this.view.dispatch( { effects } );
-					this.view.dom.querySelector(
-						'.cm-mw-preferences-panel input:first-child'
-					).focus();
-					return true;
-				}
-			} ),
 			// Compartmentalized extensions
 			Object.keys( this.extensionRegistry ).map(
 				( name ) => this.compartmentRegistry[ name ].of(
@@ -280,17 +269,34 @@ class CodeMirrorPreferences extends CodeMirrorPanel {
 	 * Toggle display of the preferences panel.
 	 *
 	 * @param {EditorView} view
-	 * @param {boolean} [force]
+	 * @param {boolean} [force] Force the panel to open or close.
 	 * @return {boolean}
 	 */
 	toggle( view, force ) {
 		this.view = view;
-		const bool = typeof force === 'boolean' ?
+		const effects = [];
-			force :
+		let bool;
-			!this.view.state.field( this.panelStateField );
+
-		this.view.dispatch( {
+		// Add the panel state field to the state if it doesn't exist.
-			effects: this.prefsToggleEffect.of( bool )
+		if ( !this.view.state.field( this.panelStateField, false ) ) {
-		} );
+			effects.push( StateEffect.appendConfig.of( [ this.panelStateField ] ) );
+			bool = true;
+		} else {
+			bool = !this.view.state.field( this.panelStateField );
+		}
+		if ( typeof force === 'boolean' ) {
+			bool = force;
+		}
+		effects.push( this.prefsToggleEffect.of( bool ) );
+		this.view.dispatch( { effects } );
+
+		// If the panel is being opened, focus the first input.
+		if ( bool ) {
+			this.view.dom.querySelector(
+				'.cm-mw-preferences-panel input:first-child'
+			).focus();
+		}
+
 		return true;
 	}
 

resources/codemirror.wikieditor.js

@@ -137,6 +137,35 @@ class CodeMirrorWikiEditor extends CodeMirror {
 				}
 			} );
 
+		// Add a 'Settings' button to the search group of the toolbar, in the 'Advanced' section.
+		this.$textarea.wikiEditor(
+			'addToToolbar',
+			{
+				section: 'advanced',
+				groups: {
+					search: {
+						tools: {
+							CodeMirrorPreferences: {
+								type: 'element',
+								element: () => {
+									const button = new OO.ui.ButtonWidget( {
+										title: mw.msg( 'codemirror-prefs-title' ),
+										icon: 'settings',
+										framed: false,
+										classes: [ 'tool', 'cm-mw-settings' ]
+									} );
+									button.on( 'click',
+										() => this.preferences.toggle( this.view, true )
+									);
+									return button.$element;
+								}
+							}
+						}
+					}
+				}
+			}
+		);
+
 		/**
 		 * Called after CodeMirror is enabled or disabled in WikiEditor.
 		 *
@@ -178,6 +207,7 @@ class CodeMirrorWikiEditor extends CodeMirror {
 			return;
 		}
 
+		// Add 'Syntax' button to main toolbar.
 		this.$textarea.wikiEditor(
 			'addToToolbar',
 			{
@@ -206,6 +236,7 @@ class CodeMirrorWikiEditor extends CodeMirror {
 			}
 		);
 
+		// Set the ID of the CodeMirror button for styling.
 		const $codeMirrorButton = toolbar.$toolbar.find( '.tool[rel=CodeMirror]' );
 		$codeMirrorButton.attr( 'id', 'mw-editbutton-codemirror' );