Development: Migrate the MonacoEditorModule to standalone components (#…

…9407)

src/main/webapp/app/exercises/programming/hestia/git-diff-report/git-diff-report.module.ts

@@ -6,12 +6,12 @@ import { GitDiffFileComponent } from 'app/exercises/programming/hestia/git-diff-
 import { GitDiffReportModalComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-report-modal.component';
 import { GitDiffFilePanelComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel.component';
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
-import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.module';
 import { GitDiffFilePanelTitleComponent } from 'app/exercises/programming/hestia/git-diff-report/git-diff-file-panel-title.component';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-editor.component';
 
 @NgModule({
-    imports: [ArtemisSharedModule, NgbAccordionModule, MonacoEditorModule, ArtemisSharedComponentModule],
+    imports: [ArtemisSharedModule, NgbAccordionModule, MonacoDiffEditorComponent, ArtemisSharedComponentModule],
     declarations: [GitDiffFilePanelComponent, GitDiffFilePanelTitleComponent, GitDiffReportComponent, GitDiffFileComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
     exports: [GitDiffReportComponent, GitDiffReportModalComponent, GitDiffLineStatComponent],
 })

src/main/webapp/app/exercises/programming/hestia/testwise-coverage-report/testwise-coverage-report.module.ts

@@ -4,10 +4,10 @@ import { TestwiseCoverageReportModalComponent } from 'app/exercises/programming/
 import { TestwiseCoverageReportComponent } from 'app/exercises/programming/hestia/testwise-coverage-report/testwise-coverage-report.component';
 import { TestwiseCoverageFileComponent } from 'app/exercises/programming/hestia/testwise-coverage-report/testwise-coverage-file.component';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.module';
+import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
 
 @NgModule({
-    imports: [ArtemisSharedModule, MatExpansionModule, MonacoEditorModule],
+    imports: [ArtemisSharedModule, MatExpansionModule, MonacoEditorComponent],
     declarations: [TestwiseCoverageFileComponent, TestwiseCoverageReportComponent, TestwiseCoverageReportModalComponent],
     exports: [TestwiseCoverageFileComponent, TestwiseCoverageReportModalComponent, TestwiseCoverageReportComponent],
 })

src/main/webapp/app/exercises/programming/manage/programming-exercise-management.module.ts

@@ -28,7 +28,7 @@ import { ArtemisCodeEditorModule } from 'app/exercises/programming/shared/code-e
 import { DetailModule } from 'app/detail-overview-list/detail.module';
 import { IrisModule } from 'app/iris/iris.module';
 import { ArtemisExerciseModule } from 'app/exercises/shared/exercise/exercise.module';
-import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.module';
+import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
 
 @NgModule({
     imports: [
@@ -56,7 +56,7 @@ import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.modul
         ArtemisExerciseModule,
         DetailModule,
         IrisModule,
-        MonacoEditorModule,
+        MonacoEditorComponent,
     ],
     declarations: [
         ProgrammingExerciseDetailComponent,

src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.module.ts

@@ -32,7 +32,7 @@ import { FormsModule } from 'app/forms/forms.module';
 import { ProgrammingExerciseBuildPlanCheckoutDirectoriesComponent } from 'app/exercises/programming/shared/build-details/programming-exercise-build-plan-checkout-directories.component';
 import { ProgrammingExerciseRepositoryAndBuildPlanDetailsComponent } from 'app/exercises/programming/shared/build-details/programming-exercise-repository-and-build-plan-details.component';
 import { ProgrammingExerciseTheiaComponent } from 'app/exercises/programming/manage/update/update-components/theia/programming-exercise-theia.component';
-import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.module';
+import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
 
 @NgModule({
     imports: [
@@ -57,7 +57,7 @@ import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.modul
         FormsModule,
         ProgrammingExerciseBuildPlanCheckoutDirectoriesComponent,
         ProgrammingExerciseRepositoryAndBuildPlanDetailsComponent,
-        MonacoEditorModule,
+        MonacoEditorComponent,
         ProgrammingExerciseTheiaComponent,
     ],
     declarations: [

src/main/webapp/app/exercises/programming/shared/code-editor/code-editor.module.ts

@@ -21,9 +21,9 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TreeviewModule } from 'app/exercises/programming/shared/code-editor/treeview/treeview.module';
 import { CodeEditorHeaderComponent } from 'app/exercises/programming/shared/code-editor/header/code-editor-header.component';
 import { CodeEditorFileBrowserBadgeComponent } from 'app/exercises/programming/shared/code-editor/file-browser/code-editor-file-browser-badge.component';
-import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.module';
 import { CodeEditorMonacoComponent } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
 
 @NgModule({
     imports: [
@@ -33,7 +33,7 @@ import { ArtemisSharedComponentModule } from 'app/shared/components/shared-compo
         TreeviewModule.forRoot(),
         ArtemisProgrammingExerciseInstructionsEditorModule,
         ArtemisProgrammingManualAssessmentModule,
-        MonacoEditorModule,
+        MonacoEditorComponent,
         ArtemisSharedComponentModule,
     ],
     declarations: [

src/main/webapp/app/exercises/shared/exercise-hint/shared/exercise-hint-shared.module.ts

@@ -4,10 +4,10 @@ import { CastToCodeHintPipe } from 'app/exercises/shared/exercise-hint/services/
 import { SolutionEntryComponent } from 'app/exercises/shared/exercise-hint/shared/solution-entry.component';
 import { CodeHintContainerComponent } from 'app/exercises/shared/exercise-hint/shared/code-hint-container.component';
 import { ArtemisMarkdownModule } from 'app/shared/markdown.module';
-import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.module';
+import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
 
 @NgModule({
-    imports: [ArtemisSharedModule, ArtemisMarkdownModule, MonacoEditorModule],
+    imports: [ArtemisSharedModule, ArtemisMarkdownModule, MonacoEditorComponent],
     declarations: [SolutionEntryComponent, CodeHintContainerComponent, CastToCodeHintPipe],
     exports: [SolutionEntryComponent, CodeHintContainerComponent, CastToCodeHintPipe],
 })

src/main/webapp/app/shared/markdown-editor/markdown-editor.module.ts

@@ -5,11 +5,11 @@ import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatButtonModule } from '@angular/material/button';
 import { MarkdownEditorMonacoComponent } from 'app/shared/markdown-editor/monaco/markdown-editor-monaco.component';
-import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.module';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
 
 @NgModule({
-    imports: [ArtemisSharedModule, MonacoEditorModule, FormsModule, ArtemisColorSelectorModule, MatMenuModule, MatButtonModule, DragDropModule],
+    imports: [ArtemisSharedModule, MonacoEditorComponent, FormsModule, ArtemisColorSelectorModule, MatMenuModule, MatButtonModule, DragDropModule],
     declarations: [MarkdownEditorMonacoComponent],
     exports: [MarkdownEditorMonacoComponent],
 })

src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.ts

@@ -1,80 +1,65 @@
-import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation } from '@angular/core';
-import { Theme, ThemeService } from 'app/core/theme/theme.service';
+import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewEncapsulation, effect, inject, input, output } from '@angular/core';
 
 import * as monaco from 'monaco-editor';
-import { Subscription } from 'rxjs';
 import { Disposable } from 'app/shared/monaco-editor/model/actions/monaco-editor.util';
+import { MonacoEditorService } from './monaco-editor.service';
 
 export type MonacoEditorDiffText = { original: string; modified: string };
 @Component({
     selector: 'jhi-monaco-diff-editor',
     template: '',
+    standalone: true,
     styleUrls: ['monaco-diff-editor.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
 })
 export class MonacoDiffEditorComponent implements OnInit, OnDestroy {
     private _editor: monaco.editor.IStandaloneDiffEditor;
     monacoDiffEditorContainerElement: HTMLElement;
-    themeSubscription?: Subscription;
+
+    allowSplitView = input<boolean>(true);
+    onReadyForDisplayChange = output<boolean>();
+
+    /*
+     * Subscriptions and listeners that need to be disposed of when this component is destroyed.
+     */
     listeners: Disposable[] = [];
     resizeObserver?: ResizeObserver;
 
-    @Input()
-    set allowSplitView(value: boolean) {
-        this._editor.updateOptions({
-            renderSideBySide: value,
-        });
-    }
-
-    @Output()
-    onReadyForDisplayChange = new EventEmitter<boolean>();
+    /*
+     * Injected services and elements.
+     */
+    private readonly elementRef = inject(ElementRef);
+    private readonly renderer = inject(Renderer2);
+    private readonly monacoEditorService = inject(MonacoEditorService);
 
-    constructor(
-        private themeService: ThemeService,
-        elementRef: ElementRef,
-        renderer: Renderer2,
-    ) {
+    constructor() {
         /*
          * The constructor injects the editor along with its container into the empty template of this component.
          * This makes the editor available immediately (not just after ngOnInit), preventing errors when the methods
          * of this component are called.
          */
-        this.monacoDiffEditorContainerElement = renderer.createElement('div');
-        this._editor = monaco.editor.createDiffEditor(this.monacoDiffEditorContainerElement, {
-            glyphMargin: true,
-            minimap: { enabled: false },
-            readOnly: true,
-            renderSideBySide: true,
-            scrollBeyondLastLine: false,
-            stickyScroll: {
-                enabled: false,
-            },
-            renderOverviewRuler: false,
-            scrollbar: {
-                vertical: 'hidden',
-                handleMouseWheel: true,
-                alwaysConsumeMouseWheel: false,
-            },
-            hideUnchangedRegions: {
-                enabled: true,
-            },
-            fontSize: 12,
-        });
-        renderer.appendChild(elementRef.nativeElement, this.monacoDiffEditorContainerElement);
+        this.monacoDiffEditorContainerElement = this.renderer.createElement('div');
+        this._editor = this.monacoEditorService.createStandaloneDiffEditor(this.monacoDiffEditorContainerElement);
+        this.renderer.appendChild(this.elementRef.nativeElement, this.monacoDiffEditorContainerElement);
         this.setupDiffListener();
         this.setupContentHeightListeners();
+
+        effect(() => {
+            this._editor.updateOptions({
+                renderSideBySide: this.allowSplitView(),
+            });
+        });
     }
 
     ngOnInit(): void {
         this.resizeObserver = new ResizeObserver(() => {
             this.layout();
         });
         this.resizeObserver.observe(this.monacoDiffEditorContainerElement);
-        this.themeSubscription = this.themeService.getCurrentThemeObservable().subscribe((theme) => this.changeTheme(theme));
     }
 
     ngOnDestroy(): void {
-        this.themeSubscription?.unsubscribe();
         this.resizeObserver?.disconnect();
         this.listeners.forEach((listener) => {
             listener.dispose();
@@ -137,15 +122,6 @@ export class MonacoDiffEditorComponent implements OnInit, OnDestroy {
         this._editor.layout({ width, height });
     }
 
-    /**
-     * Sets the theme of all Monaco editors according to the Artemis theme.
-     * As of now, it is not possible to have two editors with different themes.
-     * @param artemisTheme The active Artemis theme.
-     */
-    changeTheme(artemisTheme: Theme): void {
-        monaco.editor.setTheme(artemisTheme === Theme.DARK ? 'vs-dark' : 'vs-light');
-    }
-
     /**
      * Updates the files displayed in this editor. When this happens, {@link onReadyForDisplayChange} will signal that the editor is not
      * ready to display the diff (as it must be computed first). This will later be change by the appropriate listener.