Expand all

CodeMirror

Interface for the CodeMirror editor.

Example

mw.loader.using( [
  'ext.CodeMirror.v6',
  'ext.CodeMirror.v6.mode.mediawiki'
] ).then( ( require ) => {
  const CodeMirror = require( 'ext.CodeMirror.v6' );
  const mediawikiLang = require( 'ext.CodeMirror.v6.mode.mediawiki' );
  const cm = new CodeMirror( myTextarea, mediawikiLang() );
  cm.initialize();
} );

Constructor

new CodeMirror(textarea, [langExtension]) #

Instantiate a new CodeMirror instance.

Parameters:

Name Type Attributes Description
textarea HTMLTextAreaElement | jQuery | string | ve.ui.Surface

Textarea to add syntax highlighting to.

langExtension LanguageSupport | Extension optional

Language support and its extension(s).

Source:

Properties

$textarea :jQuery #

The textarea that CodeMirror is bound to.

Type:

Source:
The textarea that CodeMirror is bound to.

activeLineExtension :Extension #

Extension for highlighting the active line.

Type:

Source:
Extension for highlighting the active line.

bracketMatchingExtension :Extension #

This extension adds bracket matching to the CodeMirror editor.

Type:

Source:
This extension adds bracket matching to the CodeMirror editor.

contentAttributesExtension :Extension #

This specifies which attributes get added to the .cm-content and .cm-editor elements. Subclasses are safe to override this method, but attributes here are considered vital.

Type:

Source:
See:
This specifies which attributes get added to the .cm-content and .cm-editor elements.

defaultExtensions :Extension|Array.<Extension> #

Default extensions used by CodeMirror. Extensions here should be applicable to all theoretical uses of CodeMirror in MediaWiki.

Type:

Source:
See:
Default extensions used by CodeMirror.

dirCompartment :Compartment #

Compartment to control the direction of the editor.

Type:

Source:
Compartment to control the direction of the editor.

dirExtension :Extension #

This extension adds the ability to change the direction of the editor.

Type:

Source:
This extension adds the ability to change the direction of the editor.

editRecoveryHandler :function|null #

The edit recovery handler.

Type:

  • function | null
Source:
The edit recovery handler.

formSubmitEventHandler :function|null #

The form submit event handler.

Type:

  • function | null
Source:
The form submit event handler.

heightExtension :Extension #

This extension sets the height of the CodeMirror editor to match the textarea. Override this method to change the height of the editor.

Type:

Source:
This extension sets the height of the CodeMirror editor to match the textarea.

keymap :CodeMirrorKeymap #

CodeMirror key mappings and help dialog.

Type:

Source:
CodeMirror key mappings and help dialog.

langExtension :LanguageSupport|Extension #

Language support and its extension(s).

Type:

Source:
Language support and its extension(s).

lineNumberingExtension :Extension #

Extension for line numbering.

Type:

Source:
Extension for line numbering.

lineWrappingExtension :Extension #

Extension for line wrapping.

Type:

Source:
Extension for line wrapping.

phrasesExtension :Extension #

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.

Type:

Source:
See:
These are all potential messages used in a full-featured CodeMirror setup.

preferences :CodeMirrorPreferences #

The CodeMirror preferences panel.

Type:

Source:
The CodeMirror preferences panel.

readOnly :boolean #

Whether the textarea is read-only.

Type:

  • boolean
Source:
Whether the textarea is read-only.

searchExtension :Extension #

Extension for search and goto line functionality.

Type:

Source:
Extension for search and goto line functionality.

specialCharsExtension :Extension #

We give a small subset of special characters a tooltip explaining what they are. The messages and for what characters are defined here. Any character that does not have a message will instead use CM6 defaults, which is the localization of 'codemirror-control-character' followed by the Unicode number.

Type:

Source:
See:
We give a small subset of special characters a tooltip explaining what they are.

state :EditorState #

The editor state.

Type:

Source:
The editor state.

surface :ve.ui.Surface #

The VisualEditor surface CodeMirror is bound to.

Type:

Source:
The VisualEditor surface CodeMirror is bound to.

textSelection :CodeMirrorTextSelection #

jQuery.textSelection overrides for CodeMirror.

Type:

Source:
jQuery.textSelection overrides for CodeMirror.

updateExtension :Extension #

This extension listens for changes in the CodeMirror editor and fires the ext.CodeMirror.input hook with the ViewUpdate object.

Type:

Source:

Fires:

This extension listens for changes in the CodeMirror editor and fires the ext.CodeMirror.input hook with the ViewUpdate object.

view :EditorView #

The editor user interface.

Type:

Source:
The editor user interface.

Methods

destroy() #

Destroy the CodeMirror instance and revert to the original textarea.

Source:

Fires:

Destroy the CodeMirror instance and revert to the original textarea.

initialize([extensions]) #

Setup CodeMirror and add it to the DOM. This will hide the original textarea.

Parameters:

Name Type Attributes Default Description
extensions Extension | Array.<Extension> optional
this.defaultExtensions

Extensions to use.

Source:

Fires:

Setup CodeMirror and add it to the DOM.

setCodeMirrorPreference(prefValue)static #

Save CodeMirror enabled preference.

Parameters:

Name Type Description
prefValue boolean

True, if CodeMirror should be enabled by default, otherwise false.

Source:
Save CodeMirror enabled preference.

Events

'ext.CodeMirror.destroy'($textarea) #

Called just after CodeMirror is destroyed and the original textarea is restored.

Parameters:

Name Type Description
$textarea jQuery

The original textarea.

Source:
Called just after CodeMirror is destroyed and the original textarea is restored.

'ext.CodeMirror.initialize'($textarea) #

Called just before CodeMirror is initialized. This can be used to manipulate the DOM to suit CodeMirror (i.e. if you manipulate WikiEditor's DOM, you may need this).

Parameters:

Name Type Description
$textarea jQuery

The textarea that CodeMirror is bound to.

Source:
Called just before CodeMirror is initialized.

'ext.CodeMirror.input'(update) #

Called when document changes are made in CodeMirror. The native textarea is not necessarily updated yet.

Parameters:

Name Type Description
update ViewUpdate
Source:
Called when document changes are made in CodeMirror.

'ext.CodeMirror.preferences.change'(name, value) #

Fired when a CodeMirror preference is changed. The preference may not have been saved to the database yet.

Parameters:

Name Type Description
name string

The name of the preference, and the corresponding key in the extensionRegistry and compartmentRegistry properties.

value boolean

The new value of the preference.

Source:
Fired when a CodeMirror preference is changed.

'ext.CodeMirror.preferences.ready'(preferences) #

Fired just before CodeMirrorPreferences has been instantiated.

Parameters:

Name Type Description
preferences CodeMirrorPreferences
Source:
Fired just before CodeMirrorPreferences has been instantiated.

'ext.CodeMirror.ready'($view, cm) #

Called just after CodeMirror is initialized.

Parameters:

Name Type Description
$view jQuery

The CodeMirror view element.

cm CodeMirror

The CodeMirror instance.

Source:
Called just after CodeMirror is initialized.