mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror
synced 2024-11-23 13:56:44 +00:00
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:
parent
c853e9587d
commit
2aa6d5c564
2
resources/dist/codemirror.js
vendored
2
resources/dist/codemirror.js
vendored
File diff suppressed because one or more lines are too long
|
@ -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.
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue