1
0
mirror of https://github.com/vrana/adminer.git synced 2025-08-09 16:17:48 +02:00

AdminerPrism: Add Code Editor

This commit is contained in:
Jakub Vrana
2025-04-01 11:57:50 +02:00
parent 45a68bd6f7
commit 954cc17312
2 changed files with 31 additions and 9 deletions

View File

@@ -1,28 +1,31 @@
<?php <?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://prismjs.com/
* @link https://prism-code-editor.netlify.app/
* @link https://www.adminer.org/plugins/#use * @link https://www.adminer.org/plugins/#use
* @author Jakub Vrana, https://www.vrana.cz/ * @author Jakub Vrana, https://www.vrana.cz/
* @license https://www.apache.org/licenses/LICENSE-2.0 Apache License, Version 2.0 * @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) * @license https://www.gnu.org/licenses/gpl-2.0.html GNU General Public License, version 2 (one or other)
*/ */
class AdminerPrism { class AdminerPrism {
private $root; private $editorRoot;
private $minified; private $minified;
private $theme; private $theme;
private $prismRoot; //! use editor also for syntax highlighting
function __construct($root = "https://cdn.jsdelivr.net/npm/prismjs@1", $minified = ".min", $theme = "prism") { 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->root = $root; $this->editorRoot = $editorRoot;
$this->minified = $minified; $this->minified = $minified;
$this->theme = $theme; $this->theme = $theme;
$this->prismRoot = $prismRoot;
} }
function syntaxHighlighting($tableStatuses) { function syntaxHighlighting($tableStatuses) {
echo "<style>@import url($this->root/themes/$this->theme$this->minified.css);</style>\n"; echo "<style>@import url($this->prismRoot/themes/$this->theme$this->minified.css);</style>\n";
echo Adminer\script_src("$this->root/prism$this->minified.js"); echo Adminer\script_src("$this->prismRoot/prism$this->minified.js");
echo Adminer\script_src("$this->root/components/prism-json$this->minified.js"); echo Adminer\script_src("$this->prismRoot/components/prism-json$this->minified.js");
echo Adminer\script_src("$this->root/components/prism-sql$this->minified.js"); echo Adminer\script_src("$this->prismRoot/components/prism-sql$this->minified.js");
?> ?>
<script <?php echo Adminer\nonce(); ?>> <script <?php echo Adminer\nonce(); ?>>
function changeClass(el) { function changeClass(el) {
@@ -35,6 +38,25 @@ function changeClass(el) {
qsa('code').forEach(changeClass); qsa('code').forEach(changeClass);
adminerHighlighter = els => els.forEach(el => Prism.highlightElement(changeClass(el))); adminerHighlighter = els => els.forEach(el => Prism.highlightElement(changeClass(el)));
</script> </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 <?php
return true; return true;
} }

View File

@@ -61,7 +61,7 @@ const geminiButton = qsl('input');
function setSqlareaValue(value) { function setSqlareaValue(value) {
const sqlarea = qs('textarea.sqlarea'); const sqlarea = qs('textarea.sqlarea');
sqlarea.value = value; sqlarea.value = value;
sqlarea.onchange(); sqlarea.onchange && sqlarea.onchange();
} }
geminiButton.onclick = () => { geminiButton.onclick = () => {