AdminerPrism: Add Code Editor

diff --git a/plugins/prism.php b/plugins/prism.php
index 8e3d366aebf9f6b4c9e6838c20b56bf493ad6759..aa727edd086e124b80c0bfdba54e04b2585a08db 100644 (file)
--- 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 32a9ab907ecc55e26b8ed2f27375d221999a0a26..222be4555e0b3550eccdc6e312a9ba78aa150db6 100644 (file)
--- 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 = () => {