prism code visualizer and json editor

This commit is contained in:
Pau Capó 2021-05-21 18:05:20 +02:00
parent 3b99908958
commit ae30cb558e
7 changed files with 214 additions and 5 deletions

View file

@ -30,7 +30,7 @@ class AdminerJsonColumn
$name = $field['field'];
?>
<a href="#" id="toggle_json_<?= $name ?>">show as table</a><br>
<pre id="show_json_<?= $name ?>" style="display: none"><code><?= $json; ?></code></pre>
<pre id="show_json_<?= $name ?>" style="display: none;max-height:600px;overflow:auto;" contenteditable><code class="language-json"><?= $json; ?></code></pre>
<script <?= nonce() ?>>
document.getElementById('toggle_json_<?= $name ?>').addEventListener('click', function (e) {
e.preventDefault();
@ -41,6 +41,18 @@ class AdminerJsonColumn
show.style.display = 'none';
}
});
document.getElementById('show_json_<?= $name ?>').addEventListener('input', function (e) {
let content = document.getElementById('show_json_<?= $name ?>').innerText;
let json = false;
try {
json = JSON.parse(content);
} catch (e) {
document.getElementById('show_json_<?= $name ?>').style.border = '5px solid red';
return;
}
document.getElementById('show_json_<?= $name ?>').style.border = '';
document.querySelector('[name="fields[<?= $name ?>]"]').value = JSON.stringify(json);
});
</script>
<?php
}