@bhsd/codemirror-mediawiki 3.2.0 → 3.4.0

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)
@@ -25,6 +23,11 @@ Nonetheless, this repository also provides a customized version with additional
 	- [lua](#lua)
 	- [mediawiki](#mediawiki)
 	- [vue](#vue)
+	- [Other languages](#other-languages)
+- [Themes](#themes)
+	- [light](#light)
+	- [nord](#nord)
+	- [Other themes](#other-themes)
 - [Constructor](#constructor)
 - [Accessors](#accessors)
 	- [dialect](#dialect)
@@ -46,6 +49,7 @@ Nonetheless, this repository also provides a customized version with additional
 	- [setIndent](#setindent)
 	- [setLanguage](#setlanguage)
 	- [setLineWrapping](#setlinewrapping)
+	- [setTheme](#settheme)
 	- [toggle](#toggle)
 	- [update](#update)
 - [Static methods](#static-methods)
@@ -98,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 {
@@ -167,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
@@ -398,6 +383,41 @@ registerLanguageCore('python', python);
 
 </details>
 
+# Themes
+
+## light
+
+This is the default theme, which is a light theme.
+
+## nord
+
+<details>
+	<summary>Expand</summary>
+
+This is a dark theme created by [Takuya Matsuyama](https://www.npmjs.com/package/cm6-theme-nord) and [鬼影233](https://zh.moegirl.org.cn/User:%E9%AC%BC%E5%BD%B1233/Nord). You need to register this theme before using it:
+
+```js
+import {registerTheme, nord} from '@bhsd/codemirror-mediawiki';
+registerTheme('nord', nord);
+```
+
+</details>
+
+## Other themes
+
+<details>
+	<summary>Expand</summary>
+
+You can also register other themes by importing the `registerTheme` function:
+
+```js
+import {registerTheme} from '@bhsd/codemirror-mediawiki';
+import {oneDark} from '@codemirror/theme-one-dark';
+registerTheme('one-dark', oneDark);
+```
+
+</details>
+
 # Constructor
 
 <details>
@@ -779,6 +799,24 @@ cm.setLineWrapping(true);
 
 </details>
 
+## setTheme
+
+<details>
+	<summary>Expand</summary>
+
+*version added: 3.3.0*
+
+**param**: `string` the theme name  
+Set the theme of the editor. The default theme is `light`, other themes need to be registered using the `registerTheme` function first:
+
+```js
+import {registerTheme, nord} from '@bhsd/codemirror-mediawiki';
+registerTheme('nord', nord);
+cm.setTheme('nord');
+```
+
+</details>
+
 ## toggle
 
 <details>

package/dist/codemirror.d.ts

@@ -28,6 +28,7 @@ export declare const avail: Record<string, Addon<any>>;
 export declare const linterRegistry: Record<string, LintSourceGetter>;
 export declare const menuRegistry: MenuItem[];
 export declare const destroyListeners: ((view: EditorView) => void)[];
+export declare const themes: Record<string, Extension>;
 export declare const optionalFunctions: OptionalFunctions;
 /** CodeMirror 6 editor */
 export declare class CodeMirror6 {
@@ -130,6 +131,12 @@ export declare class CodeMirror6 {
         anchor: number;
         head: number;
     }): void;
+    /**
+     * Set the editor theme
+     * @param theme theme name
+     * @since 3.3.0
+     */
+    setTheme(theme: string): void;
     /**
      * Replace the current selection with the result of a function
      * @param view EditorView instance

package/dist/codemirror.js

@@ -4,6 +4,7 @@ import { syntaxHighlighting, defaultHighlightStyle, indentOnInput, indentUnit, e
 import { defaultKeymap, historyKeymap, history, redo, indentWithTab } from '@codemirror/commands';
 import { searchKeymap } from '@codemirror/search';
 import { linter, lintGutter, lintKeymap } from '@codemirror/lint';
+import { light } from './theme';
 export const plain = () => EditorView.contentAttributes.of({ spellcheck: 'true' });
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const languages = { plain };
@@ -12,6 +13,7 @@ export const avail = {};
 export const linterRegistry = {};
 export const menuRegistry = [];
 export const destroyListeners = [];
+export const themes = { light };
 export const optionalFunctions = {
     statusBar() {
         return [];
@@ -37,6 +39,7 @@ export class CodeMirror6 {
     #extraKeys = new Compartment();
     #phrases = new Compartment();
     #lineWrapping = new Compartment();
+    #theme = new Compartment();
     #view;
     #lang;
     #visible = false;
@@ -95,6 +98,7 @@ export class CodeMirror6 {
             this.#extraKeys.of([]),
             this.#phrases.of(EditorState.phrases.of(phrases)),
             this.#lineWrapping.of(EditorView.lineWrapping),
+            this.#theme.of(light),
             syntaxHighlighting(defaultHighlightStyle),
             EditorView.contentAttributes.of({
                 accesskey: accessKey,
@@ -117,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) {
@@ -139,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',
+                        },
                     }),
                 ]
                 : [
@@ -411,6 +428,18 @@ export class CodeMirror6 {
             this.#view.dispatch({ effects });
         }
     }
+    /**
+     * Set the editor theme
+     * @param theme theme name
+     * @since 3.3.0
+     */
+    setTheme(theme) {
+        if (theme in themes) {
+            this.#view?.dispatch({
+                effects: this.#theme.reconfigure(themes[theme]),
+            });
+        }
+    }
     /**
      * Replace the current selection with the result of a function
      * @param view EditorView instance

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/index.d.ts

@@ -1,4 +1,5 @@
 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';
@@ -100,3 +101,5 @@ export declare const registerLanguage: (name: string, lang: (config?: unknown) =
  * @param lintSource optional linter
  */
 export declare const registerLanguageCore: (name: string, lang: (config?: unknown) => LanguageSupport, lintSource?: LintSourceGetter) => void;
+export declare const registerTheme: (name: string, theme: Extension) => void;
+export { nord } from './theme';

package/dist/index.js

@@ -28,7 +28,7 @@ import css from './css';
 import lua from './lua';
 import vue from './vue';
 import html from './html';
-import { CodeMirror6, avail, languages, linterRegistry, destroyListeners, plain, optionalFunctions } from './codemirror';
+import { CodeMirror6, avail, languages, linterRegistry, destroyListeners, plain, optionalFunctions, themes, } from './codemirror';
 export { CodeMirror6 };
 /**
  * 注册通用扩展
@@ -105,7 +105,7 @@ export const registerColorPicker = () => {
 };
 /** 注册所有通用扩展（除`colorPicker`） */
 const registerExtensions = () => {
-    highlightSpecialChars();
+    registerHighlightSpecialChars();
     registerHighlightActiveLine();
     registerHighlightWhitespace();
     registerHighlightTrailingWhitespace();
@@ -189,7 +189,7 @@ export const registerInlayHints = () => {
 export const registerColorPickerForMediaWiki = () => {
     registerLangExtension('mediawiki', 'colorPicker', [
         [makeColorPicker({ discoverColors }), colorPickerTheme],
-        { marginLeft: '0.6ch' },
+        { marginLeft: '.6ch' },
     ]);
 };
 /** Register the `bracketMatching` extension for MediaWiki */
@@ -338,3 +338,7 @@ export const registerLanguageCore = (name, lang, lintSource) => {
         registerLintSource(name, lintSource);
     }
 };
+export const registerTheme = (name, theme) => {
+    themes[name] = theme;
+};
+export { nord } from './theme';

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/lintsource.js

@@ -125,7 +125,7 @@ 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(),
@@ -137,7 +137,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)