Save to localstorage on any update, restore on reload, ctrl+escape to reset all content (with confirm box)

script.js

@@ -1,18 +1,72 @@
-const gridItems = document.querySelectorAll('.grid-item');
+const el = {};
 
 function toggleItem(event) {
-    if (event.metaKey || event.shiftKey) {
+  event.preventDefault();
-        const toggleThis = event.target.closest('.grid-item');
+  const gridItem = event.target.closest('.grid-item');
-        toggleThis?.classList.toggle('lo');   
+  if (event.metaKey || event.shiftKey) {
-    }
+    gridItem?.classList.toggle('lo');   
+  }
+
+  const editableChild = gridItem.querySelector('[contenteditable]');
+  if (editableChild) {
+    editableChild.focus();
+  }
+
 }
 
-for (const item of gridItems) {
+function saveContent() {
-  item.addEventListener('click', toggleItem);
+  const mmc = {};
+  for (const element of el.editableElements) {
+    const parentWithId = element.closest('[id]');
+    if (parentWithId) {
+      mmc[parentWithId.id] = element.innerHTML;
+    }
+  }
+  localStorage.setItem('mmc', JSON.stringify(mmc));
 }
 
-document.addEventListener('keydown', event => {
+function loadContent() {
-    if (event.key === 'Escape') {
+  const mmc = JSON.parse( localStorage.getItem('mmc') ?? "[]" );
-      document.activeElement.blur();
+  for (const element of el.editableElements) {
+    const parentWithId = element.closest('[id]');
+    if (parentWithId && mmc.hasOwnProperty(parentWithId.id)) {
+      element.innerHTML = mmc[parentWithId.id];
     }
-  });
+  }
+}
+
+function keyboardHandler(event) {
+  if (event.ctrlKey && event.key === 'Escape') {
+    const confirmed = confirm('Are you sure you want to reset the page?');
+    if (confirmed) {
+      for (const element of el.editableElements) {
+        element.innerHTML = '';
+      }
+      saveContent();
+      location.reload();
+    }
+  } else if (event.key === 'Escape') {
+    document.activeElement.blur();
+  }
+}
+
+function prep() {
+  el.gridItems = document.querySelectorAll('.grid-item');
+  el.editableElements = document.querySelectorAll('[contenteditable]');
+
+  loadContent();
+
+  for (const item of el.gridItems) {
+    item.addEventListener('click', toggleItem);
+  }
+
+  for (const element of el.editableElements) {
+    element.addEventListener('input', saveContent);
+  }
+  
+  document.addEventListener('keydown', keyboardHandler);
+  
+}
+
+window.addEventListener('load', prep);
+