Expand all

CodeMirrorWikiEditor

CodeMirror integration with WikiEditor.

Use this class if you want WikiEditor's toolbar. If you don't need the toolbar, using 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, mediawikiLang() );
  cmWe.addCodeMirrorToWikiEditor();
} );

Extends

Constructor

new CodeMirrorWikiEditor($textarea, langExtension) #

Parameters:

Name Type Description
$textarea jQuery

The textarea to replace with CodeMirror.

langExtension LanguageSupport | Extension

Language support and its extension(s).

Source:

Properties

$oldSearchBtn :jQuery|null #

The old WikiEditor search button, to be restored if CodeMirror is disabled.

Type:

Source:
The old WikiEditor search button, to be restored if CodeMirror is disabled.

$searchBtn :jQuery|null #

The WikiEditor search button, which is usurped to open the CodeMirror search panel.

Type:

Source:
The WikiEditor search button, which is usurped to open the CodeMirror search panel.

$textarea :jQuery #

The textarea that CodeMirror is bound to.

Type:

Overrides:
Source:
The textarea that CodeMirror is bound to.

activeLineExtension :Extension #

Extension for highlighting the active line.

Type:

Overrides:
Source:
Extension for highlighting the active line.

bracketMatchingExtension :Extension #

This extension adds bracket matching to the CodeMirror editor.

Type:

Overrides:
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:

Overrides:
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:

Overrides:
Source:
See:
Default extensions used by CodeMirror.

dirCompartment :Compartment #

Compartment to control the direction of the editor.

Type:

Overrides:
Source:
Compartment to control the direction of the editor.

dirExtension :Extension #

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

Type:

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

editRecoveryHandler :function|null #

The edit recovery handler.

Type:

  • function | null
Overrides:
Source:
The edit recovery handler.

formSubmitEventHandler :function|null #

The form submit event handler.

Type:

  • function | null
Overrides:
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:

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

keymap :CodeMirrorKeymap #

CodeMirror key mappings and help dialog.

Type:

Overrides:
Source:
CodeMirror key mappings and help dialog.

langExtension :LanguageSupport|Extension #

Language support and its extension(s).

Type:

Overrides:
Source:
Language support and its extension(s).

lineNumberingExtension :Extension #

Extension for line numbering.

Type:

Overrides:
Source:
Extension for line numbering.

lineWrappingExtension :Extension #

Extension for line wrapping.

Type:

Overrides:
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:

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

preferences :CodeMirrorPreferences #

The CodeMirror preferences panel.

Type:

Overrides:
Source:
The CodeMirror preferences panel.

readOnly :boolean #

Whether the textarea is read-only.

Type:

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

realtimePreviewDisableHandler :function|null #

The ext.WikiEditor.realtimepreview.disable hook handler.

Type:

  • function | null
Source:
The ext.WikiEditor.realtimepreview.disable hook handler.

realtimePreviewEnableHandler :function|null #

The ext.WikiEditor.realtimepreview.enable hook handler.

Type:

  • function | null
Source:
The ext.WikiEditor.realtimepreview.enable hook handler.

realtimePreviewHandler :function|null #

The Realtime Preview handler.

Type:

  • function | null
Source:

The Realtime Preview handler.

searchExtension :Extension #

Extension for search and goto line functionality.

Type:

Overrides:
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:

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

state :EditorState #

The editor state.

Type:

Overrides:
Source:
The editor state.

surface :ve.ui.Surface #

The VisualEditor surface CodeMirror is bound to.

Type:

Overrides:
Source:
The VisualEditor surface CodeMirror is bound to.

textSelection :CodeMirrorTextSelection #

jQuery.textSelection overrides for CodeMirror.

Type:

Overrides:
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:

Overrides:
Source:

Fires:

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

useCodeMirror :boolean #

Whether CodeMirror is currently enabled.

Type:

  • boolean
Source:
Whether CodeMirror is currently enabled.

view :EditorView #

The editor user interface.

Type:

Overrides:
Source:
The editor user interface.

Methods

addCodeMirrorToWikiEditor() #

Adds the CodeMirror button to WikiEditor.

Source:
Adds the CodeMirror button to WikiEditor.

destroy() #

Destroy the CodeMirror instance and revert to the original textarea.

Overrides:
Source:

Fires:

Destroy the CodeMirror instance and revert to the original textarea.

enableCodeMirror() #

Replaces the default textarea with CodeMirror.

Source:

Fires:

Replaces the default textarea with CodeMirror.

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.

Overrides:
Source:

Fires:

Setup CodeMirror and add it to the DOM.

setCodeMirrorPreference() #

switchCodeMirror() #

Enables or disables CodeMirror.

Events

'ext.CodeMirror.switch'(enabled, $textarea) #

Called after CodeMirror is enabled or disabled in WikiEditor.

Parameters:

Name Type Description
enabled boolean

Whether CodeMirror is enabled.

$textarea jQuery

The current "editor", either the original textarea or the .cm-editor element.

Source:
Called after CodeMirror is enabled or disabled in WikiEditor.