npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bhsd/codemirror-mediawiki

v2.18.6

Published

Modified CodeMirror mode based on wikimedia/mediawiki-extensions-CodeMirror

Downloads

834

Readme

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.