CodeMirror 6: localize search dialog

As of this patch, these should be the only messages used by us that live
in the CodeMirror library. More may be added later as new features
are added. We load all translations as a default CodeMirror extension
given the small cost and importance of localization.

German translations from the CodeMirror docs:
https://codemirror.net/examples/translate/

Also add a note in the README about the search dialog.

Bug: T317243
Change-Id: Iba40bcaf197ed48166ce4cdcc4f48177fc8d07f3

README.md

@@ -58,3 +58,6 @@ Some may be removed pending user feedback:
   Use `.cm-mw-template-ground.cm-html-entity` instead.
 * Line-level styling for `<nowiki>`, `<pre>`, and any tag without an associated
   TagMode has been removed.
+* The browser's native search functionality (ala Ctrl+F) has been replaced with
+  search functionality built into CodeMirror. This is necessary to maintain
+  performance (see [T303664](https://phabricator.wikimedia.org/T303664)).

extension.json

@@ -176,7 +176,8 @@
 				"web2017-polyfills",
 				"mediawiki.api",
 				"mediawiki.user",
-				"user.options"
+				"user.options",
+				"ext.CodeMirror.v6.messages"
 			],
 			"packageFiles": [
 				"dist/main.js"
@@ -189,6 +190,20 @@
 			"messages": [
 				"codemirror-toggle-label"
 			]
+		},
+		"ext.CodeMirror.v6.messages": {
+			"messages": [
+				"codemirror-find",
+				"codemirror-next",
+				"codemirror-previous",
+				"codemirror-all",
+				"codemirror-match-case",
+				"codemirror-regexp",
+				"codemirror-by-word",
+				"codemirror-replace",
+				"codemirror-replace-placeholder",
+				"codemirror-replace-all"
+			]
 		}
 	},
 	"ResourceFileModulePaths": {

i18n/de.json

@@ -10,5 +10,14 @@
 	"codemirror-toggle-label": "Syntaxhervorhebung",
 	"codemirror-prefs-colorblind": "Farbenfehlsichtigenfreundliches Schema für die Syntaxhervorhebung bei der Bearbeitung von Wikitext einschalten",
 	"codemirror-prefs-colorblind-help": "Wenn du ein Helferlein zur Syntaxhervorhebung verwendest, wird diese Einstellung nicht funktionieren.",
+	"codemirror-find": "Suchen",
+	"codemirror-next": "nächste",
+	"codemirror-previous": "vorherige",
+	"codemirror-all": "alle",
+	"codemirror-match-case": "groß/klein beachten",
+	"codemirror-by-word": "ganze Wörter",
+	"codemirror-replace": "ersetzen",
+	"codemirror-replace-placeholder": "Ersetzen",
+	"codemirror-replace-all": "alle ersetzen",
 	"prefs-accessibility": "Barrierefreiheit"
 }

i18n/en.json

@@ -8,5 +8,15 @@
 	"codemirror-toggle-label": "Syntax highlighting",
 	"codemirror-prefs-colorblind": "Enable colorblind-friendly scheme for syntax highlighting when editing wikitext",
 	"codemirror-prefs-colorblind-help": "If you use a gadget for syntax highlighting, this preference will not work.",
+	"codemirror-find": "Find",
+	"codemirror-next": "next",
+	"codemirror-previous": "previous",
+	"codemirror-all": "all",
+	"codemirror-match-case": "match case",
+	"codemirror-regexp": "regexp",
+	"codemirror-by-word": "by word",
+	"codemirror-replace": "replace",
+	"codemirror-replace-placeholder": "Replace",
+	"codemirror-replace-all": "replace all",
 	"prefs-accessibility": "Accessibility"
 }

i18n/qqq.json

@@ -12,5 +12,15 @@
 	"codemirror-toggle-label": "Title tooltip for button to toggle CodeMirror in the editing toolbar.",
 	"codemirror-prefs-colorblind": "Used in user preferences as label for enabling the colorblind-friendly option.",
 	"codemirror-prefs-colorblind-help": "Used in user preferences as remark on the colorblind-friendly option.",
+	"codemirror-find": "Placeholder text for the input in the CodeMirror search dialog.",
+	"codemirror-next": "Label for the 'Next' button in the CodeMirror search dialog.",
+	"codemirror-previous": "Label for the 'Previous' button in the CodeMirror search dialog.",
+	"codemirror-all": "Label for the 'All' button in the CodeMirror search dialog.",
+	"codemirror-match-case": "Label for the 'match case' option in the CodeMirror search dialog.",
+	"codemirror-regexp": "Label for the 'regexp' button in the CodeMirror search dialog. This enables the user to search using regular expressions.",
+	"codemirror-by-word": "Label for the 'by word' button in the CodeMirror search dialog.",
+	"codemirror-replace": "Label for the 'replace' button in the CodeMirror search dialog.",
+	"codemirror-replace-placeholder": "Placeholder text for the 'Replace' input in the CodeMirror search dialog.",
+	"codemirror-replace-all": "Label for the 'replace all' button in the CodeMirror search dialog.",
 	"prefs-accessibility": "Section heading in the user prefences for accessibility topics."
 }

src/codemirror.js

@@ -28,7 +28,8 @@ export default class CodeMirror {
 	 */
 	get defaultExtensions() {
 		const extensions = [
-			this.contentAttributesExtension
+			this.contentAttributesExtension,
+			this.phrasesExtension
 		];
 		const namespaces = mw.config.get( 'wgCodeMirrorLineNumberingNamespaces' );
 
@@ -58,6 +59,29 @@ export default class CodeMirror {
 		} );
 	}
 
+	/**
+	 * These are all potential messages used in a full-featured CodeMirror setup.
+	 * We lump them all here and supply it as default extensions because it is only a small cost
+	 * and we don't want localization to be overlooked by CodeMirror clients and subclasses.
+	 *
+	 * @see https://codemirror.net/examples/translate/
+	 * @return {Extension}
+	 */
+	get phrasesExtension() {
+		return EditorState.phrases.of( {
+			Find: mw.msg( 'codemirror-find' ),
+			next: mw.msg( 'codemirror-next' ),
+			previous: mw.msg( 'codemirror-previous' ),
+			all: mw.msg( 'codemirror-all' ),
+			'match case': mw.msg( 'codemirror-match-case' ),
+			regexp: mw.msg( 'codemirror-regexp' ),
+			'by word': mw.msg( 'codemirror-by-word' ),
+			replace: mw.msg( 'codemirror-replace' ),
+			Replace: mw.msg( 'codemirror-replace-placeholder' ),
+			'replace all': mw.msg( 'codemirror-replace-all' )
+		} );
+	}
+
 	/**
 	 * Setup CodeMirror and add it to the DOM. This will hide the original textarea.
 	 *