Fix editor reloading folder while typing (#300) (#320)

* Fixing autoSave glitch

* Test cases for autoSave glitch fix

Author: AnUbH75

frontend/src/app/pages/cloud/cloud.component.spec.ts

@@ -490,27 +490,44 @@ describe('CloudComponent Unsaved Changes Flow', () => {
       });
     });
 
-    it('should transition saveStatus through unsaved -> saving -> saved during autosave', async () => {
+    it('does not autosave or reload the folder while typing (#300 regression)', () => {
       component.showFileEditor = true;
       component.newFileName = 'note.md';
       component.fileContent = 'new markdown';
       component.originalFileContent = '';
       component.originalFileName = 'note.md';
       component.currentFolder = { path: '/root', name: 'root' } as any;
 
-      cloudMock.uploadFile.and.returnValue(of({} as any));
-
       component.onContentChange();
+
+      // Dirty state still tracked correctly, with no background save kicked off.
+      expect(component.saveStatus).toBe('unsaved');
+      expect(component.isEditorDirty).toBeTrue();
+
+      // Well past the old 2s autosave delay — nothing should fire.
+      jasmine.clock().tick(5000);
+
+      expect(cloudMock.uploadFile).not.toHaveBeenCalled();
+      expect(cloudMock.getFolderByPath).not.toHaveBeenCalled();
       expect(component.saveStatus).toBe('unsaved');
+      expect(component.fileContent).toBe('new markdown');
+      expect(component.originalFileContent).toBe(''); // unchanged: no autosave wrote it
+    });
 
-      jasmine.clock().tick(2000);
+    it('still updates the local outline and preview while typing, without saving', () => {
+      component.showFileEditor = true;
+      component.newFileName = 'note.md';
+      component.originalFileName = 'note.md';
+      component.originalFileContent = '';
+      component.fileContent = '# New Heading\nbody text';
+      component.currentFolder = { path: '/root', name: 'root' } as any;
 
-      // Wait for async autosave Promise to resolve
-      await component.autosaveFile();
+      component.onContentChange();
 
-      expect(component.saveStatus).toBe('saved');
-      expect(component.originalFileContent).toBe('new markdown');
-      expect(component.isEditorDirty).toBeFalse();
+      expect(component.outline).toEqual([{ text: 'New Heading', level: 1 }]);
+      expect(component.previewHtml.toString()).toContain('New Heading');
+      expect(cloudMock.uploadFile).not.toHaveBeenCalled();
+      expect(cloudMock.getFolderByPath).not.toHaveBeenCalled();
     });
   });
 });

frontend/src/app/pages/cloud/cloud.component.ts

@@ -113,7 +113,6 @@ export class CloudComponent implements OnInit, OnDestroy {
   originalFileContent = '';
   outline: { text: string; level: number }[] = [];
   saveStatus: 'saved' | 'saving' | 'unsaved' = 'saved';
-  autosaveTimer: ReturnType<typeof setTimeout> | null = null;
   editorMode: 'edit' | 'preview' | 'split' = 'edit';
   previewHtml: SafeHtml = '';
 
@@ -1788,78 +1787,14 @@ export class CloudComponent implements OnInit, OnDestroy {
   }
 
   onContentChange() {
-    if (this.isEditorDirty) {
-      this.saveStatus = 'unsaved';
-      this.triggerAutosave();
-    } else {
-      this.saveStatus = 'saved';
-      if (this.autosaveTimer) {
-        clearTimeout(this.autosaveTimer);
-        this.autosaveTimer = null;
-      }
-    }
+    this.saveStatus = this.isEditorDirty ? 'unsaved' : 'saved';
     if (this.isMarkdownFile(this.newFileName)) {
       this.updateOutline();
       this.updatePreview();
     }
   }
 
-  triggerAutosave() {
-    if (this.autosaveTimer) {
-      clearTimeout(this.autosaveTimer);
-    }
-    this.autosaveTimer = setTimeout(() => {
-      this.autosaveFile();
-    }, 2000);
-  }
-
-  async autosaveFile() {
-    const nameToSave = this.newFileName.trim();
-    if (!nameToSave || !this.isEditorDirty) return;
-
-    // Background autosave only saves content edits under existing filename.
-    // File renames are handled when the user explicitly clicks Save.
-    if (this.editingFile && this.fileContent === this.originalFileContent) {
-      return;
-    }
-
-    this.saveStatus = 'saving';
-
-    try {
-      const targetName = this.editingFile ? this.editingFile.name : nameToSave;
-      const currentPath = this.getRelativePath(this.currentFolder?.path || '/');
-      const fileBlob = new Blob([this.fileContent], { type: 'text/plain' });
-      const file = new File([fileBlob], targetName);
-      await firstValueFrom(this.cloudService.uploadFile(currentPath, file));
-
-      if (!this.editingFile) {
-        const relativeTarget = this.joinRelativePath(currentPath, targetName);
-        this.editingFile = {
-          path: relativeTarget,
-          name: targetName,
-          size: fileBlob.size,
-          mimeType: 'text/markdown',
-        };
-        this.newFileName = targetName;
-        this.originalFileName = targetName;
-      }
-
-      this.originalFileContent = this.fileContent;
-      this.saveStatus = 'saved';
-      this.reloadCurrentFolder();
-    } catch (err: unknown) {
-      this.saveStatus = 'unsaved';
-      console.error('Autosave failed:', err);
-      this.toast.error('Autosave failed', this.getErrorMessage(err));
-    }
-  }
-
   closeFileEditor() {
-    if (this.autosaveTimer) {
-      clearTimeout(this.autosaveTimer);
-      this.autosaveTimer = null;
-    }
-
     this.showFileEditor = false;
     this.editingFile = null;
     this.newFileName = '';