@bhsd/codemirror-mediawiki v2.18.6

• Description
• Usage
• Constructor
• Accessors - textarea - lang - view - visible
• Methods - extraKeys - getLinter - getNodeAt - initialize - lint - localize - prefer - scrollTo - setContent - setIndent - setLanguage - toggle - update
• Static methods - getMwConfig - replaceSelections
• Extensions - allowMultipleSelections - autocompletion - bracketMatching - closeBrackets - highlightActiveLine - highlightSpecialChars - highlightWhitespace - highlightTrailingWhitespace - highlightSelectionMatches - codeFolding - scrollPastEnd - escape - tagMatching - refHover

Description

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 in 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.

Usage

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');

Constructor

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');

Accessors

textarea

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

lang

version added: 2.0.14

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

view

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

visible

version added: 2.1.3

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

Methods

extraKeys

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},
]);

getLinter

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 configuration

getNodeAt

version added: 2.4.2

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

const tree = cm.getNodeAt(0);

initialize

version added: 2.11.1

param: unknown the optional language configuration
Initialize the editor.

cm.initialize();

lint

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',
	},
]);

localize

version added: 2.3.3

param: Record<string, string> localization table
Set the localization table.

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

prefer

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,
});

scrollTo

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();

setContent

version added: 2.1.8

param: string new content
Reset the content of the editor. Need initialization first.

cm.setContent('');

setIndent

version added: 2.0.9

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

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

setLanguage

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');

toggle

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 CodeMirror

update

Refresh linting immediately.

Static methods

getMwConfig

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);

replaceSelections

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());

Extensions

allowMultipleSelections

version added: 2.1.11

Allow multiple selections.

autocompletion

version added: 2.5.1

Provide autocompletion for MediaWiki, CSS and JavaScript modes.

bracketMatching

version added: 2.0.9

Matched or unmatched brackets are highlighted in cyan or dark red when the cursor is next to them.

closeBrackets

version added: 2.0.9

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

highlightActiveLine

Highlight the line the cursor is on in light cyan.

highlightSpecialChars

Show invisible characters as red dots.

highlightWhitespace

version added: 2.0.12

Show spaces and tabs as dots and arrows.

highlightTrailingWhitespace

version added: 2.0.9

Highlight trailing whitespace in a red-orange color.

highlightSelectionMatches

version added: 2.15.3

Highlight texts that match the selection in light green.

codeFolding

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 text
• Ctrl + Shift + ]/Cmd + Alt + ]: Unfold at the selected text
• Ctrl + Alt + [: Fold all
• Ctrl + Alt + ]: Unfold all

scrollPastEnd

version added: 2.15.3

Allow the editor to be scrolled down past the end of the document.

colorPicker

version added: 2.18.0

Provide color pickers for CSS and MediaWiki modes.

escape

version added: 2.2.2

Key bindings:

• Ctrl/Cmd + [: Escape the selected text with HTML entities
• Ctrl/Cmd + ]: Escape the selected text with URL encoding

tagMatching

version added: 2.4.1

Matched or unmatched tags are highlighted in cyan or dark red when the cursor is inside.

refHover

version added: 2.17.1

Show the content of the <ref> tag defined elsewhere when hovering.