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.initialize();
} );

Extends

Constructor

new CodeMirrorWikiEditor(textarea, [langExtension]) #

Parameters:

Name Type Attributes Description
textarea HTMLTextAreaElement | jQuery | string

The textarea to replace with CodeMirror.
langExtension LanguageSupport | Extension optional

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 #

jQuery instance of the textarea for use with WikiEditor and jQuery plugins.

Type:

Overrides:
Source:
jQuery instance of the textarea for use with WikiEditor and jQuery plugins.

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.

container :HTMLDivElement #

The .ext-codemirror-wrapper container. This houses both the original textarea and the CodeMirror editor.

Type:

Overrides:
Source:
The .ext-codemirror-wrapper container.

contentAttributesExtension :Extensionprotected #

This specifies which attributes get added to the CodeMirror contenteditable .cm-content. 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 CodeMirror contenteditable .cm-content.

contentModel :string #

The content model of the page.

Type:

  • string
Overrides:
Source:
The content model of the page.

context :Object #

The WikiEditor context.

Type:

Source:
The WikiEditor context.

defaultExtensions :Extension|Array.<Extension> #

Default extensions used by CodeMirror. Extensions here should be applicable to all theoretical uses of CodeMirror in MediaWiki. This getter can be overridden to apply additional extensions before initialization. To apply a new extension after initialization, use applyExtension(), or through CodeMirrorExtensionRegistry using register() if it needs to be reconfigured (such as toggling on and off).

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 :Extensionprotected #

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.

domEventHandlersExtension :Extensionprotected #

Extension to bubble some DOM events to the original textarea.

The CodeMirror events are natively fired on the EditorView's .cm-content element, which is accessible through view.contentDOM. The scroll event is fired on the .cm-scroller element, which is accessible through view.scrollDOM.

Type:

Overrides:
Source:
Extension to bubble some DOM events to the original textarea.

editorAttributesExtension :Extensionprotected #

This specifies which attributes get added to the .cm-editor element (the entire editor). 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-editor element (the entire editor).

extensionRegistry :CodeMirrorExtensionRegistry #

Registry of CodeMirror Extensions.

Type:

Overrides:
Source:
Registry of CodeMirror Extensions.

gotoLine :CodeMirrorGotoLine #

The go-to line panel.

Type:

Overrides:
Source:
The go-to line panel.

heightExtension :Extension #

This extension sets the height of the CodeMirror editor to match the textarea. This getter can be overridden to change the height of the editor, but it's usually simpler to set the height of the textarea using CSS prior to initialization.

Type:

Overrides:
Source:

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

isActive :boolean #

Whether the CodeMirror instance is active.

Type:

  • boolean
Overrides:
Source:
Whether the CodeMirror instance is active.

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 :Extensionprotected #

Overrides for the CodeMirror library's internalization system.

Type:

Overrides:
Source:
See:
Overrides for the CodeMirror library's internalization system.

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.

realtimePreviewHandler :function|null #

The Realtime Preview handler.

Type:

  • function | null
Source:

The Realtime Preview handler.

The CodeMirror search panel.

searchExtension :Extension #

Extension for search and goto line functionality.

Type:

Overrides:
Source:
Extension for search and goto line functionality.

specialCharsExtension :Extensionprotected #

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.

textSelection :CodeMirrorTextSelection #

jQuery.textSelection overrides for CodeMirror.

Type:

Overrides:
Source:
jQuery.textSelection overrides for CodeMirror.

textarea :HTMLTextAreaElement #

The textarea that CodeMirror is bound to.

Type:

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

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.

view :EditorView #

The editor user interface.

Type:

Overrides:
Source:
The editor user interface.

whitespaceExtension #

This extension highlights whitespace characters.

Overrides:
Source:
This extension highlights whitespace characters.

Methods

activate()protected #

Activate CodeMirror on the textarea. This sets the state property and shows the editor view, hiding the original textarea.

initialize is expected to be called before this method.

Overrides:
Source:
Activate CodeMirror on the textarea.

addDarkModeMutationObserver() #

Use a MutationObserver to watch for CSS class changes to the element, and update the CodeMirror editor's theme accordingly. This is ony necessary for non-wikitext, where we don't use our own CSS classes during tokenization.

Overrides:
Source:

Use a MutationObserver to watch for CSS class changes to the element, and update the CodeMirror editor's theme accordingly.

addEditRecoveredHandler()protected #

Set a new edit recovery handler.

Overrides:
Source:
Set a new edit recovery handler.

addFormSubmitHandler()protected #

Sync the CodeMirror editor with the original textarea on form submission.

Overrides:
Source:
Sync the CodeMirror editor with the original textarea on form submission.

addMwHook(hook, fn)protected #

Add a handler for the given Hook. This method is used to ensure no hook handlers are duplicated across lifecycle methods, All handlers will be removed during deactivation.

Parameters:

Name Type Description
hook string
fn function
Overrides:
Source:
Add a handler for the given Hook.

addTextAreaJQueryHook()protected #

Define jQuery hook for .val() on the textarea.

Overrides:
Source:
See:
Define jQuery hook for .val() on the textarea.

applyExtension(extension) #

Apply an Extension to the CodeMirror editor. This is accomplished through top-level reconfiguration of the EditorView.

If the extension needs to be reconfigured (such as toggling on and off), use the extensionRegistry instead.

Example

mw.loader.using( 'ext.CodeMirror.v6' ).then( ( require ) => {
  mw.hook( 'ext.CodeMirror.ready' ).add( ( cm ) => {
    const { EditorView, Prec } = require( 'ext.CodeMirror.v6.lib' );
    // Disable spellchecking. Use Prec.high() to override the
    // contentAttributesExtension which adds spellcheck="true".
    cm.applyExtension( Prec.high( EditorView.contentAttributes.of( {
      spellcheck: 'false'
    } ) ) );
  } );
} );

Parameters:

Name Type Description
extension Extension
Overrides:
Source:
See:
Apply an Extension to the CodeMirror editor.

deactivate()protected #

Deactivate CodeMirror on the textarea, restoring the original textarea and hiding the editor. This life-cycle method should retain the view but discard the state.

Overrides:
Source:

Deactivate CodeMirror on the textarea, restoring the original textarea and hiding the editor.

destroy() #

Destroy the CodeMirror instance and revert to the original textarea. This action should be considered irreversible.

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

This method should only be called once per instance. Use toggle, activate, and deactivate to enable or disable the same CodeMirror instance programmatically, and restore or 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.

logEditFeature(action)protected #

Log usage of CodeMirror.

Parameters:

Name Type Description
action string
Overrides:
Source:
See:
Log usage of CodeMirror.

setupFeatureLogging()protected #

Add hook handlers to log usage of CodeMirror features.

Overrides:
Source:
Add hook handlers to log usage of CodeMirror features.

toggle([force]) #

Toggle CodeMirror on or off from the textarea. This will call initialize if CodeMirror is being enabled for the first time.

Parameters:

Name Type Attributes Description
force boolean optional

true to enable CodeMirror, false to disable. Note that the ext.CodeMirror.toggle hook will not be fired if this parameter is set.
Overrides:
Source:

Fires:

Toggle CodeMirror on or off from the textarea.

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.
Deprecated:
Source:
Called after CodeMirror is enabled or disabled in WikiEditor.