CM6: Add 'ext.CodeMirror.input' hook; improve code examples

A 'ext.CodeMirror.input' hook is added to give integrations direct
access to the ViewUpdate object when changes are made in CodeMirror.

Bug: T174811
Change-Id: Idb6166996abb7d64ac8a956f362aea5eda0392bc

src/codemirror.js

@@ -1,5 +1,5 @@
 import { EditorState, Extension } from '@codemirror/state';
-import { EditorView, drawSelection, lineNumbers, highlightSpecialChars, keymap } from '@codemirror/view';
+import { EditorView, ViewUpdate, drawSelection, lineNumbers, highlightSpecialChars, keymap } from '@codemirror/view';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
 import { searchKeymap } from '@codemirror/search';
 import { bracketMatching } from '@codemirror/language';
@@ -75,6 +75,7 @@ class CodeMirror {
 			this.phrasesExtension,
 			this.specialCharsExtension,
 			this.heightExtension,
+			this.updateExtension,
 			bracketMatching(),
 			EditorState.readOnly.of( this.readOnly ),
 			EditorView.domEventHandlers( {
@@ -110,6 +111,30 @@ class CodeMirror {
 		return extensions;
 	}
 
+	/**
+	 * This extension listens for changes in the CodeMirror editor and fires
+	 * the `ext.CodeMirror.input` hook with the {@link ViewUpdate} object.
+	 *
+	 * @type {Extension}
+	 * @fires CodeMirror~'ext.CodeMirror.input'
+	 * @stable to call and override
+	 */
+	get updateExtension() {
+		return EditorView.updateListener.of( ( update ) => {
+			if ( update.docChanged ) {
+				/**
+				 * Called when document changes are made in CodeMirror.
+				 * The native textarea is not necessarily updated yet.
+				 *
+				 * @event CodeMirror~'ext.CodeMirror.input'
+				 * @param {ViewUpdate} update
+				 * @stable to use
+				 */
+				mw.hook( 'ext.CodeMirror.input' ).fire( update );
+			}
+		} );
+	}
+
 	/**
 	 * This extension sets the height of the CodeMirror editor to match the textarea.
 	 * Override this method to change the height of the editor.

src/codemirror.wikieditor.js

@@ -10,6 +10,19 @@ import { LanguageSupport } from '@codemirror/language';
  * Use this class if you want WikiEditor's toolbar. If you don't need the toolbar,
  * using {@link CodeMirror} directly will be considerably more efficient.
  *
+ * @example
+ * mw.loader.using( [
+ *   'ext.wikiEditor',
+ *   'ext.CodeMirror.v6.WikiEditor',
+ *   'ext.CodeMirror.v6.mode.mediawiki'
+ * ] ).then( ( require ) => {
+ *   mw.addWikiEditor( myTextarea );
+ *   const CodeMirrorWikiEditor = require( 'ext.CodeMirror.v6.WikiEditor' );
+ *   const mediawikiLang = require( 'ext.CodeMirror.v6.mode.mediawiki' );
+ *   const cmWe = new CodeMirrorWikiEditor( myTextarea );
+ *   cmWe.initialize( [ cmWe.defaultExtensions, mediawikiLang() ] );
+ *   cmWe.addCodeMirrorToWikiEditor();
+ * } );
  * @extends CodeMirror
  */
 class CodeMirrorWikiEditor extends CodeMirror {