@bhsd/codemirror-mediawiki
v2.18.6
Published
Modified CodeMirror mode based on wikimedia/mediawiki-extensions-CodeMirror
Downloads
834
Readme
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 textCtrl
+Shift
+]
/Cmd
+Alt
+]
: Unfold at the selected textCtrl
+Alt
+[
: Fold allCtrl
+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 entitiesCtrl
/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.