wikiplus-highlight 2.8.1 → 2.13.1

package/main.js

@@ -8,13 +8,10 @@
 (async () => {
 	'use strict';
 
-	const version = '2.10',
-		newAddon = 1;
+	const version = '2.13.1',
+		newAddon = 2;
 
-	/**
-	 * polyfill for mw.storage
-	 * @type {{getObject: (key: string) => ?any, setObject: (key: string, value: any) => boolean}}
-	 */
+	/** @type {typeof mw.storage} */
 	const storage = typeof mw.storage === 'object' && typeof mw.storage.getObject === 'function'
 		? mw.storage
 		: {
@@ -30,9 +27,8 @@
 				}
 			},
 			setObject(key, value) {
-				let /** @type {string} */ json;
 				try {
-					json = JSON.stringify(value);
+					const json = JSON.stringify(value);
 					return localStorage.setItem(key, json);
 				} catch (e) {
 					return false;
@@ -41,15 +37,22 @@
 		};
 	/**
 	 * polyfill for Object.fromEntries
-	 * @type {(entries: Iterable<[string, any]>) => Object<string, any>}
+	 * @type {(entries: Iterable<[string, any]>) => Record<string, any>}
 	 */
 	const fromEntries = Object.fromEntries || (entries => {
-		const /** @type {Object<string, any>} */ obj = {};
+		const /** @type {Record<string, any>} */ obj = {};
 		for (const [key, value] of entries) {
 			obj[key] = value;
 		}
 		return obj;
 	});
+	/**
+	 * polyfill for Array.prototype.flat
+	 * @type {function(this: any[][]): any[]}
+	 */
+	const flat = Array.prototype.flat || function() {
+		return this.reduce((acc, cur) => acc.concat(cur), []);
+	};
 
 	/**
 	 * 解析版本号
@@ -71,7 +74,6 @@
 	 * 获取I18N消息
 	 * @param {string} key 消息键，省略'wphl-'前缀
 	 * @param {string[]} args
-	 * @returns {string}
 	 */
 	const msg = (key, ...args) => mw.msg(`wphl-${key}`, ...args);
 	/**
@@ -79,7 +81,7 @@
 	 * @param {string[]} args
 	 */
 	const notify = (...args) => () => {
-		const /** @type {JQuery<HTMLParagraphElement>} */ $p = $('<p>', {html: msg(...args)});
+		const $p = $('<p>', {html: msg(...args)});
 		mw.notify($p, {type: 'success', autoHideSeconds: 'long', tag: 'wikiplus-highlight'});
 		return $p;
 	};
@@ -90,13 +92,9 @@
 	// 路径
 	const CDN = '//fastly.jsdelivr.net',
 		CM_CDN = 'npm/codemirror@5.65.3',
-		MW_CDN = 'gh/bhsd-harry/codemirror-mediawiki@1.1.4',
+		MW_CDN = 'gh/bhsd-harry/codemirror-mediawiki@1.1.5',
 		REPO_CDN = `npm/wikiplus-highlight@${majorVersion}`;
 
-	/**
-	 * mw.config常数
-	 * @type {Object<string, string>}
-	 */
 	const {
 		wgPageName: page,
 		wgNamespaceNumber: ns,
@@ -107,26 +105,15 @@
 		skin,
 	} = mw.config.values;
 
-	/**
-	 * @typedef {object} mwConfig
-	 * @property {Object<string, string>} tagModes
-	 * @property {Object<string, boolean>} tags
-	 * @property {string} urlProtocols
-	 * @property {[Object<string, string>, Object<string, string>]} doubleUnderscore
-	 * @property {[Object<string, string>, Object<string, string>]} functionSynonyms
-	 * @property {string[]} redirect
-	 * @property {Object<string, string>} img
-	 */
-
 	// 和本地缓存有关的常数
 	const USING_LOCAL = mw.loader.getState('ext.CodeMirror') !== null,
-		/** @type {Object<string, {time: number, config: mwConfig}>} */
+		/** @type {Record<string, {time: number, config: mwConfig}>} */
 		ALL_SETTINGS_CACHE = storage.getObject('InPageEditMwConfig') || {},
 		SITE_ID = `${server}${scriptPath}`,
 		/** @type {{time: number, config: mwConfig}} */ SITE_SETTINGS = ALL_SETTINGS_CACHE[SITE_ID] || {},
 		EXPIRED = SITE_SETTINGS.time < Date.now() - 86400 * 1000 * 30;
 
-	const /** @type {Object<string, string>} */ CONTENTMODEL = {
+	const /** @type {Record<string, string>} */ CONTENTMODEL = {
 		css: 'css',
 		'sanitized-css': 'css',
 		javascript: 'javascript',
@@ -134,7 +121,7 @@
 		wikitext: 'mediawiki',
 	};
 
-	const /** @type {Object<string, string|[]>} */ MODE_LIST = USING_LOCAL
+	const MODE_LIST = USING_LOCAL
 		? {
 			lib: 'ext.CodeMirror.lib',
 			css: 'ext.CodeMirror.lib.mode.css',
@@ -157,27 +144,129 @@
 	const ADDON_LIST = {
 		searchcursor: `${CM_CDN}/addon/search/searchcursor.min.js`,
 		search: `${REPO_CDN}/search.min.js`,
-		activeLine: `${CM_CDN}/addon/selection/active-line.min.js`,
 		markSelection: `${CM_CDN}/addon/selection/mark-selection.min.js`,
+		activeLine: `${CM_CDN}/addon/selection/active-line.min.js`,
 		trailingspace: `${CM_CDN}/addon/edit/trailingspace.min.js`,
 		matchBrackets: `${CM_CDN}/addon/edit/matchbrackets.min.js`,
+		closeBrackets: `${CM_CDN}/addon/edit/closebrackets.min.js`,
 		matchTags: `${REPO_CDN}/matchtags.min.js`,
 		fold: `${REPO_CDN}/fold.min.js`,
 	};
 
+	/**
+	 * @typedef {object} addon
+	 * @property {string} option
+	 * @property {string|string[]} addon
+	 * @property {string} download
+	 * @property {(mode: string, json: boolean) => any} complex
+	 * @property {string[]} modes
+	 * @property {boolean} only
+	 */
+
+	const /** @type {addon[]} */ options = [
+		{option: 'styleSelectedText', addon: 'search', download: 'markSelection', only: true},
+		{option: 'styleActiveLine', addon: 'activeLine'},
+		{option: 'showTrailingSpace', addon: 'trailingspace'},
+		{
+			option: 'matchBrackets',
+			complex: (mode, json) => mode === 'mediawiki' || json
+				? {bracketRegex: /[{}[\]]/}
+				: true,
+		},
+		{
+			option: 'autoCloseBrackets', addon: 'closeBrackets',
+			complex: (mode, json) => mode === 'mediawiki' || json
+				? '()[]{}""'
+				: true,
+		},
+		{option: 'matchTags', addon: ['matchTags', 'fold'], modes: ['mediawiki', 'widget']},
+		{option: 'fold', modes: ['mediawiki', 'widget']},
+	];
+
 	const defaultAddons = ['search'],
 		defaultIndent = '4';
 	let /** @type {string[]} */ addons = storage.getObject('Wikiplus-highlight-addons') || defaultAddons,
 		/** @type {string} */ indent = storage.getObject('Wikiplus-highlight-indent') || defaultIndent;
 
-	// 用于contextMenu插件
-	const /** @type {HTMLStyleElement} */ contextmenuStyle = document.getElementById('wphl-contextmenu')
-		|| mw.loader.addStyleTag('#Wikiplus-CodeMirror .cm-mw-template-name{cursor:pointer}');
-	contextmenuStyle.id = 'wphl-contextmenu';
-	contextmenuStyle.disabled = true;
+	/** @type {Record<string, string>} */
+	const entity = {'"': 'quot', "'": 'apos', '<': 'lt', '>': 'gt', '&': 'amp', ' ': 'nbsp'},
+		/** @type {(func: (str: string) => string) => (doc: CodeMirror.Editor) => void} */
+		convert = func => doc => {
+			doc.replaceSelection(doc.getSelection().split('\n').map(func).join('\n'), 'around');
+		},
+		escapeHTML = convert(str => str.split('').map(c => {
+			if (c in entity) {
+				return `&${entity[c]};`;
+			}
+			const code = c.charCodeAt();
+			return code < 256 ? `&#${code};` : `&#x${code.toString(16)};`;
+		}).join('')),
+		/** @type {function(typeof CodeMirror): boolean} */ isPc = ({keyMap}) => keyMap.default === keyMap.pcDefault,
+		extraKeysPc = {'Ctrl-/': escapeHTML, 'Ctrl-\\': convert(encodeURIComponent)},
+		extraKeysMac = {'Cmd-/': escapeHTML, 'Cmd-\\': convert(encodeURIComponent)};
+
+	/**
+	 * contextMenu插件
+	 * @param {CodeMirror.Editor} doc
+	 * @param {string} mode
+	 */
+	const handleContextMenu = async (doc, mode) => {
+		if (!['mediawiki', 'widget'].includes(mode) || !addons.includes('contextmenu')) {
+			return;
+		}
+		const $wrapper = $(doc.getWrapperElement()).addClass('CodeMirror-contextmenu'),
+			{functionSynonyms: [synonyms]} = mw.config.get('extCodeMirrorConfig') || {
+				functionSynonyms: [{
+					invoke: 'invoke',
+					调用: 'invoke',
+					widget: 'widget',
+					小工具: 'widget',
+				}],
+			};
+		/** @param {string} str */
+		const getSysnonyms = str => Object.keys(synonyms).filter(key => synonyms[key] === str)
+			.map(key => key.startsWith('#') ? key : `#${key}`);
+		const invoke = getSysnonyms('invoke'),
+			widget = getSysnonyms('widget');
+
+		await mw.loader.using('mediawiki.Title');
+		$wrapper.contextmenu(({pageX, pageY}) => {
+			const pos = doc.coordsChar({left: pageX, top: pageY}),
+				{line, ch} = pos,
+				type = doc.getTokenTypeAt(pos);
+			if (!/\bmw-(?:template-name|parserfunction)\b/.test(type)) {
+				return;
+			}
+			const tokens = doc.getLineTokens(line),
+				index = tokens.findIndex(({start, end}) => start < ch && end >= ch),
+				text = tokens[index].string.replace(/\u200e/g, '').replace(/_/g, ' ').trim();
+			if (/\bmw-template-name\b/.test(type)) {
+				const title = new mw.Title(text);
+				if (title.namespace !== 0 || text.startsWith(':')) {
+					open(title.getUrl(), '_blank');
+				} else {
+					open(mw.util.getUrl(`Template:${text}`), '_blank');
+				}
+				return false;
+			} else if (index < 2 || !/\bmw-parserfunction-delimiter\b/.test(tokens[index - 1].type)
+				|| !/\bmw-parserfunction-name\b/.test(tokens[index - 2].type)
+			) {
+				return;
+			}
+			const parserFunction = tokens[index - 2].string.trim().toLowerCase();
+			if (invoke.includes(parserFunction)) {
+				open(mw.util.getUrl(`Module:${text}`), '_blank');
+			} else if (widget.includes(parserFunction)) {
+				open(mw.util.getUrl(`Widget:${text}`, {action: 'edit'}), '_blank');
+			} else {
+				return;
+			}
+			return false;
+		});
+	};
 
-	let /** @type {Object<string, string>} */ i18n = storage.getObject('Wikiplus-highlight-i18n'),
-		/** @type {() => JQuery<HTMLParagraphElement>} */ welcome;
+	let /** @type {Record<string, string>} */ i18n = storage.getObject('Wikiplus-highlight-i18n'),
+		/** @type {() => JQuery<HTMLElement>} */ welcome;
 	if (!i18n) { // 首次安装
 		i18n = {};
 		welcome = notify('welcome');
@@ -185,7 +274,7 @@
 		welcome = notify(`welcome-${newAddon ? 'new-addon' : 'upgrade'}`, version, newAddon);
 	}
 
-	const /** @type {Object<string, string>} */ i18nLanguages = {
+	const /** @type {Record<string, string>} */ i18nLanguages = {
 			zh: 'zh-hans', 'zh-hans': 'zh-hans', 'zh-cn': 'zh-hans', 'zh-my': 'zh-hans', 'zh-sg': 'zh-hans',
 			'zh-hant': 'zh-hant', 'zh-tw': 'zh-hant', 'zh-hk': 'zh-hant', 'zh-mo': 'zh-hant',
 		},
@@ -205,7 +294,7 @@
 		mw.messages.set(i18n);
 	};
 
-	const /** @type {Promise<[void, void]>} */ i18nPromise = Promise.all([ // 提前加载I18N
+	const i18nPromise = Promise.all([ // 提前加载I18N
 		mw.loader.using('mediawiki.util'),
 		setI18N(),
 	]);
@@ -214,7 +303,6 @@
 	 * 下载脚本
 	 * @param {string[]} urls 脚本路径
 	 * @param {boolean} local 是否从本地下载
-	 * @returns {Promise<void>}
 	 */
 	const getScript = (urls, local) => {
 		if (urls.length === 0) {
@@ -229,7 +317,26 @@
 	};
 
 	// 以下进入CodeMirror相关内容
-	let /** @type {CodeMirror.Editor} */ cm;
+	let /** @type {CodeMirror.EditorFromTextArea} */ cm;
+
+	/** @param {typeof CodeMirror} CM */
+	const getAddonScript = (CM, other = false) => {
+		const /** @type {string[]} */ addonScript = [];
+		for (const {option, addon = option, download = Array.isArray(addon) ? option : addon, only} of options) {
+			if (!(only && other) && !(option in CM.optionHandlers) && intersect(addon, addons)) {
+				addonScript.push(ADDON_LIST[download]);
+			}
+		}
+		return addonScript;
+	};
+
+	/**
+	 * @param {array|any} arr1
+	 * @param {array} arr2
+	 */
+	const intersect = (arr1, arr2) => Array.isArray(arr1)
+		? arr1.some(ele => arr2.includes(ele))
+		: arr2.includes(arr1);
 
 	/**
 	 * 根据文本的高亮模式加载依赖项
@@ -243,7 +350,7 @@
 
 		/**
 		 * 代替CodeMirror的局部变量
-		 * @type {CodeMirror}
+		 * @type {typeof CodeMirror}
 		 */
 		const CM = loaded
 			? window.CodeMirror
@@ -259,7 +366,7 @@
 			mw.loader.load(`${CDN}/${MW_CDN}/mediawiki.min.css`, 'text/css');
 			(USING_LOCAL ? externalScript : scripts).push(`${MW_CDN}/mediawiki.min.js`);
 		}
-		if (type === 'mediawiki' && typeof SITE_SETTINGS.config === 'object' && SITE_SETTINGS.config.tags.html) {
+		if (type === 'mediawiki' && SITE_SETTINGS.config && SITE_SETTINGS.config.tags.html) {
 			// NamespaceHTML扩展自由度过高，所以这里一律当作允许<html>标签
 			type = 'html'; // eslint-disable-line no-param-reassign
 		}
@@ -275,24 +382,7 @@
 		if (!CM.commands.findForward && addons.includes('search')) {
 			addonScript.push(ADDON_LIST.search);
 		}
-		if (!CM.optionHandlers.styleActiveLine && addons.includes('activeLine')) {
-			addonScript.push(ADDON_LIST.activeLine);
-		}
-		if (!CM.optionHandlers.styleSelectedText && addons.includes('search')) {
-			addonScript.push(ADDON_LIST.markSelection);
-		}
-		if (!CM.optionHandlers.showTrailingSpace && addons.includes('trailingspace')) {
-			addonScript.push(ADDON_LIST.trailingspace);
-		}
-		if (!CM.optionHandlers.matchBrackets && addons.includes('matchBrackets')) {
-			addonScript.push(ADDON_LIST.matchBrackets);
-		}
-		if (!CM.optionHandlers.matchTags && ['matchTags', 'fold'].some(addon => addons.includes(addon))) {
-			addonScript.push(ADDON_LIST.matchTags);
-		}
-		if (!CM.optionHandlers.fold && addons.includes('fold')) {
-			addonScript.push(ADDON_LIST.fold);
-		}
+		addonScript.push(...getAddonScript(CM));
 		if (['widget', 'html'].includes(type)) {
 			['css', 'javascript', 'mediawiki', 'htmlmixed', 'xml'].forEach(lang => {
 				if (!CM.modes[lang]) {
@@ -351,32 +441,35 @@
 			await initModePromise;
 		}
 
-		let /** @type {mwConfig} */ config = mw.config.get('extCodeMirrorConfig');
+		let config = mw.config.get('extCodeMirrorConfig');
 		if (!config && !EXPIRED && isLatest) {
 			({config} = SITE_SETTINGS);
+			if (config.tags.ref) { // fix a bug in InPageEdit-v2
+				config.tagModes.ref = 'text/mediawiki';
+			}
 			mw.config.set('extCodeMirrorConfig', config);
 		}
 		if (config && config.redirect && config.img) { // 情形1：config已更新，可能来自localStorage
 			return config;
-		} else if (config) { // FIXME: 暂不需要redirect和img相关设置
+		} else if (config) { /** @todo 暂不需要redirect和img相关设置 */
 			return config;
 		}
 
 		/**
-		 * @typedef {object} siteInfoQuery
+		 * @typedef {object} ApiSiteInfoQuery
 		 * @property {{name: string, aliases: string[], 'case-sensitive': boolean}[]} magicwords
 		 * @property {string[]} extensiontags
 		 * @property {string[]} functionhooks
 		 * @property {string[]} variables
 		 */
 
-		/**
+		/*
 		 * 以下情形均需要发送API请求
 		 * 情形2：localStorage未过期但不包含新设置
 		 * 情形3：新加载的 ext.CodeMirror.data
 		 * 情形4：config === null
 		 */
-		const /** @type {{query: siteInfoQuery}} */ {
+		const /** @type {{query: ApiSiteInfoQuery}} */ {
 			query: {magicwords, extensiontags, functionhooks, variables},
 		} = await new mw.Api().get({
 			meta: 'siteinfo',
@@ -389,13 +482,12 @@
 		 * @param {{aliases: string[], name: string}[]} words
 		 * @returns {{alias: string, name: string}[]}
 		 */
-		const getAliases = words => words.flatMap(
-			/** @param {{aliases: string[], name: string}} */
-			({aliases, name}) => aliases.map(alias => ({alias, name})),
+		const getAliases = words => flat.call(
+			words.map(({aliases, name}) => aliases.map(alias => ({alias, name}))),
 		);
 		/**
 		 * @param {{alias: string, name: string}[]} aliases
-		 * @returns {Object<string, string>}
+		 * @returns {Record<string, string>}
 		 */
 		const getConfig = aliases => fromEntries(
 			aliases.map(({alias, name}) => [alias.replace(/:$/, ''), name]),
@@ -413,10 +505,8 @@
 				),
 				urlProtocols: mw.config.get('wgUrlProtocols'),
 			};
-			/** @type {Set<string>} */
 			const realMagicwords = new Set([...functionhooks, ...variables, ...otherMagicwords]),
 				allMagicwords = magicwords.filter(
-					/** @returns {boolean} */
 					({name, aliases}) => aliases.some(alias => /^__.+__$/.test(alias)) || realMagicwords.has(name),
 				),
 				sensitive = getAliases(
@@ -437,15 +527,15 @@
 			const {functionSynonyms: [insensitive]} = config;
 			if (!insensitive.subst) {
 				getAliases(
-					magicwords.filter(/** @return {boolean} */ ({name}) => otherMagicwords.includes(name)),
+					magicwords.filter(({name}) => otherMagicwords.includes(name)),
 				).forEach(({alias, name}) => {
 					insensitive[alias.replace(/:$/, '')] = name;
 				});
 			}
 		}
-		config.redirect = magicwords.find(/** @param {{name: string}} */ ({name}) => name === 'redirect').aliases;
+		config.redirect = magicwords.find(({name}) => name === 'redirect').aliases;
 		config.img = getConfig(
-			getAliases(magicwords.filter(/** @returns {boolean} */ ({name}) => name.startsWith('img_'))),
+			getAliases(magicwords.filter(({name}) => name.startsWith('img_'))),
 		);
 		mw.config.set('extCodeMirrorConfig', config);
 		updateCachedConfig(config);
@@ -457,7 +547,7 @@
 		if ([274, 828].includes(ns) && !page.endsWith('/doc')) {
 			const pageMode = ns === 274 ? 'Widget' : 'Lua';
 			await mw.loader.using(['oojs-ui-windows', 'oojs-ui.styles.icons-content']);
-			const /** @type {boolean} */ bool = await OO.ui.confirm(msg('contentmodel'), {
+			const bool = await OO.ui.confirm(msg('contentmodel'), {
 				actions: [
 					{label: pageMode},
 					{label: 'Wikitext', action: 'accept'},
@@ -478,7 +568,7 @@
 	const renderEditor = async ($target, setting) => {
 		const mode = setting ? 'javascript' : await getPageMode();
 		const initModePromise = initMode(mode);
-		const /** @type {[mwConfig]} */ [mwConfig] = await Promise.all([
+		const [mwConfig] = await Promise.all([
 			getMwConfig(mode, initModePromise),
 			initModePromise,
 		]);
@@ -503,7 +593,7 @@
 		}
 
 		const json = setting || contentmodel === 'json',
-			/** @type {{name: string}} */ {name} = $.client.profile();
+			{name} = $.client.profile();
 		cm = CodeMirror.fromTextArea($target[0], $.extend({
 			inputStyle: name === 'safari' ? 'textarea' : 'contenteditable',
 			lineNumbers: true,
@@ -511,17 +601,15 @@
 			mode,
 			mwConfig,
 			json,
-			styleActiveLine: addons.includes('activeLine'),
-			styleSelectedText: addons.includes('search'),
-			showTrailingSpace: addons.includes('trailingspace'),
-			matchBrackets: addons.includes('matchBrackets') && (mode === 'mediawiki' || json
-				? {bracketRegex: /[{}[\]]/}
-				: true
-			),
-			matchTags: addons.includes('matchTags') && ['mediawiki', 'widget'].includes(mode),
-			fold: addons.includes('fold') && ['mediawiki', 'widget'].includes(mode),
-		}, mode === 'mediawiki'
-			? {}
+		}, fromEntries(
+			options.map(({option, addon = option, modes, complex = mod => !modes || modes.includes(mod)}) => {
+				const mainAddon = Array.isArray(addon) ? addon[0] : addon;
+				return [option, addons.includes(mainAddon) && complex(mode, json)];
+			}),
+		), mode === 'mediawiki'
+			? {
+				extraKeys: addons.includes('escape') && (isPc(CodeMirror) ? extraKeysPc : extraKeysMac),
+			}
 			: {
 				indentUnit: addons.includes('indentWithSpace') ? indent : defaultIndent,
 				indentWithTabs: !addons.includes('indentWithSpace'),
@@ -530,44 +618,7 @@
 		cm.setSize(null, height);
 		cm.refresh();
 
-		const wrapper = cm.getWrapperElement();
-		wrapper.id = 'Wikiplus-CodeMirror';
-		if (['mediawiki', 'widget'].includes(mode) && addons.includes('contextmenu')) {
-			contextmenuStyle.disabled = false;
-			const /** @type {mwConfig} */ {functionSynonyms: [synonyms]} = mw.config.get('extCodeMirrorConfig');
-			/** @param {string} str */
-			const getSysnonyms = str => Object.keys(synonyms).filter(key => synonyms[key] === str)
-				.map(key => key.startsWith('#') ? key : `#${key}`);
-			const invoke = getSysnonyms('invoke'),
-				widget = getSysnonyms('widget');
-
-			await mw.loader.using('mediawiki.Title');
-			$(wrapper).on('contextmenu', '.cm-mw-template-name', function() {
-				const /** @type {string} */ text = this.textContent.replace(/\u200e/g, '').trim(),
-					/** @type {{namespace: number, getUrl: () => string}} */ title = new mw.Title(text);
-				if (title.namespace !== 0 || text.startsWith(':')) {
-					open(title.getUrl(), '_blank');
-				} else {
-					open(mw.util.getUrl(`Template:${text}`), '_blank');
-				}
-				return false;
-			}).on(
-				'contextmenu',
-				'.cm-mw-parserfunction-name + .cm-mw-parserfunction-delimiter + .cm-mw-parserfunction',
-				function() {
-					/** @type {string} */
-					const parserFunction = this.previousSibling.previousSibling.textContent.trim().toLowerCase();
-					if (invoke.includes(parserFunction)) {
-						open(mw.util.getUrl(`Module:${this.textContent}`), '_blank');
-					} else if (widget.includes(parserFunction)) {
-						open(mw.util.getUrl(`Widget:${this.textContent}`, {action: 'edit'}), '_blank');
-					}
-					return false;
-				},
-			);
-		} else {
-			contextmenuStyle.disabled = true;
-		}
+		handleContextMenu(cm, mode);
 
 		$('#Wikiplus-Quickedit-Jump').children('a').attr('href', '#Wikiplus-CodeMirror');
 
@@ -579,18 +630,17 @@
 					$('#Wikiplus-Quickedit-MinorEdit').click();
 					$('#Wikiplus-Quickedit-Submit').triggerHandler('click');
 				};
-			cm.addKeyMap($.extend({
-				'Ctrl-S': submit,
-				'Cmd-S': submit,
-				'Shift-Ctrl-S': submitMinor,
-				'Shift-Cmd-S': submitMinor,
-			}, Wikiplus.getSetting('esc_to_exit_quickedit')
-				? {
-					Esc() {
-						$('#Wikiplus-Quickedit-Back').triggerHandler('click');
-					},
-				}
-				: {},
+			cm.addKeyMap($.extend(
+				isPc(CodeMirror)
+					? {'Ctrl-S': submit, 'Shift-Ctrl-S': submitMinor}
+					: {'Cmd-S': submit, 'Shift-Cmd-S': submitMinor},
+				Wikiplus.getSetting('esc_to_exit_quickedit')
+					? {
+						Esc() {
+							$('#Wikiplus-Quickedit-Back').triggerHandler('click');
+						},
+					}
+					: {},
 			));
 		}
 
@@ -599,12 +649,8 @@
 
 	// 监视 Wikiplus 编辑框
 	const observer = new MutationObserver(records => {
-		const $editArea = $(records.flatMap(
-			/**
-			 * @param {{addedNodes: NodeList}}
-			 * @returns {Node[]}
-			 */
-			({addedNodes}) => [...addedNodes],
+		const $editArea = $(flat.call(
+			records.map(({addedNodes}) => [...addedNodes]),
 		)).find('#Wikiplus-Quickedit, #Wikiplus-Setting-Input');
 		if ($editArea.length === 0) {
 			return;
@@ -614,7 +660,7 @@
 	observer.observe(document.body, {childList: true});
 
 	// 添加样式
-	const /** @type {HTMLStyleElement} */ wphlStyle = document.getElementById('wphl-style') || mw.loader.addStyleTag(
+	const wphlStyle = document.getElementById('wphl-style') || mw.loader.addStyleTag(
 		'#Wikiplus-Quickedit+.CodeMirror,#Wikiplus-Setting-Input+.CodeMirror'
 		+ '{border:1px solid #c8ccd1;line-height:1.3;clear:both}'
 		+ 'div.Wikiplus-InterBox{font-size:14px;z-index:100}'
@@ -623,7 +669,8 @@
 		+ 'div.CodeMirror span.CodeMirror-matchingbracket{box-shadow:0 0 0 2px #9aef98}'
 		+ 'div.CodeMirror span.CodeMirror-nonmatchingbracket{box-shadow:0 0 0 2px #eace64}'
 		+ '#Wikiplus-highlight-dialog .oo-ui-messageDialog-title{margin-bottom:0.28571429em}'
-		+ '#Wikiplus-highlight-dialog .oo-ui-flaggedElement-notice{font-weight:normal;margin:0}',
+		+ '#Wikiplus-highlight-dialog .oo-ui-flaggedElement-notice{font-weight:normal;margin:0}'
+		+ '.CodeMirror-contextmenu .cm-mw-template-name{cursor:pointer}',
 	);
 	wphlStyle.id = 'wphl-style';
 
@@ -639,10 +686,7 @@
 			elem.value = value;
 		},
 	} = $.valHooks.textarea || {};
-	/**
-	 * @param {HTMLTextAreaElement} elem
-	 * @returns {boolean}
-	 */
+	/** @param {HTMLTextAreaElement} elem */
 	const isWikiplus = elem => ['Wikiplus-Quickedit', 'Wikiplus-Setting-Input'].includes(elem.id);
 	$.valHooks.textarea = {
 		get(elem) {
@@ -659,21 +703,12 @@
 
 	await i18nPromise; // 以下内容依赖I18N
 
-	/**
-	 * @typedef {object} OOUI.widget
-	 * @property {(data: any) => {closing: Promise<{action: string}>}} open
-	 * @property {() => string|string[]} getValue
-	 * @property {JQuery<HTMLDivElement>} $element
-	 * @property {(show: boolean) => OOUI.widget} toggle
-	 * @property {(windows: OOUI.widget[]) => void} addWindows
-	 */
-
 	// 设置对话框
-	let /** @type {OOUI.widget} */ dialog,
-		/** @type {OOUI.widget} */ widget,
-		/** @type {OOUI.widget} */ indentWidget,
-		/** @type {OOUI.widget} */ field,
-		/** @type {OOUI.widget} */ indentField;
+	let /** @type {OOUI.MessageDialog} */ dialog,
+		/** @type {OOUI.CheckboxMultiselectInputWidget} */ widget,
+		/** @type {OOUI.NumberInputWidget} */ indentWidget,
+		/** @type {OOUI.FieldLayout} */ field,
+		/** @type {OOUI.FieldLayout} */ indentField;
 	const toggleIndent = (value = addons) => {
 		indentField.toggle(value.includes('indentWithSpace'));
 	};
@@ -681,7 +716,7 @@
 		minerva: 'page-actions-overflow',
 		citizen: 'p-actions',
 	};
-	const /** @type {JQuery<HTMLLIElement} */ $portlet = $(mw.util.addPortletLink(
+	const $portlet = $(mw.util.addPortletLink(
 		portletContainer[skin] || 'p-cactions', '#', msg('portlet'), 'wphl-settings',
 	)).click(async e => {
 		e.preventDefault();
@@ -689,19 +724,17 @@
 			await mw.loader.using(['oojs-ui-windows', 'oojs-ui.styles.icons-content']);
 			// eslint-disable-next-line require-atomic-updates
 			dialog = new OO.ui.MessageDialog({id: 'Wikiplus-highlight-dialog'});
-			const /** @type {OOUI.widget} */ windowManager = new OO.ui.WindowManager();
+			const windowManager = new OO.ui.WindowManager();
 			windowManager.$element.appendTo(document.body);
 			windowManager.addWindows([dialog]);
 			widget = new OO.ui.CheckboxMultiselectInputWidget({
 				options: [
-					{data: 'search', label: msg('addon-search')},
-					{data: 'activeLine', label: msg('addon-active-line')},
-					{data: 'trailingspace', label: msg('addon-trailingspace')},
-					{data: 'matchBrackets', label: msg('addon-matchbrackets')},
-					{data: 'matchTags', label: msg('addon-matchtags')},
-					{data: 'fold', label: msg('addon-fold')},
-					{data: 'contextmenu', label: msg('addon-contextmenu')},
-					{data: 'indentWithSpace', label: msg('addon-indentwithspace')},
+					...options.map(({option, addon = option}) => {
+						const mainAddon = Array.isArray(addon) ? addon[0] : addon;
+						return {data: mainAddon, label: msg(`addon-${mainAddon.toLowerCase()}`)};
+					}),
+					...['escape', 'contextmenu', 'indentWithSpace', 'otherEditors']
+						.map(addon => ({data: addon, label: msg(`addon-${addon.toLowerCase()}`)})),
 				],
 				value: addons,
 			}).on('change', toggleIndent);
@@ -714,6 +747,9 @@
 			indentField = new OO.ui.FieldLayout(indentWidget, {label: msg('addon-indent')});
 			toggleIndent();
 		}
+		const wikiplusLoaded = typeof window.Wikiplus === 'object';
+		widget.$element.find('.oo-ui-checkboxInputWidget').first().toggleClass('oo-ui-widget-enabled', wikiplusLoaded)
+			.children('input').prop('disabled', !wikiplusLoaded);
 		dialog.open({
 			title: msg('addon-title'),
 			message: field.$element.add(indentField.$element).add(
@@ -746,4 +782,36 @@
 			$('#wphl-settings').triggerHandler('click');
 		});
 	}
+
+	/** @param {CodeMirror.Editor} doc */
+	const handleOtherEditors = async doc => {
+		if (!addons.includes('otherEditors')) {
+			return;
+		}
+		let mode = doc.getOption('mode');
+		mode = mode === 'text/mediawiki' ? 'mediawiki' : mode;
+		const addonScript = getAddonScript(CodeMirror, true),
+			json = doc.getOption('json');
+		await getScript(addonScript);
+		for (const {
+			option, addon = option, modes, complex = (/** @type {string} */ mod) => !modes || modes.includes(mod),
+		} of options.filter(({only}) => !only)) {
+			const mainAddon = Array.isArray(addon) ? addon[0] : addon;
+			if (doc.getOption(option) === undefined && addons.includes(mainAddon)) {
+				doc.setOption(option, complex(mode, json));
+			}
+		}
+		if (mode !== 'mediawiki' && addons.includes('indentWithSpace')) {
+			doc.setOption('indentUnit', indent);
+			doc.setOption('indentWithTabs', false);
+		} else if (mode === 'mediawiki' && addons.includes('escape')) {
+			doc.addKeyMap(isPc(CodeMirror) ? extraKeysPc : extraKeysMac, true);
+		}
+		handleContextMenu(doc, mode);
+	};
+
+	mw.hook('InPageEdit.quickEdit.codemirror').add(
+		/** @param {{cm: CodeMirror.Editor}} */ ({cm: doc}) => handleOtherEditors(doc),
+	);
+	mw.hook('inspector').add(/** @param {CodeMirror.Editor} doc */ doc => handleOtherEditors(doc));
 })();