Development: Change the online code editor for students to monaco

angular.json

@@ -60,6 +60,9 @@
                 "base": "build/resources/main/static/",
                 "browser": ""
             },
+            "loader": {
+                ".ttf": "file"
+            },
             "index": "src/main/webapp/index.html",
             "browser": "src/main/webapp/app/app.main.ts",
             "polyfills": [
@@ -108,6 +111,11 @@
                 "glob": "**/*",
                 "input": "src/main/webapp/swagger-ui/",
                 "output": "swagger-ui"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/monaco-editor/min/vs",
+                "output": "vs"
               }
             ],
             "styles": [
@@ -116,7 +124,8 @@
                 "bundleName": "theme-dark",
                 "input": "src/main/webapp/content/scss/themes/theme-dark.scss",
                 "inject": false
-              }
+              },
+              "node_modules/monaco-editor/min/vs/editor/editor.main.css"
             ],
             "scripts": []
           },

jest.config.js

@@ -42,6 +42,7 @@ const esModules = [
     'franc-min',
     'internmap',
     'lodash-es',
+    'monaco-editor',
     'n-gram',
     'ngx-device-detector',
     'ngx-infinite-scroll',
@@ -148,5 +149,7 @@ module.exports = {
         '@state/(.*)': '<rootDir>/src/app/state/$1',
         '^lodash-es$': 'lodash',
         '@sentry/angular-ivy': '<rootDir>/node_modules/@sentry/angular-ivy/bundles/sentry-angular-ivy.umd.js',
+        '\\.css$': '<rootDir>/stub.js',
+        '^monaco-editor$': '<rootDir>/node_modules/monaco-editor/esm/vs/editor/editor.api.js',
     },
 };

package.json

@@ -42,6 +42,7 @@
         "@sentry/types": "7.109.0",
         "@swimlane/ngx-charts": "20.5.0",
         "@swimlane/ngx-graph": "8.3.0",
+        "@vscode/codicons": "0.0.35",
         "ace-builds": "1.32.9",
         "bootstrap": "5.3.3",
         "brace": "0.11.1",
@@ -60,6 +61,7 @@
         "jszip": "3.10.1",
         "lodash-es": "4.17.21",
         "mobile-drag-drop": "3.0.0-rc.0",
+        "monaco-editor": "0.46.0",
         "ngx-infinite-scroll": "17.0.0",
         "ngx-webstorage": "13.0.1",
         "papaparse": "5.4.1",

src/main/webapp/app/app.main.ts

@@ -5,6 +5,7 @@ import 'app/shared/util/string.extension';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { ProdConfig } from './core/config/prod.config';
 import { ArtemisAppModule } from './app.module';
+import { MonacoConfig } from 'app/core/config/monaco.config';
 
 ProdConfig();
 
@@ -15,6 +16,8 @@ if (module['hot']) {
     }
 }
 
+MonacoConfig();
+
 platformBrowserDynamic()
     .bootstrapModule(ArtemisAppModule, { preserveWhitespaces: true })
     .then(() => {})

src/main/webapp/app/core/config/monaco.config.ts

@@ -0,0 +1,19 @@
+/**
+ * Sets up the MonacoEnvironment for the monaco editor's service worker.
+ */
+export function MonacoConfig() {
+    self.MonacoEnvironment = {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        getWorkerUrl: function (workerId: string, label: string) {
+            /*
+             * This is the AMD-based service worker, which comes bundled with a few special workers for selected languages.
+             * (e.g.: javascript, typescript, html, css)
+             *
+             * It is also possible to use an ESM-based approach, which requires a little more setup and case distinctions in this method.
+             * At the moment, it seems that the ESM-based approaches are incompatible with the Artemis client, as they would require custom builders.
+             * Support for custom builders was removed in #6546.
+             */
+            return 'vs/base/worker/workerMain.js';
+        },
+    };
+}

src/main/webapp/app/entities/build-log.model.ts

@@ -67,7 +67,7 @@ export class BuildLogEntryArray extends Array<BuildLogEntry> {
         return Array.from(
             this
                 // Parse build logs
-                .map(({ log, time }) => ({ log: log.match(errorLogRegex), time }))
+                .map(({ log, time }) => ({ log: log.split('\n', 1)[0].trim().match(errorLogRegex), time }))
                 // Remove entries that could not be parsed, are too short or not errors
                 .filter(({ log }: { log: ParsedLogEntry | null; time: string }) => {
                     // Java logs do not always contain "ERROR"

src/main/webapp/app/exam/participate/exercises/programming/programming-exam-submission.component.html

@@ -11,6 +11,7 @@ <h4 class="mb-0 me-1">Online Code Editor</h4>
             }
         </div>
         <jhi-code-editor-container
+            [useMonacoEditor]="true"
             [editable]="!repositoryIsLocked"
             [participation]="studentParticipation"
             [showEditorInstructions]="showEditorInstructions"

src/main/webapp/app/exercises/programming/assess/code-editor-tutor-assessment-container.component.ts

@@ -301,7 +301,7 @@ export class CodeEditorTutorAssessmentContainerComponent implements OnInit, OnDe
      * @param selectedFile name of the file which is currently displayed
      */
     onFileLoad(selectedFile: string): void {
-        if (selectedFile && this.codeEditorContainer?.selectedFile) {
+        if (selectedFile && this.codeEditorContainer?.selectedFile && this.codeEditorContainer.aceEditor) {
             // When the selectedFile is not part of the template, then this is a new file and all lines in code editor are highlighted
             if (!this.templateFileSession[selectedFile]) {
                 const lastLine = this.codeEditorContainer.aceEditor.editorSession.getLength() - 1;
@@ -337,7 +337,9 @@ export class CodeEditorTutorAssessmentContainerComponent implements OnInit, OnDe
     }
 
     private highlightLines(firstLine: number, lastLine: number) {
-        this.codeEditorContainer.aceEditor.highlightLines(firstLine, lastLine, 'diff-newLine', 'gutter-diff-newLine');
+        if (this.codeEditorContainer?.aceEditor) {
+            this.codeEditorContainer.aceEditor.highlightLines(firstLine, lastLine, 'diff-newLine', 'gutter-diff-newLine');
+        }
     }
 
     /**

src/main/webapp/app/exercises/programming/manage/code-editor/code-editor-instructor-and-editor-container.component.ts

@@ -123,7 +123,7 @@ export class CodeEditorInstructorAndEditorContainerComponent extends CodeEditorI
                 for (const path of reloadPaths) {
                     this.codeEditorContainer.fileBrowser.handleFileChange(new CreateFileChange(FileType.FILE, path));
                 }
-                this.codeEditorContainer.aceEditor.forceReloadAll(reloadPaths);
+                this.codeEditorContainer.aceEditor?.forceReloadAll(reloadPaths);
             }
         }
         const widget = this.chatbotButton?.dialogRef?.componentRef?.instance; // Access the widget via the button even if it is not open

src/main/webapp/app/exercises/programming/participate/code-editor-student-container.component.html

@@ -24,6 +24,7 @@
     }
     @if (!loadingParticipation && !participationCouldNotBeFetched) {
         <jhi-code-editor-container
+            [useMonacoEditor]="true"
             [editable]="!repositoryIsLocked"
             [participation]="participation"
             [showEditorInstructions]="showEditorInstructions"

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

@@ -23,6 +23,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';
 
 @NgModule({
     imports: [
@@ -33,6 +36,8 @@ import { CodeEditorFileBrowserBadgeComponent } from 'app/exercises/programming/s
         TreeviewModule.forRoot(),
         ArtemisProgrammingExerciseInstructionsEditorModule,
         ArtemisProgrammingManualAssessmentModule,
+        MonacoEditorModule,
+        ArtemisSharedComponentModule,
     ],
     declarations: [
         CodeEditorGridComponent,
@@ -52,6 +57,7 @@ import { CodeEditorFileBrowserBadgeComponent } from 'app/exercises/programming/s
         CodeEditorConfirmRefreshModalComponent,
         CodeEditorContainerComponent,
         CodeEditorHeaderComponent,
+        CodeEditorMonacoComponent,
     ],
     exports: [
         CodeEditorGridComponent,
@@ -63,6 +69,7 @@ import { CodeEditorFileBrowserBadgeComponent } from 'app/exercises/programming/s
         CodeEditorBuildOutputComponent,
         CodeEditorContainerComponent,
         CodeEditorHeaderComponent,
+        CodeEditorMonacoComponent,
     ],
     providers: [],
 })

src/main/webapp/app/exercises/programming/shared/code-editor/container/code-editor-container.component.html

@@ -39,27 +39,43 @@ <h4 class="editor-title"><ng-content select="[editorTitle]" /></h4>
         (onError)="onError($event)"
         (onToggleCollapse)="onToggleCollapse($event, CollapsableCodeEditorElement.FileBrowser)"
     />
-    <jhi-code-editor-ace
-        editorCenter
-        [selectedFile]="selectedFile!"
-        [sessionId]="participation?.id ?? 'test'"
-        [annotations]="annotations"
-        [commitState]="commitState"
-        [editorState]="editorState"
-        [feedbacks]="participation?.results?.[0]?.feedbacks ?? []"
-        [feedbackSuggestions]="feedbackSuggestions"
-        [readOnlyManualFeedback]="readOnlyManualFeedback"
-        [isTutorAssessment]="isTutorAssessment"
-        [highlightDifferences]="highlightDifferences"
-        [course]="course"
-        [disableActions]="!editable"
-        (onFileContentChange)="onFileContentChange($event)"
-        (onUpdateFeedback)="onUpdateFeedback.emit($event)"
-        (onAcceptSuggestion)="onAcceptSuggestion.emit($event)"
-        (onDiscardSuggestion)="onDiscardSuggestion.emit($event)"
-        (onError)="onError($event)"
-        (onFileLoad)="fileLoad($event)"
-    />
+    <ng-container editorCenter>
+        @if (!useMonacoEditor) {
+            <jhi-code-editor-ace
+                [selectedFile]="selectedFile!"
+                [sessionId]="participation?.id ?? 'test'"
+                [annotations]="annotations"
+                [commitState]="commitState"
+                [editorState]="editorState"
+                [feedbacks]="participation?.results?.[0]?.feedbacks ?? []"
+                [feedbackSuggestions]="feedbackSuggestions"
+                [readOnlyManualFeedback]="readOnlyManualFeedback"
+                [isTutorAssessment]="isTutorAssessment"
+                [highlightDifferences]="highlightDifferences"
+                [course]="course"
+                [disableActions]="!editable"
+                (onFileContentChange)="onFileContentChange($event)"
+                (onUpdateFeedback)="onUpdateFeedback.emit($event)"
+                (onAcceptSuggestion)="onAcceptSuggestion.emit($event)"
+                (onDiscardSuggestion)="onDiscardSuggestion.emit($event)"
+                (onError)="onError($event)"
+                (onFileLoad)="fileLoad($event)"
+            />
+        } @else {
+            <jhi-code-editor-monaco
+                #codeEditorMonaco
+                [commitState]="commitState"
+                [editorState]="editorState"
+                [course]="course"
+                [feedbacks]="participation?.results?.[0]?.feedbacks ?? []"
+                [isTutorAssessment]="isTutorAssessment"
+                [selectedFile]="selectedFile"
+                [buildAnnotations]="annotations"
+                [sessionId]="participation?.id ?? 'test'"
+                (onFileContentChange)="onFileContentChange($event)"
+            />
+        }
+    </ng-container>
     <ng-container editorSidebarRight>
         @if (showEditorInstructions) {
             <jhi-code-editor-instructions

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

@@ -26,6 +26,7 @@ import { CodeEditorInstructionsComponent } from 'app/exercises/programming/share
 import { Feedback } from 'app/entities/feedback.model';
 import { Course } from 'app/entities/course.model';
 import { ConnectionError } from 'app/exercises/programming/shared/code-editor/service/code-editor-repository.service';
+import { CodeEditorMonacoComponent } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
 
 export enum CollapsableCodeEditorElement {
     FileBrowser,
@@ -40,13 +41,15 @@ export enum CollapsableCodeEditorElement {
 })
 export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeactivate {
     readonly CommitState = CommitState;
+    readonly EditorState = EditorState;
     readonly CollapsableCodeEditorElement = CollapsableCodeEditorElement;
     @ViewChild(CodeEditorGridComponent, { static: false }) grid: CodeEditorGridComponent;
 
     @ViewChild(CodeEditorFileBrowserComponent, { static: false }) fileBrowser: CodeEditorFileBrowserComponent;
     @ViewChild(CodeEditorActionsComponent, { static: false }) actions: CodeEditorActionsComponent;
     @ViewChild(CodeEditorBuildOutputComponent, { static: false }) buildOutput: CodeEditorBuildOutputComponent;
-    @ViewChild(CodeEditorAceComponent, { static: false }) aceEditor: CodeEditorAceComponent;
+    @ViewChild(CodeEditorAceComponent, { static: false }) aceEditor?: CodeEditorAceComponent;
+    @ViewChild('codeEditorMonaco', { static: false }) monacoEditor?: CodeEditorMonacoComponent;
     @ViewChild(CodeEditorInstructionsComponent, { static: false }) instructions: CodeEditorInstructionsComponent;
 
     @Input()
@@ -67,6 +70,8 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
     highlightDifferences: boolean;
     @Input()
     disableAutoSave = false;
+    @Input()
+    useMonacoEditor = false;
 
     @Output()
     onResizeEditorInstructions = new EventEmitter<void>();
@@ -196,7 +201,9 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
         if (_isEmpty(this.unsavedFiles) && this.editorState === EditorState.UNSAVED_CHANGES) {
             this.editorState = EditorState.CLEAN;
         }
-        this.aceEditor.onFileChange(fileChange);
+        this.monacoEditor?.onFileChange(fileChange);
+        this.aceEditor?.onFileChange(fileChange);
+
         this.onFileChanged.emit();
     }
 
@@ -218,7 +225,8 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
         if (errorFiles.length) {
             this.onError('saveFailed');
         }
-        this.aceEditor.storeAnnotations(savedFiles);
+        this.aceEditor?.storeAnnotations(savedFiles);
+        this.monacoEditor?.storeAnnotations(savedFiles);
     }
 
     /**
@@ -280,7 +288,7 @@ export class CodeEditorContainerComponent implements OnChanges, ComponentCanDeac
         if (type === ResizeType.SIDEBAR_RIGHT || type === ResizeType.MAIN_BOTTOM) {
             this.onResizeEditorInstructions.emit();
         }
-        if (type === ResizeType.SIDEBAR_LEFT || type === ResizeType.SIDEBAR_RIGHT || type === ResizeType.MAIN_BOTTOM) {
+        if (this.aceEditor && (type === ResizeType.SIDEBAR_LEFT || type === ResizeType.SIDEBAR_RIGHT || type === ResizeType.MAIN_BOTTOM)) {
             this.aceEditor.editor.getEditor().resize();
         }
     }

src/main/webapp/app/exercises/programming/shared/code-editor/header/code-editor-header.component.html

@@ -6,15 +6,17 @@ <h3 class="mt-1 card-title">
             <fa-icon [icon]="faCircleNotch" [spin]="true" class="ms-2" title="{{ 'artemisApp.editor.loadingFile' | artemisTranslate }}" />
         }
     </h3>
-    <div ngbDropdown class="ms-2" placement="bottom-end auto" [autoClose]="'outside'" aria-label="Code Editor Settings">
-        <button ngbDropdownToggle class="btn btn-sm btn-primary" type="button" id="dropdownCodeEditorSettings" aria-expanded="false">
-            <fa-icon [icon]="faGear" />
-        </button>
-        <div ngbDropdownMenu aria-labelledby="dropdownCodeEditorSettings">
-            <div ngbDropdownItem class="d-flex">
-                <span class="dropdown-item" jhiTranslate="artemisApp.editor.tabSize"></span>
-                <input class="form-control-sm" type="number" min="1" [max]="MAX_TAB_SIZE" step="1" size="1" [(ngModel)]="tabSize" (change)="validateTabSize()" />
+    @if (showTabSizeSelector) {
+        <div ngbDropdown class="ms-2" placement="bottom-end auto" [autoClose]="'outside'" aria-label="Code Editor Settings">
+            <button ngbDropdownToggle class="btn btn-sm btn-primary" type="button" id="dropdownCodeEditorSettings" aria-expanded="false">
+                <fa-icon [icon]="faGear" />
+            </button>
+            <div ngbDropdownMenu aria-labelledby="dropdownCodeEditorSettings">
+                <div ngbDropdownItem class="d-flex">
+                    <span class="dropdown-item" jhiTranslate="artemisApp.editor.tabSize"></span>
+                    <input class="form-control-sm" type="number" min="1" [max]="MAX_TAB_SIZE" step="1" size="1" [(ngModel)]="tabSize" (change)="validateTabSize()" />
+                </div>
             </div>
         </div>
-    </div>
+    }
 </div>

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

@@ -14,6 +14,9 @@ export class CodeEditorHeaderComponent {
     @Input()
     isLoading: boolean;
 
+    @Input()
+    showTabSizeSelector = true;
+
     @Output()
     tabSizeChanged = new EventEmitter<number>();