From f62a2be9660663cefe1a59e9c52353d46d73773c Mon Sep 17 00:00:00 2001
From: MusikAnimal <musikanimal@gmail.com>
Date: Mon, 25 Nov 2024 02:27:10 -0500
Subject: [PATCH] CodeMirrorWikiEditor: properly manage WikiEditor buttons

Fixes an issue introduced with Ib65d47e989 where continually toggling on
and off CodeMirror would duplicate the search button exponentially, even
leading to browser crashes.

Create a new 'codemirror' toolbar group for the prefs button, styling it
just like the search group, and use WikiEditor's removeToToolbar() to
remove it.

Remove now redundant CSS classes.

Bug: T359498
Follow-Up: Ib65d47e98908b6a888d24157a235de4efe95a33b
Change-Id: If8ae9c0b04b2edcb30a5b8cd788214598a492d30
---
 resources/codemirror.wikieditor.js   | 26 ++++++++++++++++++--------
 resources/codemirror.wikieditor.less |  7 +++++++
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/resources/codemirror.wikieditor.js b/resources/codemirror.wikieditor.js
index 232e1dfd..cf2651b9 100644
--- a/resources/codemirror.wikieditor.js
+++ b/resources/codemirror.wikieditor.js
@@ -56,10 +56,16 @@ class CodeMirrorWikiEditor extends CodeMirror {
 		 * @type {Function|null}
 		 */
 		this.realtimePreviewHandler = null;
+		/**
+		 * The WikiEditor search button, which is usurped to open the CodeMirror search panel.
+		 *
+		 * @type {jQuery|null}
+		 */
+		this.$searchBtn = null;
 		/**
 		 * The old WikiEditor search button, to be restored if CodeMirror is disabled.
 		 *
-		 * @type {jQuery}
+		 * @type {jQuery|null}
 		 */
 		this.$oldSearchBtn = null;
 	}
@@ -127,9 +133,10 @@ class CodeMirrorWikiEditor extends CodeMirror {
 		// Hijack the search button to open the CodeMirror search panel
 		// instead of the WikiEditor search dialog.
 		// eslint-disable-next-line no-jquery/no-global-selector
-		const $searchBtn = $( '.wikiEditor-ui .group-search a' );
-		this.$oldSearchBtn = $searchBtn.clone( true );
-		$searchBtn.off( 'click keydown keypress' )
+		this.$searchBtn = $( '.wikiEditor-ui .group-search .tool' );
+		this.$oldSearchBtn = this.$searchBtn.clone( true );
+		this.$searchBtn.find( 'a' )
+			.off( 'click keydown keypress' )
 			.on( 'click keydown', ( e ) => {
 				if ( e.type === 'click' || ( e.type === 'keydown' && e.key === 'Enter' ) ) {
 					openSearchPanel( this.view );
@@ -143,7 +150,7 @@ class CodeMirrorWikiEditor extends CodeMirror {
 			{
 				section: 'advanced',
 				groups: {
-					search: {
+					codemirror: {
 						tools: {
 							CodeMirrorPreferences: {
 								type: 'element',
@@ -152,7 +159,7 @@ class CodeMirrorWikiEditor extends CodeMirror {
 										title: mw.msg( 'codemirror-prefs-title' ),
 										icon: 'settings',
 										framed: false,
-										classes: [ 'tool', 'cm-mw-settings' ]
+										classes: [ 'tool' ]
 									} );
 									button.on( 'click',
 										() => this.preferences.toggle( this.view, true )
@@ -285,8 +292,11 @@ class CodeMirrorWikiEditor extends CodeMirror {
 		if ( this.view ) {
 			this.setCodeMirrorPreference( false );
 			this.destroy();
-			// eslint-disable-next-line no-jquery/no-global-selector
-			$( '.wikiEditor-ui .group-search a' ).replaceWith( this.$oldSearchBtn );
+			this.$searchBtn.replaceWith( this.$oldSearchBtn );
+			this.$textarea.wikiEditor( 'removeFromToolbar', {
+				section: 'advanced',
+				group: 'codemirror'
+			} );
 			mw.hook( 'ext.CodeMirror.switch' ).fire( false, this.$textarea );
 		} else {
 			this.enableCodeMirror();
diff --git a/resources/codemirror.wikieditor.less b/resources/codemirror.wikieditor.less
index c459fab5..e276c983 100644
--- a/resources/codemirror.wikieditor.less
+++ b/resources/codemirror.wikieditor.less
@@ -6,6 +6,13 @@
 	border: inherit;
 }
 
+// Mimics .group-search
+.wikiEditor-ui-toolbar .group-codemirror {
+	float: right;
+	border-right: 0;
+	border-left: @border-subtle;
+}
+
 .cm-mw-toggle-wikieditor {
 	.oo-ui-icon-syntax-highlight {
 		background-color: @color-base;