Edit logic implemented.

inventory/templates/update_list.html

@@ -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>