CLASSROOMIO-T-166: Autosave on Style Changes Fix

Improve edge cases of autosave

CLASSROOMIO-T-166: Autosave on Style Changes Fix


Co-authored-by: Rotimi Best <[email protected]>
Co-authored-by: Tunji Adeyemi <[email protected]>


Merge-request: CLASSROOMIO-MR-71
Merged-by: Best Admin <[email protected]>

src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -117,6 +117,9 @@
 
   function updateNoteByCompletion(completion) {
     $lesson.materials.note = completion;
+
+    autoSave($lesson.materials);
+
     if (editorWindowRef) {
       const tmceBody = editorWindowRef?.document?.querySelector('body');
 
@@ -148,8 +151,7 @@
     window.players = players;
   }
 
-  function autoSave(updatedMaterials, _isLoading: boolean, lessonId: string) {
-    isSaving = false;
+  function autoSave(updatedMaterials, _isLoading?: boolean, lessonId?: string) {
     if (timeoutId) clearTimeout(timeoutId);
 
     if (!initAutoSave) {
@@ -160,7 +162,6 @@
     isSaving = true;
     timeoutId = setTimeout(async () => {
       await saveLesson(updatedMaterials);
-
       isSaving = false;
     }, 500);
   }
@@ -169,8 +170,9 @@
     $isLessonDirty = true;
   }
 
-  function onLessonIdChange() {
+  function onLessonIdChange(_lid: string) {
     initAutoSave = false;
+    isSaving = false;
   }
 
   const onClose = () => {
@@ -249,6 +251,7 @@
 
         <div class="h-[60vh] mt-5">
           <TextEditor
+            id={lessonId}
             bind:editorWindowRef
             value={$lesson.materials.note}
             onChange={(html) => ($lesson.materials.note = html)}

src/lib/components/TextEditor/index.svelte

@@ -2,6 +2,7 @@
   import { PUBLIC_TINYMCE_API_KEY } from '$env/static/public';
   import Editor from '@tinymce/tinymce-svelte';
 
+  export let id = '';
   export let value: string;
   export let onChange = (html = '') => {};
   export let height = 300;
@@ -26,11 +27,16 @@
     placeholder: placeholder,
     init_instance_callback: function (editor: any) {
       editorWindowRef = editor.iframeElement?.contentWindow;
-      editor.on('Input', function () {
+      editor.on('Change', function () {
         const html = editor.getContent();
         if (onChange) {
           onChange(html);
         }
+
+        // backup in case the data doesn't get to our backend, we should store the note to avoid data loss
+        if (id) {
+          localStorage.setItem(id, html);
+        }
       });
     }
   };