@bhsd/codemirror-mediawiki 2.1.4 → 2.1.7

package/dist/mediawiki.d.ts

@@ -13,6 +13,8 @@ export interface MwConfig {
     variants?: string[];
     img?: Record<string, string>;
     nsid: Record<string, number>;
+    permittedHtmlTags?: string[];
+    implicitlyClosedHtmlTags?: string[];
 }
 /**
  * Gets a LanguageSupport instance for the MediaWiki mode.

package/mw/dist/base.js

@@ -1,7 +1,7 @@
-import { CodeMirror6 } from 'https://testingcf.jsdelivr.net/npm/@bhsd/codemirror-mediawiki@2.1.4/dist/main.min.js';
+import { CodeMirror6 } from 'https://testingcf.jsdelivr.net/npm/@bhsd/codemirror-mediawiki@2.1.7/dist/main.min.js';
 (() => {
     var _a;
-    mw.loader.load('https://testingcf.jsdelivr.net/npm/@bhsd/codemirror-mediawiki@2.1.4/mediawiki.min.css', 'text/css');
+    mw.loader.load('https://testingcf.jsdelivr.net/npm/@bhsd/codemirror-mediawiki@2.1.7/mediawiki.min.css', 'text/css');
     const instances = new WeakMap();
     $.valHooks['textarea'] = {
         get(elem) {
@@ -157,7 +157,7 @@ import { CodeMirror6 } from 'https://testingcf.jsdelivr.net/npm/@bhsd/codemirror
             const { lang } = this;
             if (!(lang in linters)) {
                 linters[lang] = await this.getLinter(opt);
-                if (this.lang === 'mediawiki' || this.lang === 'html') {
+                if (this.lang === 'mediawiki') {
                     const mwConfig = await getMwConfig(), config = {
                         ...await wikiparse.getConfig(),
                         ext: Object.keys(mwConfig.tags),
@@ -244,5 +244,5 @@ import { CodeMirror6 } from 'https://testingcf.jsdelivr.net/npm/@bhsd/codemirror
             })();
         }
     });
-    Object.assign(window, { CodeMirror });
+    Object.assign(window, { CodeMirror6: CodeMirror });
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bhsd/codemirror-mediawiki",
-	"version": "2.1.4",
+	"version": "2.1.7",
 	"description": "Modified CodeMirror mode based on wikimedia/mediawiki-extensions-CodeMirror",
 	"keywords": [
 		"mediawiki",
@@ -12,9 +12,13 @@
 	},
 	"license": "GPL-2.0",
 	"files":[
-		"/dist/*.[jt]s",
+		"/src/",
+		"!/src/gh-page.ts",
+		"!/src/plugins.ts",
+		"!/src/*.d.ts",
+		"/dist/",
 		"/mediawiki.css",
-		"/mw/dist/*.js"
+		"/mw/dist/"
 	],
 	"browser": "dist/main.min.js",
 	"main": "./dist/main.min.js",
@@ -24,7 +28,7 @@
 		"url": "git+https://github.com/bhsd-harry/codemirror-mediawiki.git"
 	},
 	"scripts": {
-		"build:core": "esbuild ./src/codemirror.ts --bundle --minify --target=es2018 --format=esm --outfile=dist/main.min.js; tsc --emitDeclarationOnly; rm dist/gh-page.d.ts",
+		"build:core": "esbuild ./src/codemirror.ts --bundle --minify --target=es2018 --format=esm --sourcemap --outfile=dist/main.min.js; tsc --emitDeclarationOnly; rm dist/gh-page.d.ts",
 		"build:mw": "bash build.sh mw/base.ts mw/dist/base.js",
 		"build:gh-page": "bash build.sh src/gh-page.ts gh-page.js",
 		"build": "npm run build:core && npm run build:mw",
@@ -66,6 +70,6 @@
 		"stylelint-config-recommended": "^14.0.0",
 		"types-mediawiki": "^1.4.0",
 		"typescript": "^5.1.6",
-		"wikilint": "^2.3.0"
+		"wikilint": "^2.3.2"
 	}
 }

package/src/codemirror.ts

@@ -0,0 +1,386 @@
+import {Compartment, EditorState} from '@codemirror/state';
+import {
+	EditorView,
+	lineNumbers,
+	keymap,
+	highlightSpecialChars,
+	highlightActiveLine,
+	highlightWhitespace,
+	highlightTrailingWhitespace,
+} from '@codemirror/view';
+import {
+	syntaxHighlighting,
+	defaultHighlightStyle,
+	indentOnInput,
+	StreamLanguage,
+	LanguageSupport,
+	bracketMatching,
+	indentUnit,
+} from '@codemirror/language';
+import {defaultKeymap, historyKeymap, history} from '@codemirror/commands';
+import {searchKeymap} from '@codemirror/search';
+import {linter, lintGutter, openLintPanel, closeLintPanel} from '@codemirror/lint';
+import {closeBrackets} from '@codemirror/autocomplete';
+import {mediawiki, html} from './mediawiki';
+import * as plugins from './plugins';
+import type {ViewPlugin} from '@codemirror/view';
+import type {Extension, Text} from '@codemirror/state';
+import type {Diagnostic} from '@codemirror/lint';
+import type {Highlighter} from '@lezer/highlight';
+import type {Linter} from 'eslint';
+
+export type {MwConfig} from './mediawiki';
+export type LintSource = (doc: Text) => Diagnostic[] | Promise<Diagnostic[]>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const languages: Record<string, (config?: any) => LanguageSupport | []> = {
+	plain: () => [],
+	mediawiki,
+	html,
+};
+for (const [language, parser] of Object.entries(plugins)) {
+	languages[language] = (): LanguageSupport => new LanguageSupport(StreamLanguage.define(parser));
+}
+const linters: Record<string, Extension> = {};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const avail: Record<string, [ (config?: any) => Extension, Record<string, unknown> ]> = {
+	highlightSpecialChars: [highlightSpecialChars, {}],
+	highlightActiveLine: [highlightActiveLine, {}],
+	highlightWhitespace: [highlightWhitespace, {}],
+	highlightTrailingWhitespace: [highlightTrailingWhitespace, {}],
+	bracketMatching: [bracketMatching, {mediawiki: {brackets: '[]{}'}}],
+	closeBrackets: [closeBrackets, {}],
+};
+
+/**
+ * 使用传统方法加载脚本
+ * @param src 脚本地址
+ * @param target 脚本全局变量名
+ */
+const loadScript = (src: string, target: string): Promise<void> => new Promise(resolve => {
+	if (target in window) {
+		resolve();
+		return;
+	}
+	const script = document.createElement('script');
+	script.src = `https://testingcf.jsdelivr.net/${src}`;
+	script.onload = (): void => {
+		resolve();
+	};
+	document.head.append(script);
+});
+
+export class CodeMirror6 {
+	readonly #textarea;
+	readonly #language;
+	readonly #linter;
+	readonly #extensions;
+	readonly #indent;
+	readonly #view;
+	#lang;
+	#visible = true;
+
+	get textarea(): HTMLTextAreaElement {
+		return this.#textarea;
+	}
+
+	get view(): EditorView {
+		return this.#view;
+	}
+
+	get lang(): string {
+		return this.#lang;
+	}
+
+	get visible(): boolean {
+		return this.#visible;
+	}
+
+	/**
+	 * @param textarea 文本框
+	 * @param lang 语言
+	 * @param config 语言设置
+	 */
+	constructor(textarea: HTMLTextAreaElement, lang = 'plain', config?: unknown) {
+		this.#textarea = textarea;
+		this.#lang = lang;
+		this.#language = new Compartment();
+		this.#linter = new Compartment();
+		this.#extensions = new Compartment();
+		this.#indent = new Compartment();
+		let timer: number | undefined;
+		const extensions = [
+			this.#language.of(languages[lang]!(config)),
+			this.#linter.of([]),
+			this.#extensions.of([]),
+			this.#indent.of(indentUnit.of('\t')),
+			syntaxHighlighting(defaultHighlightStyle as Highlighter),
+			EditorView.contentAttributes.of({
+				accesskey: textarea.accessKey,
+				dir: textarea.dir,
+				lang: textarea.lang,
+			}),
+			EditorState.readOnly.of(textarea.readOnly),
+			lineNumbers(),
+			EditorView.lineWrapping,
+			history(),
+			indentOnInput(),
+			keymap.of([
+				...defaultKeymap,
+				...historyKeymap,
+				...searchKeymap,
+			]),
+			EditorView.updateListener.of(({state: {doc}, docChanged}) => {
+				if (docChanged) {
+					clearTimeout(timer);
+					timer = window.setTimeout(() => {
+						textarea.value = doc.toString();
+					}, 400);
+				}
+			}),
+		];
+		this.#view = new EditorView({
+			extensions,
+			doc: textarea.value,
+		});
+		const {offsetHeight, selectionStart, selectionEnd, scrollTop} = textarea,
+			{fontSize, lineHeight} = getComputedStyle(textarea),
+			hasFocus = document.activeElement === textarea;
+		textarea.parentNode!.insertBefore(this.#view.dom, textarea);
+		this.#view.dom.style.minHeight = '2em';
+		this.#view.dom.style.height = `${offsetHeight}px`;
+		this.#view.dom.style.fontSize = fontSize;
+		this.#view.scrollDOM.style.lineHeight = lineHeight;
+		this.#view.requestMeasure();
+		this.#view.dispatch({
+			selection: {anchor: selectionStart, head: selectionEnd},
+		});
+		textarea.style.display = 'none';
+		if (hasFocus) {
+			this.#view.focus();
+		}
+		requestAnimationFrame(() => {
+			this.#view.scrollDOM.scrollTop = scrollTop;
+		});
+	}
+
+	/**
+	 * 设置语言
+	 * @param lang 语言
+	 * @param config 语言设置
+	 */
+	setLanguage(lang = 'plain', config?: unknown): void {
+		this.#view.dispatch({
+			effects: [
+				this.#language.reconfigure(languages[lang]!(config)),
+				this.#linter.reconfigure(linters[lang] || []),
+			],
+		});
+		this.#lang = lang;
+		(linters[lang] ? openLintPanel : closeLintPanel)(this.#view);
+	}
+
+	/**
+	 * 开始语法检查
+	 * @param lintSource 语法检查函数
+	 */
+	lint(lintSource?: LintSource): void {
+		const linterExtension = lintSource
+			? [
+				linter(view => lintSource(view.state.doc)),
+				lintGutter(),
+			]
+			: [];
+		if (lintSource) {
+			linters[this.#lang] = linterExtension;
+		} else {
+			delete linters[this.#lang];
+		}
+		this.#view.dispatch({
+			effects: [this.#linter.reconfigure(linterExtension)],
+		});
+		(lintSource ? openLintPanel : closeLintPanel)(this.#view);
+	}
+
+	/** 立即更新语法检查 */
+	update(): void {
+		const extension = this.#linter.get(this.#view.state) as [[ unknown, ViewPlugin<{
+			set: boolean;
+			force(): void;
+		}> ]] | [];
+		if (extension.length > 0) {
+			const plugin = this.#view.plugin(extension[0]![1])!;
+			plugin.set = true;
+			plugin.force();
+		}
+	}
+
+	/**
+	 * 添加扩展
+	 * @param names 扩展名
+	 */
+	prefer(names: readonly string[]): void {
+		this.#view.dispatch({
+			effects: [
+				this.#extensions.reconfigure(names.map(name => {
+					const [extension, configs] = avail[name]!;
+					return extension(configs[this.#lang]);
+				})),
+			],
+		});
+	}
+
+	/**
+	 * 设置缩进
+	 * @param indent 缩进字符串
+	 */
+	setIndent(indent: string): void {
+		this.#view.dispatch({
+			effects: [this.#indent.reconfigure(indentUnit.of(indent))],
+		});
+	}
+
+	/** 获取默认linter */
+	async getLinter(opt?: Record<string, unknown>): Promise<LintSource | undefined> {
+		switch (this.#lang) {
+			case 'mediawiki': {
+				const src = 'combine/npm/wikiparser-node@1.3.2-b/extensions/dist/base.min.js,'
+					+ 'npm/wikiparser-node@1.3.2-b/extensions/dist/lint.min.js';
+				await loadScript(src, 'wikiparse');
+				const wikiLinter = new wikiparse.Linter(opt?.['include'] as boolean);
+				return doc => wikiLinter.codemirror(doc.toString());
+			}
+			case 'javascript': {
+				await loadScript('npm/eslint-linter-browserify', 'eslint');
+				/** @see https://npmjs.com/package/@codemirror/lang-javascript */
+				const esLinter = new eslint.Linter(),
+					conf: Linter.Config = {
+						env: {
+							browser: true,
+							es2018: true,
+						},
+						parserOptions: {
+							ecmaVersion: 9,
+							sourceType: 'module',
+						},
+						rules: {},
+						...opt,
+					};
+				for (const [name, {meta}] of esLinter.getRules()) {
+					if (meta?.docs!.recommended) {
+						conf.rules![name] ??= 2;
+					}
+				}
+				return doc => esLinter.verify(doc.toString(), conf)
+					.map(({message, severity, line, column, endLine, endColumn}) => {
+						const from = doc.line(line).from + column - 1;
+						return {
+							message,
+							severity: severity === 1 ? 'warning' : 'error',
+							from,
+							to: endLine === undefined ? from + 1 : doc.line(endLine).from + endColumn! - 1,
+						};
+					});
+			}
+			case 'css': {
+				await loadScript('gh/openstyles/stylelint-bundle/dist/stylelint-bundle.min.js', 'stylelint');
+				/** @see https://npmjs.com/package/stylelint-config-recommended */
+				const conf = {
+					rules: {
+						'annotation-no-unknown': true,
+						'at-rule-no-unknown': true,
+						'block-no-empty': true,
+						'color-no-invalid-hex': true,
+						'comment-no-empty': true,
+						'custom-property-no-missing-var-function': true,
+						'declaration-block-no-duplicate-custom-properties': true,
+						'declaration-block-no-duplicate-properties': [
+							true,
+							{
+								ignore: ['consecutive-duplicates-with-different-syntaxes'],
+							},
+						],
+						'declaration-block-no-shorthand-property-overrides': true,
+						'font-family-no-duplicate-names': true,
+						'font-family-no-missing-generic-family-keyword': true,
+						'function-calc-no-unspaced-operator': true,
+						'function-linear-gradient-no-nonstandard-direction': true,
+						'function-no-unknown': true,
+						'keyframe-block-no-duplicate-selectors': true,
+						'keyframe-declaration-no-important': true,
+						'media-feature-name-no-unknown': true,
+						'media-query-no-invalid': true,
+						'named-grid-areas-no-invalid': true,
+						'no-descending-specificity': true,
+						'no-duplicate-at-import-rules': true,
+						'no-duplicate-selectors': true,
+						'no-empty-source': true,
+						'no-invalid-double-slash-comments': true,
+						'no-invalid-position-at-import-rule': true,
+						'no-irregular-whitespace': true,
+						'property-no-unknown': true,
+						'selector-anb-no-unmatchable': true,
+						'selector-pseudo-class-no-unknown': true,
+						'selector-pseudo-element-no-unknown': true,
+						'selector-type-no-unknown': [
+							true,
+							{
+								ignore: ['custom-elements'],
+							},
+						],
+						'string-no-newline': true,
+						'unit-no-unknown': true,
+						...opt?.['rules'] as Record<string, unknown>,
+					},
+				};
+				return async doc => {
+					const {results} = await stylelint.lint({code: doc.toString(), config: conf});
+					return results.flatMap(({warnings}) => warnings)
+						.map(({text, severity, line, column, endLine, endColumn}) => ({
+							message: text,
+							severity,
+							from: doc.line(line).from + column - 1,
+							to: endLine === undefined ? doc.line(line).to : doc.line(endLine).from + endColumn! - 1,
+						}));
+				};
+			}
+			case 'lua':
+				await loadScript('npm/luaparse', 'luaparse');
+				/** @see https://github.com/ajaxorg/ace/blob/master/lib/ace/mode/lua_worker.js */
+				return doc => {
+					try {
+						luaparse.parse(doc.toString());
+					} catch (e) {
+						if (e instanceof luaparse.SyntaxError) {
+							return [
+								{
+									message: e.message,
+									severity: 'error',
+									from: e.index,
+									to: e.index,
+								},
+							];
+						}
+					}
+					return [];
+				};
+			default:
+				return undefined;
+		}
+	}
+
+	/**
+	 * 在编辑器和文本框之间切换
+	 * @param show 是否显示编辑器
+	 */
+	toggle(show = !this.#visible): void {
+		if (show && !this.#visible) {
+			this.#view.dispatch({
+				changes: {from: 0, to: this.#view.state.doc.length, insert: this.#textarea.value},
+			});
+		}
+		this.#visible = show;
+		this.#view.dom.style.setProperty('display', show ? '' : 'none', 'important');
+		this.#textarea.style.display = show ? 'none' : '';
+	}
+}

package/src/config.ts

@@ -0,0 +1,215 @@
+/**
+ * @author MusikAnimal and others
+ * @license GPL-2.0-or-later
+ * @link https://gerrit.wikimedia.org/g/mediawiki/extensions/CodeMirror
+ */
+
+import {Tag} from '@lezer/highlight';
+
+/**
+ * Configuration for the MediaWiki highlighting mode for CodeMirror.
+ */
+export const modeConfig = {
+
+	/**
+	 * All HTML/XML tags permitted in MediaWiki Core.
+	 *
+	 * @see https://www.mediawiki.org/wiki/Extension:CodeMirror#Extension_integration
+	 */
+	permittedHtmlTags: [
+		'b',
+		'bdi',
+		'bdo',
+		'del',
+		'i',
+		'ins',
+		'u',
+		'font',
+		'big',
+		'small',
+		'sub',
+		'sup',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'h6',
+		'cite',
+		'code',
+		'em',
+		's',
+		'strike',
+		'strong',
+		'tt',
+		'var',
+		'div',
+		'center',
+		'blockquote',
+		'q',
+		'ol',
+		'ul',
+		'dl',
+		'table',
+		'caption',
+		'pre',
+		'ruby',
+		'rb',
+		'rp',
+		'rt',
+		'rtc',
+		'p',
+		'span',
+		'abbr',
+		'dfn',
+		'kbd',
+		'samp',
+		'data',
+		'time',
+		'mark',
+		'br',
+		'wbr',
+		'hr',
+		'li',
+		'dt',
+		'dd',
+		'td',
+		'th',
+		'tr',
+		'noinclude',
+		'includeonly',
+		'onlyinclude',
+		'img',
+		'meta',
+		'link',
+	],
+
+	/**
+	 * HTML tags that are only self-closing.
+	 */
+	implicitlyClosedHtmlTags: [
+		'br',
+		'hr',
+		'wbr',
+		'img',
+		'meta',
+		'link',
+	],
+
+	/**
+	 * Mapping of MediaWiki-esque token identifiers to a standardized lezer highlighting tag.
+	 * Values are one of the default highlighting tags.
+	 *
+	 * Once we allow use of other themes, we may want to tweak these values for aesthetic reasons.
+	 *
+	 * @see https://lezer.codemirror.net/docs/ref/#highlight.tags
+	 * @internal
+	 */
+	tags: {
+		apostrophes: 'mw-apostrophes',
+		apostrophesBold: 'mw-apostrophes-bold',
+		apostrophesItalic: 'mw-apostrophes-italic',
+		comment: 'mw-comment',
+		doubleUnderscore: 'mw-double-underscore',
+		extLink: 'mw-extlink',
+		extLinkBracket: 'mw-extlink-bracket',
+		extLinkProtocol: 'mw-extlink-protocol',
+		extLinkText: 'mw-extlink-text',
+		hr: 'mw-hr',
+		htmlTagAttribute: 'mw-htmltag-attribute',
+		htmlTagBracket: 'mw-htmltag-bracket',
+		htmlTagName: 'mw-htmltag-name',
+		linkBracket: 'mw-link-bracket',
+		linkDelimiter: 'mw-link-delimiter',
+		linkText: 'mw-link-text',
+		linkToSection: 'mw-link-tosection',
+		list: 'mw-list',
+		parserFunction: 'mw-parserfunction',
+		parserFunctionBracket: 'mw-parserfunction-bracket',
+		parserFunctionDelimiter: 'mw-parserfunction-delimiter',
+		parserFunctionName: 'mw-parserfunction-name',
+		sectionHeader: 'mw-section-header',
+		sectionHeader1: 'mw-section-1',
+		sectionHeader2: 'mw-section-2',
+		sectionHeader3: 'mw-section-3',
+		sectionHeader4: 'mw-section-4',
+		sectionHeader5: 'mw-section-5',
+		sectionHeader6: 'mw-section-6',
+		signature: 'mw-signature',
+		tableBracket: 'mw-table-bracket',
+		tableDefinition: 'mw-table-definition',
+		tableDelimiter: 'mw-table-delimiter',
+		template: 'mw-template',
+		templateArgumentName: 'mw-template-argument-name',
+		templateBracket: 'mw-template-bracket',
+		templateDelimiter: 'mw-template-delimiter',
+		templateName: 'mw-template-name',
+		templateVariable: 'mw-templatevariable',
+		templateVariableBracket: 'mw-templatevariable-bracket',
+		templateVariableName: 'mw-templatevariable-name',
+		section: 'mw-section',
+		em: 'mw-em',
+		error: 'mw-error',
+		extGround: 'mw-ext-ground',
+		ext2Ground: 'mw-ext2-ground',
+		ext2LinkGround: 'mw-ext2-link-ground',
+		ext3Ground: 'mw-ext3-ground',
+		ext3LinkGround: 'mw-ext3-link-ground',
+		extLinkGround: 'mw-ext-link-ground',
+		extTag: 'mw-exttag',
+		extTagAttribute: 'mw-exttag-attribute',
+		extTagBracket: 'mw-exttag-bracket',
+		extTagName: 'mw-exttag-name',
+		freeExtLink: 'mw-free-extlink',
+		freeExtLinkProtocol: 'mw-free-extlink-protocol',
+		htmlEntity: 'mw-html-entity',
+		link: 'mw-link',
+		linkGround: 'mw-link-ground',
+		linkPageName: 'mw-link-pagename',
+		pageName: 'mw-pagename',
+		skipFormatting: 'mw-skipformatting',
+		strong: 'mw-strong',
+		tableCaption: 'mw-table-caption',
+		templateExtGround: 'mw-template-ext-ground',
+		templateExt2Ground: 'mw-template-ext2-ground',
+		templateExt2LinkGround: 'mw-template-ext2-link-ground',
+		templateExt3Ground: 'mw-template-ext3-ground',
+		templateExt3LinkGround: 'mw-template-ext3-link-ground',
+		templateExtLinkGround: 'mw-template-ext-link-ground',
+		templateGround: 'mw-template-ground',
+		templateLinkGround: 'mw-template-link-ground',
+		templateVariableDelimiter: 'mw-templatevariable-delimiter',
+		template2ExtGround: 'mw-template2-ext-ground',
+		template2Ext2Ground: 'mw-template2-ext2-ground',
+		template2Ext3Ground: 'mw-template2-ext3-ground',
+		templatet2Ext2LinkGround: 'mw-template2-ext2-link-ground',
+		template2Ext3LinkGround: 'mw-template2-ext3-link-ground',
+		template2ExtLinkGround: 'mw-template2-ext-link-ground',
+		template2Ground: 'mw-template2-ground',
+		template2LinkGround: 'mw-template2-link-ground',
+		template3ExtGround: 'mw-template3-ext-ground',
+		template3Ext2Ground: 'mw-template3-ext2-ground',
+		template3Ext3Ground: 'mw-template3-ext3-ground',
+		template3ExtLinkGround: 'mw-template3-ext-link-ground',
+		template3Ext2LinkGround: 'mw-template3-ext2-link-ground',
+		template3Ext3LinkGround: 'mw-template3-ext3-link-ground',
+		template3Ground: 'mw-template3-ground',
+		template3LinkGround: 'mw-template3-link-ground',
+	},
+
+	/**
+	 * These are custom tokens (a.k.a. tags) that aren't mapped to any of the standardized tags.
+	 *
+	 * TODO: pass parent Tags in Tag.define() where appropriate for better theming.
+	 *
+	 * @see https://codemirror.net/docs/ref/#language.StreamParser.tokenTable
+	 * @see https://lezer.codemirror.net/docs/ref/#highlight.Tag%5Edefine
+	 */
+	get tokenTable(): Record<string, Tag> {
+		const table: Record<string, Tag> = {};
+		for (const className of Object.values(this.tags)) {
+			table[className] = Tag.define();
+		}
+		return table;
+	},
+};