This repository contains a modified version of the frontend scripts and styles from MediaWiki extension CodeMirror. The goal is to support a standalone integration between CodeMirror and Wikitext, without the need for a MediaWiki environment.
Here is a demo. To experiment with the RTL (right-to-left) support, you can append ?rtl=1 to the URL.
Nonetheless, this repository also provides a customized version with additional functionality for use on a MediaWiki site. Browser editing tools such as Wikiplus-highlight and an InPageEdit plugin are built upon it. Please refer to a separate README file for the information.
You can download the code via CDN, for example:
// static import
import {CodeMirror6} from 'https://cdn.jsdelivr.net/npm/@bhsd/codemirror-mediawiki';or
import {CodeMirror6} from 'https://unpkg.com/@bhsd/codemirror-mediawiki';or
// dynamic import
const {CodeMirror6} = await import('https://cdn.jsdelivr.net/npm/@bhsd/codemirror-mediawiki');or
const {CodeMirror6} = await import('https://unpkg.com/@bhsd/codemirror-mediawiki');Expand
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 optional language configuration
param: boolean whether to initialize immediately, default as true
const cm = new CodeMirror6(textarea); // plain text
const cm = new CodeMirror6(textarea, 'mediawiki', mwConfig);
const cm = new CodeMirror6(textarea, 'html', mwConfig); // mixed MediaWiki-HTML
const cm = new CodeMirror6(textarea, 'css');
const cm = new CodeMirror6(textarea, 'javascript');
const cm = new CodeMirror6(textarea, 'json');
const cm = new CodeMirror6(textarea, 'lua');Expand
type: HTMLTextAreaElement
The textarea element replaced by CodeMirror, read-only.
Expand
version added: 2.0.14
type: string
The current language mode, read-only.
Expand
type: EditorView | undefined
The CodeMirror EditorView instance, read-only.
Expand
version added: 2.1.3
type: boolean
Whether the editor is visible, read-only.
Expand
version added: 2.2.2
param: KeyBinding[] the extra key bindings
Add extra key bindings. Need initialization first.
cm.extraKeys([
{key: 'Tab', run: () => console.log('Tab'), preventDefault: true},
]);Expand
version added: 2.1.3
param: Record<string, any> the optional linter configuration
returns: Promise<(doc: Text) => Diagnostic[] | Promise<Diagnostic[]>>
Get the default linting function, which can be used as the argument of lint.
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 configurationExpand
version added: 2.4.2
param: number position
returns: SyntaxNode | undefined
Get the syntax node at the given position.
const tree = cm.getNodeAt(0);Expand
version added: 2.11.1
param: unknown the optional language configuration
Initialize the editor.
cm.initialize();Expand
param: (doc: Text) => Diagnostic[] | Promise<Diagnostic[]> the linting function
Set the linting function.
cm.lint(doc => [
/**
* @type {Diagnostic}
* @see https://codemirror.net/docs/ref/#lint.Diagnostic
*/
{
from: 0,
to: doc.toString().length,
message: 'error message',
severity: 'error',
},
]);Expand
version added: 2.3.3
param: Record<string, string> localization table
Set the localization table.
cm.localize({
'Find': '查找',
});Expand
version added: 2.0.9
param: string[] | Record<string, boolean> the preferred CodeMirror extensions
Set the preferred CodeMirror extensions. Available extensions are introduced later.
cm.prefer([
'allowMultipleSelections',
'autocompletion',
'bracketMatching',
'closeBrackets',
'highlightActiveLine',
'highlightSpecialChars',
'highlightWhitespace',
'highlightTrailingWhitespace',
'highlightSelectionMatches',
'codeFolding',
'scrollPastEnd',
// only available in MediaWiki mode
'escape',
'tagMatching',
'refHover',
]);
cm.prefer({
allowMultipleSelections: false,
autocompletion: false,
bracketMatching: false,
closeBrackets: false,
highlightActiveLine: false,
highlightSpecialChars: false,
highlightWhitespace: false,
highlightTrailingWhitespace: false,
highlightSelectionMatches: false,
codeFolding: false,
scrollPastEnd: false,
// only available in MediaWiki mode
escape: false,
tagMatching: false,
refHover: false,
});Expand
version added: 2.6.2
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.
cm.scrollTo();Expand
version added: 2.1.8
param: string new content
Reset the content of the editor. Need initialization first.
cm.setContent('');Expand
version added: 2.0.9
param: string the indentation string, default as tab
Set the indentation string.
cm.setIndent(' '.repeat(2));
cm.setIndent('\t');Expand
param: string the language mode to be used, default as plain text
param: unknown the optional language configuration
Set the language mode.
cm.setLanguage('mediawiki', mwConfig);
cm.setLanguage('html', mwConfig); // mixed MediaWiki-HTML
cm.setLanguage('css');
cm.setLanguage('javascript');
cm.setLanguage('json');
cm.setLanguage('lua');Expand
version added: 2.1.3
param: boolean whether to show the editor, optional
Switch between the CodeMirror editor and the native textarea. Need initialization first.
cm.toggle();
cm.toggle(true); // show CodeMirror
cm.toggle(false); // hide CodeMirrorExpand
Refresh linting immediately.
Expand
version added: 2.4.7
param: Config the WikiLint configuration
returns: MwConfig
Derive the configuration for the MediaWiki mode from WikiLint configuration.
const mwConfig = CodeMirror6.getMwConfig(config);Expand
version added: 2.2.2
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.
CodeMirror6.replaceSelections(cm.view, str => str.toUpperCase());version added: 2.1.11
Allow multiple selections. This extension also enables rectangular selections by holding down the Alt key.
version added: 2.5.1
Provide autocompletion for MediaWiki, CSS and JavaScript modes.
version added: 2.0.9
Matched or unmatched brackets are highlighted in cyan or dark red when the cursor is next to them.
version added: 2.0.9
Automatically close brackets ({, [ and () and quotes (", and ' except for the MediaWiki mode).
Highlight the line the cursor is on in light cyan.
Show invisible characters as red dots.
version added: 2.0.12
Show spaces and tabs as dots and arrows.
version added: 2.0.9
Highlight trailing whitespace in a red-orange color.
version added: 2.15.3
Highlight texts that match the selection in light green.
version added: 2.3.0
Fold sections, templates, parser functions and extension tags in the MediaWiki mode, and code blocks in other modes.
Key bindings:
Ctrl+Shift+[/Cmd+Alt+[: Fold at the selected textCtrl+Shift+]/Cmd+Alt+]: Unfold at the selected textCtrl+Alt+[: Fold allCtrl+Alt+]: Unfold all
version added: 2.15.3
Allow the editor to be scrolled down past the end of the document.
version added: 2.18.0
Provide color pickers for CSS and MediaWiki modes.
version added: 2.2.2
Key bindings:
Ctrl/Cmd+[: Escape the selected text with HTML entitiesCtrl/Cmd+]: Escape the selected text with URL encoding
version added: 2.4.1
Matched or unmatched tags are highlighted in cyan or dark red when the cursor is inside.
version added: 2.17.1
Show the content of the <ref> tag defined elsewhere when hovering.
version added: 2.19.6
CTRL/CMD-click opens a link in a new tab.
- Preformatted text with a leading space may have false positives.
- Template parameter name followed by a newline (Example).
- Wikitext in template parameter names (Example).
- Double URI encoding in link targets (Example).
- Double HTML escaping in link targets (Example).
- Comments at the start of a line (Example).