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 @@
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);
+ 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;
+ }
}