Edit logic implemented.
This commit is contained in:
parent
16d5f2ab98
commit
01c6bb3d09
1 changed files with 35 additions and 3 deletions
|
|
@ -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,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue