@bhsd/codemirror-mediawiki 3.11.5 → 3.12.0

package/README.md

@@ -68,6 +68,7 @@ If you are just looking for a CodeMirror 6 language mode and language support ex
 	- [bidiIsolates](#bidiisolates)
 	- [bracketMatching](#bracketmatching)
 	- [closeBrackets](#closebrackets)
+	- [closeTags](#closetags)
 	- [codeFolding](#codefolding)
 	- [colorPicker](#colorpicker)
 	- [escape](#escape)
@@ -259,11 +260,11 @@ In addition to the common [extensions](#extensions), here are some HTML-specific
 ```js
 import {
 	registerBracketMatchingForHTML,
-	registerCloseBracketsForHTML,
+	registerCloseTagsForHTML,
 	registerColorPickerForHTML,
 } from '@bhsd/codemirror-mediawiki';
 registerBracketMatchingForHTML();
-registerCloseBracketsForHTML();
+registerCloseTagsForHTML();
 registerColorPickerForHTML();
 ```
 
@@ -408,10 +409,10 @@ In addition to the common [extensions](#extensions), here are some Vue-specific
 
 ```js
 import {
-	registerCloseBracketsForVue,
+	registerCloseTagsForVue,
 	registerColorPickerForVue,
 } from '@bhsd/codemirror-mediawiki';
-registerCloseBracketsForVue();
+registerCloseTagsForVue();
 registerColorPickerForVue();
 ```
 
@@ -722,6 +723,7 @@ cm.prefer([
 	'autocompletion',
 	'bracketMatching',
 	'closeBrackets',
+	'closeTags',
 	'codeFolding',
 	'highlightActiveLine',
 	'highlightSelectionMatches',
@@ -746,6 +748,7 @@ cm.prefer({
 	autocompletion: false,
 	bracketMatching: false,
 	closeBrackets: false,
+	closeTags: false,
 	codeFolding: false,
 	highlightActiveLine: false,
 	highlightSelectionMatches: false,
@@ -1070,6 +1073,30 @@ registerCloseBrackets();
 
 </details>
 
+### closeTags
+
+<details>
+	<summary>Expand</summary>
+
+*version added: 3.12.0*
+
+Automatically close HTML/XML tags.
+
+For granular control over the bundled extensions, you need to register this extension for specific languages([HTML](#html), [MediaWiki](#mediawiki) or [Vue](#vue)):
+
+```js
+import {
+	registerCloseTagsForHTML,
+	registerCloseTagsForMediaWiki,
+	registerCloseTagsForVue,
+} from '@bhsd/codemirror-mediawiki';
+registerCloseTagsForHTML();
+registerCloseTagsForMediaWiki();
+registerCloseTagsForVue();
+```
+
+</details>
+
 ### codeFolding
 
 <details>
@@ -1105,11 +1132,19 @@ registerCodeFolding();
 
 Provide color pickers for CSS and MediaWiki modes.
 
-For granular control over the bundled extensions, you can import the `registerColorPicker` functions. Note that you also need to register this extension for specific languages([CSS](#css), [MediaWiki](#mediawiki) or [Vue](#vue)):
+For granular control over the bundled extensions, you need to register this extension for specific languages([CSS](#css), [HTML](#html), [MediaWiki](#mediawiki) or [Vue](#vue)):
 
 ```js
-import {registerColorPicker} from '@bhsd/codemirror-mediawiki';
-registerColorPicker();
+import {
+	registerColorPickerForCSS,
+	registerColorPickerForHTML,
+	registerColorPickerForMediaWiki,
+	registerColorPickerForVue,
+} from '@bhsd/codemirror-mediawiki';
+registerColorPickerForCSS();
+registerColorPickerForHTML();
+registerColorPickerForMediaWiki();
+registerColorPickerForVue();
 ```
 
 </details>

package/dist/closeTags.d.ts

@@ -0,0 +1,3 @@
+import type { Extension } from '@codemirror/state';
+declare const _default: () => Extension;
+export default _default;

package/dist/closeTags.js

@@ -0,0 +1,31 @@
+import { EditorView } from '@codemirror/view';
+import { syntaxTree } from '@codemirror/language';
+import { getTag, searchTag } from './matchTag.js';
+import { hasTag } from './mediawiki.js';
+const brackets = ['extTagBracket', 'htmlTagBracket'];
+export default () => EditorView.inputHandler.of((view, from, to, text, insertTransaction) => {
+    if (view.composing || view.state.readOnly || from !== to || text !== '>') {
+        return false;
+    }
+    const base = insertTransaction(), { state } = base, tree = syntaxTree(state), closeTags = state.changeByRange(range => {
+        const didType = state.sliceDoc(range.from - 1, range.to) === text, { head } = range, after = tree.resolveInner(head, -1);
+        if (didType && hasTag(after.name, brackets) && head === after.from + 1) {
+            const tag = getTag(state, after.prevSibling);
+            if (tag && !tag.closing && !tag.selfClosing && !searchTag(state, tag)) {
+                return {
+                    range,
+                    changes: { from: head, to: head, insert: `</${tag.name}>` },
+                };
+            }
+        }
+        return { range };
+    });
+    if (closeTags.changes.empty) {
+        return false;
+    }
+    view.dispatch([
+        base,
+        state.update(closeTags, { userEvent: 'input.complete', scrollIntoView: true }),
+    ]);
+    return true;
+});

package/dist/codemirror.js

@@ -2,7 +2,7 @@ import { EditorView, lineNumbers, keymap, highlightActiveLineGutter } from '@cod
 import { EditorSelection, Compartment, EditorState, SelectionRange, } from '@codemirror/state';
 import { syntaxHighlighting, defaultHighlightStyle, indentOnInput, indentUnit, ensureSyntaxTree, syntaxTree, } from '@codemirror/language';
 import { defaultKeymap, historyKeymap, history, redo, indentWithTab, insertNewlineKeepIndent, deleteCharBackwardStrict, } from '@codemirror/commands';
-import { searchKeymap } from '@codemirror/search';
+import { search, searchKeymap } from '@codemirror/search';
 import { linter, lintGutter } from '@codemirror/lint';
 import elt from 'crelt';
 import { base, panelSelector, panelsSelector, diagnosticSelector, noDetectionLangs } from './constants.js';
@@ -33,7 +33,7 @@ export const optionalFunctions = {
         return () => { };
     },
 };
-const editExtensions = new Set(['closeBrackets', 'autocompletion', 'signatureHelp', 'escape']);
+const editExtensions = new Set(['closeBrackets', 'closeTags', 'autocompletion', 'signatureHelp', 'escape']);
 const linters = {};
 const phrases = {};
 /**
@@ -156,6 +156,23 @@ export class CodeMirror6 {
             EditorView.editorAttributes.of({ lang: l }),
             lineNumbers(),
             highlightActiveLineGutter(),
+            search({
+                scrollToMatch(range, view) {
+                    const scrollRect = view.scrollDOM.getBoundingClientRect(), startCoords = view.coordsAtPos(range.from), endCoords = view.coordsAtPos(range.to), isInViewport = startCoords && startCoords.top >= scrollRect.top
+                        && endCoords && endCoords.bottom <= scrollRect.bottom;
+                    return EditorView.scrollIntoView(range, { y: isInViewport ? 'nearest' : 'center' });
+                },
+            }),
+            EditorView.scrollHandler.of((view, { head }, options) => {
+                if (options.x === 'nearest' && options.y === 'center') {
+                    const { scrollDOM } = view, { clientHeight } = scrollDOM, { top, height } = view.lineBlockAt(head);
+                    if (height < clientHeight - options.yMargin * 2) {
+                        scrollDOM.scrollTop = top + (height - clientHeight) / 2;
+                    }
+                    options.y = 'nearest';
+                }
+                return false;
+            }),
             keymap.of([
                 ...defaultKeymap,
                 ...searchKeymap,
@@ -197,7 +214,7 @@ export class CodeMirror6 {
                 if (focusChanged) {
                     textarea.dispatchEvent(new FocusEvent(this.#view.hasFocus ? 'focus' : 'blur'));
                 }
-                if (selectionSet && this.lang === 'mediawiki'
+                GH: if (selectionSet && this.lang === 'mediawiki'
                     && ['localhost:8080', 'bhsd-harry.github.io'].includes(location.host)) {
                     const tree = syntaxTree(state), { head } = state.selection.main, { name } = tree.resolve(head), innerName = tree.resolveInner(head).name;
                     if (name !== innerName) {

package/dist/fold.js

@@ -5,7 +5,7 @@ import { getRegex } from '@bhsd/common';
 import elt from 'crelt';
 import { tokens } from './config.js';
 import { bgDark } from './constants.js';
-import { matchTag, getTag } from './matchTag.js';
+import { searchTag, getTag } from './matchTag.js';
 import { braceStackUpdate, sliceDoc } from './util.js';
 const getExtRegex = /* @__PURE__ */ getRegex(tag => new RegExp(`mw-tag-${tag}(?![a-z])`, 'u'));
 export const updateSelection = (pos, { to }) => Math.max(pos, to), updateAll = (pos, { from, to }) => from <= pos && to > pos ? to : pos;
@@ -80,10 +80,10 @@ export const foldable = (state, posOrNode, tree, refOnly = false) => {
             while (nextSibling && !(isExtBracket(nextSibling) && !regex.test(nextSibling.name))) {
                 ({ nextSibling } = nextSibling);
             }
-            const next = nextSibling?.nextSibling;
+            const next = nextSibling?.nextSibling, closing = next && getTag(state, next);
             // The closing bracket of the current extension tag
-            if (nextSibling && (!refOnly || next && refNames.has(getTag(state, next)?.name))) {
-                return { from: matchTag(state, nextSibling.to).end.to, to: nextSibling.from };
+            if (closing && (!refOnly || refNames.has(closing.name))) {
+                return { from: searchTag(state, closing).to, to: nextSibling.from };
             }
         }
         return false;

package/dist/html.js

@@ -6,7 +6,7 @@ import { LanguageSupport } from '@codemirror/language';
 import { cssCompletion } from './css.js';
 import { jsCompletion, markGlobalsPlugin } from './javascript.js';
 import { mediawikiBase } from './mediawiki.js';
-import { getLightHighlightStyle } from './theme.js';
+import { lightHighlightStyle } from './theme.js';
 export default (config, cm) => {
     const { language, support } = mediawikiBase(config), 
     /** @test */
@@ -30,7 +30,7 @@ export default (config, cm) => {
         jsCompletion,
         cssCompletion(),
         support,
-        getLightHighlightStyle(),
+        lightHighlightStyle,
         markGlobalsPlugin(cm),
     ]);
     Object.assign(langSupport, { nestedMWLanguage: language });

package/dist/index.d.ts

@@ -27,7 +27,10 @@ export declare const registerAllowMultipleSelections: () => void;
 export declare const registerAutocompletion: () => void;
 /** Register the `codeFolding` extension */
 export declare const registerCodeFolding: () => void;
-/** Register the `colorPicker` extension */
+/**
+ * Register the `colorPicker` extension
+ * @deprecated This function does nothing and will be removed in a future release
+ */
 export declare const registerColorPicker: () => void;
 /** Register all common extensions */
 export declare const registerCommonExtensions: () => void;
@@ -78,6 +81,8 @@ export declare const registerColorPickerForMediaWiki: () => void;
 export declare const registerBracketMatchingForMediaWiki: () => void;
 /** Register the `codeFolding` extension for MediaWiki */
 export declare const registerCodeFoldingForMediaWiki: () => void;
+/** Register the `closeTags` extension for MediaWiki */
+export declare const registerCloseTagsForMediaWiki: () => void;
 /**
  * Register MediaWiki core language support
  * @param articlePath article path (e.g., 'https://www.mediawiki.org/wiki/')
@@ -89,14 +94,21 @@ export declare const registerMediaWikiCore: (articlePath?: string, templatedata?
 export declare const registerHTML: () => void;
 /** Register the `bracketMatching` extension for mixed MediaWiki-HTML */
 export declare const registerBracketMatchingForHTML: () => void;
-/** Register the `closeBrackets` extension for mixed MediaWiki-HTML */
+/**
+ * Register the `closeBrackets` extension for mixed MediaWiki-HTML
+ * @deprecated This function does nothing and will be removed in a future release
+ */
 export declare const registerCloseBracketsForHTML: () => void;
+/** Register the `closeTags` extension for mixed MediaWiki-HTML */
+export declare const registerCloseTagsForHTML: () => void;
 /** Register the `colorPicker` extension for mixed MediaWiki-HTML */
 export declare const registerColorPickerForHTML: () => void;
 /** Register mixed MediaWiki-HTML core language support */
 export declare const registerHTMLCore: () => void;
 /** Register JavaScript language support */
 export declare const registerJavaScript: () => void;
+/** Register the `bracketMatching` extension for JavaScript */
+export declare const registerBracketMatchingForJavaScript: () => void;
 /** Register JavaScript core language support */
 export declare const registerJavaScriptCore: () => void;
 /** Register CSS language support */
@@ -115,8 +127,15 @@ export declare const registerLua: () => void;
 export declare const registerLuaCore: () => void;
 /** Register Vue language support */
 export declare const registerVue: () => void;
-/** Register the `closeBrackets` extension for Vue */
+/** Register the `bracketMatching` extension for Vue */
+export declare const registerBracketMatchingForVue: () => void;
+/**
+ * Register the `closeBrackets` extension for Vue
+ * @deprecated This function does nothing and will be removed in a future release
+ */
 export declare const registerCloseBracketsForVue: () => void;
+/** Register the `closeTags` extension for Vue */
+export declare const registerCloseTagsForVue: () => void;
 /** Register the `colorPicker` extension for Vue */
 export declare const registerColorPickerForVue: () => void;
 /** Register Vue core language support */

package/dist/index.js

@@ -8,6 +8,7 @@ import { abusefilter, analyzer } from '@bhsd/lezer-abusefilter';
 import { getLSP } from '@bhsd/browser';
 import { colorPicker } from '@bhsd/codemirror-css-color-picker';
 import bidiIsolates from './bidi.js';
+import closeTags from './closeTags.js';
 import { CodeMirror6, avail, languages, linterRegistry, destroyListeners, plain, optionalFunctions, themes, } from './codemirror.js';
 import mediawikiColorPicker from './color.js';
 import escapeKeymap from './escape.js';
@@ -27,7 +28,7 @@ import { tagModes, getStaticMwConfig } from './static.js';
 import statusBar from './statusBar.js';
 import css from './css.js';
 import html from './html.js';
-import javascript from './javascript.js';
+import javascript, { exclude } from './javascript.js';
 import lua from './lua.js';
 import vue from './vue.js';
 export { CodeMirror6 };
@@ -70,7 +71,7 @@ export const registerBracketMatching = () => {
 };
 /** Register the `closeBrackets` extension */
 export const registerCloseBrackets = () => {
-    registerExtension('closeBrackets', (e = []) => [closeBrackets(), e]);
+    registerExtension('closeBrackets', closeBrackets);
 };
 /** Register the `scrollPastEnd` extension */
 export const registerScrollPastEnd = () => {
@@ -100,12 +101,13 @@ export const registerAutocompletion = () => {
 export const registerCodeFolding = () => {
     registerExtension('codeFolding', codeFolding);
 };
-/** Register the `colorPicker` extension */
-export const registerColorPicker = () => {
-    registerExtension('colorPicker', (e = []) => e);
-};
-/** 注册所有通用扩展（除`colorPicker`） */
-const registerExtensions = () => {
+/**
+ * Register the `colorPicker` extension
+ * @deprecated This function does nothing and will be removed in a future release
+ */
+export const registerColorPicker = () => { };
+/** Register all common extensions */
+export const registerCommonExtensions = () => {
     registerHighlightSpecialChars();
     registerHighlightActiveLine();
     registerHighlightWhitespace();
@@ -118,15 +120,15 @@ const registerExtensions = () => {
     registerAutocompletion();
     registerCodeFolding();
 };
-/** Register all common extensions */
-export const registerCommonExtensions = () => {
-    registerExtensions();
-    registerColorPicker();
-};
+/**
+ * 各语言独立定义的扩展
+ * @param e 扩展
+ */
+const langExtension = (e = []) => e;
 function mediawikiOnly(ext) {
     return typeof ext === 'function'
         ? [(enable, cm) => enable ? ext(cm) : [], { mediawiki: true }]
-        : [(e = []) => e, { mediawiki: ext }];
+        : [langExtension, { mediawiki: ext }];
 }
 /**
  * 注册特定语言的扩展
@@ -135,7 +137,7 @@ function mediawikiOnly(ext) {
  * @param ext 扩展
  */
 const registerLangExtension = (lang, name, ext) => {
-    avail[name] ??= [() => []];
+    avail[name] ??= [langExtension];
     const addon = avail[name];
     addon[1] ??= {};
     addon[1][lang] = ext;
@@ -158,6 +160,7 @@ export const registerMediaWiki = (articlePath, templatedata) => {
     registerColorPickerForMediaWiki();
     registerBracketMatchingForMediaWiki();
     registerCodeFoldingForMediaWiki();
+    registerCloseTagsForMediaWiki();
 };
 /**
  * 注册MediaWiki专用扩展
@@ -231,6 +234,10 @@ export const registerCodeFoldingForMediaWiki = () => {
     registerLangExtension('mediawiki', 'codeFolding', mediawikiFold);
     optionalFunctions.foldHandler = foldHandler;
 };
+/** Register the `closeTags` extension for MediaWiki */
+export const registerCloseTagsForMediaWiki = () => {
+    registerLangExtension('mediawiki', 'closeTags', closeTags());
+};
 /**
  * 注册LintSource
  * @param lang 语言
@@ -265,19 +272,24 @@ export const registerHTML = () => {
     registerCommonExtensions();
     registerHTMLCore();
     registerBracketMatchingForHTML();
-    registerCloseBracketsForHTML();
+    registerCloseTagsForHTML();
     registerColorPickerForHTML();
 };
 /** Register the `bracketMatching` extension for mixed MediaWiki-HTML */
 export const registerBracketMatchingForHTML = () => {
     registerLangExtension('html', 'bracketMatching', [
-        {},
+        { exclude },
         tagMatchingState,
     ]);
 };
-/** Register the `closeBrackets` extension for mixed MediaWiki-HTML */
-export const registerCloseBracketsForHTML = () => {
-    registerLangExtension('html', 'closeBrackets', autoCloseTags);
+/**
+ * Register the `closeBrackets` extension for mixed MediaWiki-HTML
+ * @deprecated This function does nothing and will be removed in a future release
+ */
+export const registerCloseBracketsForHTML = () => { };
+/** Register the `closeTags` extension for mixed MediaWiki-HTML */
+export const registerCloseTagsForHTML = () => {
+    registerLangExtension('html', 'closeTags', autoCloseTags);
 };
 /** Register the `colorPicker` extension for mixed MediaWiki-HTML */
 export const registerColorPickerForHTML = () => {
@@ -291,8 +303,13 @@ export const registerHTMLCore = () => {
 };
 /** Register JavaScript language support */
 export const registerJavaScript = () => {
-    registerExtensions();
+    registerCommonExtensions();
     registerJavaScriptCore();
+    registerBracketMatchingForJavaScript();
+};
+/** Register the `bracketMatching` extension for JavaScript */
+export const registerBracketMatchingForJavaScript = () => {
+    registerLangExtension('javascript', 'bracketMatching', [{ exclude }]);
 };
 /** Register JavaScript core language support */
 export const registerJavaScriptCore = () => {
@@ -318,7 +335,7 @@ export const registerCSSCore = () => {
 };
 /** Register JSON language support */
 export const registerJSON = () => {
-    registerExtensions();
+    registerCommonExtensions();
     registerJSONCore();
 };
 /** Register JSON core language support */
@@ -329,7 +346,7 @@ export const registerJSONCore = () => {
 };
 /** Register Lua language support */
 export const registerLua = () => {
-    registerExtensions();
+    registerCommonExtensions();
     registerLuaCore();
 };
 /** Register Lua core language support */
@@ -342,12 +359,22 @@ export const registerLuaCore = () => {
 export const registerVue = () => {
     registerCommonExtensions();
     registerVueCore();
-    registerCloseBracketsForVue();
+    registerBracketMatchingForVue();
+    registerCloseTagsForVue();
     registerColorPickerForVue();
 };
-/** Register the `closeBrackets` extension for Vue */
-export const registerCloseBracketsForVue = () => {
-    registerLangExtension('vue', 'closeBrackets', autoCloseTags);
+/** Register the `bracketMatching` extension for Vue */
+export const registerBracketMatchingForVue = () => {
+    registerLangExtension('vue', 'bracketMatching', [{ exclude }]);
+};
+/**
+ * Register the `closeBrackets` extension for Vue
+ * @deprecated This function does nothing and will be removed in a future release
+ */
+export const registerCloseBracketsForVue = () => { };
+/** Register the `closeTags` extension for Vue */
+export const registerCloseTagsForVue = () => {
+    registerLangExtension('vue', 'closeTags', autoCloseTags);
 };
 /** Register the `colorPicker` extension for Vue */
 export const registerColorPickerForVue = () => {
@@ -361,7 +388,7 @@ export const registerVueCore = () => {
 };
 /** Register AbuseFilter language support */
 export const registerAbuseFilter = () => {
-    registerExtensions();
+    registerCommonExtensions();
     registerAbuseFilterCore();
 };
 /** Register AbuseFilter core language support */

package/dist/javascript.d.ts

@@ -4,6 +4,13 @@ import type { Tree } from '@lezer/common';
 import type { DocRange } from './fold';
 import type { CodeMirror6 } from './codemirror';
 export declare const jsCompletion: Extension;
+/**
+ * 忽略JavaScript正则表达式中的括号匹配
+ * @param state
+ * @param pos 位置
+ * @test
+ */
+export declare const exclude: (state: EditorState, pos: number) => boolean;
 /**
  * 高亮显示全局变量
  * @ignore

package/dist/javascript.js

@@ -5,6 +5,14 @@ import { setDiagnosticsEffect } from '@codemirror/lint';
 import { builtin } from './javascript-globals.js';
 export const jsCompletion = javascriptLanguage.data.of({ autocomplete: scopeCompletionSource(globalThis) });
 const globalsMark = Decoration.mark({ class: 'cm-globals' }), builtinGlobals = new Set(Object.keys(builtin));
+/**
+ * 忽略JavaScript正则表达式中的括号匹配
+ * @param state
+ * @param pos 位置
+ * @test
+ */
+export const exclude = (state, pos) => javascriptLanguage.isActiveAt(state, pos, 0)
+    && syntaxTree(state).resolveInner(pos, 0).name === 'RegExp';
 /**
  * 高亮显示全局变量
  * @ignore

package/dist/linter.js

@@ -1,5 +1,3 @@
-/** @todo revert df69718ab908966bff162fe51e8cfb4595e6b2ec */
-import { rules as recommended } from '@eslint/js/src/configs/eslint-recommended.js';
 import { sanitizeInlineStyle } from '@bhsd/common';
 import { loadScript, getWikiparse, getLSP } from '@bhsd/browser';
 import { styleLint } from '@bhsd/stylelint-util';
@@ -131,6 +129,9 @@ export const jsConfig = /* #__PURE__ */ (() => ({
  * @test
  */
 export const getJsLinter = async (cdn = eslintRepo) => {
+    /** @todo revert df69718ab908966bff162fe51e8cfb4595e6b2ec */
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { rules: recommended } = require('@eslint/js/src/configs/eslint-recommended.js');
     await loadScript(cdn, 'eslint');
     /** @see https://www.npmjs.com/package/@codemirror/lang-javascript */
     const esLinter = new eslint.Linter(), conf = {

package/dist/lua.js

@@ -4,7 +4,7 @@ import { syntaxTree, LanguageSupport, StreamLanguage, foldService, HighlightStyl
 import { snippetCompletion } from '@codemirror/autocomplete';
 import { tags } from '@lezer/highlight';
 import { leadingSpaces, sliceDoc } from './util.js';
-import { getLightHighlightStyle } from './theme.js';
+import { lightHighlightStyle } from './theme.js';
 const map = {
     1: 'constant',
     2: 'function',
@@ -130,6 +130,7 @@ const map = {
             server: 1,
             siteName: 1,
             stylePath: 1,
+            wikiId: 1,
             namespaces: 3,
             contentNamespaces: 3,
             subjectNamespaces: 3,
@@ -438,7 +439,7 @@ const fold = ({ doc, tabSize }, start, from) => {
     return empty || j === number ? null : { from, to: doc.line(j).to };
 };
 const support = [
-    getLightHighlightStyle(),
+    lightHighlightStyle,
     syntaxHighlighting(HighlightStyle.define([{ tag: tags.standard(tags.variableName), class: 'cm-globals' }])),
     lang.data.of({ autocomplete: source }),
     foldService.of(fold),