@bhsd/codemirror-mediawiki 3.3.0 → 3.4.1

package/README.md

@@ -15,8 +15,6 @@ Nonetheless, this repository also provides a customized version with additional
 
 - [Installation](#installation)
 - [Browser Usage](#browser-usage)
-	- [Download JavaScript](#download-javascript)
-	- [Download CSS](#download-css)
 - [Language modes](#language-modes)
 	- [css](#css)
 	- [html](#html)
@@ -104,13 +102,11 @@ import {
 
 # Browser Usage
 
-You can download the code via CDN, for example:
-
-## Download JavaScript
-
 <details>
 	<summary>Expand</summary>
 
+You can download the code via CDN, for example:
+
 ```js
 // static import
 import {
@@ -173,23 +169,6 @@ const {
 
 </details>
 
-## Download CSS
-
-<details>
-	<summary>Expand</summary>
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bhsd/codemirror-mediawiki/mediawiki.css">
-```
-
-or
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/@bhsd/codemirror-mediawiki/mediawiki.css">
-```
-
-</details>
-
 # Language modes
 
 ## css

package/dist/codemirror.d.ts

@@ -12,7 +12,7 @@ import type statusBar from './statusBar';
 export type AddonMain<T> = (config?: T, cm?: CodeMirror6) => Extension;
 export type Addon<T> = [AddonMain<T>, Record<string, T>?];
 export type Dialect = 'sanitized-css' | undefined;
-export interface MenuItem {
+declare interface MenuItem {
     name: string;
     isActionable(this: void, cm: CodeMirror6): boolean;
     getItems(this: void, cm: CodeMirror6): HTMLDivElement[];

package/dist/codemirror.js

@@ -121,7 +121,18 @@ export class CodeMirror6 {
                 },
             ]),
             EditorView.theme({
-                '.cm-panels': { direction: document.dir },
+                '.cm-panels': {
+                    direction: document.dir,
+                },
+                '& .cm-lineNumbers .cm-gutterElement': {
+                    textAlign: 'end',
+                },
+                '.cm-textfield, .cm-button, .cm-panel.cm-search label, .cm-panel.cm-gotoLine label': {
+                    fontSize: 'inherit',
+                },
+                '.cm-panel [name="close"]': {
+                    color: 'inherit',
+                },
             }),
             EditorView.updateListener.of(({ state: { doc }, startState: { doc: startDoc }, docChanged, focusChanged, }) => {
                 if (docChanged) {
@@ -143,7 +154,9 @@ export class CodeMirror6 {
                     EditorState.readOnly.of(true),
                     EditorState.transactionFilter.of(tr => tr.docChanged ? [] : tr),
                     EditorView.theme({
-                        'input[type="color"]': { pointerEvents: 'none' },
+                        'input[type="color"]': {
+                            pointerEvents: 'none',
+                        },
                     }),
                 ]
                 : [
@@ -400,7 +413,7 @@ export class CodeMirror6 {
      * @param position position
      */
     getNodeAt(position) {
-        return this.#view && ensureSyntaxTree(this.#view.state, position)?.resolve(position, 1);
+        return this.#view && ensureSyntaxTree(this.#view.state, position)?.resolveInner(position, 1);
     }
     /**
      * Scroll to the specified position

package/dist/fold.d.ts

@@ -1,4 +1,5 @@
-import type { EditorView, Command } from '@codemirror/view';
+import { EditorView } from '@codemirror/view';
+import type { Command } from '@codemirror/view';
 import type { EditorState, Extension } from '@codemirror/state';
 import type { SyntaxNode, Tree } from '@lezer/common';
 export interface DocRange {

package/dist/fold.js

@@ -1,4 +1,4 @@
-import { showTooltip, keymap, GutterMarker, gutter, ViewPlugin } from '@codemirror/view';
+import { showTooltip, keymap, GutterMarker, gutter, ViewPlugin, EditorView } 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';
@@ -334,6 +334,7 @@ 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) {
@@ -446,6 +447,17 @@ export const mediaWikiFold = /* @__PURE__ */ (() => [
             },
         },
     }),
+    EditorView.theme({
+        [selector]: {
+            cursor: 'pointer',
+            lineHeight: 1.2,
+            padding: '0 1px',
+            opacity: 0.6,
+        },
+        [`${selector}:hover`]: {
+            opacity: 1,
+        },
+    }),
 ])();
 /**
  * 点击提示折叠模板参数

package/dist/hover.d.ts

@@ -1,4 +1,5 @@
-import type { TooltipView, EditorView } from '@codemirror/view';
+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 { CodeMirror6 } from './codemirror';

package/dist/hover.js

@@ -1,4 +1,4 @@
-import { hoverTooltip } from '@codemirror/view';
+import { hoverTooltip, EditorView } from '@codemirror/view';
 import { loadScript, getLSP } from '@bhsd/browser';
 /**
  * 将索引转换为位置
@@ -31,20 +31,42 @@ export const createTooltipView = (view, innerHTML) => {
     inner.innerHTML = innerHTML;
     return { dom };
 };
-export default (cm) => hoverTooltip(async (view, pos) => {
-    const { state: { doc } } = view, hover = await getLSP(view, false, cm.getWikiConfig)
-        ?.provideHover(doc.toString(), indexToPos(doc, pos));
-    if (hover) {
-        await loadScript('npm/marked/lib/marked.umd.js', 'marked', true);
-        const { end } = hover.range;
-        return {
-            pos,
-            end: posToIndex(doc, end),
-            above: true,
-            create() {
-                return createTooltipView(view, marked.parse(hover.contents.value));
-            },
-        };
-    }
-    return null;
-});
+const selector = '.cm-tooltip-hover';
+export default (cm) => [
+    hoverTooltip(async (view, pos) => {
+        const { state: { doc } } = view, hover = await getLSP(view, false, cm.getWikiConfig)
+            ?.provideHover(doc.toString(), indexToPos(doc, pos));
+        if (hover) {
+            await loadScript('npm/marked/lib/marked.umd.js', 'marked', true);
+            const { end } = hover.range;
+            return {
+                pos,
+                end: posToIndex(doc, end),
+                above: true,
+                create() {
+                    return createTooltipView(view, marked.parse(hover.contents.value));
+                },
+            };
+        }
+        return null;
+    }),
+    EditorView.theme({
+        [selector]: {
+            padding: '2px 5px',
+            width: 'max-content',
+            maxWidth: '60vw',
+        },
+        [`${selector} *`]: {
+            marginTop: '0!important',
+            marginBottom: '0!important',
+        },
+        [`${selector}>div`]: {
+            fontSize: '90%',
+            lineHeight: 1.4,
+        },
+        [`${selector} code`]: {
+            padding: '.1em .4em',
+            borderRadius: '.4em',
+        },
+    }),
+];

package/dist/inlay.js

@@ -65,4 +65,12 @@ export default (cm) => [
             void updateField(update);
         }
     }),
+    EditorView.theme({
+        '.cm-inlay-hint': {
+            color: '#969696',
+            fontStyle: 'italic',
+            '-webkitUserSelect': 'none',
+            userSelect: 'none',
+        },
+    }),
 ];

package/dist/linter.js

@@ -72,7 +72,7 @@ export const getWikiLinter = async (opt, obj) => {
                     message,
                 };
                 if (fix) {
-                    const before = lines.slice(0, i - 1).join('\n').length + 1 + length;
+                    const before = lines.slice(0, i - 1).join('\n').length + length;
                     diagnostic.data = [
                         {
                             range: {

package/dist/lintsource.js

@@ -1,5 +1,7 @@
+import { ensureSyntaxTree } from '@codemirror/language';
 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';
 /**
@@ -125,10 +127,20 @@ export const getCssLintSource = async (opt) => {
 export const getVueLintSource = async (opt) => {
     const styleLint = await getCssLinter(), esLint = await getJsLinter();
     return async (state) => {
-        const { doc } = state, option = await getOpt(opt) ?? {}, js = option['js'], css = option['css'];
+        const { doc } = state, option = await getOpt(opt, true) ?? {}, js = option['js'], css = option['css'];
         return [
-            ...(await Promise.all(cssLanguage.findRegions(state)
-                .map(({ from, to }) => cssLintSource(styleLint, state.sliceDoc(from, to), css, doc, from, to)))).flat(),
+            ...(await Promise.all(cssLanguage.findRegions(state).map(async ({ from, to }) => {
+                const node = ensureSyntaxTree(state, from)?.resolve(from, 1);
+                if (node?.name === 'AttributeValue') {
+                    return (await cssLintSource(styleLint, `a {${sanitizeInlineStyle(state.sliceDoc(from, to))}}`, css, doc, from - 3, to + 1)).filter(({ from: f, to: t }) => f <= to && t >= from)
+                        .map((diagnostic) => {
+                        diagnostic.from = Math.max(diagnostic.from, from);
+                        diagnostic.to = Math.min(diagnostic.to, to);
+                        return diagnostic;
+                    });
+                }
+                return node ? cssLintSource(styleLint, state.sliceDoc(from, to), css, doc, from, to) : [];
+            }))).flat(),
             ...javascriptLanguage.findRegions(state)
                 .flatMap(({ from, to }) => jsLintSource(esLint, state.sliceDoc(from, to), js, doc, from, to)),
         ];
@@ -137,7 +149,7 @@ export const getVueLintSource = async (opt) => {
 export const getHTMLLintSource = async (opt, view, language) => {
     const vueLintSource = await getVueLintSource(opt), wikiLint = await getWikiLinter({ include: false, ...await getOpt(opt) }, view);
     return async (state) => {
-        const { doc } = state, option = await getOpt(opt) ?? {}, wiki = option['wiki'];
+        const { doc } = state, option = await getOpt(opt, true) ?? {}, wiki = option['wiki'];
         return [
             ...await vueLintSource(state),
             ...(await Promise.all(language.findRegions(state)