Saving the post content using localstorage

If a post is created and the browser window crashes or the Composer window is hard-closed in some other way, all content is lost.
Content is now saved temporarily so that it can be displayed again when the browser is restarted.

diff --git a/view/templates/item/compose.tpl b/view/templates/item/compose.tpl
index d187a7b3e5722ffc9e283e545a22d73e75ad1e66..41a8e182e2a6553ce61f7d5831fe60c115cdf833 100644 (file)
--- a/view/templates/item/compose.tpl
+++ b/view/templates/item/compose.tpl
@@ -127,33 +127,54 @@
                        // Set initial height
                        textarea.style.height = "auto";
                        textarea.style.height = (textarea.scrollHeight) + "px";
+
+                       // Restore saved content
+                       const savedContent = localStorage.getItem(`comment-edit-text-${textarea.id}`);
+                       if (savedContent) {
+                               textarea.value = savedContent;
+                               textarea.style.height = "auto";
+                               textarea.style.height = (textarea.scrollHeight) + "px";
+                       }
                });
        });
 
-    function togglePermissions() {
-        var permissionsSection = document.getElementById('permissions-section');
-        if (permissionsSection.style.display === 'none' || permissionsSection.style.display === '') {
-            permissionsSection.style.display = 'block';
-        } else {
-            permissionsSection.style.display = 'none';
-        }
-    }
-
-    // Warn the user before leaving the page
-    var formSubmitting = false;
-
-    function setFormSubmitting() {
-        formSubmitting = true;
-    }
-
-    window.addEventListener("beforeunload", function (event) {
-        if (!formSubmitting) {
-            var confirmationMessage = 'Are you sure you want to reload the page? All unsaved changes will be lost.';
-            event.returnValue = confirmationMessage;
-            return confirmationMessage;
-        }
-    });
-
-    // Set the formSubmitting flag when the form is submitted
-    document.getElementById('comment-edit-form-{{$id}}').addEventListener('submit', setFormSubmitting);
+       // Auto-save content to localStorage every 5 seconds
+       setInterval(() => {
+               var textareas = document.querySelectorAll(".expandable-textarea");
+               textareas.forEach(function(textarea) {
+                       localStorage.setItem(`comment-edit-text-${textarea.id}`, textarea.value);
+               });
+       }, 5000);
+
+       function togglePermissions() {
+               var permissionsSection = document.getElementById('permissions-section');
+               if (permissionsSection.style.display === 'none' || permissionsSection.style.display === '') {
+                       permissionsSection.style.display = 'block';
+               } else {
+                       permissionsSection.style.display = 'none';
+               }
+       }
+
+       // Warn the user before leaving the page
+       var formSubmitting = false;
+
+       function setFormSubmitting() {
+               formSubmitting = true;
+               // Remove saved content from localStorage when form is submitted
+               var textareas = document.querySelectorAll(".expandable-textarea");
+               textareas.forEach(function(textarea) {
+                       localStorage.removeItem(`comment-edit-text-${textarea.id}`);
+               });
+       }
+
+       window.addEventListener("beforeunload", function (event) {
+               if (!formSubmitting) {
+                       var confirmationMessage = 'Are you sure you want to reload the page? All unsaved changes will be lost.';
+                       event.returnValue = confirmationMessage;
+                       return confirmationMessage;
+               }
+       });
+
+       // Set the formSubmitting flag when the form is submitted
+       document.getElementById('comment-edit-form-{{$id}}').addEventListener('submit', setFormSubmitting);
 </script>