1
0
mirror of https://github.com/vrana/adminer.git synced 2025-08-07 15:16:44 +02:00

Plugins: Defer syntax highlighting

This commit is contained in:
Jakub Vrana
2025-04-07 14:23:35 +02:00
parent b0e5c1d6e4
commit 41c71f8854
2 changed files with 98 additions and 94 deletions

View File

@@ -24,14 +24,14 @@ class AdminerCodemirror {
.CodeMirror { border: 1px inset #ccc; resize: both; } .CodeMirror { border: 1px inset #ccc; resize: both; }
</style> </style>
<?php <?php
echo Adminer\script_src("$this->root/lib/codemirror$this->minified.js"); echo Adminer\script_src("$this->root/lib/codemirror$this->minified.js", true);
echo Adminer\script_src("$this->root/addon/runmode/runmode$this->minified.js"); echo Adminer\script_src("$this->root/addon/runmode/runmode$this->minified.js", true);
echo Adminer\script_src("$this->root/addon/hint/show-hint$this->minified.js"); echo Adminer\script_src("$this->root/addon/hint/show-hint$this->minified.js", true);
echo Adminer\script_src("$this->root/mode/javascript/javascript$this->minified.js"); echo Adminer\script_src("$this->root/mode/javascript/javascript$this->minified.js", true);
$tables = array_fill_keys(array_keys($tableStatuses), array()); $tables = array_fill_keys(array_keys($tableStatuses), array());
if (Adminer\support("sql")) { if (Adminer\support("sql")) {
echo Adminer\script_src("$this->root/mode/sql/sql$this->minified.js"); echo Adminer\script_src("$this->root/mode/sql/sql$this->minified.js", true);
echo Adminer\script_src("$this->root/addon/hint/sql-hint$this->minified.js"); echo Adminer\script_src("$this->root/addon/hint/sql-hint$this->minified.js", true);
if (isset($_GET["sql"]) || isset($_GET["trigger"]) || isset($_GET["check"])) { if (isset($_GET["sql"]) || isset($_GET["trigger"]) || isset($_GET["check"])) {
foreach (Adminer\driver()->allFields() as $table => $fields) { foreach (Adminer\driver()->allFields() as $table => $fields) {
foreach ($fields as $field) { foreach ($fields as $field) {
@@ -42,55 +42,57 @@ class AdminerCodemirror {
} }
?> ?>
<script <?php echo Adminer\nonce(); ?>> <script <?php echo Adminer\nonce(); ?>>
function getCmMode(el) { addEventListener('DOMContentLoaded', () => {
const match = el.className.match(/(^|\s)jush-([^ ]+)/); function getCmMode(el) {
if (match) { const match = el.className.match(/(^|\s)jush-([^ ]+)/);
const modes = { if (match) {
js: 'application/json', const modes = {
sql: 'text/x-<?php echo (Adminer\connection()->flavor == "maria" ? "mariadb" : "mysql"); ?>', js: 'application/json',
oracle: 'text/x-sql', sql: 'text/x-<?php echo (Adminer\connection()->flavor == "maria" ? "mariadb" : "mysql"); ?>',
clickhouse: 'text/x-sql', oracle: 'text/x-sql',
firebird: 'text/x-sql' clickhouse: 'text/x-sql',
}; firebird: 'text/x-sql'
return modes[match[2]] || 'text/x-' + match[2]; };
return modes[match[2]] || 'text/x-' + match[2];
}
} }
}
adminerHighlighter = els => els.forEach(el => { adminerHighlighter = els => els.forEach(el => {
const mode = getCmMode(el); const mode = getCmMode(el);
if (mode) { if (mode) {
el.classList.add('cm-s-default'); el.classList.add('cm-s-default');
CodeMirror.runMode(el.textContent, mode, el); CodeMirror.runMode(el.textContent, mode, el);
}
});
adminerHighlighter(qsa('code'));
for (const el of qsa('textarea')) {
const mode = getCmMode(el);
if (mode) {
const width = el.clientWidth;
const height = el.clientHeight;
const cm = CodeMirror.fromTextArea(el, {
mode: mode,
extraKeys: { 'Ctrl-Space': 'autocomplete' },
hintOptions: {
completeSingle: false,
tables: <?php echo json_encode($tables); ?>,
defaultTable: <?php echo json_encode($_GET["trigger"] ?: ($_GET["check"] ?: null)); ?>
}
});
cm.setSize(width, height);
cm.on('inputRead', () => {
const token = cm.getTokenAt(cm.getCursor());
if (/^[.`"\w]\w*$/.test(token.string)) {
CodeMirror.commands.autocomplete(cm);
}
});
setupSubmitHighlightInput(cm.getWrapperElement());
el.onchange = () => cm.setValue(el.value);
}
} }
}); });
adminerHighlighter(qsa('code'));
for (const el of qsa('textarea')) {
const mode = getCmMode(el);
if (mode) {
const width = el.clientWidth;
const height = el.clientHeight;
const cm = CodeMirror.fromTextArea(el, {
mode: mode,
extraKeys: { 'Ctrl-Space': 'autocomplete' },
hintOptions: {
completeSingle: false,
tables: <?php echo json_encode($tables); ?>,
defaultTable: <?php echo json_encode($_GET["trigger"] ?: ($_GET["check"] ?: null)); ?>
}
});
cm.setSize(width, height);
cm.on('inputRead', () => {
const token = cm.getTokenAt(cm.getCursor());
if (/^[.`"\w]\w*$/.test(token.string)) {
CodeMirror.commands.autocomplete(cm);
}
});
setupSubmitHighlightInput(cm.getWrapperElement());
el.onchange = () => cm.setValue(el.value);
}
}
</script> </script>
<?php <?php
return true; return true;

View File

@@ -15,56 +15,58 @@ class AdminerMonaco {
} }
function syntaxHighlighting($tableStatuses) { function syntaxHighlighting($tableStatuses) {
echo Adminer\script_src("$this->root/loader.js"); echo Adminer\script_src("$this->root/loader.js", true);
?> ?>
<script <?php echo Adminer\nonce(); ?>> <script <?php echo Adminer\nonce(); ?>>
require.config({ paths: { vs: '<?php echo $this->root; ?>' } }); addEventListener('DOMContentLoaded', () => {
require(['vs/editor/editor.main'], function (monaco) { require.config({ paths: { vs: '<?php echo $this->root; ?>' } });
adminerHighlighter = els => els.forEach(el => { require(['vs/editor/editor.main'], function (monaco) {
const lang = getMonacoLang(el); adminerHighlighter = els => els.forEach(el => {
if (lang) { const lang = getMonacoLang(el);
monaco.editor.colorize(el.textContent, lang).then(html => el.innerHTML = html); 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
]);
}
} }
}); });
adminerHighlighter(qsa('code'));
for (const el of qsa('textarea')) { function getMonacoLang(el) {
const lang = getMonacoLang(el); return (
if (lang) { /jush-js/.test(el.className) ? 'javascript' : (
const container = document.createElement('div'); /jush-sql/.test(el.className) ? 'mysql' : (
container.style.border = '1px inset #ccc'; /jush-pgsql/.test(el.className) ? 'pgsql' : (
container.style.width = el.clientWidth + 'px'; /jush-(sqlite|mssql|oracle|clickhouse|firebird)/.test(el.className) ? 'sql' : (
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> </script>
<?php <?php
return true; return true;