2.18.6 • Published 8 months ago

@bhsd/codemirror-mediawiki v2.18.6

Weekly downloads
-
License
GPL-2.0
Repository
github
Last release
8 months ago

npm version CodeQL

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.

2.18.5

8 months ago

2.18.6

8 months ago

2.18.4

8 months ago

2.18.3

8 months ago

2.18.1

9 months ago

2.18.2

9 months ago

2.18.0

9 months ago

2.17.4

11 months ago

2.17.5

9 months ago

2.15.4

12 months ago

2.15.5

12 months ago

2.15.2

12 months ago

2.15.3

12 months ago

2.15.0

12 months ago

2.15.1

12 months ago

2.14.9

1 year ago

2.14.7

1 year ago

2.14.8

1 year ago

2.14.5

1 year ago

2.14.6

1 year ago

2.14.3

1 year ago

2.14.4

1 year ago

2.14.1

1 year ago

2.14.2

1 year ago

2.14.0

1 year ago

2.17.2

11 months ago

2.17.3

11 months ago

2.17.0

11 months ago

2.17.1

11 months ago

2.16.0

11 months ago

2.13.1

1 year ago

2.13.0

1 year ago

2.12.6

1 year ago

2.12.5

1 year ago

2.12.4

1 year ago

2.12.3

1 year ago

2.12.2

1 year ago

2.12.1

1 year ago

2.12.0

1 year ago

2.11.2

1 year ago

2.11.3

1 year ago

2.11.1

1 year ago

2.11.0

1 year ago

2.10.0

1 year ago

2.9.5

1 year ago

2.9.4

1 year ago

2.9.3

1 year ago

2.9.2

1 year ago

2.9.1

1 year ago

2.9.0

1 year ago

2.8.3

1 year ago

2.8.1

1 year ago

2.8.0

1 year ago

2.7.6

1 year ago

2.7.7

1 year ago

2.8.2

1 year ago

2.7.5

1 year ago

2.7.4

1 year ago

2.7.3

1 year ago

2.7.2

1 year ago

2.7.1

1 year ago

2.6.11

1 year ago

2.6.10

1 year ago

2.7.0

1 year ago

2.6.9

1 year ago

2.6.8

1 year ago

2.6.7

1 year ago

2.6.6

1 year ago

2.6.5

1 year ago

2.6.4

1 year ago

2.6.1

1 year ago

2.6.0

1 year ago

2.6.3

1 year ago

2.6.2

1 year ago

2.5.2

1 year ago

2.5.0

1 year ago

2.5.1

1 year ago

2.4.7

1 year ago

2.4.6

1 year ago

2.4.3

1 year ago

2.4.5

1 year ago

2.4.4

1 year ago

2.4.2

1 year ago

2.4.1

1 year ago

2.4.0

1 year ago

2.3.4

1 year ago

2.3.3

1 year ago

2.3.5

1 year ago

2.3.0

1 year ago

2.3.2

1 year ago

2.3.1

1 year ago

2.2.1

1 year ago

2.2.0

1 year ago

2.2.3

1 year ago

2.2.2

1 year ago

2.1.14

1 year ago

2.1.15

1 year ago

2.1.13

1 year ago

2.1.12

1 year ago

2.1.11

1 year ago

2.1.10

1 year ago

2.1.9

1 year ago

2.1.8

1 year ago

2.1.4

1 year ago

2.1.3

1 year ago

2.1.6

1 year ago

2.1.5

1 year ago

2.1.7

1 year ago

2.1.2

1 year ago

2.1.1

1 year ago

2.1.0

1 year ago

2.0.15

1 year ago

2.0.13

2 years ago

2.0.14

2 years ago

2.0.11

2 years ago

2.0.12

2 years ago

2.0.10

2 years ago

2.0.9

2 years ago

2.0.8

2 years ago

2.0.5

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.4

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.1.12

2 years ago

1.1.11

2 years ago