From 08e04f0d726a28eade762023331007ba3029c636 Mon Sep 17 00:00:00 2001
From: Nicolas Molina <hi@nicobytes.com>
Date: Thu, 24 Oct 2024 11:27:27 -0400
Subject: [PATCH] chore(edit-content): fix problem with editor  #29875

---
 .../dot-form-file-editor.component.html       |  1 +
 .../dot-form-file-editor.component.scss       |  2 +-
 .../dot-form-file-editor.component.ts         | 27 +++++++++++++------
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.html
index b47593fe0054..aff434f107ef 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.html
@@ -31,6 +31,7 @@
         <ngx-monaco-editor
             [class.file-field__code-editor--disabled]="form.disabled"
             [options]="store.monacoConfig()"
+            (init)="onEditorInit($event)"
             class="file-field__code-editor"
             data-testId="code-editor"
             formControlName="content" />
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.scss
index 5b713e932758..ea37a78b38f9 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.scss
@@ -2,7 +2,7 @@
 
 :host ::ng-deep {
     .editor-container {
-        position: absolute;
+        position: absolute !important;
         top: 0;
         left: 0;
         right: 0;
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts
index 95809e99459d..2d326559b586 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts
@@ -1,5 +1,4 @@
 import {
-    MonacoEditorComponent,
     MonacoEditorConstructionOptions,
     MonacoEditorModule
 } from '@materia-ui/ngx-monaco-editor';
@@ -9,9 +8,9 @@ import {
     Component,
     effect,
     inject,
-    viewChild,
     OnInit,
-    untracked
+    untracked,
+    Injector
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -74,6 +73,8 @@ export class DotFormFileEditorComponent implements OnInit {
      */
     readonly #dialogConfig = inject(DynamicDialogConfig<DialogProps>);
 
+    readonly #injector = inject(Injector);
+
     /**
      * Form group for the file editor component.
      *
@@ -94,7 +95,7 @@ export class DotFormFileEditorComponent implements OnInit {
      *
      * @type {MonacoEditorComponent}
      */
-    $editorRef = viewChild.required(MonacoEditorComponent);
+    #editorRef: monaco.editor.IStandaloneCodeEditor | null = null;
 
     constructor() {
         effect(() => {
@@ -221,9 +222,12 @@ export class DotFormFileEditorComponent implements OnInit {
      * @private
      */
     #disableEditor() {
+        if (!this.#editorRef) {
+            return
+        }
+
         this.form.disable();
-        const editor = this.$editorRef().editor;
-        editor.updateOptions({ readOnly: true });
+        this.#editorRef.updateOptions({ readOnly: true });
     }
 
     /**
@@ -235,9 +239,12 @@ export class DotFormFileEditorComponent implements OnInit {
      * 3. Updates the editor options to make it writable (readOnly: false).
      */
     #enableEditor() {
+        if (!this.#editorRef) {
+            return
+        }
+
         this.form.enable();
-        const editor = this.$editorRef().editor;
-        editor.updateOptions({ readOnly: false });
+        this.#editorRef.updateOptions({ readOnly: false });
     }
 
     /**
@@ -267,4 +274,8 @@ export class DotFormFileEditorComponent implements OnInit {
     cancelUpload(): void {
         this.#dialogRef.close();
     }
+
+    onEditorInit(editor: monaco.editor.IStandaloneCodeEditor) {
+        this.#editorRef = editor;
+    }
 }