mypastebin/templates/edit_paste.html
2025-05-29 22:40:58 +02:00

55 lines
2.2 KiB
HTML

{% extends "base.html" %}
{% block title %}Edit Paste {{ paste.id }}{% endblock %}
{% block content %}
<div class="container mt-4">
<h1>Editar Paste {{ paste.id }}</h1>
<form method="POST">
<input type="hidden" id="content" name="content" />
<div id="editor" style="height: 500px; border: 1px solid #ccc;"></div>
<button type="submit" class="btn btn-primary mt-3" onclick="submitContent()">Save Changes</button>
<a href="{{ url_for('get_paste', id=paste.id) }}" class="btn btn-secondary mt-3">Cancelar</a>
</form>
</div>
{% endblock %}
{% block scripts %}
<script src="https://cdn.priet.us/monaco-editor/min/vs/loader.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
require.config({ paths: { 'vs': 'https://cdn.priet.us/monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
// Función para obtener el tema de la página
function getPageTheme() {
const bodyTheme = document.body.getAttribute('data-theme') || 'light';
return bodyTheme === 'dark' ? 'vs-dark' : 'vs';
}
// Crear el editor Monaco con el tema correcto
var editor = monaco.editor.create(document.getElementById('editor'), {
value: {{ current_content|tojson }},
language: "{{ paste.language|lower if paste.language else 'plaintext' }}",
theme: getPageTheme(),
automaticLayout: true
});
// Función para enviar contenido al formulario
window.submitContent = function() {
document.getElementById('content').value = editor.getValue();
};
// Detectar cambios en el tema de la página
const observer = new MutationObserver(() => {
monaco.editor.setTheme(getPageTheme());
});
observer.observe(document.body, { attributes: true, attributeFilter: ['data-theme'] });
});
});
</script>
{% endblock %}
{% block footer %}
{{ super() }} <!-- Esto conserva el contenido original del footer definido en base.html -->
{% endblock %}