@bhsd/codemirror-mediawiki 2.28.2 → 2.29.1

package/dist/config.js

@@ -0,0 +1,178 @@
+// src/config.ts
+import { tags, Tag } from "@lezer/highlight";
+
+// ../wikiparser-node/config/default.json
+var html = [
+  [
+    "b",
+    "bdi",
+    "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",
+    "ol",
+    "ul",
+    "dl",
+    "table",
+    "caption",
+    "pre",
+    "ruby",
+    "rb",
+    "rp",
+    "rt",
+    "rtc",
+    "p",
+    "span",
+    "abbr",
+    "dfn",
+    "kbd",
+    "samp",
+    "data",
+    "time",
+    "mark",
+    "tr",
+    "td",
+    "th",
+    "q",
+    "bdo"
+  ],
+  [
+    "li",
+    "dt",
+    "dd"
+  ],
+  [
+    "br",
+    "wbr",
+    "hr",
+    "meta",
+    "link",
+    "img"
+  ]
+];
+
+// src/config.ts
+/**
+ * @file Configuration for the MediaWiki highlighting mode for CodeMirror.
+ * @author MusikAnimal and others
+ * @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 tokens = {
+  apostrophes: "mw-apostrophes",
+  comment: "mw-comment",
+  convertBracket: "mw-convert-bracket",
+  convertDelimiter: "mw-convert-delimiter",
+  convertFlag: "mw-convert-flag",
+  convertLang: "mw-convert-lang",
+  doubleUnderscore: "mw-double-underscore",
+  em: "mw-em",
+  error: "mw-error",
+  extLink: "mw-extlink",
+  extLinkBracket: "mw-extlink-bracket",
+  extLinkProtocol: "mw-extlink-protocol",
+  extLinkText: "mw-extlink-text",
+  extTag: "mw-exttag",
+  extTagAttribute: "mw-exttag-attribute",
+  extTagAttributeValue: "mw-exttag-attribute-value",
+  extTagBracket: "mw-exttag-bracket",
+  extTagName: "mw-exttag-name",
+  fileDelimiter: "mw-file-delimiter",
+  fileText: "mw-file-text",
+  freeExtLink: "mw-free-extlink",
+  freeExtLinkProtocol: "mw-free-extlink-protocol",
+  hr: "mw-hr",
+  htmlEntity: "mw-entity",
+  htmlTagAttribute: "mw-htmltag-attribute",
+  htmlTagAttributeValue: "mw-htmltag-attribute-value",
+  htmlTagBracket: "mw-htmltag-bracket",
+  htmlTagName: "mw-htmltag-name",
+  imageParameter: "mw-image-parameter",
+  linkBracket: "mw-link-bracket",
+  linkDelimiter: "mw-link-delimiter",
+  linkPageName: "mw-link-pagename",
+  linkText: "mw-link-text",
+  linkToSection: "mw-link-tosection",
+  list: "mw-list",
+  magicLink: "mw-magic-link",
+  pageName: "mw-pagename",
+  parserFunction: "mw-parserfunction",
+  parserFunctionBracket: "mw-parserfunction-bracket",
+  parserFunctionDelimiter: "mw-parserfunction-delimiter",
+  parserFunctionName: "mw-parserfunction-name",
+  redirect: "mw-redirect",
+  section: "mw-section",
+  sectionHeader: "mw-section-header",
+  signature: "mw-signature",
+  skipFormatting: "mw-skipformatting",
+  strong: "mw-strong",
+  tableBracket: "mw-table-bracket",
+  tableCaption: "mw-table-caption",
+  tableDefinition: "mw-table-definition",
+  tableDefinitionValue: "mw-table-definition-value",
+  tableDelimiter: "mw-table-delimiter",
+  tableDelimiter2: "mw-table-delimiter2",
+  tableTd: "mw-table-td",
+  tableTh: "mw-table-th",
+  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",
+  templateVariableDelimiter: "mw-templatevariable-delimiter",
+  templateVariableName: "mw-templatevariable-name"
+};
+var tokenTable = (() => {
+  const table = {
+    variable: tags.variableName,
+    "variable-2": tags.special(tags.variableName),
+    "string-2": tags.special(tags.string),
+    def: tags.definition(tags.variableName),
+    tag: tags.tagName,
+    attribute: tags.attributeName,
+    type: tags.typeName,
+    builtin: tags.standard(tags.variableName),
+    qualifier: tags.modifier,
+    error: tags.invalid,
+    header: tags.heading,
+    property: tags.propertyName
+  };
+  for (const className of Object.values(tokens)) {
+    table[className] = Tag.define();
+  }
+  return table;
+})();
+export {
+  htmlTags,
+  selfClosingTags,
+  tokenTable,
+  tokens,
+  voidHtmlTags
+};

package/dist/css.js

@@ -0,0 +1,30 @@
+import { cssLanguage, cssCompletionSource } from '@codemirror/lang-css';
+import { LanguageSupport, syntaxTree } from '@codemirror/language';
+export default (dialect) => new LanguageSupport(cssLanguage, cssLanguage.data.of({
+    autocomplete(context) {
+        const { state, pos } = context, node = syntaxTree(state).resolveInner(pos, -1), result = cssCompletionSource(context);
+        if (result) {
+            if (node.name === 'ValueName') {
+                const options = [{ label: 'revert', type: 'keyword' }, ...result.options];
+                let { prevSibling } = node;
+                while (prevSibling && prevSibling.name !== 'PropertyName') {
+                    ({ prevSibling } = prevSibling);
+                }
+                if (prevSibling) {
+                    for (let i = 0; i < options.length; i++) {
+                        const option = options[i];
+                        if (CSS.supports(state.sliceDoc(prevSibling.from, node.from) + option.label)) {
+                            options.splice(i, 1, { ...option, boost: 50 });
+                        }
+                    }
+                }
+                result.options = options;
+            }
+            else if (dialect === 'sanitized-css') {
+                result.options = result.options.filter(({ type, label }) => type !== 'property'
+                    || !label.startsWith('-') || label.endsWith('-user-select'));
+            }
+        }
+        return result;
+    },
+}));

package/dist/escape.js

@@ -0,0 +1,35 @@
+import { indentMore, indentLess } from '@codemirror/commands';
+import { CodeMirror6 } from './codemirror';
+const entity = { '"': 'quot', "'": 'apos', '<': 'lt', '>': 'gt', '&': 'amp', ' ': 'nbsp' };
+/**
+ * 根据函数转换选中文本
+ * @param func 转换函数
+ * @param cmd 原命令
+ */
+const convert = (func, cmd) => (view) => {
+    if (view.state.selection.ranges.some(range => !range.empty)) {
+        CodeMirror6.replaceSelections(view, func);
+        return true;
+    }
+    return cmd(view);
+};
+// eslint-disable-next-line @typescript-eslint/no-misused-spread
+export const escapeHTML = (str) => [...str].map(c => {
+    if (c in entity) {
+        return `&${entity[c]};`;
+    }
+    const code = c.codePointAt(0);
+    return code < 256 ? `&#${code};` : `&#x${code.toString(16)};`;
+}).join(''), escapeURI = (str) => {
+    if (str.includes('%')) {
+        try {
+            return decodeURIComponent(str);
+        }
+        catch { }
+    }
+    return encodeURIComponent(str);
+};
+export default [
+    { key: 'Mod-[', run: convert(escapeHTML, indentLess) },
+    { key: 'Mod-]', run: convert(escapeURI, indentMore) },
+];

package/dist/fold.js

@@ -0,0 +1,445 @@
+import { showTooltip, keymap, GutterMarker, gutter, ViewPlugin } from '@codemirror/view';
+import { StateField, RangeSetBuilder, RangeSet } from '@codemirror/state';
+import { syntaxTree, ensureSyntaxTree, foldEffect, unfoldEffect, foldedRanges, unfoldAll, codeFolding, foldGutter, foldKeymap, foldState, language, } from '@codemirror/language';
+import { getRegex } from '@bhsd/common';
+import { tokens } from './config';
+import { matchTag } from './matchTag';
+const getExtRegex = 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;
+/**
+ * Check if a SyntaxNode is among the specified components
+ * @param keys The keys of the tokens to check
+ */
+const isComponent = (keys) => ({ name }) => keys.some(key => name.includes(tokens[key])), 
+/** Check if a SyntaxNode is a template bracket (`{{` or `}}`) */
+isTemplateBracket = isComponent(['templateBracket', 'parserFunctionBracket']), 
+/** Check if a SyntaxNode is a template delimiter (`|` or `:`) */
+isDelimiter = isComponent(['templateDelimiter', 'parserFunctionDelimiter']), 
+/**
+ * Check if a SyntaxNode is part of a template, except for the brackets
+ * @param node 语法树节点
+ */
+isTemplate = (node) => /-(?:template|ext)[a-z\d-]+ground/u.test(node.name) && !isTemplateBracket(node), 
+/** Check if a SyntaxNode is an extension tag bracket (`<` or `>`) */
+isExtBracket = isComponent(['extTagBracket']), 
+/**
+ * Check if a SyntaxNode is part of a extension tag
+ * @param node 语法树节点
+ */
+isExt = (node) => node.name.includes('mw-tag-');
+/**
+ * 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];
+};
+/**
+ * 寻找可折叠的范围
+ * @param state
+ * @param posOrNode 字符位置或语法树节点
+ * @param tree 语法树
+ */
+export const foldable = (state, posOrNode, tree) => {
+    if (typeof posOrNode === 'number') {
+        tree = ensureSyntaxTree(state, posOrNode); // eslint-disable-line no-param-reassign
+    }
+    if (!tree) {
+        return false;
+    }
+    let node;
+    if (typeof posOrNode === 'number') {
+        // Find the initial template node on both sides of the position
+        const left = tree.resolve(posOrNode, -1);
+        if (isTemplate(left)) {
+            node = left;
+        }
+        else {
+            const right = tree.resolve(posOrNode, 1);
+            node = isExt(left)
+                && left.name.split('mw-tag-').length > right.name.split('mw-tag-').length
+                ? left
+                : right;
+        }
+    }
+    else {
+        node = posOrNode;
+    }
+    if (!isTemplate(node)) {
+        // Not a template
+        if (isExt(node)) {
+            const { name } = node, [tag] = /^[a-z]+/u.exec(name.slice(name.lastIndexOf('mw-tag-') + 7)), regex = getExtRegex(tag);
+            let { nextSibling } = node;
+            while (nextSibling && !(isExtBracket(nextSibling) && !regex.test(nextSibling.name))) {
+                ({ nextSibling } = nextSibling);
+            }
+            if (nextSibling) { // The closing bracket of the current extension tag
+                return { from: matchTag(state, nextSibling.to).end.to, to: nextSibling.from };
+            }
+        }
+        return false;
+    }
+    let { prevSibling, nextSibling } = node, 
+    /** The stack of opening (+) or closing (-) brackets */ stack = 1, 
+    /** The first delimiter */ delimiter = isDelimiter(node) ? node : null, 
+    /** The start of the closing bracket */ to = 0;
+    while (nextSibling) {
+        if (isTemplateBracket(nextSibling)) {
+            const [lbrace, rbrace] = braceStackUpdate(state, nextSibling);
+            stack += rbrace;
+            if (stack <= 0) {
+                // The closing bracket of the current template
+                to = nextSibling.from
+                    + state.sliceDoc(nextSibling.from, nextSibling.to)
+                        .split('}}').slice(0, stack - 1).join('}}').length;
+                break;
+            }
+            stack += lbrace;
+        }
+        else if (!delimiter && stack === 1 && isDelimiter(nextSibling)) {
+            // The first delimiter of the current template so far
+            delimiter = nextSibling;
+        }
+        ({ nextSibling } = nextSibling);
+    }
+    if (!nextSibling) {
+        // The closing bracket of the current template is missing
+        return false;
+    }
+    stack = -1;
+    while (prevSibling) {
+        if (isTemplateBracket(prevSibling)) {
+            const [lbrace, rbrace] = braceStackUpdate(state, prevSibling);
+            stack += lbrace;
+            if (stack >= 0) {
+                // The opening bracket of the current template
+                break;
+            }
+            stack += rbrace;
+        }
+        else if (stack === -1 && isDelimiter(prevSibling)) {
+            // The first delimiter of the current template so far
+            delimiter = prevSibling;
+        }
+        ({ prevSibling } = prevSibling);
+    }
+    const /** The end of the first delimiter */ from = delimiter?.to;
+    return from && from < to ? { from, to } : false;
+};
+/**
+ * 创建折叠提示
+ * @param state
+ */
+const create = (state) => {
+    const { selection: { main: { head } } } = state, range = foldable(state, head);
+    if (range) {
+        const { from, to } = range;
+        let folded = false;
+        foldedRanges(state).between(from, to, (i, j) => {
+            if (i === from && j === to) {
+                folded = true;
+            }
+        });
+        return folded // eslint-disable-line @typescript-eslint/no-unnecessary-condition
+            ? null
+            : {
+                pos: head,
+                above: true,
+                create() {
+                    const dom = document.createElement('div');
+                    dom.className = 'cm-tooltip-fold';
+                    dom.textContent = '\uff0d';
+                    dom.title = state.phrase('Fold template or extension tag');
+                    dom.dataset['from'] = String(from);
+                    dom.dataset['to'] = String(to);
+                    return { dom };
+                },
+            };
+    }
+    return null;
+};
+/**
+ * 执行折叠
+ * @param view
+ * @param effects 折叠
+ * @param anchor 光标位置
+ */
+const execute = (view, effects, anchor) => {
+    if (effects.length > 0) {
+        view.dom.querySelector('.cm-tooltip-fold')?.remove();
+        // Fold the template(s) and update the cursor position
+        view.dispatch({ effects, selection: { anchor } });
+        return true;
+    }
+    return false;
+};
+/**
+ * The rightmost position of all selections, to be updated with folding
+ * @param state
+ */
+const getAnchor = (state) => Math.max(...state.selection.ranges.map(({ to }) => to));
+/**
+ * 折叠所有模板
+ * @param state
+ * @param tree 语法树
+ * @param effects 折叠
+ * @param node 语法树节点
+ * @param end 终止位置
+ * @param anchor 光标位置
+ * @param update 更新光标位置
+ */
+const traverse = (state, tree, effects, node, end, anchor, update) => {
+    while (node && node.from <= end) {
+        /* eslint-disable no-param-reassign */
+        const range = foldable(state, node, tree);
+        if (range) {
+            effects.push(foldEffect.of(range));
+            node = tree.resolve(range.to, 1);
+            // Update the anchor with the end of the last folded range
+            anchor = update(anchor, range);
+            continue;
+        }
+        node = node.nextSibling;
+        /* eslint-enable no-param-reassign */
+    }
+    return anchor;
+};
+class FoldMarker extends GutterMarker {
+    constructor(open) {
+        super();
+        this.open = open;
+    }
+    eq(other) {
+        return this.open === other.open;
+    }
+    toDOM({ state }) {
+        const span = document.createElement('span');
+        span.textContent = this.open ? '⌄' : '›';
+        span.title = state.phrase(this.open ? 'Fold line' : 'Unfold line');
+        return span;
+    }
+}
+const canFold = new FoldMarker(true), canUnfold = new FoldMarker(false);
+const findFold = ({ state }, line) => {
+    let found;
+    state.field(foldState, false)?.between(line.from, line.to, (from, to) => {
+        if (!found && to === line.to) {
+            found = { from, to };
+        }
+    });
+    return found;
+};
+export const foldableLine = ({ state, viewport: { to: end }, viewportLineBlocks }, { from: f, to: t }) => {
+    const tree = syntaxTree(state);
+    /**
+     * 获取标题层级
+     * @param pos 行首位置
+     */
+    const getLevel = (pos) => {
+        const { name } = tree.resolve(pos, 1);
+        return name.includes(tokens.sectionHeader) ? Number(/mw-section--(\d)/u.exec(name)[1]) : 7;
+    }, 
+    /**
+     * 获取表格语法
+     * @param from 行首位置
+     * @param to 行尾位置
+     */
+    getTable = (from, to) => {
+        const line = state.sliceDoc(from, to), bracket = /^\s*(?:(?::+\s*)?\{\||\|\})/u.exec(line)?.[0];
+        if (bracket) {
+            const { name } = tree.resolve(from + bracket.length, -1);
+            if (name.includes(tokens.tableBracket)) {
+                return bracket.endsWith('|}') ? -1 : 1;
+            }
+        }
+        return 0;
+    };
+    const level = getLevel(f);
+    if (level < 7) {
+        for (const { from } of viewportLineBlocks) {
+            if (from > f && getLevel(from) <= level) {
+                return t < from - 1 && { from: t, to: from - 1 };
+            }
+        }
+        return end === state.doc.length && end > t && { from: t, to: end };
+    }
+    else if (getTable(f, t) === 1) {
+        for (const { from, to } of viewportLineBlocks) {
+            if (from > f) {
+                const bracket = getTable(from, to);
+                if (bracket === -1) {
+                    return t < from - 1 && { from: t, to: from - 1 };
+                }
+                else if (bracket === 1 || getLevel(from) < 7) {
+                    break;
+                }
+            }
+        }
+    }
+    return false;
+};
+const buildMarkers = (view) => {
+    const builder = new RangeSetBuilder();
+    for (const line of view.viewportLineBlocks) {
+        let mark;
+        if (findFold(view, line)) {
+            mark = canUnfold;
+        }
+        else if (foldableLine(view, line)) {
+            mark = canFold;
+        }
+        if (mark) {
+            builder.add(line.from, line.from, mark);
+        }
+    }
+    return builder.finish();
+};
+const markers = ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.markers = buildMarkers(view);
+    }
+    update({ docChanged, viewportChanged, startState, state, view }) {
+        if (docChanged
+            || viewportChanged
+            || startState.facet(language) !== state.facet(language)
+            || startState.field(foldState, false) !== state.field(foldState, false)
+            || syntaxTree(startState) !== syntaxTree(state)) {
+            this.markers = buildMarkers(view);
+        }
+    }
+});
+const defaultFoldExtension = [foldGutter(), keymap.of(foldKeymap)];
+export default [
+    (e = defaultFoldExtension) => e,
+    {
+        mediawiki: [
+            codeFolding({
+                placeholderDOM(view) {
+                    const element = document.createElement('span');
+                    element.textContent = '…';
+                    element.setAttribute('aria-label', 'folded code');
+                    element.title = view.state.phrase('unfold');
+                    element.className = 'cm-foldPlaceholder';
+                    element.addEventListener('click', ({ target }) => {
+                        const pos = view.posAtDOM(target), { state } = view, { selection } = state;
+                        foldedRanges(state).between(pos, pos, (from, to) => {
+                            if (from === pos) {
+                                // Unfold the template and redraw the selections
+                                view.dispatch({ effects: unfoldEffect.of({ from, to }), selection });
+                            }
+                        });
+                    });
+                    return element;
+                },
+            }),
+            /** @see https://codemirror.net/examples/tooltip/ */
+            StateField.define({
+                create,
+                update(tooltip, { state, docChanged, selection }) {
+                    if (docChanged) {
+                        return null;
+                    }
+                    return selection ? create(state) : tooltip;
+                },
+                provide(f) {
+                    return showTooltip.from(f);
+                },
+            }),
+            keymap.of([
+                {
+                    // Fold the template at the selection/cursor
+                    key: 'Ctrl-Shift-[',
+                    mac: 'Cmd-Alt-[',
+                    run(view) {
+                        const { state } = view, tree = syntaxTree(state), effects = [];
+                        let anchor = getAnchor(state);
+                        for (const { from, to, empty } of state.selection.ranges) {
+                            let node;
+                            if (empty) {
+                                // No selection, try both sides of the cursor position
+                                node = tree.resolve(from, -1);
+                            }
+                            if (!node || node.name === 'Document') {
+                                node = tree.resolve(from, 1);
+                            }
+                            anchor = traverse(state, tree, effects, node, to, anchor, updateSelection);
+                        }
+                        return execute(view, effects, anchor);
+                    },
+                },
+                {
+                    // Fold all templates in the document
+                    key: 'Ctrl-Alt-[',
+                    run(view) {
+                        const { state } = view, tree = syntaxTree(state), effects = [], anchor = traverse(state, tree, effects, tree.topNode.firstChild, Infinity, getAnchor(state), updateAll);
+                        return execute(view, effects, anchor);
+                    },
+                },
+                {
+                    // Unfold the template at the selection/cursor
+                    key: 'Ctrl-Shift-]',
+                    mac: 'Cmd-Alt-]',
+                    run(view) {
+                        const { state } = view, { selection } = state, effects = [], folded = foldedRanges(state);
+                        for (const { from, to } of selection.ranges) {
+                            // Unfold any folded range at the selection
+                            folded.between(from, to, (i, j) => {
+                                effects.push(unfoldEffect.of({ from: i, to: j }));
+                            });
+                        }
+                        if (effects.length > 0) {
+                            // Unfold the template(s) and redraw the selections
+                            view.dispatch({ effects, selection });
+                            return true;
+                        }
+                        return false;
+                    },
+                },
+                { key: 'Ctrl-Alt-]', run: unfoldAll },
+            ]),
+            markers,
+            gutter({
+                class: 'cm-foldGutter',
+                markers(view) {
+                    return view.plugin(markers)?.markers ?? RangeSet.empty;
+                },
+                initialSpacer() {
+                    return new FoldMarker(false);
+                },
+                domEventHandlers: {
+                    click(view, line) {
+                        const folded = findFold(view, line);
+                        if (folded) {
+                            view.dispatch({ effects: unfoldEffect.of(folded) });
+                            return true;
+                        }
+                        const range = foldableLine(view, line);
+                        if (range) {
+                            view.dispatch({ effects: foldEffect.of(range) });
+                            return true;
+                        }
+                        return false;
+                    },
+                },
+            }),
+        ],
+    },
+];
+/**
+ * 点击提示折叠模板参数
+ * @param view
+ */
+export const foldHandler = (view) => (e) => {
+    const dom = e.target.closest('.cm-tooltip-fold');
+    if (dom) {
+        e.preventDefault();
+        const { dataset } = dom, from = Number(dataset['from']), to = Number(dataset['to']);
+        view.dispatch({
+            effects: foldEffect.of({ from, to }),
+            selection: { anchor: to },
+        });
+        dom.remove();
+    }
+};