@bhsd/lezer-abusefilter

This repository contains CodeMirror 6 language support for MediaWiki AbuseFilter syntax. Here is an online demo, with syntax highlighting, indentation, autocompletion, code folding, hover tooltips and linting.

Installation

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

npm install @bhsd/lezer-abusefilter

Language Support

It is recommended to dynamically generate language support for MediaWiki AbuseFilter with lists of predefined keywords, variables and functions from Extension:AbuseFilter. These lists will be used for better syntax highlighting and autocompletion.

import {abusefilter} from '@bhsd/lezer-abusefilter';
import type {LanguageSupport} from '@codemirror/language';

const langSupport: LanguageSupport = abusefilter({
	keywords: [],
	functions: [],
	variables: [],
	deprecated: [], // List of deprecated variables
	disabled: [], // List of disabled functions
	hoverInfo: new Map([ // Map of keywords/functions/variables to their descriptions
		['in', 'Contained in string'],
		['contains', 'Left string contains right string'],
		// ...
	]),
});

Language

You can also import the LR language for MediaWiki AbuseFilter alone. However, this will not include any predefined variables or functions for autocompletion.

import {abusefilterLanguage} from '@bhsd/lezer-abusefilter';

Lint Source

This package also provides a lint source adapted from AbuseFilter analyzer for syntax checking.

Extension:AbuseFilter also provides an API endpoint for syntax checking, but it requires permission to access and the error messages are sometimes not very informative. However, it can provide full linting of PCRE regular expressions, which is not perfectly supported by AbuseFilter analyzer.

import {linter} from '@codemirror/lint';
import {analyzer} from '@bhsd/lezer-abusefilter';
import type {Extension} from '@codemirror/state';

const extension: Extension = linter(analyzer);

Hover Tooltips

This package also provides hover tooltips for built-in variables and functions, with descriptions from Extension:AbuseFilter. This extension is automatically included in the language support if the hoverInfo field is provided.

The tooltips are unstyled by default, so you may want to add your own styles for a custom CSS class.

import {EditorView} from '@codemirror/view';
import {getDefaultHoverTooltip} from '@bhsd/lezer-abusefilter';
import type {Extension} from '@codemirror/state';

const extension: Extension = [
	getDefaultHoverTooltip('my-hover-tooltip'),
	EditorView.theme({
		'.my-hover-tooltip': {
			padding: '2px 5px',
		},
	}),
];

You can also customize the tooltip content by providing your own descriptions.

import {getHoverTooltip} from '@bhsd/lezer-abusefilter';
import type {Extension} from '@codemirror/state';

const hoverInfo = new Map([
	['in', 'Contained in string'],
	['contains', 'Left string contains right string'],
	// ...
]);
const extension: Extension = getHoverTooltip(hoverInfo, 'my-hover-tooltip');