@bhsd/codemirror-mediawiki 2.31.0 → 3.0.0

package/README.md

@@ -10,8 +10,17 @@
 - [Browser Usage](#browser-usage)
 	- [JavaScript](#javascript)
 	- [CSS](#css)
+- [Language modes](#language-modes)
+	- [css](#css)
+	- [html](#html)
+	- [javascript](#javascript)
+	- [json](#json)
+	- [lua](#lua)
+	- [mediawiki](#mediawiki)
+	- [vue](#vue)
 - [Constructor](#constructor)
 - [Accessors](#accessors)
+	- [dialect](#dialect)
 	- [lang](#lang)
 	- [textarea](#textarea)
 	- [view](#view)
@@ -54,7 +63,6 @@
 	- [refHover](#refhover)
 	- [scrollPastEnd](#scrollpastend)
 	- [signatureHelp](#signaturehelp)
-	- [tagMatching](#tagmatching)
 - [Known issues](#known-issues)
 	- [Syntax Highlighting](#syntax-highlighting)
 
@@ -77,7 +85,16 @@ npm install @bhsd/codemirror-mediawiki
 ```
 
 ```js
-import {CodeMirror6} from '@bhsd/codemirror-mediawiki';
+import {
+	CodeMirror6,
+	registerMediaWiki,
+	registerHTML,
+	registerCSS,
+	registerJavaScript,
+	registerJSON,
+	registerLua,
+	registerVue,
+} from '@bhsd/codemirror-mediawiki';
 ```
 
 # Browser Usage
@@ -88,26 +105,62 @@ You can download the code via CDN, for example:
 
 ```js
 // static import
-import {CodeMirror6} from 'https://cdn.jsdelivr.net/npm/@bhsd/codemirror-mediawiki';
+import {
+	CodeMirror6,
+	registerMediaWiki,
+	registerHTML,
+	registerCSS,
+	registerJavaScript,
+	registerJSON,
+	registerLua,
+	registerVue,
+} from 'https://cdn.jsdelivr.net/npm/@bhsd/codemirror-mediawiki';
 ```
 
 or
 
 ```js
-import {CodeMirror6} from 'https://unpkg.com/@bhsd/codemirror-mediawiki';
+import {
+	CodeMirror6,
+	registerMediaWiki,
+	registerHTML,
+	registerCSS,
+	registerJavaScript,
+	registerJSON,
+	registerLua,
+	registerVue,
+} from 'https://unpkg.com/@bhsd/codemirror-mediawiki';
 ```
 
 or
 
 ```js
 // dynamic import
-const {CodeMirror6} = await import('https://cdn.jsdelivr.net/npm/@bhsd/codemirror-mediawiki');
+const {
+	CodeMirror6,
+	registerMediaWiki,
+	registerHTML,
+	registerCSS,
+	registerJavaScript,
+	registerJSON,
+	registerLua,
+	registerVue,
+} = await import('https://cdn.jsdelivr.net/npm/@bhsd/codemirror-mediawiki');
 ```
 
 or
 
 ```js
-const {CodeMirror6} = await import('https://unpkg.com/@bhsd/codemirror-mediawiki');
+const {
+	CodeMirror6,
+	registerMediaWiki,
+	registerHTML,
+	registerCSS,
+	registerJavaScript,
+	registerJSON,
+	registerLua,
+	registerVue,
+} = await import('https://unpkg.com/@bhsd/codemirror-mediawiki');
 ```
 
 ## CSS
@@ -122,6 +175,81 @@ or
 <link rel="stylesheet" href="https://unpkg.com/@bhsd/codemirror-mediawiki/mediawiki.css">
 ```
 
+# Language modes
+
+## css
+
+The CSS mode contains a [dialect](#dialect) for [Extension:TemplateStyles](https://www.mediawiki.org/wiki/Extension:TemplateStyles). You can bundle the CSS mode by importing the `registerCSS` function:
+
+```js
+import {registerCSS} from '@bhsd/codemirror-mediawiki';
+registerCSS();
+```
+
+## html
+
+This is a mixed MediaWiki-HTML mode, which is used for [Extension:Widgets](https://www.mediawiki.org/wiki/Extension:Widgets). You can bundle the HTML mode by importing the `registerHTML` function:
+
+```js
+import {registerHTML} from '@bhsd/codemirror-mediawiki';
+registerHTML();
+```
+
+## javascript
+
+You can bundle the JavaScript mode by importing the `registerJavaScript` function:
+
+```js
+import {registerJavaScript} from '@bhsd/codemirror-mediawiki';
+registerJavaScript();
+```
+
+## json
+
+You can bundle the JSON mode by importing the `registerJSON` function:
+
+```js
+import {registerJSON} from '@bhsd/codemirror-mediawiki';
+registerJSON();
+```
+
+## lua
+
+You can bundle the Lua mode by importing the `registerLua` function:
+
+```js
+import {registerLua} from '@bhsd/codemirror-mediawiki';
+registerLua();
+```
+
+## mediawiki
+
+You can bundle the MediaWiki mode by importing the `registerMediaWiki` function:
+
+```js
+import {registerMediaWiki} from '@bhsd/codemirror-mediawiki';
+registerMediaWiki();
+```
+
+## vue
+
+You can bundle the Vue mode by importing the `registerVue` function:
+
+```js
+import {registerVue} from '@bhsd/codemirror-mediawiki';
+registerVue();
+```
+
+## Other languages
+
+You can also register other languages by importing the `registerLanguage` function:
+
+```js
+import {registerLanguage} from '@bhsd/codemirror-mediawiki';
+import {python} from '@codemirror/lang-python';
+registerLanguage('python', python);
+```
+
 # Constructor
 
 <details>
@@ -146,6 +274,18 @@ const cm = new CodeMirror6(textarea, 'lua');
 
 # Accessors
 
+## dialect
+
+<details>
+	<summary>Expand</summary>
+
+*version added: 2.28.0*
+
+**type**: `'sanitized-css' | undefined`  
+Only used for [Extension:TemplateStyles](https://www.mediawiki.org/wiki/Extension:TemplateStyles) as a dialect of the CSS mode.
+
+</details>
+
 ## lang
 
 <details>
@@ -233,7 +373,7 @@ cm.extraKeys([
 *version added: 2.1.3*
 
 **param**: `Record<string, any>` the optional linter configuration  
-**returns**: `Promise<(doc: Text) => Diagnostic[] | Promise<Diagnostic[]>>`  
+**returns**: `Promise<(state: EditorState) => Diagnostic[] | Promise<Diagnostic[]>>`  
 Get the default linting function, which can be used as the argument of [`lint`](#lint).
 
 ```js
@@ -283,11 +423,11 @@ cm.initialize();
 <details>
 	<summary>Expand</summary>
 
-**param**: `(doc: Text) => Diagnostic[] | Promise<Diagnostic[]>` the linting function  
+**param**: `(state: EditorState) => Diagnostic[] | Promise<Diagnostic[]>` the linting function  
 Set the linting function.
 
 ```js
-cm.lint(doc => [
+cm.lint(({doc}) => [
 	/**
 	 * @type {Diagnostic}
 	 * @see https://codemirror.net/docs/ref/#lint.Diagnostic
@@ -337,36 +477,48 @@ cm.prefer([
 	'autocompletion',
 	'bracketMatching',
 	'closeBrackets',
+	'codeFolding',
 	'highlightActiveLine',
+	'highlightSelectionMatches',
 	'highlightSpecialChars',
-	'highlightWhitespace',
 	'highlightTrailingWhitespace',
-	'highlightSelectionMatches',
-	'codeFolding',
+	'highlightWhitespace',
 	'scrollPastEnd',
 
+	// only available in CSS and MediaWiki modes
+	'colorPicker',
+
 	// only available in MediaWiki mode
 	'escape',
-	'tagMatching',
+	'hover',
+	'inlayHints',
+	'openLinks',
 	'refHover',
+	'signatureHelp',
 ]);
 cm.prefer({
 	allowMultipleSelections: false,
 	autocompletion: false,
 	bracketMatching: false,
 	closeBrackets: false,
+	codeFolding: false,
 	highlightActiveLine: false,
+	highlightSelectionMatches: false,
 	highlightSpecialChars: false,
-	highlightWhitespace: false,
 	highlightTrailingWhitespace: false,
-	highlightSelectionMatches: false,
-	codeFolding: false,
+	highlightWhitespace: false,
 	scrollPastEnd: false,
 
+	// only available in CSS and MediaWiki modes
+	colorPicker: false,
+
 	// only available in MediaWiki mode
 	escape: false,
-	tagMatching: false,
+	hover: false,
+	inlayHints: false,
+	openLinks: false,
 	refHover: false,
+	signatureHelp: false,
 });
 ```
 
@@ -540,7 +692,7 @@ Provide autocompletion for MediaWiki, CSS and JavaScript modes.
 
 *version added: 2.0.9*
 
-Matched or unmatched brackets are highlighted in cyan or dark red when the cursor is next to them.
+Matched or unmatched brackets or tags are highlighted in cyan or dark red when the cursor is next to them.
 
 ## closeBrackets
 
@@ -638,12 +790,6 @@ Allow the editor to be scrolled down past the end of the document.
 
 Show the parser function signature when typing.
 
-## tagMatching
-
-*version added: 2.4.1*
-
-Matched or unmatched tags are highlighted in cyan or dark red when the cursor is inside.
-
 # Known issues
 
 ## Syntax Highlighting

package/dist/codemirror.d.ts

@@ -1,118 +1,143 @@
 import { EditorView } from '@codemirror/view';
 import type { KeyBinding } from '@codemirror/view';
-import type { Extension, Text } from '@codemirror/state';
+import type { Extension } from '@codemirror/state';
+import type { LanguageSupport } from '@codemirror/language';
 import type { SyntaxNode } from '@lezer/common';
-import type { Diagnostic } from '@codemirror/lint';
 import type { ConfigData } from 'wikiparser-node';
 import type { MwConfig } from './token';
 import type { DocRange } from './fold';
 import type { Option, LiveOption } from './linter';
+import type { LintSource, LintSourceGetter } from './lintsource';
 export type { MwConfig };
-export type LintSource = ((doc: Text) => Diagnostic[] | Promise<Diagnostic[]>) & {
-    fixer?: (doc: Text, rule?: string) => string | Promise<string>;
-};
-export type Addon<T> = [(config?: T, cm?: CodeMirror6) => Extension, Record<string, T>];
+export type Addon<T> = [(config?: T, cm?: CodeMirror6) => Extension, Record<string, T>?];
 export type Dialect = 'sanitized-css' | undefined;
-/** CodeMirror 6 编辑器 */
+/** Register MediaWiki language support */
+export declare const registerMediaWiki: () => void;
+/** Register mixed MediaWiki-HTML language support */
+export declare const registerHTML: () => void;
+/** Register JavaScript language support */
+export declare const registerJavaScript: () => void;
+/** Register CSS language support */
+export declare const registerCSS: () => void;
+/** Register JSON language support */
+export declare const registerJSON: () => void;
+/** Register Lua language support */
+export declare const registerLua: () => void;
+/** Register Vue language support */
+export declare const registerVue: () => void;
+/**
+ * Register a custom language support
+ * @param name language name
+ * @param lang language support
+ * @param lintSource optional linter
+ */
+export declare const registerLanguage: (name: string, lang: (config?: unknown) => LanguageSupport, lintSource?: LintSourceGetter) => void;
+/** CodeMirror 6 editor */
 export declare class CodeMirror6 {
     #private;
+    /** only for sanitized-css */
+    dialect: Dialect;
     getWikiConfig?: () => Promise<ConfigData>;
     langConfig: MwConfig | undefined;
-    dialect: Dialect;
+    /** textarea element */
     get textarea(): HTMLTextAreaElement;
+    /** EditorView instance */
     get view(): EditorView | undefined;
+    /** language */
     get lang(): string;
+    /** whether the editor view is visible */
     get visible(): boolean;
     /**
-     * @param textarea 文本框
-     * @param lang 语言
-     * @param config 语言设置
-     * @param init 是否初始化
+     * @param textarea textarea element
+     * @param lang language
+     * @param config language configuration
+     * @param init whether to initialize the editor immediately
      */
     constructor(textarea: HTMLTextAreaElement, lang?: string, config?: unknown, init?: boolean);
     /**
-     * 初始化编辑器
-     * @param config 语言设置
+     * Initialize the editor
+     * @param config language configuration
      */
     initialize(config?: unknown): void;
     /**
-     * 设置语言
-     * @param lang 语言
-     * @param config 语言设置
+     * Set language
+     * @param lang language
+     * @param config language configuration
      */
     setLanguage(lang?: string, config?: unknown): Promise<void>;
     /**
-     * 开始语法检查
-     * @param lintSource 语法检查函数
+     * Start syntax checking
+     * @param lintSource function for syntax checking
      */
     lint(lintSource?: LintSource): void;
-    /** 立即更新语法检查 */
+    /** Update syntax checking immediately */
     update(): void;
     /**
-     * 添加扩展
-     * @param names 扩展名
+     * Add extensions
+     * @param names extension names
      */
     prefer(names: string[] | Record<string, boolean>): void;
     /**
-     * 设置缩进
-     * @param indent 缩进字符串
+     * Set text indentation
+     * @param indent indentation string
      */
     setIndent(indent: string): void;
     /**
-     * 设置文本换行
-     * @param wrapping 是否换行
+     * Set line wrapping
+     * @param wrapping whether to enable line wrapping
      */
     setLineWrapping(wrapping: boolean): void;
     /**
-     * 获取默认linter
-     * @param opt 选项
+     * Get default linter
+     * @param opt linter options
      */
     getLinter(opt?: Option | LiveOption): Promise<LintSource | undefined>;
     /**
-     * 重设编辑器内容
-     * @param insert 新内容
-     * @param force 是否强制
+     * Set content
+     * @param insert new content
+     * @param force whether to forcefully replace the content
      */
     setContent(insert: string, force?: boolean): void;
     /**
-     * 在编辑器和文本框之间切换
-     * @param show 是否显示编辑器
+     * Switch between textarea and editor view
+     * @param show whether to show the editor view
      */
     toggle(show?: boolean): void;
-    /** 销毁实例 */
+    /** Destroy the editor */
     destroy(): void;
     /**
-     * 添加额外快捷键
-     * @param keys 快捷键
+     * Define extra key bindings
+     * @param keys key bindings
      */
     extraKeys(keys: KeyBinding[]): void;
     /**
-     * 设置翻译信息
-     * @param messages 翻译信息
+     * Set translation messages
+     * @param messages translation messages
      */
     localize(messages?: Record<string, string>): void;
     /**
-     * 获取语法树节点
-     * @param position 位置
+     * Get the syntax node at the specified position
+     * @param position position
      */
     getNodeAt(position: number): SyntaxNode | undefined;
     /**
-     * 滚动至指定位置
-     * @param position 位置
+     * Scroll to the specified position
+     * @param position position or selection range
      */
     scrollTo(position?: number | {
         anchor: number;
         head: number;
     }): void;
     /**
-     * 替换选中内容
-     * @param view
-     * @param func 替换函数
+     * Replace the current selection with the result of a function
+     * @param view EditorView instance
+     * @param func function to produce the replacement text
      */
     static replaceSelections(view: EditorView, func: (str: string, range: DocRange) => string | [string, number, number?]): void;
     /**
-     * 将wikiparser-node设置转换为codemirror-mediawiki设置
-     * @param config
+     * Convert a [WikiParser-Node](https://npmjs.com/package/wikiparser-node) configuration
+     * to a CodeMirror-MediaWiki configuration
+     * @param config WikiParser-Node configuration
      */
     static getMwConfig(config: ConfigData): MwConfig;
 }