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