wikiparser-node 0.10.0 → 0.11.0-b

package/extensions/editor.js

@@ -0,0 +1,183 @@
+'use strict';
+
+(() => {
+	const /** @type {{wikiparse: import('../typings/extension')}} */ {wikiparse} = window,
+		{MAX_STAGE, print} = wikiparse;
+
+	/** 用于打印AST */
+	class Printer {
+		/**
+		 * @param {HTMLDivElement} preview 置于下层的代码高亮
+		 * @param {HTMLTextAreaElement} textbox 置于上层的文本框
+		 * @param {boolean} include 是否嵌入
+		 */
+		constructor(preview, textbox, include) {
+			this.id = wikiparse.id++;
+			this.preview = preview;
+			this.textbox = textbox;
+			this.include = Boolean(include);
+			/** @type {[number, string, string][]} */ this.root = [];
+			/** @type {Promise<void>} */ this.running = undefined;
+			this.viewportChanged = false;
+			/** @type {[number, string]} */ this.ticks = [0, undefined];
+		}
+
+		/** 倒计时 */
+		tick() {
+			setTimeout(() => {
+				const {ticks} = this;
+				if (ticks[0] > 0) {
+					ticks[0] -= 500;
+					this[ticks[0] <= 0 ? ticks[1] : 'tick']();
+				}
+			}, 500);
+		}
+
+		/**
+		 * 用于debounce
+		 * @param {number} delay 延迟
+		 * @param {string} method 方法
+		 */
+		queue(delay, method) {
+			const {ticks} = this,
+				[state] = ticks;
+			if (state <= 0 || method === 'coarsePrint' || ticks[1] !== 'coarsePrint') {
+				ticks[0] = delay;
+				ticks[1] = method;
+				if (state <= 0) {
+					this.tick();
+				}
+			}
+		}
+
+		/** 渲染 */
+		paint() {
+			this.preview.innerHTML = `<span class="wpb-root">${
+				this.root.map(([,, printed]) => printed).join('')
+			}</span> `;
+			this.preview.scrollTop = this.textbox.scrollTop;
+			this.preview.classList.remove('active');
+			this.textbox.style.color = 'transparent';
+		}
+
+		/** 初步解析 */
+		async coarsePrint() {
+			if (this.running) {
+				return undefined;
+			}
+			const {include, textbox: {value}} = this,
+				parsed = await print(value, include, 2, this.id);
+			if (this.include !== include || this.textbox.value !== value) {
+				this.running = undefined;
+				this.running = this.coarsePrint();
+				return this.running;
+			}
+			this.root = parsed;
+			this.paint();
+			this.running = undefined;
+			this.running = this.finePrint();
+			return this.running;
+		}
+
+		/** 根据可见范围精细解析 */
+		async finePrint() {
+			if (this.running) {
+				this.viewportChanged = true;
+				return undefined;
+			}
+			this.viewportChanged = false;
+			const {
+				root,
+				preview: {scrollHeight, offsetHeight: parentHeight, scrollTop, children: [rootNode]},
+				include,
+				textbox: {value},
+			} = this;
+			let text = value,
+				start = 0,
+				{length: end} = root;
+			if (scrollHeight > parentHeight) {
+				const /** @type {HTMLElement[]} */ childNodes = [...rootNode.childNodes],
+					headings = childNodes.filter(({className}) => className === 'wpb-heading'),
+					{length} = headings;
+				if (length > 0) {
+					let i = headings.findIndex(({offsetTop, offsetHeight}) => offsetTop + offsetHeight > scrollTop);
+					i = i === -1 ? length : i;
+					let j = headings.slice(i).findIndex(({offsetTop}) => offsetTop >= scrollTop + parentHeight);
+					j = j === -1 ? length : i + j;
+					start = i ? childNodes.indexOf(headings[i - 1]) : 0;
+					while (i <= j && root[start][0] === MAX_STAGE) {
+						start = childNodes.indexOf(headings[i++]);
+					}
+					end = j === length ? end : childNodes.indexOf(headings[j]);
+					while (i <= j && root[end - 1][0] === MAX_STAGE) {
+						end = childNodes.indexOf(headings[--j]);
+					}
+					text = root.slice(start, end).map(([, str]) => str).join('');
+				}
+			}
+			if (start === end) {
+				this.running = undefined;
+				return undefined;
+			}
+			const parsed = await print(text, include, MAX_STAGE, this.id);
+			if (this.include === include && this.textbox.value === value) {
+				this.root.splice(start, end - start, ...parsed);
+				this.paint();
+				this.running = undefined;
+				if (this.viewportChanged) {
+					this.running = this.finePrint();
+				}
+			} else {
+				this.running = undefined;
+				this.running = this.coarsePrint();
+			}
+			return this.running;
+		}
+	}
+
+	/**
+	 * 高亮textarea
+	 * @param {HTMLTextAreaElement} textbox textarea元素
+	 * @param {boolean} include 是否嵌入
+	 * @throws `TypeError` 不是textarea
+	 */
+	const edit = (textbox, include) => {
+		if (!(textbox instanceof HTMLTextAreaElement)) {
+			throw new TypeError('wikiparse.edit方法仅可用于textarea元素！');
+		}
+		const preview = document.createElement('div'),
+			container = document.createElement('div'),
+			printer = new Printer(preview, textbox, include);
+		preview.id = 'wikiPretty';
+		preview.classList.add('wikiparser', 'active');
+		container.classList.add('wikiparse-container');
+		textbox.replaceWith(container);
+		textbox.classList.add('wikiparsed');
+		container.append(preview, textbox);
+
+		textbox.addEventListener('input', ({isComposing}) => {
+			if (!isComposing) {
+				printer.queue(2000, 'coarsePrint');
+			}
+			textbox.style.color = '';
+			preview.classList.add('active');
+		});
+		textbox.addEventListener('scroll', () => {
+			if (preview.scrollHeight > preview.offsetHeight && !preview.classList.contains('active')) {
+				preview.scrollTop = textbox.scrollTop;
+				printer.queue(500, 'finePrint');
+			}
+		});
+		textbox.addEventListener('keydown', e => {
+			if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+				e.preventDefault();
+				printer.ticks[0] = 0;
+				printer.running = printer.coarsePrint();
+			}
+		});
+		printer.running = printer.coarsePrint();
+		return printer;
+	};
+
+	Object.assign(wikiparse, {edit, Printer});
+})();

package/extensions/highlight.js

@@ -0,0 +1,40 @@
+'use strict';
+
+(() => {
+	const /** @type {{wikiparse: import('../typings/extension')}} */ {wikiparse} = window;
+
+	/**
+	 * 高亮代码块
+	 * @param {HTMLElement} ele 代码块
+	 * @param {boolean} linenums 是否添加行号
+	 * @param {number} start 起始行号
+	 */
+	const highlight = async (ele, linenums, start = 1) => {
+		if (ele.classList.contains('highlighted')) {
+			return;
+		}
+		const html = (await wikiparse.print(ele.innerText)).map(([,, printed]) => printed).join('');
+		ele.classList.add('highlighted');
+		if (linenums) {
+			// 添加行号。这里不使用<table>排版，而是使用<ol>
+			const lines = html.split('\n').map((line, i) => {
+				const li = document.createElement('li');
+				li.id = `L${i + start}`;
+				li.innerHTML = line;
+				return li;
+			});
+			if (!lines[lines.length - 1].textContent) {
+				lines.pop();
+			}
+			const ol = document.createElement('ol');
+			ol.start = start;
+			ol.style.paddingLeft = `${(lines.length + start - 1).toString().length + 2.5}ch`;
+			ol.append(...lines);
+			ele.replaceChildren(ol);
+		} else {
+			ele.innerHTML = html;
+		}
+	};
+
+	wikiparse.highlight = highlight;
+})();

package/extensions/ui.css

@@ -0,0 +1,119 @@
+.wikiparser {
+	white-space: pre-wrap;
+	overflow-wrap: break-word;
+	font-family: monospace;
+}
+
+.wpb-error {
+	text-decoration: underline wavy #f00 1px;
+}
+.wpb-hidden, .wpb-table-inter, .wpb-table-inter span {
+	color: #f00;
+	font-weight: normal;
+	text-decoration: underline wavy 1px;
+}
+
+.wpb-noinclude, .wpb-include, .wpb-comment {
+	color: #72777d;
+	font-weight: normal;
+}
+.wpb-comment {
+	font-style: italic;
+}
+
+.wpb-ext, .wpb-html {
+	color: #14866d;
+	font-weight: bold;
+}
+.wpb-ext-attrs, .wpb-html-attrs {
+	font-weight: normal;
+}
+.wpb-ext-attr > .wpb-attr-value, .wpb-html-attr > .wpb-attr-value {
+	color: #179b1c;
+}
+.wpb-ext-inner {
+	color: initial;
+	font-weight: normal;
+	background-color: rgba(0, 0, 0, .03);
+}
+
+.wpb-arg {
+	color: #ac6600;
+	font-weight: bold;
+}
+.wpb-arg-default {
+	color: #ad9300;
+	font-weight: normal;
+}
+
+.wpb-template {
+	color: #80c;
+	font-weight: bold;
+	background-color: rgba(119, 0, 170, .03);
+}
+.wpb-magic-word {
+	color: #d33;
+	font-weight: bold;
+	background-color: rgba(170, 17, 17, .03);
+}
+.wpb-invoke-module, .wpb-invoke-function {
+	color: #dd5d33;
+	font-weight: normal;
+}
+.wpb-parameter {
+	color: initial;
+	font-weight: normal;
+}
+.wpb-template > .wpb-parameter > .wpb-parameter-key,
+.wpb-invoke-function ~ .wpb-parameter > .wpb-parameter-key {
+	color: #b0c;
+}
+
+.wpb-heading, .wpb-image-parameter {
+	color: #0076dd;
+}
+.wpb-heading-title {
+	color: initial;
+	font-weight: bold;
+}
+
+.wpb-table, .wpb-tr, .wpb-td {
+	color: #d08;
+	font-weight: bold;
+}
+.wpb-table-attrs {
+	font-weight: normal;
+}
+.wpb-table-attr > .wpb-attr-value {
+	color: #f500d4;
+}
+.wpb-td-inner {
+	color: initial;
+	font-weight: normal;
+}
+
+.wpb-double-underscore, .wpb-hr, .wpb-quote, .wpb-list, .wpb-dd {
+	color: #0076dd;
+	font-weight: bold;
+	background-color: #eee;
+}
+
+.wpb-link, .wpb-category, .wpb-file, .wpb-gallery-image, .wpb-imagemap-image,
+.wpb-ext-link, .wpb-free-ext-link {
+	color: #000aaa;
+	background-color: rgba(34, 17, 153, .03);
+}
+.wpb-link-text, .wpb-image-caption, .wpb-ext-link-text {
+	color: initial;
+}
+
+.wpb-converter {
+	color: #b68;
+	font-weight: bold;
+}
+.wpb-converter-rule {
+	font-weight: normal;
+}
+.wpb-converter-rule-from, .wpb-converter-rule-to, .wpb-converter-noconvert {
+	color: initial;
+}

package/i18n/zh-hans.json

@@ -42,4 +42,4 @@
 	"unnecessary URL encoding in an internal link": "内链中不必要的URL编码",
 	"useless fragment": "多余的fragment",
 	"vertical-alignment": "垂直对齐"
-}
+}

package/i18n/zh-hant.json

@@ -42,4 +42,4 @@
 	"unnecessary URL encoding in an internal link": "內部連結中不必要的URL編碼",
 	"useless fragment": "多餘的fragment",
 	"vertical-alignment": "垂直對齊"
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wikiparser-node",
-	"version": "0.10.0",
+	"version": "0.11.0-b",
 	"description": "A Node.js parser for MediaWiki markup with AST",
 	"keywords": [
 		"mediawiki",
@@ -14,34 +14,39 @@
 	"license": "GPL-3.0",
 	"author": "Bhsd",
 	"files": [
-		"/index.js",
+		"/bundle/bundle.min.js",
+		"/extensions/",
+		"!/extensions/gh-page.*",
+		"!/extensions/.eslintrc.json",
 		"/config/",
-		"/i18n/",
-		"/lib/",
-		"/mixin/",
-		"/parser/",
-		"/src/",
-		"/tool/",
-		"/util/"
+		"/i18n/"
 	],
+	"browser": "/bundle/bundle.min.js",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/bhsd-harry/wikiparser-node.git"
 	},
 	"scripts": {
-		"test": "eslint . && ajv -s config/.schema.json -d 'config/*.json' --strict=true --strict-required=false && node test/test.js",
+		"test": "rm bundle/*.js; webpack && eslint . && ajv -s config/.schema.json -d 'config/*.json' --strict=true --strict-required=false && stylelint extensions/*.css",
 		"real": "node test/real.js",
-		"single": "node --prof test/single.js && node --prof-process isolate-0x*-v8.log > test/processed.txt && rm isolate-0x*-v8.log"
+		"single": "node test/single.js"
 	},
 	"devDependencies": {
 		"@types/node": "^17.0.23",
+		"webpack-cli": "^4.10.0",
+		"webpack": "^5.73.0",
+		"esbuild-loader": "^2.20.0",
 		"eslint": "^8.30.0",
 		"eslint-plugin-n": "^15.6.0",
+		"eslint-plugin-es-x": "^5.4.0",
 		"eslint-plugin-regexp": "^1.11.0",
 		"eslint-plugin-unicorn": "^45.0.2",
 		"eslint-plugin-jsdoc": "^1.0.0",
 		"eslint-plugin-json-es": "^1.5.7",
 		"eslint-plugin-eslint-comments": "^3.2.0",
+		"typescript": "^4.6.3",
+		"@typescript-eslint/eslint-plugin": "^5.47.1",
+		"@typescript-eslint/parser": "^5.47.1",
 		"ajv-cli": "^5.0.0",
 		"request": "^2.88.2"
 	},