From 954cc173120977551003e12e31e4552b98e8f389 Mon Sep 17 00:00:00 2001
From: Jakub Vrana <jakub@vrana.cz>
Date: Tue, 1 Apr 2025 11:57:50 +0200
Subject: [PATCH] AdminerPrism: Add Code Editor

---
 plugins/prism.php      | 38 ++++++++++++++++++++++++++++++--------
 plugins/sql-gemini.php |  2 +-
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/plugins/prism.php b/plugins/prism.php
index 8e3d366a..aa727edd 100644
--- a/plugins/prism.php
+++ b/plugins/prism.php
@@ -1,28 +1,31 @@
 <?php
 
-/** Use Prism for syntax highlighting, disables highlighting in <textarea>
+/** Use Prism for syntax highlighting and Prism Code Editor for <textarea>
 * @link https://prismjs.com/
+* @link https://prism-code-editor.netlify.app/
 * @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 AdminerPrism {
-	private $root;
+	private $editorRoot;
 	private $minified;
 	private $theme;
+	private $prismRoot; //! use editor also for syntax highlighting
 
-	function __construct($root = "https://cdn.jsdelivr.net/npm/prismjs@1", $minified = ".min", $theme = "prism") {
-		$this->root = $root;
+	function __construct($editorRoot = "https://cdn.jsdelivr.net/npm/prism-code-editor@3/dist", $minified = ".min", $theme = "prism", $prismRoot = "https://cdn.jsdelivr.net/npm/prismjs@1") {
+		$this->editorRoot = $editorRoot;
 		$this->minified = $minified;
 		$this->theme = $theme;
+		$this->prismRoot = $prismRoot;
 	}
 
 	function syntaxHighlighting($tableStatuses) {
-		echo "<style>@import url($this->root/themes/$this->theme$this->minified.css);</style>\n";
-		echo Adminer\script_src("$this->root/prism$this->minified.js");
-		echo Adminer\script_src("$this->root/components/prism-json$this->minified.js");
-		echo Adminer\script_src("$this->root/components/prism-sql$this->minified.js");
+		echo "<style>@import url($this->prismRoot/themes/$this->theme$this->minified.css);</style>\n";
+		echo Adminer\script_src("$this->prismRoot/prism$this->minified.js");
+		echo Adminer\script_src("$this->prismRoot/components/prism-json$this->minified.js");
+		echo Adminer\script_src("$this->prismRoot/components/prism-sql$this->minified.js");
 		?>
 <script <?php echo Adminer\nonce(); ?>>
 function changeClass(el) {
@@ -35,6 +38,25 @@ function changeClass(el) {
 qsa('code').forEach(changeClass);
 adminerHighlighter = els => els.forEach(el => Prism.highlightElement(changeClass(el)));
 </script>
+
+<link rel="stylesheet" href="<?php echo $this->editorRoot; ?>/layout.min.css">
+<link rel="stylesheet" href="<?php echo $this->editorRoot; ?>/themes/<?php echo $this->theme . $this->minified; ?>.css">
+<script type="module"<?php echo Adminer\nonce(); ?>>
+import { editorFromPlaceholder } from '<?php echo $this->editorRoot; ?>/index.js'
+import '<?php echo $this->editorRoot; ?>/prism/languages/sql.js'
+const el = document.querySelector('.sqlarea');
+if (el) {
+	const name = el.name;
+	const width = el.clientWidth;
+	const height = el.clientHeight;
+	const editor = editorFromPlaceholder('.sqlarea', { language: 'sql', lineNumbers: false });
+	editor.wrapper.parentElement.style.width = width + 'px';
+	editor.wrapper.style.height = height + 'px';
+	editor.textarea.name = name;
+	editor.textarea.className = 'sqlarea';
+	editor.textarea.onchange = editor.update;
+}
+</script>
 <?php
 		return true;
 	}
diff --git a/plugins/sql-gemini.php b/plugins/sql-gemini.php
index 32a9ab90..222be455 100644
--- a/plugins/sql-gemini.php
+++ b/plugins/sql-gemini.php
@@ -61,7 +61,7 @@ const geminiButton = qsl('input');
 function setSqlareaValue(value) {
 	const sqlarea = qs('textarea.sqlarea');
 	sqlarea.value = value;
-	sqlarea.onchange();
+	sqlarea.onchange && sqlarea.onchange();
 }
 
 geminiButton.onclick = () => {