@bhsd/codemirror-mediawiki 3.2.0 → 3.3.0

package/README.md

@@ -25,6 +25,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 +51,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)
@@ -398,6 +404,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 +820,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,
@@ -411,6 +415,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/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';