@bhsd/codemirror-wikitext

This repository contains a modified Wikitext language from MediaWiki extension CodeMirror and various language support extensions.

• Installation
• Basic Usage
• Language
  • mediawikiLanguage
• Keymap
  • escapeKeymap
  • formatKeymap
• Extensions
  • bidiIsolates
  • bracketMatching
  • codeFolding
  • colorPicker
  • hover
  • inlayHints
  • openLinks
  • refHover
  • signatureHelp
  • wikilint

Installation

You can install the package via npm and import it as a module:

npm install @bhsd/codemirror-wikitext

You may also want to install WikiParser-Node for pre-defined parser configurations:

npm install wikiparser-node

Basic Usage

You can simply import the mediawiki function to get the Wikitext language with full language support:

import {mediawiki} from '@bhsd/codemirror-wikitext';
import config from 'wikiparser-node/config/default.json' with {type: 'json'};
import type {LanguageSupport} from '@codemirror/language';

const langSupport: LanguageSupport = mediawiki(
	config,
	// (optional) specify the jsDelivr CDN for loading assets, default to https://fastly.jsdelivr.net
	'https://cdn.jsdelivr.net',
);

Here is an online demo.

Language

mediawikiLanguage

You can import the stream language for Wikitext:

import {mediawikiLanguage} from '@bhsd/codemirror-wikitext';
import config from 'wikiparser-node/config/default.json' with {type: 'json'};
import type {StreamLanguage} from '@codemirror/language';

const lang: StreamLanguage = mediawikiLanguage(config);

Keymap

escapeKeymap

Key bindings:

• 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

You may want to increase the precedence of these key bindings to override the default ones.

import {escapeKeymap} from '@bhsd/codemirror-wikitext';
import config from 'wikiparser-node/config/default.json' with {type: 'json'};
import type {KeyBinding} from '@codemirror/view';

const keymap: KeyBinding[] = escapeKeymap(
	config,
	// (optional) specify the jsDelivr CDN for loading assets, default to https://fastly.jsdelivr.net
	'https://cdn.jsdelivr.net',
);

formatKeymap

Formatting key bindings:

• 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

You may want to increase the precedence of these key bindings to override the default ones.

import {formatKeymap} from '@bhsd/codemirror-wikitext';
import type {KeyBinding} from '@codemirror/view';

const keymap: KeyBinding[] = formatKeymap;

Extensions

bidiIsolates

version added: 0.2.0

When the editor contains right-to-left text, isolate bidirectional text from the surrounding text. This extension is not included in the default mediawiki language support.

import {bidiIsolates} from '@bhsd/codemirror-wikitext';
import type {Extension} from '@codemirror/state';

const extension: Extension = bidiIsolates();

bracketMatching

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

import {bracketMatching} from '@bhsd/codemirror-wikitext';
import type {Extension} from '@codemirror/state';

const extension: Extension = bracketMatching();

codeFolding

Fold sections, templates, parser functions and extension tags.

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
• Ctrl + Alt + .: Fold all <ref> tags

import {codeFolding} from '@bhsd/codemirror-wikitext';
import type {Extension} from '@codemirror/state';

const extension: Extension = codeFolding();

colorPicker

Provide color pickers.

import {colorPicker} from '@bhsd/codemirror-wikitext';
import type {Extension} from '@codemirror/state';

const extension: Extension = colorPicker();

hover

Show the help information of a magic word when hovering.

import {hover} from '@bhsd/codemirror-wikitext';
import config from 'wikiparser-node/config/default.json' with {type: 'json'};
import type {Extension} from '@codemirror/state';

const extension: Extension = hover(
	config,
	// (optional) specify the jsDelivr CDN for loading assets, default to https://fastly.jsdelivr.net
	'https://cdn.jsdelivr.net',
);

inlayHints

Show inlay hints for anonymous parameters.

import {inlayHints} from '@bhsd/codemirror-wikitext';
import config from 'wikiparser-node/config/default.json' with {type: 'json'};
import type {Extension} from '@codemirror/state';

const extension: Extension = inlayHints(
	config,
	// (optional) specify the jsDelivr CDN for loading assets, default to https://fastly.jsdelivr.net
	'https://cdn.jsdelivr.net',
);

openLinks

version added: 0.2.0

CTRL/CMD-click opens a link in a new tab. You may want to supply the articlePath field in the parser configuration for internal links to work properly.

import {openLinks} from '@bhsd/codemirror-wikitext';
import config from 'wikiparser-node/config/default.json' with {type: 'json'};
import type {Extension} from '@codemirror/state';

const extension: Extension = openLinks(config);

refHover

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

import {refHover} from '@bhsd/codemirror-wikitext';
import config from 'wikiparser-node/config/default.json' with {type: 'json'};
import type {Extension} from '@codemirror/state';

const extension: Extension = refHover(
	config,
	// (optional) specify the jsDelivr CDN for loading assets, default to https://fastly.jsdelivr.net
	'https://cdn.jsdelivr.net',
);

signatureHelp

Show the parser function signature when typing.

import {signatureHelp} from '@bhsd/codemirror-wikitext';
import config from 'wikiparser-node/config/default.json' with {type: 'json'};
import type {Extension} from '@codemirror/state';

const extension: Extension = signatureHelp(
	config,
	// (optional) specify the jsDelivr CDN for loading assets, default to https://fastly.jsdelivr.net
	'https://cdn.jsdelivr.net',
);

wikilint

Provide syntax diagnostics using WikiParser-Node.

import {wikilint} from '@bhsd/codemirror-wikitext';
import config from 'wikiparser-node/config/default.json' with {type: 'json'};
import type {Extension} from '@codemirror/state';

const extension: Extension = wikilint(
	config,
	// (optional) specify the linting config; see https://github.com/bhsd-harry/wikiparser-node/wiki/Rules#configuration
	// In particular, Stylelint will not be loaded if the 'invalid-css' rule is disabled.
	{
		rules: {'invalid-css': 0},
		// (optional) hide the status bar
		statusBar: false,
	},
	// (optional) specify the jsDelivr CDN for loading assets, default to https://fastly.jsdelivr.net
	'https://cdn.jsdelivr.net',
);