From 41c71f885474171e0349d0667c9bbec30d4224fc Mon Sep 17 00:00:00 2001
From: Jakub Vrana <jakub@vrana.cz>
Date: Mon, 7 Apr 2025 14:23:35 +0200
Subject: [PATCH] Plugins: Defer syntax highlighting

---
 plugins/codemirror.php | 104 +++++++++++++++++++++--------------------
 plugins/monaco.php     |  88 +++++++++++++++++-----------------
 2 files changed, 98 insertions(+), 94 deletions(-)

diff --git a/plugins/codemirror.php b/plugins/codemirror.php
index 56cdb688..cdbc57b3 100644
--- a/plugins/codemirror.php
+++ b/plugins/codemirror.php
@@ -24,14 +24,14 @@ class AdminerCodemirror {
 .CodeMirror { border: 1px inset #ccc; resize: both; }
 </style>
 <?php
-		echo Adminer\script_src("$this->root/lib/codemirror$this->minified.js");
-		echo Adminer\script_src("$this->root/addon/runmode/runmode$this->minified.js");
-		echo Adminer\script_src("$this->root/addon/hint/show-hint$this->minified.js");
-		echo Adminer\script_src("$this->root/mode/javascript/javascript$this->minified.js");
+		echo Adminer\script_src("$this->root/lib/codemirror$this->minified.js", true);
+		echo Adminer\script_src("$this->root/addon/runmode/runmode$this->minified.js", true);
+		echo Adminer\script_src("$this->root/addon/hint/show-hint$this->minified.js", true);
+		echo Adminer\script_src("$this->root/mode/javascript/javascript$this->minified.js", true);
 		$tables = array_fill_keys(array_keys($tableStatuses), array());
 		if (Adminer\support("sql")) {
-			echo Adminer\script_src("$this->root/mode/sql/sql$this->minified.js");
-			echo Adminer\script_src("$this->root/addon/hint/sql-hint$this->minified.js");
+			echo Adminer\script_src("$this->root/mode/sql/sql$this->minified.js", true);
+			echo Adminer\script_src("$this->root/addon/hint/sql-hint$this->minified.js", true);
 			if (isset($_GET["sql"]) || isset($_GET["trigger"]) || isset($_GET["check"])) {
 				foreach (Adminer\driver()->allFields() as $table => $fields) {
 					foreach ($fields as $field) {
@@ -42,55 +42,57 @@ class AdminerCodemirror {
 		}
 		?>
 <script <?php echo Adminer\nonce(); ?>>
-function getCmMode(el) {
-	const match = el.className.match(/(^|\s)jush-([^ ]+)/);
-	if (match) {
-		const modes = {
-			js: 'application/json',
-			sql: 'text/x-<?php echo (Adminer\connection()->flavor == "maria" ? "mariadb" : "mysql"); ?>',
-			oracle: 'text/x-sql',
-			clickhouse: 'text/x-sql',
-			firebird: 'text/x-sql'
-		};
-		return modes[match[2]] || 'text/x-' + match[2];
+addEventListener('DOMContentLoaded', () => {
+	function getCmMode(el) {
+		const match = el.className.match(/(^|\s)jush-([^ ]+)/);
+		if (match) {
+			const modes = {
+				js: 'application/json',
+				sql: 'text/x-<?php echo (Adminer\connection()->flavor == "maria" ? "mariadb" : "mysql"); ?>',
+				oracle: 'text/x-sql',
+				clickhouse: 'text/x-sql',
+				firebird: 'text/x-sql'
+			};
+			return modes[match[2]] || 'text/x-' + match[2];
+		}
 	}
-}
 
-adminerHighlighter = els => els.forEach(el => {
-	const mode = getCmMode(el);
-	if (mode) {
-		el.classList.add('cm-s-default');
-		CodeMirror.runMode(el.textContent, mode, el);
+	adminerHighlighter = els => els.forEach(el => {
+		const mode = getCmMode(el);
+		if (mode) {
+			el.classList.add('cm-s-default');
+			CodeMirror.runMode(el.textContent, mode, el);
+		}
+	});
+
+	adminerHighlighter(qsa('code'));
+
+	for (const el of qsa('textarea')) {
+		const mode = getCmMode(el);
+		if (mode) {
+			const width = el.clientWidth;
+			const height = el.clientHeight;
+			const cm = CodeMirror.fromTextArea(el, {
+				mode: mode,
+				extraKeys: { 'Ctrl-Space': 'autocomplete' },
+				hintOptions: {
+					completeSingle: false,
+					tables: <?php echo json_encode($tables); ?>,
+					defaultTable: <?php echo json_encode($_GET["trigger"] ?: ($_GET["check"] ?: null)); ?>
+				}
+			});
+			cm.setSize(width, height);
+			cm.on('inputRead', () => {
+				const token = cm.getTokenAt(cm.getCursor());
+				if (/^[.`"\w]\w*$/.test(token.string)) {
+					CodeMirror.commands.autocomplete(cm);
+				}
+			});
+			setupSubmitHighlightInput(cm.getWrapperElement());
+			el.onchange = () => cm.setValue(el.value);
+		}
 	}
 });
-
-adminerHighlighter(qsa('code'));
-
-for (const el of qsa('textarea')) {
-	const mode = getCmMode(el);
-	if (mode) {
-		const width = el.clientWidth;
-		const height = el.clientHeight;
-		const cm = CodeMirror.fromTextArea(el, {
-			mode: mode,
-			extraKeys: { 'Ctrl-Space': 'autocomplete' },
-			hintOptions: {
-				completeSingle: false,
-				tables: <?php echo json_encode($tables); ?>,
-				defaultTable: <?php echo json_encode($_GET["trigger"] ?: ($_GET["check"] ?: null)); ?>
-			}
-		});
-		cm.setSize(width, height);
-		cm.on('inputRead', () => {
-			const token = cm.getTokenAt(cm.getCursor());
-			if (/^[.`"\w]\w*$/.test(token.string)) {
-				CodeMirror.commands.autocomplete(cm);
-			}
-		});
-		setupSubmitHighlightInput(cm.getWrapperElement());
-		el.onchange = () => cm.setValue(el.value);
-	}
-}
 </script>
 <?php
 		return true;
diff --git a/plugins/monaco.php b/plugins/monaco.php
index 9a72f745..7a9f86d0 100644
--- a/plugins/monaco.php
+++ b/plugins/monaco.php
@@ -15,56 +15,58 @@ class AdminerMonaco {
 	}
 
 	function syntaxHighlighting($tableStatuses) {
-		echo Adminer\script_src("$this->root/loader.js");
+		echo Adminer\script_src("$this->root/loader.js", true);
 		?>
 <script <?php echo Adminer\nonce(); ?>>
-require.config({ paths: { vs: '<?php echo $this->root; ?>' } });
-require(['vs/editor/editor.main'], function (monaco) {
-	adminerHighlighter = els => els.forEach(el => {
-		const lang = getMonacoLang(el);
-		if (lang) {
-			monaco.editor.colorize(el.textContent, lang).then(html => el.innerHTML = html);
+addEventListener('DOMContentLoaded', () => {
+	require.config({ paths: { vs: '<?php echo $this->root; ?>' } });
+	require(['vs/editor/editor.main'], function (monaco) {
+		adminerHighlighter = els => els.forEach(el => {
+			const lang = getMonacoLang(el);
+			if (lang) {
+				monaco.editor.colorize(el.textContent, lang).then(html => el.innerHTML = html);
+			}
+		});
+		adminerHighlighter(qsa('code'));
+
+		for (const el of qsa('textarea')) {
+			const lang = getMonacoLang(el);
+			if (lang) {
+				const container = document.createElement('div');
+				container.style.border = '1px inset #ccc';
+				container.style.width = el.clientWidth + 'px';
+				container.style.height = el.clientHeight + 'px';
+				el.before(container);
+				el.style.display = 'none';
+				var editor = monaco.editor.create(container, {
+					value: el.value,
+					lineNumbers: 'off',
+					glyphMargin: false,
+					folding: false,
+					lineDecorationsWidth: 1,
+					minimap: {enabled: false},
+					language: lang
+				});
+				editor.onDidChangeModelContent(() => el.value = editor.getValue());
+				el.onchange = () => editor.setValue(el.value);
+				monaco.editor.addKeybindingRules([
+					{keybinding: monaco.KeyCode.Tab, command: null}
+					//! Ctrl+Enter
+				]);
+			}
 		}
 	});
-	adminerHighlighter(qsa('code'));
 
-	for (const el of qsa('textarea')) {
-		const lang = getMonacoLang(el);
-		if (lang) {
-			const container = document.createElement('div');
-			container.style.border = '1px inset #ccc';
-			container.style.width = el.clientWidth + 'px';
-			container.style.height = el.clientHeight + 'px';
-			el.before(container);
-			el.style.display = 'none';
-			var editor = monaco.editor.create(container, {
-				value: el.value,
-				lineNumbers: 'off',
-				glyphMargin: false,
-				folding: false,
-				lineDecorationsWidth: 1,
-				minimap: {enabled: false},
-				language: lang
-			});
-			editor.onDidChangeModelContent(() => el.value = editor.getValue());
-			el.onchange = () => editor.setValue(el.value);
-			monaco.editor.addKeybindingRules([
-				{keybinding: monaco.KeyCode.Tab, command: null}
-				//! Ctrl+Enter
-			]);
-		}
+	function getMonacoLang(el) {
+		return (
+			/jush-js/.test(el.className) ? 'javascript' : (
+			/jush-sql/.test(el.className) ? 'mysql' : (
+			/jush-pgsql/.test(el.className) ? 'pgsql' : (
+			/jush-(sqlite|mssql|oracle|clickhouse|firebird)/.test(el.className) ? 'sql' : (
+			''
+		)))));
 	}
 });
-
-function getMonacoLang(el) {
-	return (
-		/jush-js/.test(el.className) ? 'javascript' : (
-		/jush-sql/.test(el.className) ? 'mysql' : (
-		/jush-pgsql/.test(el.className) ? 'pgsql' : (
-		/jush-(sqlite|mssql|oracle|clickhouse|firebird)/.test(el.className) ? 'sql' : (
-		''
-	)))));
-}
 </script>
 <?php
 		return true;