- Installation
- Browser Usage
- Language modes
- abusefilter
- css
- html
- javascript
- json
- lua
- mediawiki
- vue
- Other languages
- Themes
- light
- nord
- Other themes
- Constructor
- Accessors
- dialect
- lang
- textarea
- view
- visible
- Methods
- destroy
- extraKeys
- getLinter
- getNodeAt
- initialize
- lint
- localize
- prefer
- replaceSelections
- scrollTo
- setContent
- setIndent
- setLanguage
- setLineWrapping
- setTheme
- toggle
- update
- Static accessors
- CDN
- Static methods
- getMwConfig
- replaceSelections
- Extensions
- allowMultipleSelections
- autocompletion
- bidiIsolates
- bracketMatching
- closeBrackets
- codeFolding
- colorPicker
- escape
- highlightActiveLine
- highlightSelectionMatches
- highlightSpecialChars
- highlightTrailingWhitespace
- highlightWhitespace
- hover
- inlayHints
- openLinks
- refHover
- scrollPastEnd
- signatureHelp
- Known issues
- Syntax Highlighting

`js
// static import
import {
CodeMirror6,
registerMediaWiki,
registerHTML,
registerCSS,
registerJavaScript,
registerJSON,
registerLua,
registerVue,
registerAbuseFilter,
} from 'https://cdn.jsdelivr.net/npm/@bhsd/codemirror-mediawiki';
`

or

`js
import {
CodeMirror6,
registerMediaWiki,
registerHTML,
registerCSS,
registerJavaScript,
registerJSON,
registerLua,
registerVue,
registerAbuseFilter,
} from 'https://unpkg.com/@bhsd/codemirror-mediawiki/dist/main.min.js';
`

or

`js
// dynamic import
const {
CodeMirror6,
registerMediaWiki,
registerHTML,
registerCSS,
registerJavaScript,
registerJSON,
registerLua,
registerVue,
registerAbuseFilter,
} = await import('https://cdn.jsdelivr.net/npm/@bhsd/codemirror-mediawiki');
`

or

`js
const {
CodeMirror6,
registerMediaWiki,
registerHTML,
registerCSS,
registerJavaScript,
registerJSON,
registerLua,
registerVue,
registerAbuseFilter,
} = await import('https://unpkg.com/@bhsd/codemirror-mediawiki/dist/main.min.js');
`

You can bundle the AbuseFilter mode by importing the registerAbuseFilter function:

`js
import {registerAbuseFilter} from '@bhsd/codemirror-mediawiki';
registerAbuseFilter();
`

If you want a more granular control over the extensions, you can import the registerAbuseFilterCore function and the desired extensions:

`js
import {registerAbuseFilterCore} from '@bhsd/codemirror-mediawiki';
registerAbuseFilterCore();
`

The CSS mode contains a dialect for Extension:TemplateStyles. You can bundle the CSS mode by importing the registerCSS function:

`js
import {registerCSS} from '@bhsd/codemirror-mediawiki';
registerCSS();
`

If you want a more granular control over the extensions, you can import the registerCSSCore function and the desired extensions:

`js
import {registerCSSCore} from '@bhsd/codemirror-mediawiki';
registerCSSCore();
`

In addition to the common extensions, here are some CSS-specific extensions. Note that these extensions may not take effect if the corresponding common extensions are not registered:

`js
import {registerColorPickerForCSS} from '@bhsd/codemirror-mediawiki';
registerColorPickerForCSS();
`

This is a mixed MediaWiki-HTML mode, which is used for Extension:Widgets. You can bundle the HTML mode by importing the registerHTML function:

`js
import {registerHTML} from '@bhsd/codemirror-mediawiki';
registerHTML();
`

If you want a more granular control over the extensions, you can import the registerHTMLCore function and the desired extensions:

`js
import {registerHTMLCore} from '@bhsd/codemirror-mediawiki';
registerHTMLCore();
`

In addition to the common extensions, here are some HTML-specific extensions. Note that these extensions may not take effect if the corresponding common extensions are not registered:

`js
import {
registerBracketMatchingForHTML,
registerCloseBracketsForHTML,
registerColorPickerForHTML,
} from '@bhsd/codemirror-mediawiki';
registerBracketMatchingForHTML();
registerCloseBracketsForHTML();
registerColorPickerForHTML();
`

You can bundle the JavaScript mode by importing the registerJavaScript function:

`js
import {registerJavaScript} from '@bhsd/codemirror-mediawiki';
registerJavaScript();
`

If you want a more granular control over the extensions, you can import the registerJavaScriptCore function and the desired extensions:

`js
import {registerJavaScriptCore} from '@bhsd/codemirror-mediawiki';
registerJavaScriptCore();
`

You can bundle the JSON mode by importing the registerJSON function:

`js
import {registerJSON} from '@bhsd/codemirror-mediawiki';
registerJSON();
`

If you want a more granular control over the extensions, you can import the registerJSONCore function and the desired extensions:

`js
import {registerJSONCore} from '@bhsd/codemirror-mediawiki';
registerJSONCore();
`

You can bundle the Lua mode by importing the registerLua function:

`js
import {registerLua} from '@bhsd/codemirror-mediawiki';
registerLua();
`

If you want a more granular control over the extensions, you can import the registerLuaCore function and the desired extensions:

`js
import {registerLuaCore} from '@bhsd/codemirror-mediawiki';
registerLuaCore();
`

You can bundle the MediaWiki mode by importing the registerMediaWiki function:

`js
import {registerMediaWiki} from '@bhsd/codemirror-mediawiki';
// optionally pass the article path of a MediaWiki site
registerMediaWiki('https://www.mediawiki.org/wiki/');
`

The MediaWiki mode provides the following key bindings for quick formatting:

- Ctrl + 0: Plain paragraph
- Ctrl + 1-6: Headings level 1 to 6
- Ctrl + 7: Preformatted text
- Ctrl + 8: Blockquote
- Ctrl/Cmd + /: Comment
- Ctrl/Cmd + .: Superscript
- Ctrl/Cmd + ,: Subscript
- Ctrl/Cmd + B: Bold
- Ctrl/Cmd + I: Italic
- Ctrl/Cmd + U: Underline
- Ctrl/Cmd + K: Wiki link
- Ctrl + Shift + 5: Strikethrough
- Ctrl/Cmd + Shift + 6: Inline code
- Ctrl/Cmd + Shift + K: Ref tag

If you want a more granular control over the extensions, you can import the registerMediaWikiCore function and the desired extensions:

`js
import {registerMediaWikiCore} from '@bhsd/codemirror-mediawiki';
// optionally pass the article path of a MediaWiki site
registerMediaWikiCore('https://www.mediawiki.org/wiki/');
`

In addition to the common extensions, here are some MediaWiki-specific extensions. Note that these extensions may not take effect if the corresponding common extensions are not registered:

`js
import {
registerColorPickerForMediaWiki,
registerBracketMatchingForMediaWiki,
registerCodeFoldingForMediaWiki
} from '@bhsd/codemirror-mediawiki';
registerColorPickerForMediaWiki();
registerBracketMatchingForMediaWiki();
registerCodeFoldingForMediaWiki();
`

You can bundle the Vue mode by importing the registerVue function:

`js
import {registerVue} from '@bhsd/codemirror-mediawiki';
registerVue();
`

If you want a more granular control over the extensions, you can import the registerVueCore function and the desired extensions:

`js
import {registerVueCore} from '@bhsd/codemirror-mediawiki';
registerVueCore();
`

In addition to the common extensions, here are some Vue-specific extensions. Note that these extensions may not take effect if the corresponding common extensions are not registered:

`js
import {
registerCloseBracketsForVue,
registerColorPickerForVue,
} from '@bhsd/codemirror-mediawiki';
registerCloseBracketsForVue();
registerColorPickerForVue();
`

You can also register other languages by importing the registerLanguage function:

`js
import {registerLanguage} from '@bhsd/codemirror-mediawiki';
import {python} from '@codemirror/lang-python';
registerLanguage('python', python);
`

If you want a more granular control over the extensions, you can import the registerLanguageCore function and the desired extensions:

`js
import {registerLanguageCore} from '@bhsd/codemirror-mediawiki';
import {python} from '@codemirror/lang-python';
registerLanguageCore('python', python);
`

`js
import {registerTheme, nord} from '@bhsd/codemirror-mediawiki';
registerTheme('nord', nord);
`

You can also register other themes by importing the registerTheme function:

`js
import {registerTheme} from '@bhsd/codemirror-mediawiki';
import {oneDark} from '@codemirror/theme-one-dark';
registerTheme('one-dark', oneDark);
`

param: HTMLTextAreaElement the textarea element to be replaced by CodeMirror
param: string the language mode to be used, default as plain text
param: unknown the language configuration, only required for the MediaWiki mode and the mixed MediaWiki-HTML mode
param: boolean whether to initialize immediately, default as true

`js
let cm;
cm = new CodeMirror6(textarea); // plain text
cm = new CodeMirror6(textarea, 'mediawiki', mwConfig);
cm = new CodeMirror6(textarea, 'html', mwConfig);
cm = new CodeMirror6(textarea, 'css');
cm = new CodeMirror6(textarea, 'javascript');
cm = new CodeMirror6(textarea, 'json');
cm = new CodeMirror6(textarea, 'lua');
cm = new CodeMirror6(textarea, 'vue');
cm = new CodeMirror6(textarea, 'abusefilter', dialect);
`

type: 'sanitized-css' | undefined
Only used for Extension:TemplateStyles as a dialect of the CSS mode.

type: string
The current language mode, read-only.

type: HTMLTextAreaElement
The textarea element replaced by CodeMirror, read-only.

type: EditorView | undefined
The CodeMirror EditorView instance, read-only.

type: boolean
Whether the editor is visible, read-only.

Destroy the instance. This method is irrevocable and not recommended for general use. Instead, you should call the toggle method to hide the editor.

`js
cm.destroy();
`

param: [KeyBinding[]](https://codemirror.net/docs/ref/#view.KeyBinding) the extra key bindings
Add extra key bindings. Need initialization first.

`js
cm.extraKeys([
{key: 'Tab', run: () => console.log('Tab'), preventDefault: true},
]);
`

param: Record the optional linter configuration
returns: Promise<(state: EditorState) => Diagnostic[] | Promise>
Get the default linting function, which can be used as the argument of lint.

`js
const linter = await cm.getLinter(); // default linter configuration
const linterMediawiki = await cm.getLinter({include: true, i18n: 'zh-hans'}); // wikilint configuration
const linterJavaScript = await cm.getLinter({env, parserOptions, rules}); // ESLint configuration
const linterCSS = await cm.getLinter({rules}); // Stylelint configuration
`

param: number position
returns: SyntaxNode | undefined
Get the syntax node at the given position.

`js
const tree = cm.getNodeAt(0);
`

param: string extension name
returns: boolean
Check if the editor enables the given extension.

`js
const hasAutocompletion = cm.hasPreference('autocompletion');
`

param: unknown the optional language configuration
Initialize the editor.

`js
cm.initialize();
`

param: (state: EditorState) => Diagnostic[] | Promise the linting function
Set the linting function.

`js
cm.lint(({doc}) => [
/**
* @type {Diagnostic}
* @see https://codemirror.net/docs/ref/#lint.Diagnostic
*/
{
from: 0,
to: doc.toString().length,
message: 'error message',
severity: 'error',
},
]);
`

param: Record localization table
Set the localization table.

`js
cm.localize({
'Find': '查找',
});
`

param: string[] | Record the extensions to enable
Set the preferred CodeMirror extensions. Available extensions are introduced later.

`js
cm.prefer([
'allowMultipleSelections',
'autocompletion',
'bracketMatching',
'closeBrackets',
'codeFolding',
'highlightActiveLine',
'highlightSelectionMatches',
'highlightSpecialChars',
'highlightTrailingWhitespace',
'highlightWhitespace',
'scrollPastEnd',

// only available in CSS and MediaWiki modes
'colorPicker',

// only available in MediaWiki mode
'escape',
'hover',
'inlayHints',
'openLinks',
'refHover',
'signatureHelp',
]);
cm.prefer({
allowMultipleSelections: false,
autocompletion: false,
bracketMatching: false,
closeBrackets: false,
codeFolding: false,
highlightActiveLine: false,
highlightSelectionMatches: false,
highlightSpecialChars: false,
highlightTrailingWhitespace: false,
highlightWhitespace: false,
scrollPastEnd: false,

// only available in CSS and MediaWiki modes
colorPicker: false,

// only available in MediaWiki mode
escape: false,
hover: false,
inlayHints: false,
openLinks: false,
refHover: false,
signatureHelp: false,
});
`

param: (str: string, range: {from: number, to: number}) => string | [string, number, number?] the replacement function
Replace the selected text with the return value of the replacement function.

`js
cm.replaceSelections(str => str.toUpperCase());
`

param: number | {anchor: number, head: number} the position or range to scroll to, default as the current cursor position
Scroll to the given position or range. Need initialization first.

`js
cm.scrollTo();
`

param: string new content
param: boolean whether to force the content to be set in the read-only mode, default as false
Reset the content of the editor. Need initialization first.

`js
cm.setContent('');
`

param: string the indentation string, default as tab
Set the indentation string.

`js
cm.setIndent(' '.repeat(2));
cm.setIndent('\t');
`

param: string the language mode to be used, default as plain text
param: unknown the language configuration, only required for the MediaWiki mode and the mixed MediaWiki-HTML mode
Set the language mode.

`js
cm.setLanguage('mediawiki', mwConfig);
cm.setLanguage('html', mwConfig);
cm.setLanguage('css');
cm.setLanguage('javascript');
cm.setLanguage('json');
cm.setLanguage('lua');
cm.setLanguage('vue');
cm.setLanguage('abusefilter', dialect);
`

param: boolean whether to enable line wrapping
Switch between line wrapping and no line wrapping.

`js
cm.setLineWrapping(false);
cm.setLineWrapping(true);
`

param: string the theme name
Set the theme of the editor. The default theme is light, other themes need to be registered using the registerTheme function first:

`js
import {registerTheme, nord} from '@bhsd/codemirror-mediawiki';
registerTheme('nord', nord);
cm.setTheme('nord');
`

param: boolean whether to show the editor, optional
Switch between the CodeMirror editor and the native textarea. Need initialization first.

`js
cm.toggle();
cm.toggle(true); // show CodeMirror
cm.toggle(false); // hide CodeMirror
`

type: string
By default, libraries such as WikiParser-Node are loaded from fastly.jsdelivr.net. You can change the jsDelivr CDN by setting this property.

`js
CodeMirror6.CDN = 'https://cdn.jsdelivr.net';
`

param: Config the WikiLint configuration
returns: MwConfig
Derive the configuration for the MediaWiki mode from WikiLint configuration.

`js
const mwConfig = CodeMirror6.getMwConfig(config);
`

param: EditorView the CodeMirror EditorView instance
param: (str: string, range: {from: number, to: number}) => string | [string, number, number?] the replacement function
Replace the selected text with the return value of the replacement function.

`js
CodeMirror6.replaceSelections(cm.view, str => str.toUpperCase());
`

Allow multiple selections. This extension also enables rectangular selections by holding down the Alt key.

For granular control over the bundled extensions, you can import the registerAllowMultipleSelections function:

`js
import {registerAllowMultipleSelections} from '@bhsd/codemirror-mediawiki';
registerAllowMultipleSelections();
`

- Shift + Enter: Trigger autocompletion
- Tab: Accept the selected suggestion

For granular control over the bundled extensions, you can import the registerAutocompletion function:

`js
import {registerAutocompletion} from '@bhsd/codemirror-mediawiki';
registerAutocompletion();
`

This extension is not included in the mediawiki language support by default. You need to import the registerBidiIsolates function:

`js
import {registerBidiIsolates} from '@bhsd/codemirror-mediawiki';
registerBidiIsolates();
`

For granular control over the bundled extensions, you can import the registerBracketMatching function:

`js
import {registerBracketMatching} from '@bhsd/codemirror-mediawiki';
registerBracketMatching();
`

Automatically close brackets ({, [ and () and quotes (", and ' except for the MediaWiki mode).

For granular control over the bundled extensions, you can import the registerCloseBrackets function:

`js
import {registerCloseBrackets} from '@bhsd/codemirror-mediawiki';
registerCloseBrackets();
`

- Ctrl + Shift + [/Cmd + Alt + [: Fold at the selected text
- Ctrl + Shift + ]/Cmd + Alt + ]: Unfold at the selected text
- Ctrl + Alt + [: Fold all
- Ctrl + Alt + ]: Unfold all
- Ctrl + Alt + .: Fold all tags

For granular control over the bundled extensions, you can import the registerCodeFolding function:

`js
import {registerCodeFolding} from '@bhsd/codemirror-mediawiki';
registerCodeFolding();
`

For granular control over the bundled extensions, you can import the registerColorPicker functions. Note that you also need to register this extension for specific languages(CSS, MediaWiki or Vue):

`js
import {registerColorPicker} from '@bhsd/codemirror-mediawiki';
registerColorPicker();
`

- Ctrl/Cmd + [: Escape the selected text with HTML entities
- Ctrl/Cmd + ]: Escape the selected text with URL encoding
- Ctrl/Cmd + \: Escape the selected text with magic words

For granular control over the bundled extensions, you can import the registerEscape function:

`js
import {registerEscape} from '@bhsd/codemirror-mediawiki';
// optionally pass the article path of a MediaWiki site
registerEscape('https://www.mediawiki.org/wiki/');
`

For granular control over the bundled extensions, you can import the registerHighlightActiveLine function:

`js
import {registerHighlightActiveLine} from '@bhsd/codemirror-mediawiki';
registerHighlightActiveLine();
`

For granular control over the bundled extensions, you can import the registerHighlightSelectionMatches function:

`js
import {registerHighlightSelectionMatches} from '@bhsd/codemirror-mediawiki';
registerHighlightSelectionMatches();
`

For granular control over the bundled extensions, you can import the registerHighlightSpecialChars function:

`js
import {registerHighlightSpecialChars} from '@bhsd/codemirror-mediawiki';
registerHighlightSpecialChars();
`

For granular control over the bundled extensions, you can import the registerHighlightTrailingWhitespace function:

`js
import {registerHighlightTrailingWhitespace} from '@bhsd/codemirror-mediawiki';
registerHighlightTrailingWhitespace();
`

For granular control over the bundled extensions, you can import the registerHighlightWhitespace function:

`js
import {registerHighlightWhitespace} from '@bhsd/codemirror-mediawiki';
registerHighlightWhitespace();
`

For granular control over the bundled extensions, you can import the registerHover function:

`js
import {registerHover} from '@bhsd/codemirror-mediawiki';
// optionally pass the article path of a MediaWiki site
registerHover('https://www.mediawiki.org/wiki/');
`

For granular control over the bundled extensions, you can import the registerInlayHints function:

`js
import {registerInlayHints} from '@bhsd/codemirror-mediawiki';
// optionally pass the article path of a MediaWiki site
registerInlayHints('https://www.mediawiki.org/wiki/');
`

For granular control over the bundled extensions, you can import the registerOpenLinks function:

`js
import {registerOpenLinks} from '@bhsd/codemirror-mediawiki';
// optionally pass the article path of a MediaWiki site
registerOpenLinks('https://www.mediawiki.org/wiki/');
`

Show the content of the tag defined elsewhere when hovering.

For granular control over the bundled extensions, you can import the registerRefHover function:

`js
import {registerRefHover} from '@bhsd/codemirror-mediawiki';
// optionally pass the article path of a MediaWiki site
registerRefHover('https://www.mediawiki.org/wiki/');
`

For granular control over the bundled extensions, you can import the registerScrollPastEnd function:

`js
import {registerScrollPastEnd} from '@bhsd/codemirror-mediawiki';
registerScrollPastEnd();
`

For granular control over the bundled extensions, you can import the registerSignatureHelp function:

`js
import {registerSignatureHelp} from '@bhsd/codemirror-mediawiki';
// optionally pass the article path of a MediaWiki site
registerSignatureHelp('https://www.mediawiki.org/wiki/');
`

1. Non-existing parser functions starting with # are highlighted as parser functions (Example)).
1. Wikitext in template parameter names is not highlighted (Example)).
1. Template parameter names followed by a newline are not recognized (Example)).
1. Template-like syntax without a template name (Example).

#### Heading

1. Comments at the SOL should not break section headings (Example)).

#### Table

1. Comments at the SOL should not break table syntax (Example).
1. !! in links should start a new ` (Example).

#### External link

1. IPv6 addresses are not supported (Example)).
1. External links inside double brackets are highlighted incorrectly (Example)).

#### Block element

1. Comments at the SOL break the highlighting (Example).
1. False positives of preformatted text when there are categories (Example) or HTML tags (Example)).

#### Language conversion

1. BCP 47 language codes are not supported in language conversion (Example)).