feat(index.html): Monaco

extensions/dist/gh-page.js

@@ -1,15 +1,34 @@
 import { CodeMirror6 } from '/codemirror-mediawiki/dist/main.min.js';
+import '/monaco-wiki/all.min.js';
 const transform = (type) => type && type.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('');
 const keys = new Set(['type', 'childNodes', 'range']);
 (async () => {
-    const textbox = document.querySelector('#wpTextbox1'), textbox2 = document.querySelector('#wpTextbox2'), 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 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([[stage !== null && stage !== void 0 ? stage : Infinity, wikitext, Parser.parse(wikitext, include, stage).print()]]);
     const printer = wikiparse.edit(textbox, input.checked), Linter = new wikiparse.Linter(input.checked), { print } = wikiparse, qid = wikiparse.id++;
     highlighters[1 - Number(input.checked)].style.display = 'none';
     const instance = new CodeMirror6(textbox2), mwConfig = CodeMirror6.getMwConfig(config);
+    localStorage.setItem('codemirror-mediawiki-addons', JSON.stringify(['lint']));
+    const model = (await monaco).editor.createModel(textbox2.value, 'wikitext');
+    monaco.editor.create(monacoContainer, {
+        model,
+        automaticLayout: true,
+        theme: 'monokai',
+        readOnly: true,
+        wordWrap: 'on',
+        wordBreak: 'keepAll',
+        glyphMargin: true,
+        fontSize: parseFloat(getComputedStyle(textbox2).fontSize),
+        unicodeHighlight: {
+            ambiguousCharacters: false,
+        },
+    });
+    textbox2.addEventListener('input', () => {
+        model.setValue(textbox2.value);
+    });
     const updateDoc = (str) => {
         if (str) {
             textbox.value = str;
@@ -152,6 +171,7 @@ const keys = new Set(['type', 'childNodes', 'range']);
             case 'linter':
                 if (text1 !== text2) {
                     instance.view.dispatch({ changes: { from: 0, to: text2.length, insert: text1 } });
+                    model.setValue(text1);
                     instance.update();
                 }
                 break;
@@ -176,5 +196,5 @@ const keys = new Set(['type', 'childNodes', 'range']);
     };
     hashchange();
     window.addEventListener('hashchange', hashchange);
-    Object.assign(window, { cm: instance });
+    Object.assign(window, { cm: instance, model });
 })();

extensions/gh-page.css

@@ -200,6 +200,11 @@ dl.hover {
 	background-color: rgba(108, 108, 108, .1);
 }
 
+#monaco-container {
+	height: 450px;
+	margin-top: 1rem;
+}
+
 h3 {
 	margin: .5rem 0;
 	font-size: var(--font-size-h3);

extensions/gh-page.ts

@@ -1,6 +1,11 @@
 import {CodeMirror6} from '/codemirror-mediawiki/dist/main.min.js';
+import '/monaco-wiki/all.min.js';
 import type {Config, AST} from './typings';
 
+declare global {
+	const monaco: {editor: MonacoEditor};
+}
+
 /**
  * Kebab case to Pascal case
  * @param type AST节点类型
@@ -14,6 +19,7 @@ const keys = new Set(['type', 'childNodes', 'range']);
 	// DOM元素
 	const textbox = document.querySelector<HTMLTextAreaElement>('#wpTextbox1')!,
 		textbox2 = document.querySelector<HTMLTextAreaElement>('#wpTextbox2')!,
+		monacoContainer = document.getElementById('monaco-container')!,
 		input = document.querySelector<HTMLInputElement>('#wpInclude')!,
 		input2 = document.querySelector<HTMLInputElement>('#wpHighlight')!,
 		h2 = document.querySelector('h2')!,
@@ -46,6 +52,27 @@ const keys = new Set(['type', 'childNodes', 'range']);
 	const instance = new CodeMirror6(textbox2),
 		mwConfig = CodeMirror6.getMwConfig(config);
 
+	// Monaco初始化
+	localStorage.setItem('codemirror-mediawiki-addons', JSON.stringify(['lint']));
+	// eslint-disable-next-line @typescript-eslint/await-thenable
+	const model = (await monaco).editor.createModel(textbox2.value, 'wikitext');
+	monaco.editor.create(monacoContainer, {
+		model,
+		automaticLayout: true,
+		theme: 'monokai',
+		readOnly: true,
+		wordWrap: 'on',
+		wordBreak: 'keepAll',
+		glyphMargin: true,
+		fontSize: parseFloat(getComputedStyle(textbox2).fontSize),
+		unicodeHighlight: {
+			ambiguousCharacters: false,
+		},
+	});
+	textbox2.addEventListener('input', () => {
+		model.setValue(textbox2.value);
+	});
+
 	/**
 	 * 更新第一个文本框
 	 * @param str 新文本
@@ -218,7 +245,7 @@ const keys = new Set(['type', 'childNodes', 'range']);
 			tabcontent.style.display = tabcontent.id === value ? 'block' : 'none';
 		}
 		const text1 = textbox.value,
-			text2 = instance.view.state.doc.toString();
+			text2 = instance.view!.state.doc.toString();
 		switch (active.value) {
 			case 'linter':
 				// 离开linter时，将linter的文本同步到editor
@@ -235,7 +262,8 @@ const keys = new Set(['type', 'childNodes', 'range']);
 			case 'linter':
 				// 进入linter时，将editor的文本同步到linter
 				if (text1 !== text2) {
-					instance.view.dispatch({changes: {from: 0, to: text2.length, insert: text1}});
+					instance.view!.dispatch({changes: {from: 0, to: text2.length, insert: text1}});
+					model.setValue(text1);
 					instance.update();
 				}
 				break;
@@ -264,5 +292,5 @@ const keys = new Set(['type', 'childNodes', 'range']);
 	hashchange();
 	window.addEventListener('hashchange', hashchange);
 
-	Object.assign(window, {cm: instance});
+	Object.assign(window, {cm: instance, model});
 })();

extensions/typings.d.ts

@@ -27,6 +27,8 @@ declare global {
 
 	const Parser: Parser;
 	const wikiparse: wikiparse;
+
+	type MonacoEditor = typeof editor;
 }
 
 /* eslint-disable @typescript-eslint/method-signature-style */

index.html

@@ -56,7 +56,8 @@ <h2>Please input wikitext into the text box below.</h2>
 							</label>
 						</span>
 					</div>
-					<textarea id="wpTextbox2" rows="25"></textarea>
+					<textarea id="wpTextbox2" rows="15"></textarea>
+					<div id="monaco-container"></div>
 				</div>
 				<div class="tabcontent" id="highlighter">
 					<div>