fix: starting file does not open on training container (#2804)

## Proposed change
Invalid model as options seems to impact the load of Monaco Editor

As monaco editor does not need the definition of model as an input and
options,
simplify the options

## Related issues

*- No issue associated -*

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html

@@ -11,11 +11,10 @@
                        class="w-100 editor-view"></monaco-tree>
         </as-split-area>
         <as-split-area [size]="75" class="editor-view">
-          @let editorOptions = editorOptions$ | async;
-          @if (editorOptions) {
+          @if (editorOptions()) {
             <ngx-monaco-editor class="h-100 position-relative"
-                               [options]="editorOptions"
-                               [model]="model()"
+                               [options]="editorOptions()"
+                               [model]="model$ | async"
                                (keydown)="onEditorKeyDown($event)"
                                (onInit)="newMonacoEditorCreated.next()"
                                formControlName="code">

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss

@@ -25,6 +25,7 @@ ngx-monaco-editor {
 
 .editor-view {
   background: #1d1d1d;
+  color: white;
 }
 
 .save-code-dialog-backdrop {

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.spec.ts

@@ -2,6 +2,9 @@ import {
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
+import {
+  NGX_MONACO_EDITOR_CONFIG,
+} from 'ngx-monaco-editor-v2';
 import {
   CodeEditorViewComponent,
 } from './code-editor-view.component';
@@ -12,7 +15,10 @@ describe('CodeEditorViewComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CodeEditorViewComponent]
+      imports: [CodeEditorViewComponent],
+      providers: [
+        { provide: NGX_MONACO_EDITOR_CONFIG, useValue: { baseUrl: '' } }
+      ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(CodeEditorViewComponent);

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts

@@ -181,7 +181,6 @@ export class CodeEditorViewComponent implements OnDestroy {
         )
         : of([])
     ),
-    filter((tree) => tree.length > 0),
     shareReplay({ bufferSize: 1, refCount: true })
   );
 
@@ -218,16 +217,13 @@ export class CodeEditorViewComponent implements OnDestroy {
   /**
    * Configuration for the Monaco Editor
    */
-  public editorOptions$ = this.form.controls.file.valueChanges.pipe(
-    filter((filePath): filePath is string => !!filePath),
-    map(() => ({
-      theme: 'vs-dark',
-      readOnly: (this.editorMode() === 'readonly'),
-      automaticLayout: true,
-      scrollBeyondLastLine: false,
-      fixedOverflowWidgets: true,
-      model: this.model()
-    }))
+  public editorOptions = computed(() => ({
+    theme: 'vs-dark',
+    readOnly: this.editorMode() === 'readonly',
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    fixedOverflowWidgets: true
+  })
   );
 
   private readonly modalService = inject(DfModalService);
@@ -240,8 +236,14 @@ export class CodeEditorViewComponent implements OnDestroy {
   ]).pipe(
     takeUntilDestroyed(),
     combineLatestWith(this.cwdTree$),
-    filter(([[path], monacoTree]) => !!path && checkIfPathInMonacoTree(monacoTree, path.split('/'))),
-    switchMap(([[path]]) => from(this.webContainerService.readFile(`${this.project().cwd}/${path}`).catch(() => ''))),
+    switchMap(([[path], monacoTree]) => {
+      if (!!path && checkIfPathInMonacoTree(monacoTree, path.split('/'))) {
+        return from(
+          this.webContainerService.readFile(`${this.project().cwd}/${path}`).catch(() => '')
+        );
+      }
+      return of('');
+    }),
     shareReplay({ refCount: true, bufferSize: 1 })
   );
 
@@ -251,16 +253,20 @@ export class CodeEditorViewComponent implements OnDestroy {
    * Model used for monaco editor for the currently selected file.
    * We need that to associate the opened file to a URI which is necessary to resolve relative paths on imports.
    */
-  public model = computed(() => {
-    const value = this.fileContent();
-    const fileName = this.form.controls.file.value!;
-    const fileExtension = fileName.split('.').at(-1);
-    return {
-      value,
-      language: editorOptionsLanguage[fileExtension || ''] || '',
-      uri: `file:///${fileName}`
-    };
-  });
+  public model$ = combineLatest([
+    this.form.controls.file.valueChanges,
+    this.fileContentLoaded$
+  ]).pipe(
+    map(([filename, value]) => {
+      const fileExtension = filename?.split('.').at(-1);
+      return {
+        value: value,
+        language: editorOptionsLanguage[fileExtension || ''] || '',
+        uri: `file:///${filename}`
+      };
+    }),
+    shareReplay({ refCount: true, bufferSize: 1 })
+  );
 
   constructor() {
     effect(async () => {