docs(docs-infra): fix code editor file creation and renaming

Hide the field when the user unfocuses from it; Fill the input with the file name when renaming; Fix file path renaming

Author: hawkgs

adev/src/app/editor/code-editor/code-editor.component.html

@@ -11,15 +11,14 @@
         <mat-tab #tab>
           <ng-template mat-tab-label>
             @if (tab.isActive && isRenamingFile()) {
-              <form
-                (submit)="renameFile($event, file.filename)"
-                (docsClickOutside)="closeRenameFile()"
-              >
+              <form (submit)="renameFile($event, file.filename)">
                 <input
                   name="rename-file"
                   class="adev-rename-file-input"
+                  [value]="file.filename.replace('src/', '')"
                   #renameFileInput
                   (keydown)="$event.stopPropagation()"
+                  (blur)="isRenamingFile.set(false)"
                 />
               </form>
             } @else if (restrictedMode()) {
@@ -64,6 +63,7 @@
                 class="adev-new-file-input"
                 #createFileInput
                 (keydown)="$event.stopPropagation()"
+                (blur)="createFile()"
               />
             </form>
           </ng-template>

adev/src/app/editor/code-editor/code-editor.component.ts

@@ -32,7 +32,7 @@ import {CodeMirrorEditor} from './code-mirror-editor.service';
 import {DiagnosticWithLocation, DiagnosticsState} from './services/diagnostics-state.service';
 import {DownloadManager} from '../download-manager.service';
 import {StackBlitzOpener} from '../stackblitz-opener.service';
-import {ClickOutside, IconComponent} from '@angular/docs';
+import {IconComponent} from '@angular/docs';
 import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu';
 import {FirebaseStudioLauncher} from '../firebase-studio-launcher.service';
 import {MatTooltip} from '@angular/material/tooltip';
@@ -51,15 +51,7 @@ const ANGULAR_DEV = 'https://angular.dev';
   templateUrl: './code-editor.component.html',
   styleUrls: ['./code-editor.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    MatTabsModule,
-    MatTooltip,
-    IconComponent,
-    ClickOutside,
-    CdkMenu,
-    CdkMenuItem,
-    CdkMenuTrigger,
-  ],
+  imports: [MatTabsModule, MatTooltip, IconComponent, CdkMenu, CdkMenuItem, CdkMenuTrigger],
 })
 export class CodeEditor {
   readonly restrictedMode = input(false);
@@ -155,10 +147,6 @@ export class CodeEditor {
     this.displayErrorsBox.set(false);
   }
 
-  protected closeRenameFile(): void {
-    this.isRenamingFile.set(false);
-  }
-
   protected canRenameFile = (filename: string) => this.canDeleteFile(filename);
 
   protected canDeleteFile(filename: string) {
@@ -189,12 +177,7 @@ export class CodeEditor {
 
     const renameFileInputValue = renameFileInput.nativeElement.value;
 
-    if (renameFileInputValue) {
-      if (renameFileInputValue.includes('..')) {
-        alert('File name can not contain ".."');
-        return;
-      }
-
+    if (this.validateFileName(renameFileInputValue)) {
       // src is hidden from users, here we manually add it to the new filename
       const newFile = 'src/' + renameFileInputValue;
 
@@ -209,20 +192,15 @@ export class CodeEditor {
     this.isRenamingFile.set(false);
   }
 
-  protected async createFile(event: SubmitEvent) {
+  protected async createFile(event?: SubmitEvent) {
     const fileInput = this.createFileInputRef();
     if (!fileInput) return;
 
-    event.preventDefault();
+    event?.preventDefault();
 
     const newFileInputValue = fileInput.nativeElement.value;
 
-    if (newFileInputValue) {
-      if (newFileInputValue.includes('..')) {
-        alert('File name can not contain ".."');
-        return;
-      }
-
+    if (this.validateFileName(newFileInputValue)) {
       // src is hidden from users, here we manually add it to the new filename
       const newFile = 'src/' + newFileInputValue;
 
@@ -237,6 +215,21 @@ export class CodeEditor {
     this.isCreatingFile.set(false);
   }
 
+  private validateFileName(fileName: string): boolean {
+    if (!fileName) {
+      return false;
+    }
+    if (fileName.split('/').pop()?.indexOf('.') === 0) {
+      alert('File must contain a name.');
+      return false;
+    }
+    if (fileName.includes('..')) {
+      alert('File name can not contain ".."');
+      return false;
+    }
+    return true;
+  }
+
   private listenToDiagnosticsChange(): void {
     this.errors$.subscribe((diagnostics) => {
       this.errors.set(diagnostics);

adev/src/app/editor/node-runtime-sandbox.service.ts

@@ -274,7 +274,17 @@ export class NodeRuntimeSandbox {
     try {
       await webContainer.fs.rename(oldPath, newPath);
     } catch (err: any) {
-      throw err;
+      if (err.message.startsWith('ENOENT')) {
+        const directory = newPath.split('/').slice(0, -1).join('/');
+
+        await webContainer.fs.mkdir(directory, {
+          recursive: true,
+        });
+
+        await webContainer.fs.rename(oldPath, newPath);
+      } else {
+        throw err;
+      }
     }
   }