@bhsd/codemirror-mediawiki 2.30.3 → 3.0.0

package/dist/codemirror.js

@@ -6,17 +6,20 @@ import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
 import { linter, lintGutter, lintKeymap } from '@codemirror/lint';
 import { closeBrackets, autocompletion, acceptCompletion, completionKeymap, startCompletion, } from '@codemirror/autocomplete';
 import { json } from '@codemirror/lang-json';
-import { getLSP } from '@bhsd/common';
-import colorPicker from './color';
-import { mediawiki, html } from './mediawiki';
+import { autoCloseTags } from '@codemirror/lang-html';
+import { css as cssParser } from '@codemirror/legacy-modes/mode/css';
+import { getLSP } from '@bhsd/browser';
+import { colorPicker as cssColorPicker, colorPickerTheme, makeColorPicker } from '@bhsd/codemirror-css-color-picker';
+import colorPicker, { discoverColors } from './color';
+import { mediawiki, html, FullMediaWiki } from './mediawiki';
 import escapeKeymap from './escape';
-import codeFolding, { foldHandler } from './fold';
+import codeFolding, { foldHandler, mediaWikiFold } from './fold';
 import tagMatchingState from './matchTag';
 import refHover from './ref';
-import magicWordHover, { posToIndex } from './hover';
+import magicWordHover from './hover';
 import signatureHelp from './signature';
 import inlayHints from './inlay';
-import { getWikiLinter, getJsLinter, getCssLinter, getLuaLinter, getJsonLinter } from './linter';
+import { getWikiLintSource, getJsLintSource, getCssLintSource, getJsonLintSource, getLuaLintSource, getVueLintSource, } from './lintsource';
 import openLinks from './openLinks';
 import { tagModes, getStaticMwConfig } from './static';
 import bidiIsolation from './bidi';
@@ -24,27 +27,14 @@ import toolKeymap from './keymap';
 import statusBar from './statusBar';
 import { detectIndent } from './indent';
 import bracketMatching from './matchBrackets';
+import wikitextLSP from './lsp';
 import javascript from './javascript';
 import css from './css';
 import lua from './lua';
+import vue from './vue';
 const plain = () => EditorView.contentAttributes.of({ spellcheck: 'true' });
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const languages = {
-    plain,
-    mediawiki(config) {
-        return [
-            mediawiki(config),
-            plain(),
-            bidiIsolation,
-            toolKeymap,
-        ];
-    },
-    html,
-    javascript,
-    css,
-    json,
-    lua,
-};
+const languages = { plain };
 function mediawikiOnly(ext) {
     return typeof ext === 'function'
         ? [(enable, cm) => enable ? ext(cm) : [], { mediawiki: true }]
@@ -52,15 +42,19 @@ function mediawikiOnly(ext) {
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const avail = {
-    highlightSpecialChars: [highlightSpecialChars, {}],
-    highlightActiveLine: [highlightActiveLine, {}],
-    highlightWhitespace: [highlightWhitespace, {}],
-    highlightTrailingWhitespace: [highlightTrailingWhitespace, {}],
-    highlightSelectionMatches: [highlightSelectionMatches, {}],
-    bracketMatching: [bracketMatching, { mediawiki: { brackets: '()[]{}（）【】［］｛｝' } }],
-    closeBrackets: [closeBrackets, {}],
-    scrollPastEnd: [scrollPastEnd, {}],
-    openLinks: [(enable, cm) => enable ? openLinks(cm) : [], { mediawiki: true }],
+    highlightSpecialChars: [highlightSpecialChars],
+    highlightActiveLine: [highlightActiveLine],
+    highlightWhitespace: [highlightWhitespace],
+    highlightTrailingWhitespace: [highlightTrailingWhitespace],
+    highlightSelectionMatches: [highlightSelectionMatches],
+    bracketMatching: [
+        ([config, e = []] = []) => [
+            bracketMatching(config),
+            e,
+        ],
+    ],
+    closeBrackets: [(e = []) => [closeBrackets(), e]],
+    scrollPastEnd: [scrollPastEnd],
     allowMultipleSelections: [
         () => [
             EditorState.allowMultipleSelections.of(true),
@@ -68,7 +62,6 @@ const avail = {
             rectangularSelection(),
             crosshairCursor(),
         ],
-        {},
     ],
     autocompletion: [
         () => [
@@ -79,27 +72,104 @@ const avail = {
                 { key: 'Tab', run: acceptCompletion },
             ]),
         ],
-        {},
     ],
     codeFolding,
     colorPicker,
-    escape: mediawikiOnly(keymap.of(escapeKeymap)),
-    tagMatching: mediawikiOnly(tagMatchingState),
-    refHover: mediawikiOnly(refHover),
-    hover: mediawikiOnly(magicWordHover),
-    signatureHelp: mediawikiOnly(signatureHelp),
-    inlayHints: mediawikiOnly(inlayHints),
-}, editExtensions = new Set(['closeBrackets', 'autocompletion', 'signatureHelp']);
+};
+const linterRegistry = {};
+const destroyListeners = [];
+const editExtensions = new Set(['closeBrackets', 'autocompletion', 'signatureHelp']);
 const linters = {};
 const phrases = {};
 /**
- * 获取指定行列的位置
- * @param doc 文档
- * @param line 行号
- * @param column 列号
+ * 注册特定语言的扩展
+ * @param lang 语言
+ * @param name 扩展名
+ * @param ext 扩展
  */
-const pos = (doc, line, column) => posToIndex(doc, { line: line - 1, character: column - 1 });
-/** CodeMirror 6 编辑器 */
+const registerLangExtension = (lang, name, ext) => {
+    const addon = avail[name];
+    addon[1] ??= {};
+    addon[1][lang] = ext;
+};
+/** Register MediaWiki language support */
+export const registerMediaWiki = () => {
+    languages['mediawiki'] = (config) => [
+        mediawiki(config),
+        plain(),
+        bidiIsolation,
+        toolKeymap,
+    ];
+    registerLangExtension('mediawiki', 'colorPicker', [
+        [makeColorPicker({ discoverColors }), colorPickerTheme],
+        { marginLeft: '0.6ch' },
+    ]);
+    registerLangExtension('mediawiki', 'bracketMatching', [
+        { brackets: '()[]{}（）【】［］｛｝' },
+        tagMatchingState,
+    ]);
+    registerLangExtension('mediawiki', 'codeFolding', mediaWikiFold);
+    Object.assign(avail, {
+        openLinks: mediawikiOnly(openLinks),
+        escape: mediawikiOnly(keymap.of(escapeKeymap)),
+        refHover: mediawikiOnly(refHover),
+        hover: mediawikiOnly(magicWordHover),
+        signatureHelp: mediawikiOnly(signatureHelp),
+        inlayHints: mediawikiOnly(inlayHints),
+    });
+    linterRegistry['mediawiki'] = getWikiLintSource;
+    destroyListeners.push(view => getLSP(view)?.destroy());
+};
+/** Register mixed MediaWiki-HTML language support */
+export const registerHTML = () => {
+    Object.assign(FullMediaWiki.prototype, {
+        css() {
+            return cssParser;
+        },
+    });
+    languages['html'] = html;
+};
+/** Register JavaScript language support */
+export const registerJavaScript = () => {
+    languages['javascript'] = javascript;
+    linterRegistry['javascript'] = getJsLintSource;
+};
+/** Register CSS language support */
+export const registerCSS = () => {
+    languages['css'] = css;
+    registerLangExtension('css', 'colorPicker', [cssColorPicker]);
+    linterRegistry['css'] = getCssLintSource;
+};
+/** Register JSON language support */
+export const registerJSON = () => {
+    languages['json'] = json;
+    linterRegistry['json'] = getJsonLintSource;
+};
+/** Register Lua language support */
+export const registerLua = () => {
+    languages['lua'] = lua;
+    linterRegistry['lua'] = getLuaLintSource;
+};
+/** Register Vue language support */
+export const registerVue = () => {
+    languages['vue'] = vue;
+    registerLangExtension('vue', 'closeBrackets', autoCloseTags);
+    registerLangExtension('vue', 'colorPicker', [cssColorPicker]);
+    linterRegistry['vue'] = getVueLintSource;
+};
+/**
+ * Register a custom language support
+ * @param name language name
+ * @param lang language support
+ * @param lintSource optional linter
+ */
+export const registerLanguage = (name, lang, lintSource) => {
+    languages[name] = lang;
+    if (lintSource) {
+        linterRegistry[name] = lintSource;
+    }
+};
+/** CodeMirror 6 editor */
 export class CodeMirror6 {
     #textarea;
     #language = new Compartment();
@@ -115,23 +185,27 @@ export class CodeMirror6 {
     #visible = false;
     #preferred = new Set();
     #indentStr = '\t';
+    /** textarea element */
     get textarea() {
         return this.#textarea;
     }
+    /** EditorView instance */
     get view() {
         return this.#view;
     }
+    /** language */
     get lang() {
         return this.#lang;
     }
+    /** whether the editor view is visible */
     get visible() {
         return this.#visible && this.textarea.isConnected;
     }
     /**
-     * @param textarea 文本框
-     * @param lang 语言
-     * @param config 语言设置
-     * @param init 是否初始化
+     * @param textarea textarea element
+     * @param lang language
+     * @param config language configuration
+     * @param init whether to initialize the editor immediately
      */
     constructor(textarea, lang = 'plain', config, init = true) {
         this.#textarea = textarea;
@@ -141,8 +215,8 @@ export class CodeMirror6 {
         }
     }
     /**
-     * 初始化编辑器
-     * @param config 语言设置
+     * Initialize the editor
+     * @param config language configuration
      */
     initialize(config) {
         let timer;
@@ -245,15 +319,21 @@ export class CodeMirror6 {
         return this.#linter.get(this.#view.state)[0];
     }
     /**
-     * 设置语言
-     * @param lang 语言
-     * @param config 语言设置
+     * Set language
+     * @param lang language
+     * @param config language configuration
      */
-    setLanguage(lang = 'plain', config) {
+    async setLanguage(lang = 'plain', config) {
         this.#lang = lang;
         if (this.#view) {
+            let ext = (languages[lang] ?? plain)(config);
+            ws: { // eslint-disable-line no-unused-labels
+                if (lang === 'mediawiki') {
+                    ext = [ext, await wikitextLSP()];
+                }
+            }
             this.#effects([
-                this.#language.reconfigure(languages[lang](config)),
+                this.#language.reconfigure(ext),
                 this.#linter.reconfigure(linters[lang] ?? []),
             ]);
             this.#minHeight(Boolean(linters[lang]));
@@ -261,15 +341,15 @@ export class CodeMirror6 {
         }
     }
     /**
-     * 开始语法检查
-     * @param lintSource 语法检查函数
+     * Start syntax checking
+     * @param lintSource function for syntax checking
      */
     lint(lintSource) {
         const linterExtension = lintSource
             ? [
-                linter(async ({ state: { doc, readOnly } }) => {
-                    const diagnostics = await lintSource(doc);
-                    if (readOnly) {
+                linter(async ({ state }) => {
+                    const diagnostics = await lintSource(state);
+                    if (state.readOnly) {
                         for (const diagnostic of diagnostics) {
                             delete diagnostic.actions;
                         }
@@ -292,7 +372,7 @@ export class CodeMirror6 {
             this.#minHeight(Boolean(lintSource));
         }
     }
-    /** 立即更新语法检查 */
+    /** Update syntax checking immediately */
     update() {
         if (this.#view) {
             const extension = this.#getLintExtension();
@@ -304,16 +384,16 @@ export class CodeMirror6 {
         }
     }
     /**
-     * 添加扩展
-     * @param names 扩展名
+     * Add extensions
+     * @param names extension names
      */
     prefer(names) {
         if (Array.isArray(names)) {
-            this.#preferred = new Set(names.filter(name => avail[name]));
+            this.#preferred = new Set(names.filter(name => Object.prototype.hasOwnProperty.call(avail, name)));
         }
         else {
             for (const [name, enable] of Object.entries(names)) {
-                if (enable && avail[name]) {
+                if (enable && Object.prototype.hasOwnProperty.call(avail, name)) {
                     this.#preferred.add(name);
                 }
                 else {
@@ -324,14 +404,14 @@ export class CodeMirror6 {
         if (this.#view) {
             const { readOnly } = this.#view.state;
             this.#effects(this.#extensions.reconfigure([...this.#preferred].filter(name => !readOnly || !editExtensions.has(name)).map(name => {
-                const [extension, configs] = avail[name];
+                const [extension, configs = {}] = avail[name];
                 return extension(configs[this.#lang], this);
             })));
         }
     }
     /**
-     * 设置缩进
-     * @param indent 缩进字符串
+     * Set text indentation
+     * @param indent indentation string
      */
     setIndent(indent) {
         if (this.#view) {
@@ -342,8 +422,8 @@ export class CodeMirror6 {
         }
     }
     /**
-     * 设置文本换行
-     * @param wrapping 是否换行
+     * Set line wrapping
+     * @param wrapping whether to enable line wrapping
      */
     setLineWrapping(wrapping) {
         if (this.#view) {
@@ -351,160 +431,28 @@ export class CodeMirror6 {
         }
     }
     /**
-     * 获取默认linter
-     * @param opt 选项
+     * Get default linter
+     * @param opt linter options
      */
     async getLinter(opt) {
-        const isFunc = typeof opt === 'function', getOpt = (runtime) => isFunc ? opt(runtime) : opt;
-        switch (this.#lang) {
-            case 'mediawiki': {
-                const wikiLint = await getWikiLinter(getOpt(), this.#view);
-                return async (doc) => (await wikiLint(doc.toString(), getOpt(true)))
-                    .map(({ severity, code, message, range: r, from, to, data = [], source }) => ({
-                    source: source,
-                    from: from ?? posToIndex(doc, r.start),
-                    to: to ?? posToIndex(doc, r.end),
-                    severity: severity === 2 ? 'warning' : 'error',
-                    message: source === 'Stylelint' ? message : `${message} (${code})`,
-                    actions: data.map(({ title, range, newText }) => ({
-                        name: title,
-                        apply(view) {
-                            view.dispatch({
-                                changes: {
-                                    from: posToIndex(doc, range.start),
-                                    to: posToIndex(doc, range.end),
-                                    insert: newText,
-                                },
-                            });
-                        },
-                    })),
-                }));
-            }
-            case 'javascript': {
-                const esLint = await getJsLinter();
-                const lintSource = doc => esLint(doc.toString(), getOpt())
-                    .map(({ ruleId, message, severity, line, column, endLine, endColumn, fix, suggestions = [] }) => {
-                    const start = pos(doc, line, column), diagnostic = {
-                        source: 'ESLint',
-                        message: message + (ruleId ? ` (${ruleId})` : ''),
-                        severity: severity === 1 ? 'warning' : 'error',
-                        from: start,
-                        to: endLine === undefined ? start + 1 : pos(doc, endLine, endColumn),
-                    };
-                    if (fix || suggestions.length > 0) {
-                        diagnostic.actions = [
-                            ...fix ? [{ name: 'fix', fix }] : [],
-                            ...suggestions.map(suggestion => ({ name: 'suggestion', fix: suggestion.fix })),
-                        ].map(({ name, fix: { range: [from, to], text } }) => ({
-                            name,
-                            apply(view) {
-                                view.dispatch({ changes: { from, to, insert: text } });
-                            },
-                        }));
-                    }
-                    return diagnostic;
-                });
-                lintSource.fixer = (doc, rule) => esLint.fixer(doc.toString(), rule);
-                return lintSource;
-            }
-            case 'css': {
-                const styleLint = await getCssLinter();
-                let option = getOpt() ?? {};
-                if (!('extends' in option || 'rules' in option)) {
-                    option = { rules: option };
-                }
-                if (this.dialect === 'sanitized-css') {
-                    const rules = option['rules'];
-                    option = {
-                        ...option,
-                        rules: {
-                            ...rules,
-                            'property-no-vendor-prefix': [
-                                true,
-                                {
-                                    ignoreProperties: ['user-select'],
-                                },
-                            ],
-                            'property-disallowed-list': [
-                                ...rules?.['property-disallowed-list'] ?? [],
-                                '/^--/',
-                            ],
-                        },
-                    };
-                }
-                const lintSource = async (doc) => (await styleLint(doc.toString(), option))
-                    .map(({ text, severity, line, column, endLine, endColumn, fix }) => {
-                    const diagnostic = {
-                        source: 'Stylelint',
-                        message: text,
-                        severity,
-                        from: pos(doc, line, column),
-                        to: endLine === undefined ? doc.line(line).to : pos(doc, endLine, endColumn),
-                    };
-                    if (fix) {
-                        diagnostic.actions = [
-                            {
-                                name: 'fix',
-                                apply(view) {
-                                    view.dispatch({
-                                        changes: { from: fix.range[0], to: fix.range[1], insert: fix.text },
-                                    });
-                                },
-                            },
-                        ];
-                    }
-                    return diagnostic;
-                });
-                lintSource.fixer = async (doc, rule) => styleLint.fixer(doc.toString(), rule);
-                return lintSource;
-            }
-            case 'lua': {
-                const luaLint = await getLuaLinter();
-                return async (doc) => (await luaLint(doc.toString()))
-                    .map(({ line, column, end_column: endColumn, msg: message, severity }) => ({
-                    source: 'Luacheck',
-                    message,
-                    severity: severity === 1 ? 'warning' : 'error',
-                    from: pos(doc, line, column),
-                    to: pos(doc, line, endColumn + 1),
-                }));
-            }
-            case 'json': {
-                const jsonLint = getJsonLinter();
-                return doc => {
-                    const [e] = jsonLint(doc.toString());
-                    if (e) {
-                        const { message, severity, line, column, position } = e;
-                        let from = 0;
-                        if (position) {
-                            from = Number(position);
-                        }
-                        else if (line && column) {
-                            from = pos(doc, Number(line), Number(column));
-                        }
-                        return [{ message, severity, from, to: from }];
-                    }
-                    return [];
-                };
-            }
-            default:
-                return undefined;
-        }
+        return linterRegistry[this.#lang]?.(opt, this.#view);
     }
     /**
-     * 重设编辑器内容
-     * @param insert 新内容
+     * Set content
+     * @param insert new content
+     * @param force whether to forcefully replace the content
      */
-    setContent(insert) {
+    setContent(insert, force) {
         if (this.#view) {
             this.#view.dispatch({
                 changes: { from: 0, to: this.#view.state.doc.length, insert },
+                filter: !force,
             });
         }
     }
     /**
-     * 在编辑器和文本框之间切换
-     * @param show 是否显示编辑器
+     * Switch between textarea and editor view
+     * @param show whether to show the editor view
      */
     toggle(show = !this.#visible) {
         if (!this.#view) {
@@ -541,20 +489,22 @@ export class CodeMirror6 {
         }
         this.#visible = show;
     }
-    /** 销毁实例 */
+    /** Destroy the editor */
     destroy() {
         if (this.visible) {
             this.toggle(false);
         }
         if (this.#view) {
-            getLSP(this.#view)?.destroy();
+            for (const listener of destroyListeners) {
+                listener(this.#view);
+            }
             this.#view.destroy();
         }
         Object.setPrototypeOf(this, null);
     }
     /**
-     * 添加额外快捷键
-     * @param keys 快捷键
+     * Define extra key bindings
+     * @param keys key bindings
      */
     extraKeys(keys) {
         if (this.#view) {
@@ -562,8 +512,8 @@ export class CodeMirror6 {
         }
     }
     /**
-     * 设置翻译信息
-     * @param messages 翻译信息
+     * Set translation messages
+     * @param messages translation messages
      */
     localize(messages) {
         Object.assign(phrases, messages);
@@ -572,15 +522,15 @@ export class CodeMirror6 {
         }
     }
     /**
-     * 获取语法树节点
-     * @param position 位置
+     * Get the syntax node at the specified position
+     * @param position position
      */
     getNodeAt(position) {
         return this.#view && ensureSyntaxTree(this.#view.state, position)?.resolve(position, 1);
     }
     /**
-     * 滚动至指定位置
-     * @param position 位置
+     * Scroll to the specified position
+     * @param position position or selection range
      */
     scrollTo(position) {
         if (this.#view) {
@@ -592,9 +542,9 @@ export class CodeMirror6 {
         }
     }
     /**
-     * 替换选中内容
-     * @param view
-     * @param func 替换函数
+     * Replace the current selection with the result of a function
+     * @param view EditorView instance
+     * @param func function to produce the replacement text
      */
     static replaceSelections(view, func) {
         const { state } = view;
@@ -614,8 +564,9 @@ export class CodeMirror6 {
         }));
     }
     /**
-     * 将wikiparser-node设置转换为codemirror-mediawiki设置
-     * @param config
+     * Convert a [WikiParser-Node](https://npmjs.com/package/wikiparser-node) configuration
+     * to a CodeMirror-MediaWiki configuration
+     * @param config WikiParser-Node configuration
      */
     static getMwConfig(config) {
         return getStaticMwConfig(config, tagModes);

package/dist/color.d.ts

@@ -3,10 +3,5 @@ import type { Tree } from '@lezer/common';
 import type { StyleSpec } from 'style-mod';
 import type { WidgetOptions } from '@bhsd/codemirror-css-color-picker';
 export declare const discoverColors: (_: Tree, from: number, to: number, type: string, doc: Text) => WidgetOptions[] | null;
-declare const _default: [([e, style]?: [Extension?, StyleSpec?]) => Extension, {
-    css: [Extension];
-    mediawiki: [Extension[], {
-        marginLeft: string;
-    }];
-}];
+declare const _default: [([e, style]?: [Extension?, StyleSpec?]) => Extension];
 export default _default;

package/dist/color.js

@@ -1,6 +1,6 @@
 import { splitColors, numToHex } from '@bhsd/common';
 import { EditorView } from '@codemirror/view';
-import { parseCallExpression, parseColorLiteral, ColorType, colorPicker, colorPickerTheme, makeColorPicker, wrapperClassName, } from '@bhsd/codemirror-css-color-picker';
+import { parseCallExpression, parseColorLiteral, ColorType, wrapperClassName } from '@bhsd/codemirror-css-color-picker';
 export const discoverColors = (_, from, to, type, doc) => {
     if (!/mw-(?:(?:ext|html)tag-attribute-value|table-definition)/u.test(type)
         && (!/mw-(?:template|parserfunction)(?:$|_)/u.test(type)
@@ -42,11 +42,4 @@ export default [
             }),
         ]
         : [],
-    {
-        css: [colorPicker],
-        mediawiki: [
-            [makeColorPicker({ discoverColors }), colorPickerTheme],
-            { marginLeft: '0.6ch' },
-        ],
-    },
 ];

package/dist/config.js

@@ -68,8 +68,7 @@ var html = [
     "wbr",
     "hr",
     "meta",
-    "link",
-    "img"
+    "link"
   ]
 ];
 
@@ -80,9 +79,9 @@ var html = [
  * @license GPL-2.0-or-later
  * @see https://gerrit.wikimedia.org/g/mediawiki/extensions/CodeMirror
  */
-var htmlTags = html.flat();
-var voidHtmlTags = html[2];
-var selfClosingTags = html[1];
+var htmlTags = /* @__PURE__ */ html.flat();
+var voidHtmlTags = /* @__PURE__ */ (() => html[2])();
+var selfClosingTags = /* @__PURE__ */ (() => html[1])();
 var tokens = {
   apostrophes: "mw-apostrophes",
   comment: "mw-comment",
@@ -150,7 +149,7 @@ var tokens = {
   templateVariableDelimiter: "mw-templatevariable-delimiter",
   templateVariableName: "mw-templatevariable-name"
 };
-var tokenTable = (() => {
+var tokenTable = /* @__PURE__ */ (() => {
   const table = {
     variable: tags.variableName,
     "variable-2": tags.special(tags.variableName),

package/dist/escape.js

@@ -29,7 +29,7 @@ export const escapeHTML = (str) => [...str].map(c => {
     }
     return encodeURIComponent(str);
 };
-export default [
+export default /* @__PURE__ */ (() => [
     { key: 'Mod-[', run: convert(escapeHTML, indentLess) },
     { key: 'Mod-]', run: convert(escapeURI, indentMore) },
-];
+])();