@bhsd/codemirror-mediawiki 3.5.2 → 3.6.0

package/README.md

@@ -1111,7 +1111,7 @@ registerHighlightWhitespace();
 
 *version added: 2.21.1*
 
-Show the help information of a magic word when hovering.
+Show the help information of a magic word or a template name when hovering.
 
 For granular control over the bundled extensions, you can import the `registerHover` function:
 

package/dist/bidi.js

@@ -6,12 +6,13 @@
 import { EditorView, Direction, ViewPlugin, Decoration } from '@codemirror/view';
 import { Prec, RangeSetBuilder } from '@codemirror/state';
 import { syntaxTree } from '@codemirror/language';
-import { getTag } from './matchTag';
 import { tokens } from './config';
-const isolateLTR = Decoration.mark({
-    class: 'cm-bidi-isolate cm-bidi-ltr',
+import { isolateSelector, ltrSelector } from './constants';
+import { getTag } from './matchTag';
+const cls = isolateSelector.slice(1), isolateLTR = Decoration.mark({
+    class: `${cls} ${ltrSelector.slice(1)}`,
     bidiIsolate: Direction.LTR,
-}), isolate = Decoration.mark({ class: 'cm-bidi-isolate' });
+}), isolate = Decoration.mark({ class: cls });
 export const computeIsolates = ({ visibleRanges, state, textDirection }) => {
     const set = new RangeSetBuilder();
     if (textDirection === Direction.RTL) {

package/dist/codemirror.d.ts

@@ -3,12 +3,12 @@ import type { KeyBinding } from '@codemirror/view';
 import type { Extension } from '@codemirror/state';
 import type { SyntaxNode } from '@lezer/common';
 import type { ConfigData } from 'wikiparser-node';
-import type { MwConfig } from './token';
 import type { DocRange, foldHandler } from './fold';
+import type { detectIndent } from './indent';
 import type { Option, LiveOption } from './linter';
 import type { LintSource, LintSources, LintSourceGetter } from './lintsource';
-import type { detectIndent } from './indent';
 import type statusBar from './statusBar';
+import type { MwConfig } from './token';
 export type AddonMain<T> = (config?: T, cm?: CodeMirror6) => Extension;
 export type Addon<T> = [AddonMain<T>, Record<string, T>?];
 export type Dialect = 'sanitized-css' | undefined;

package/dist/codemirror.js

@@ -5,6 +5,7 @@ import { defaultKeymap, historyKeymap, history, redo, indentWithTab } from '@cod
 import { searchKeymap } from '@codemirror/search';
 import { linter, lintGutter, lintKeymap } from '@codemirror/lint';
 import elt from 'crelt';
+import { panelSelector, panelsSelector, diagnosticSelector } from './constants';
 import { light } from './theme';
 export const plain = () => EditorView.contentAttributes.of({ spellcheck: 'true' });
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -83,6 +84,9 @@ export class CodeMirror6 {
     #getLanguage(config) {
         const lang = (languages[this.#lang] ?? plain)(config);
         this.#nestedMWLanguage = lang.nestedMWLanguage;
+        if (this.#lang === 'mediawiki') {
+            this.langConfig = config;
+        }
         return lang;
     }
     /**
@@ -122,16 +126,16 @@ export class CodeMirror6 {
                 },
             ]),
             EditorView.theme({
-                '.cm-panels': {
+                [panelsSelector]: {
                     direction: document.dir,
                 },
                 '& .cm-lineNumbers .cm-gutterElement': {
                     textAlign: 'end',
                 },
-                '.cm-textfield, .cm-button, .cm-panel.cm-search label, .cm-panel.cm-gotoLine label': {
+                [`.cm-textfield,.cm-button,${panelSelector}.cm-search label,${panelSelector}.cm-gotoLine label`]: {
                     fontSize: 'inherit',
                 },
-                '.cm-panel [name="close"]': {
+                [`${panelSelector} [name="close"]`]: {
                     color: 'inherit',
                 },
             }),
@@ -233,11 +237,12 @@ export class CodeMirror6 {
                     const diagnostics = (await source(state)).map((diagnostic) => ({
                         ...diagnostic,
                         renderMessage(view) {
-                            const span = elt('span', { class: 'cm-diagnosticText-clickable' }, diagnostic.message);
+                            const span = elt('span', { class: diagnosticSelector.slice(1) }, diagnostic.message);
                             span.addEventListener('click', () => {
                                 view.dispatch({
                                     selection: { anchor: diagnostic.from, head: diagnostic.to },
                                 });
+                                view.focus();
                             });
                             return span;
                         },

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const panelSelector = ".cm-panel", panelsSelector = ".cm-panels", diagnosticSelector = ".cm-diagnosticText-clickable", foldSelector = ".cm-tooltip-fold", hoverSelector = ".cm-tooltip-hover", matchingCls = "cm-matchingTag", nonmatchingCls = "cm-nonmatchingTag", isolateSelector = ".cm-bidi-isolate", ltrSelector = ".cm-bidi-ltr", menuSelector = ".cm-status-fix-menu", messageSelector = ".cm-status-message", actionSelector = ".cm-diagnosticAction", isWMF: boolean, isMac: boolean;

package/dist/constants.js

@@ -0,0 +1,9 @@
+import { wmf } from '@bhsd/common';
+export const panelSelector = '.cm-panel', panelsSelector = '.cm-panels', diagnosticSelector = '.cm-diagnosticText-clickable', foldSelector = '.cm-tooltip-fold', hoverSelector = '.cm-tooltip-hover', matchingCls = 'cm-matchingTag', nonmatchingCls = 'cm-nonmatchingTag', isolateSelector = '.cm-bidi-isolate', ltrSelector = '.cm-bidi-ltr', menuSelector = '.cm-status-fix-menu', messageSelector = '.cm-status-message', actionSelector = '.cm-diagnosticAction', isWMF = /* @__PURE__ */ (() => typeof location === 'object'
+    && new RegExp(String.raw `\.(?:${wmf})\.org$`, 'u').test(location.hostname))(), isMac = /* @__PURE__ */ (() => {
+    const { vendor, userAgent, maxTouchPoints, platform } = navigator;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    return vendor?.includes('Apple Computer')
+        && (userAgent.includes('Mobile/') || maxTouchPoints > 2)
+        || platform.includes('Mac');
+})();

package/dist/fold.d.ts

@@ -6,12 +6,6 @@ export interface DocRange {
     from: number;
     to: number;
 }
-/**
- * Update the stack of opening (+) or closing (-) brackets
- * @param state
- * @param node 语法树节点
- */
-export declare const braceStackUpdate: (state: EditorState, node: SyntaxNode) => [number, number];
 /**
  * 寻找可折叠的范围
  * @param state

package/dist/fold.js

@@ -4,7 +4,9 @@ import { syntaxTree, ensureSyntaxTree, foldEffect, unfoldEffect, foldedRanges, u
 import { getRegex } from '@bhsd/common';
 import elt from 'crelt';
 import { tokens } from './config';
+import { foldSelector } from './constants';
 import { matchTag, getTag } from './matchTag';
+import { braceStackUpdate } from './util';
 const getExtRegex = /* @__PURE__ */ getRegex(tag => new RegExp(`mw-tag-${tag}(?![a-z])`, 'u'));
 const updateSelection = (pos, { to }) => Math.max(pos, to), updateAll = (pos, { from, to }) => from <= pos && to > pos ? to : pos;
 /**
@@ -36,15 +38,6 @@ isExtBracket = /* @__PURE__ */ isComponent(['extTagBracket']),
  * @param refOnly 是否仅检查`<ref>`标签
  */
 isExt = (node, refOnly) => node.name.includes(`mw-tag-${refOnly ? 'ref' : ''}`);
-/**
- * Update the stack of opening (+) or closing (-) brackets
- * @param state
- * @param node 语法树节点
- */
-export const braceStackUpdate = (state, node) => {
-    const brackets = state.sliceDoc(node.from, node.to);
-    return [brackets.split('{{').length - 1, 1 - brackets.split('}}').length];
-};
 const refNames = new Set(['ref', 'references']);
 /**
  * 寻找可折叠的范围
@@ -161,7 +154,10 @@ const create = (state) => {
                 pos: head,
                 above: true,
                 create() {
-                    const dom = elt('div', { class: 'cm-tooltip-fold', title: state.phrase('Fold template or extension tag') }, '\uff0d');
+                    const dom = elt('div', {
+                        class: foldSelector.slice(1),
+                        title: state.phrase('Fold template or extension tag'),
+                    }, '\uff0d');
                     dom.dataset['from'] = String(from);
                     dom.dataset['to'] = String(to);
                     return { dom };
@@ -178,7 +174,7 @@ const create = (state) => {
  */
 const execute = (view, effects, anchor) => {
     if (effects.length > 0) {
-        view.dom.querySelector('.cm-tooltip-fold')?.remove();
+        view.dom.querySelector(foldSelector)?.remove();
         // Fold the template(s) and update the cursor position
         view.dispatch({
             effects,
@@ -332,7 +328,6 @@ const foldCommand = (refOnly) => view => {
 };
 export const foldRef = /* @__PURE__ */ foldCommand(true);
 export default ((e = defaultFoldExtension) => e);
-const selector = '.cm-tooltip-fold';
 export const mediaWikiFold = /* @__PURE__ */ (() => [
     codeFolding({
         placeholderDOM(view) {
@@ -442,13 +437,13 @@ export const mediaWikiFold = /* @__PURE__ */ (() => [
         },
     }),
     EditorView.theme({
-        [selector]: {
+        [foldSelector]: {
             cursor: 'pointer',
             lineHeight: 1.2,
             padding: '0 1px',
             opacity: 0.6,
         },
-        [`${selector}:hover`]: {
+        [`${foldSelector}:hover`]: {
             opacity: 1,
         },
     }),
@@ -458,7 +453,7 @@ export const mediaWikiFold = /* @__PURE__ */ (() => [
  * @param view
  */
 export const foldHandler = (view) => (e) => {
-    const dom = e.target.closest('.cm-tooltip-fold');
+    const dom = e.target.closest(foldSelector);
     if (dom) {
         e.preventDefault();
         const { dataset } = dom, from = Number(dataset['from']), to = Number(dataset['to']);

package/dist/hover.d.ts

@@ -1,25 +1,4 @@
-import { EditorView } from '@codemirror/view';
-import type { TooltipView } from '@codemirror/view';
-import type { Text, Extension } from '@codemirror/state';
-import type { Position } from 'vscode-languageserver-types';
+import type { Extension } from '@codemirror/state';
 import type { CodeMirror6 } from './codemirror';
-/**
- * 将索引转换为位置
- * @param doc Text 实例
- * @param index 索引
- */
-export declare const indexToPos: (doc: Text, index: number) => Position;
-/**
- * 将位置转换为索引
- * @param doc Text 实例
- * @param pos 位置
- */
-export declare const posToIndex: (doc: Text, pos: Position) => number;
-/**
- * 创建 TooltipView
- * @param view EditorView 实例
- * @param innerHTML 提示内容
- */
-export declare const createTooltipView: (view: EditorView, innerHTML: string) => TooltipView;
 declare const _default: (cm: CodeMirror6) => Extension;
 export default _default;

package/dist/hover.js

@@ -1,40 +1,32 @@
 import { hoverTooltip, EditorView } from '@codemirror/view';
+import { ensureSyntaxTree } from '@codemirror/language';
 import { loadScript, getLSP } from '@bhsd/browser';
-import elt from 'crelt';
-/**
- * 将索引转换为位置
- * @param doc Text 实例
- * @param index 索引
- */
-export const indexToPos = (doc, index) => {
-    const line = doc.lineAt(index);
-    return { line: line.number - 1, character: index - line.from };
-};
-/**
- * 将位置转换为索引
- * @param doc Text 实例
- * @param pos 位置
- */
-export const posToIndex = (doc, pos) => {
-    const line = doc.line(pos.line + 1);
-    return Math.min(line.from + pos.character, line.to);
-};
-/**
- * 创建 TooltipView
- * @param view EditorView 实例
- * @param innerHTML 提示内容
- */
-export const createTooltipView = (view, innerHTML) => {
-    const inner = elt('div'), dom = elt('div', { class: 'cm-tooltip-hover' }, inner);
-    dom.style.font = getComputedStyle(view.contentDOM).font;
-    inner.innerHTML = innerHTML;
-    return { dom };
-};
-const selector = '.cm-tooltip-hover';
+import { tokens } from './config';
+import { hoverSelector } from './constants';
+import { escHTML, indexToPos, posToIndex, createTooltipView } from './util';
 export default (cm) => [
-    hoverTooltip(async (view, pos) => {
-        const { state: { doc } } = view, hover = await getLSP(view, false, cm.getWikiConfig)
+    hoverTooltip(async (view, pos, side) => {
+        const { state } = view, { doc } = state, { paramSuggest, tags } = cm.langConfig;
+        let hover = await getLSP(view, false, cm.getWikiConfig)
             ?.provideHover(doc.toString(), indexToPos(doc, pos));
+        if (!hover && paramSuggest && 'templatedata' in tags) {
+            const node = ensureSyntaxTree(state, pos + Math.max(side, 0))?.resolve(pos, side);
+            if (node?.name.includes(tokens.templateName)) {
+                const result = await paramSuggest(state.sliceDoc(node.from, node.to), false), { description, length } = result;
+                if (description || length > 0) {
+                    // eslint-disable-next-line require-atomic-updates
+                    hover = {
+                        contents: {
+                            kind: 'plaintext',
+                            value: (description ? `<p>${escHTML(description)}</p>` : '') + (length === 0
+                                ? ''
+                                : `<ul>${result.map(([key, details]) => `<li><code>${escHTML(key)}</code>${details ? ` — ${escHTML(details)}` : ''}</li>`).join('')}</ul>`),
+                        },
+                        range: { start: indexToPos(doc, node.from), end: indexToPos(doc, node.to) },
+                    };
+                }
+            }
+        }
         if (hover) {
             await loadScript('npm/marked/lib/marked.umd.js', 'marked', true);
             const { end } = hover.range;
@@ -43,27 +35,29 @@ export default (cm) => [
                 end: posToIndex(doc, end),
                 above: true,
                 create() {
-                    return createTooltipView(view, marked.parse(hover.contents.value));
+                    const { kind, value } = hover.contents;
+                    return createTooltipView(view, kind === 'plaintext' ? value : marked.parse(value));
                 },
             };
         }
         return null;
     }),
     EditorView.theme({
-        [selector]: {
+        [hoverSelector]: {
             padding: '2px 5px',
             width: 'max-content',
             maxWidth: '60vw',
+            overflowY: 'auto',
         },
-        [`${selector} *`]: {
+        [`${hoverSelector} *`]: {
             marginTop: '0!important',
             marginBottom: '0!important',
         },
-        [`${selector}>div`]: {
+        [`${hoverSelector}>div`]: {
             fontSize: '90%',
             lineHeight: 1.4,
         },
-        [`${selector} code`]: {
+        [`${hoverSelector} code`]: {
             padding: '.1em .4em',
             borderRadius: '.4em',
         },

package/dist/html.js

@@ -3,9 +3,9 @@ import { htmlLanguage, htmlCompletionSourceWith } from '@codemirror/lang-html';
 import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
 import { cssLanguage } from '@codemirror/lang-css';
 import { LanguageSupport } from '@codemirror/language';
+import { cssCompletion } from './css';
 import { jsCompletion } from './javascript';
 import { mediawiki } from './mediawiki';
-import { cssCompletion } from './css';
 export default (config) => {
     const { language, support } = mediawiki(config), lang = new LanguageSupport(htmlLanguage.configure({
         wrap: configureNesting([

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import { CodeMirror6 } from './codemirror';
 import type { Extension } from '@codemirror/state';
 import type { LanguageSupport } from '@codemirror/language';
-import type { MwConfig } from './token';
 import type { LintSourceGetter } from './lintsource';
+import type { MwConfig } from './token';
 export type { MwConfig };
 export { CodeMirror6 };
 /** Register the `highlightSpecialChars` extension */

package/dist/index.js

@@ -6,29 +6,29 @@ import { json } from '@codemirror/lang-json';
 import { autoCloseTags } from '@codemirror/lang-html';
 import { getLSP } from '@bhsd/browser';
 import { colorPicker as cssColorPicker, colorPickerTheme, makeColorPicker } from '@bhsd/codemirror-css-color-picker';
+import bidiIsolation from './bidi';
+import { CodeMirror6, avail, languages, linterRegistry, destroyListeners, plain, optionalFunctions, themes, } from './codemirror';
 import colorPicker, { discoverColors } from './color';
-import { mediawiki } from './mediawiki';
 import escape from './escape';
 import codeFolding, { mediaWikiFold, foldHandler } from './fold';
-import tagMatchingState from './matchTag';
-import refHover from './ref';
 import magicWordHover from './hover';
-import signatureHelp from './signature';
+import { detectIndent } from './indent';
 import inlayHints from './inlay';
+import toolKeymap from './keymap';
 import { getWikiLintSource, getJsLintSource, getCssLintSource, getJsonLintSource, getLuaLintSource, getVueLintSource, getHTMLLintSource, } from './lintsource';
+import bracketMatching from './matchBrackets';
+import tagMatchingState from './matchTag';
+import { mediawiki } from './mediawiki';
 import openLinks from './openLinks';
+import refHover from './ref';
+import signatureHelp from './signature';
 import { tagModes, getStaticMwConfig } from './static';
-import bidiIsolation from './bidi';
-import toolKeymap from './keymap';
-import bracketMatching from './matchBrackets';
 import statusBar from './statusBar';
-import { detectIndent } from './indent';
-import javascript from './javascript';
 import css from './css';
+import html from './html';
+import javascript from './javascript';
 import lua from './lua';
 import vue from './vue';
-import html from './html';
-import { CodeMirror6, avail, languages, linterRegistry, destroyListeners, plain, optionalFunctions, themes, } from './codemirror';
 export { CodeMirror6 };
 /**
  * 注册通用扩展

package/dist/inlay.js

@@ -2,14 +2,15 @@ import { StateField, StateEffect } from '@codemirror/state';
 import { Decoration, EditorView, WidgetType, ViewPlugin } from '@codemirror/view';
 import { getLSP } from '@bhsd/browser';
 import elt from 'crelt';
-import { posToIndex } from './hover';
+import { posToIndex } from './util';
+const cls = 'cm-inlay-hint';
 class InlayHintWidget extends WidgetType {
     constructor(label) {
         super();
         this.label = label;
     }
     toDOM() {
-        return elt('span', { class: 'cm-inlay-hint' }, this.label);
+        return elt('span', { class: cls }, this.label);
     }
 }
 const stateEffect = StateEffect.define(), field = StateField.define({
@@ -64,7 +65,7 @@ export default (cm) => [
         }
     }),
     EditorView.theme({
-        '.cm-inlay-hint': {
+        [`.${cls}`]: {
             color: '#969696',
             fontStyle: 'italic',
             '-webkitUserSelect': 'none',

package/dist/lintsource.js

@@ -3,7 +3,7 @@ import { cssLanguage } from '@codemirror/lang-css';
 import { javascriptLanguage } from '@codemirror/lang-javascript';
 import { sanitizeInlineStyle } from '@bhsd/common';
 import { getWikiLinter, getJsLinter, getCssLinter, getJsonLinter, getLuaLinter } from './linter';
-import { posToIndex } from './hover';
+import { posToIndex } from './util';
 /**
  * 获取Linter选项
  * @param opt Linter选项