Edit logic implemented.

This commit is contained in:
Yaro Kasear 2025-10-02 10:09:25 -05:00
parent 16d5f2ab98
commit 01c6bb3d09

View file

@ -4,7 +4,7 @@
{% for n in items %}
<li class="list-group-item">
<div class="d-flex justify-content-between align-items-start">
<div class="me-3" id="editContainer{{ n.id }}"></div>
<div class="me-3 w-100" id="editContainer{{ n.id }}"></div>
<div class="d-flex flex-column align-items-end">
<div id="editView{{ n.id }}">
@ -61,14 +61,46 @@
container.dataset.prev = container.innerHTML;
container.innerHTML = `
<textarea class="form-control" id="editor${id}" rows="6">${escapeForTextarea(current)}</textarea>
<textarea class="form-control w-100" id="editor${id}" rows="6">${escapeForTextarea(current)}</textarea>
<div class="mt-2 d-flex gap-2">
<button class="btn btn=primary btn-sm" onclick="saveEdit(${id})">Save</button>
<button class="btn btn-primary btn-sm" onclick="saveEdit(${id})">Save</button>
<button class="btn btn-secondary btn-sm" onclick="cancelEdit(${id})">Cancel</button>
<button class="btn btn-outline-secondary btn-sm" onclick="togglePreview(${id})">Preview</button>
</div>
<div class="mt-2 border rounded p-2 d-none" id="preview${id}"></div>
`;
} else {
// Switch to viewer mode
renderView(id, contents[id]);
}
}
function saveEdit(id) {
const textarea = document.getElementById(`editor${id}`);
const value = textarea.value;
contents[id] = value;
renderView(id, value);
document.getElementById(`editSwitch${id}`).checked = false;
}
function cancelEdit(id) {
document.getElementById(`editSwitch${id}`).checked = false;
renderView(id, contents[id]);
}
function togglePreview(id) {
const textarea = document.getElementById(`editor${id}`);
const preview = document.getElementById(`preview${id}`);
preview.classList.toggle('d-none');
if (!preview.classList.contains('d-none')) {
const html = marked.parse(textarea.value ?? "");
preview.innerHTML = DOMPurify.sanitize(html);
}
}
function escapeForTextarea(s) {
// Keep control of what goes inside the textarea
return (s ?? "").replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
</script>