CodeMirrorWikiEditor: make WikiEditor search button open CM search panel

It seems odd to have multiple ways of searching. The CodeMirror
implementation follows modern day UI standards while still offering the
same functionality, so we hijack the search button to use it instead of
the jQuery UI-based WikiEditor search dialog. The dialog is restored if
CodeMirror is switched off.

Bug: T372171
Change-Id: Iab897a17a01b7e04a13a8725afd2eb9e802776ba
This commit is contained in:
MusikAnimal 2024-08-09 19:04:15 -04:00
parent 81ec0c292a
commit 43c6e59484

View file

@ -2,7 +2,8 @@ const {
EditorSelection,
EditorView,
Extension,
LanguageSupport
LanguageSupport,
openSearchPanel
} = require( 'ext.CodeMirror.v6.lib' );
const CodeMirror = require( 'ext.CodeMirror.v6' );
@ -55,6 +56,12 @@ class CodeMirrorWikiEditor extends CodeMirror {
* @type {Function|null}
*/
this.realtimePreviewHandler = null;
/**
* The old WikiEditor search button, to be restored if CodeMirror is disabled.
*
* @type {jQuery}
*/
this.$oldSearchBtn = null;
}
/**
@ -117,6 +124,19 @@ class CodeMirrorWikiEditor extends CodeMirror {
this.view.focus();
}
// 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' )
.on( 'click keydown', ( e ) => {
if ( e.type === 'click' || ( e.type === 'keydown' && e.key === 'Enter' ) ) {
openSearchPanel( this.view );
e.preventDefault();
}
} );
/**
* Called after CodeMirror is enabled or disabled in WikiEditor.
*
@ -234,6 +254,8 @@ 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 );
mw.hook( 'ext.CodeMirror.switch' ).fire( false, this.$textarea );
} else {
this.enableCodeMirror();