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
This commit is contained in:
MusikAnimal 2024-04-15 13:30:49 -04:00
parent c853e9587d
commit 2aa6d5c564
3 changed files with 40 additions and 2 deletions

File diff suppressed because one or more lines are too long

View file

@ -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.

View file

@ -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 {