feat(extensions/codejar): line numbers

bhsd-harry · Jul 15, 2024 · ca877a9 · ca877a9
1 parent 1b828ee
commit ca877a9
Show file tree

Hide file tree

Showing 15 changed files with 68 additions and 21 deletions.
diff --git a/.eslintrc.browser.json b/.eslintrc.browser.json
@@ -21,15 +21,18 @@
 	},
 	"overrides": [
 		{
-			"files": "extensions/dist/gh-page.js",
-			"parserOptions": {
-				"sourceType": "module"
+			"files": [
+				"extensions/dist/gh-page.js",
+				"extensions/dist/codejar.js"
+			],
+			"rules": {
+				"es-x/no-dynamic-import": 0
 			}
 		},
 		{
-			"files": "extensions/dist/codejar.js",
-			"rules": {
-				"es-x/no-dynamic-import": 0
+			"files": "extensions/dist/gh-page.js",
+			"parserOptions": {
+				"sourceType": "module"
 			}
 		}
 	],

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -187,7 +187,10 @@ module.exports = {
 			},
 		},
 		{
-			files: 'extensions/codejar.ts',
+			files: [
+				'extensions/gh-page.ts',
+				'extensions/codejar.ts',
+			],
 			parserOptions: {
 				project: './extensions/tsconfig.codejar.json',
 			},

diff --git a/extensions/base.ts b/extensions/base.ts
@@ -177,11 +177,13 @@ const splitNewLine = (html: HTMLElement): HTMLElement[] => {
  * @param html 待添加行号的多行文本
  */
 const size = (html: HTMLElement): void => {
-	const gutter = html.parentNode!.querySelector<HTMLElement>('.wikiparser-line-numbers');
+	const container = html.parentElement!,
+		gutter = container.querySelector<HTMLElement>('.wikiparser-line-numbers');
 	if (!gutter) {
 		intersectionObserver.unobserve(html);
 		return;
 	}
+	html.style.marginLeft = '';
 	const start = Number(html.dataset['start'] || 1),
 		lines = splitNewLine(html),
 		width = `${String(lines.length + start - 1).length + 1.5}ch`;
@@ -205,7 +207,12 @@ const size = (html: HTMLElement): void => {
 		lastTop = top;
 	}
 	if (line) {
-		line.style.height = `${html.getBoundingClientRect().bottom - lastTop!}px`;
+		line.style.height = `${
+			(html.offsetHeight > container.offsetHeight
+				? html.getBoundingClientRect().bottom
+				: container.getBoundingClientRect().top + container.scrollHeight)
+				- lastTop!
+		}px`;
 	}
 	sizer.remove();
 	intersectionObserver.unobserve(html);

diff --git a/extensions/codejar.ts b/extensions/codejar.ts
@@ -6,7 +6,11 @@ const codejar = (async (): Promise<f> => {
 		? window
 		: await import('https://testingcf.jsdelivr.net/npm/codejar-async');
 
-	return (textbox: HTMLTextAreaElement, include?: boolean): CodeJarAsync & {include: boolean} => {
+	return (
+		textbox: HTMLTextAreaElement,
+		include?: boolean,
+		linenums?: boolean,
+	): CodeJarAsync & {include: boolean} => {
 		if (!(textbox instanceof HTMLTextAreaElement)) {
 			throw new TypeError('wikiparse.codejar方法仅可用于textarea元素！');
 		}
@@ -28,6 +32,12 @@ const codejar = (async (): Promise<f> => {
 			...CodeJar(root, highlight, {spellcheck: true}), // eslint-disable-line new-cap
 			include: Boolean(include),
 		};
+		if (linenums) {
+			jar.onHighlight(e => {
+				e.parentNode!.querySelector('.wikiparser-line-numbers')?.remove();
+				wikiparse.lineNumbers(e);
+			});
+		}
 		jar.restore({start: 0, end: 0});
 		jar.updateCode(textbox.value);
 		jar.restore({start, end});

diff --git a/extensions/dist/base.js b/extensions/dist/base.js
@@ -84,11 +84,12 @@ const splitNewLine = (html) => {
     return result;
 };
 const size = (html) => {
-    const gutter = html.parentNode.querySelector('.wikiparser-line-numbers');
+    const container = html.parentElement, gutter = container.querySelector('.wikiparser-line-numbers');
     if (!gutter) {
         intersectionObserver.unobserve(html);
         return;
     }
+    html.style.marginLeft = '';
     const start = Number(html.dataset['start'] || 1), lines = splitNewLine(html), width = `${String(lines.length + start - 1).length + 1.5}ch`;
     html.style.marginLeft = width;
     gutter.style.width = width;
@@ -109,7 +110,10 @@ const size = (html) => {
         lastTop = top;
     }
     if (line) {
-        line.style.height = `${html.getBoundingClientRect().bottom - lastTop}px`;
+        line.style.height = `${(html.offsetHeight > container.offsetHeight
+            ? html.getBoundingClientRect().bottom
+            : container.getBoundingClientRect().top + container.scrollHeight)
+            - lastTop}px`;
     }
     sizer.remove();
     intersectionObserver.unobserve(html);

diff --git a/extensions/dist/codejar.js b/extensions/dist/codejar.js
@@ -3,7 +3,7 @@ const codejar = (async () => {
     const { CodeJar } = 'CodeJar' in window
         ? window
         : await import('https://testingcf.jsdelivr.net/npm/codejar-async');
-    return (textbox, include) => {
+    return (textbox, include, linenums) => {
         var _a;
         if (!(textbox instanceof HTMLTextAreaElement)) {
             throw new TypeError('wikiparse.codejar方法仅可用于textarea元素！');
@@ -21,6 +21,13 @@ const codejar = (async () => {
             ...CodeJar(root, highlight, { spellcheck: true }),
             include: Boolean(include),
         };
+        if (linenums) {
+            jar.onHighlight(e => {
+                var _a;
+                (_a = e.parentNode.querySelector('.wikiparser-line-numbers')) === null || _a === void 0 ? void 0 : _a.remove();
+                wikiparse.lineNumbers(e);
+            });
+        }
         jar.restore({ start: 0, end: 0 });
         jar.updateCode(textbox.value);
         jar.restore({ start, end });

diff --git a/extensions/dist/gh-page.js b/extensions/dist/gh-page.js
@@ -1,14 +1,17 @@
 import { CodeMirror6 } from '/codemirror-mediawiki/dist/main.min.js';
+import { CodeJar } from '/codejar/dist/codejar.js';
 const transform = (type) => type && type.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('');
 const keys = new Set(['type', 'childNodes', 'range']);
 (async () => {
+    Object.assign(window, { CodeJar });
+    await import('/wikiparser-node/extensions/dist/codejar.js');
     const textbox = document.querySelector('#wpTextbox1'), textbox2 = document.querySelector('#wpTextbox2'), monacoContainer = document.getElementById('monaco-container'), input = document.querySelector('#wpInclude'), input2 = document.querySelector('#wpHighlight'), h2 = document.querySelector('h2'), buttons = [...document.querySelectorAll('.tab > button')], tabcontents = document.querySelectorAll('.tabcontent'), astContainer = document.getElementById('ast'), highlighters = document.getElementById('highlighter').children, pres = [...document.getElementsByClassName('highlight')];
     const config = await (await fetch('./config/default.json')).json();
     Parser.config = config;
     wikiparse.setConfig(config);
     const immediatePrint = (wikitext, include, stage) => Promise.resolve(Parser.parse(wikitext, include, stage).childNodes
         .map(child => [stage !== null && stage !== void 0 ? stage : Infinity, String(child), child.print()]));
-    const jar = (await wikiparse.codejar)(textbox, input.checked), Linter = new wikiparse.Linter(input.checked), { print } = wikiparse, qid = wikiparse.id++;
+    const jar = (await wikiparse.codejar)(textbox, input.checked, true), Linter = new wikiparse.Linter(input.checked), { print } = wikiparse, qid = wikiparse.id++;
     highlighters[1 - Number(input.checked)].style.display = 'none';
     const cm = new CodeMirror6(textbox2), mwConfig = CodeMirror6.getMwConfig(config);
     const model = (await monaco).editor.createModel(textbox2.value, 'wikitext');
@@ -98,7 +101,7 @@ const keys = new Set(['type', 'childNodes', 'range']);
         if (start === end) {
             return undefined;
         }
-        let cur = document.getElementById('wikiPretty').firstChild;
+        let cur = document.querySelector('#editor > .wikiparser').firstChild;
         while (cur) {
             const { length } = cur.textContent;
             if (start >= length) {

diff --git a/extensions/dist/highlight.js b/extensions/dist/highlight.js
@@ -1,6 +1,6 @@
 (() => {
 "use strict";
-const highlight = async (ele, include, linenums = false, start) => {
+const highlight = async (ele, include, linenums, start) => {
     if (ele.classList.contains('wikiparser')) {
         return;
     }

diff --git a/extensions/gh-page.ts b/extensions/gh-page.ts
@@ -1,4 +1,5 @@
 import {CodeMirror6} from '/codemirror-mediawiki/dist/main.min.js';
+import {CodeJar} from '/codejar/dist/codejar.js';
 import type {Config, AST} from './typings';
 
 declare global {
@@ -15,6 +16,9 @@ const transform = (type?: string): string | undefined =>
 const keys = new Set(['type', 'childNodes', 'range']);
 
 (async () => {
+	Object.assign(window, {CodeJar});
+	await import('/wikiparser-node/extensions/dist/codejar.js');
+
 	// DOM元素
 	const textbox = document.querySelector<HTMLTextAreaElement>('#wpTextbox1')!,
 		textbox2 = document.querySelector<HTMLTextAreaElement>('#wpTextbox2')!,
@@ -44,7 +48,7 @@ const keys = new Set(['type', 'childNodes', 'range']);
 			Parser.parse(wikitext, include, stage).childNodes
 				.map(child => [stage ?? Infinity, String(child), child.print()]),
 		);
-	const jar = (await wikiparse.codejar!)(textbox, input.checked),
+	const jar = (await wikiparse.codejar!)(textbox, input.checked, true),
 		Linter = new wikiparse.Linter!(input.checked),
 		{print} = wikiparse,
 		qid = wikiparse.id++;
@@ -175,7 +179,7 @@ const keys = new Set(['type', 'childNodes', 'range']);
 		if (start === end) {
 			return undefined;
 		}
-		let cur = document.getElementById('wikiPretty')!.firstChild;
+		let cur = document.querySelector('#editor > .wikiparser')!.firstChild;
 		while (cur) {
 			const {length} = cur.textContent!;
 			if (start >= length) {

diff --git a/extensions/highlight.ts b/extensions/highlight.ts
@@ -5,7 +5,7 @@
  * @param linenums 是否添加行号
  * @param start 起始行号
  */
-const highlight = async (ele: HTMLElement, include?: boolean, linenums = false, start?: number): Promise<void> => {
+const highlight = async (ele: HTMLElement, include?: boolean, linenums?: boolean, start?: number): Promise<void> => {
 	if (ele.classList.contains('wikiparser')) {
 		return;
 	}

diff --git a/extensions/tsconfig.codejar.json b/extensions/tsconfig.codejar.json
@@ -1,6 +1,7 @@
 {
 	"extends": "./tsconfig",
 	"include": [
+		"gh-page.ts",
 		"codejar.ts"
 	],
 	"exclude": []

diff --git a/extensions/tsconfig.json b/extensions/tsconfig.json
@@ -4,6 +4,7 @@
 		"*.ts"
 	],
 	"exclude": [
+		"gh-page.ts",
 		"codejar.ts"
 	],
 	"compilerOptions": {

diff --git a/extensions/typings.d.ts b/extensions/typings.d.ts
@@ -24,6 +24,9 @@ declare global {
 	module '/*' {
 		/** @see https://www.npmjs.com/package/@bhsd/codemirror-mediawiki */
 		export {CodeMirror6};
+		/** @see https://www.npmjs.com/package/codejar-async */
+		const CodeJar: (...args: unknown[]) => CodeJarAsync;
+		export {CodeJar};
 	}
 
 	module 'https://*';
@@ -34,7 +37,8 @@ declare global {
 	type MonacoEditor = typeof editor;
 }
 
-export type codejar = (textbox: HTMLTextAreaElement, include?: boolean) => CodeJarAsync & {include: boolean};
+export type codejar = (textbox: HTMLTextAreaElement, include?: boolean, linenums?: boolean) =>
+	CodeJarAsync & {include: boolean};
 
 /* eslint-disable @typescript-eslint/method-signature-style */
 export interface wikiparse {

diff --git a/extensions/ui.css b/extensions/ui.css
@@ -19,6 +19,7 @@
 	padding: 0 6px;
 	display: block;
 	position: relative;
+	overflow-y: hidden !important;
 }
 
 .wikiparser-line-numbers {

diff --git a/index.html b/index.html
@@ -8,7 +8,6 @@
 		<link rel="stylesheet" href="extensions/ui.css">
 		<link rel="stylesheet" href="/codemirror-mediawiki/mediawiki.css">
 		<script src="extensions/dist/base.js"></script>
-		<script src="extensions/dist/codejar.js"></script>
 		<script src="extensions/dist/lint.js"></script>
 		<script src="extensions/dist/highlight.js"></script>
 		<script src="bundle/bundle.min.js"></script>