New plugin: Use Monaco Editor for syntax highlighting

CHANGELOG.md

@@ -5,6 +5,7 @@
 - CSS: Hide menu on mobile
 - CSS: Invert icons in dark mode
 - Plugins: Allow changing CSP by more plugins
+- New plugin: Use Monaco Editor for syntax highlighting
 - New plugin: Use Prism for syntax highlighting
 
 ## Adminer 5.1.0 (released 2025-03-24)

plugins/monaco.php

@@ -0,0 +1,72 @@
+<?php
+
+/** Use VS Code's Monaco Editor for syntax highlighting and SQL <textarea>
+* @link https://microsoft.github.io/monaco-editor/
+* @link https://www.adminer.org/plugins/#use
+* @author Jakub Vrana, https://www.vrana.cz/
+* @license https://www.apache.org/licenses/LICENSE-2.0 Apache License, Version 2.0
+* @license https://www.gnu.org/licenses/gpl-2.0.html GNU General Public License, version 2 (one or other)
+*/
+class AdminerMonaco {
+	private $root;
+
+	function __construct($root = "https://cdn.jsdelivr.net/npm/monaco-editor@0.52/min/vs") {
+		$this->root = $root;
+	}
+
+	function syntaxHighlighting($tableStatuses) {
+		echo Adminer\script_src("$this->root/loader.js");
+		?>
+<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);
+		}
+	});
+	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' : (
+		''
+	)))));
+}
+</script>
+<?php
+		return true;
+	}
+}

plugins/prism.php

@@ -34,7 +34,7 @@ import '<?php echo $this->editorRoot; ?>/prism/languages/sql.js';
 adminerHighlighter = els => els.forEach(el => {
 	const mode = (
 		/jush-js/.test(el.className) ? 'json' : (
-		/jush-\w*sql/.test(el.className) ? 'sql' : (
+		/jush-(\w*sql|oracle|clickhouse|firebird)/.test(el.className) ? 'sql' : (
 		''
 	)));
 	if (mode) {