chore(edit-content): fix problem with editor #29875

dotCMS · Oct 24, 2024 · 08e04f0 · 08e04f0
1 parent 01a4246
commit 08e04f0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/...it-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.html b/...it-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/...it-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.scss b/...it-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/...edit-content-file-field/components/dot-form-file-editor/dot-form-file-editor.component.ts b/...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;
+    }
 }