AdminerPrism: Use Code Editor for highlighting

diff --git a/plugins/prism.php b/plugins/prism.php
index aa727edd086e124b80c0bfdba54e04b2585a08db..2a748db22daea54767727d671bb7beadd0312693 100644 (file)
--- a/plugins/prism.php
+++ b/plugins/prism.php
@@ -1,7 +1,6 @@
 <?php
 
-/** Use Prism for syntax highlighting and Prism Code Editor for <textarea>
-* @link https://prismjs.com/
+/** Use Prism Code Editor for syntax highlighting and <textarea>
 * @link https://prism-code-editor.netlify.app/
 * @link https://www.adminer.org/plugins/#use
 * @author Jakub Vrana, https://www.vrana.cz/
@@ -12,38 +11,35 @@ class AdminerPrism {
        private $editorRoot;
        private $minified;
        private $theme;
-       private $prismRoot; //! use editor also for syntax highlighting
 
-       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") {
+       function __construct($editorRoot = "https://cdn.jsdelivr.net/npm/prism-code-editor@3/dist", $minified = ".min", $theme = "prism") {
                $this->editorRoot = $editorRoot;
                $this->minified = $minified;
                $this->theme = $theme;
-               $this->prismRoot = $prismRoot;
        }
 
        function syntaxHighlighting($tableStatuses) {
-               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) {
-       el.className = el.className
-               .replace(/jush-js/, 'language-json')
-               .replace(/jush-\w*sql/, 'language-sql')
-       ;
-       return 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'
+import { editorFromPlaceholder } from '<?php echo $this->editorRoot; ?>/index.js';
+import { highlightText } from '<?php echo $this->editorRoot; ?>/prism/index.js';
+import '<?php echo $this->editorRoot; ?>/prism/languages/json.js';
+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' : (
+               ''
+       )));
+       if (mode) {
+               el.innerHTML = highlightText(el.textContent, mode);
+       }
+});
+adminerHighlighter(qsa('code'));
+
 const el = document.querySelector('.sqlarea');
 if (el) {
        const name = el.name;