Development: Change the online code editor for students to monaco

[pzdr7]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• I chose a title conforming to the naming conventions for pull requests.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data.
• I strictly followed the client coding and design guidelines.
• Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
• I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
• I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.
• I translated all newly inserted strings into English and German.

Changes affecting Programming Exercises

• High priority: I tested all changes and their related features with all corresponding user types on a test server configured with the integrated lifecycle setup (LocalVC and LocalCI).

Motivation and Context

The existing implementation of the code editor suffers from usability and code quality issues, e.g.

• use of the any type for the editor instance, which is exposed to several other components
• lack of common text editor features, e.g. find/replace

This PR is the first step towards replacing the code editor (and all other editors that rely on Ace) with the Monaco editor. The goal is to have a working version of the Monaco editor within the existing implementation.

Description

• Introduces the Monaco Editor (and Codicons for icons) dependency into the client.
• Uses the Monaco editor in three views for students:
  • When editing a submission for a programming exercise.
  • When editing a submission for a programming exercise in an exam.
  • When viewing a manual assessment for a programming exercise.
  • Other views are not affected and will be added in subsequent PRs (e.g. making manual assessments or viewing your repository)

Compared to the Ace implementation, the actual editor instance is now restricted to the MonacoEditorComponent and its elements. Furthermore, the new implementation does not rely on the any type.

Within the new editor, the build annotations are now fixed in place and are marked as outdated once the repository has changed.

Known issues:

• The current layout requires a workaround (max-width/height 99%) for resizing the editor using the grid view. The layout will be replaced in a future PR, which should resolve this issue.

Steps for Testing

Prerequisites:

• 1 Instructor
• 1 Student
• 1 Programming exercise with manual feedback and the Online Code Editor enabled

Making a submission

1. Log in to Artemis as the student
2. Navigate to the programming exercise
3. Submit a solution with a syntax error; ensure that the error is highlighted correctly in the editor once the result arrives.
4. Edit and submit the submission. Make sure to create/rename/delete some files as well.

Viewing manual feedback

6. Log in as the instructor and set the due date of the exercise to the past
7. Provide a manual assessment (this still uses the old code editor)
8. Log in as the student
9. Open the reviewed submission
10. Verify that all feedback is displayed in the correct location (and that you cannot edit the submission).

Exam Mode Testing

Prerequisites:

• 1 Student
• 1 Exam with a programming exercise (with the Online Code Editor enabled)

1. Log in to Artemis
2. Participate in the exam as a student
3. Navigate to the programming exercise
4. Use the code editor to edit your submission and submit it. Make sure to create/rename/delete some files as well.
5. When the exam is over, verify that your submission was uploaded correctly.

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked

Review Progress

Performance Review

• I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Exam Mode Test

• Test 1
• Test 2

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)
code-editor-monaco.component.ts	91.76%	✅
monaco-code-editor-element.model.ts	82.35%	✅
monaco-editor-build-annotation.model.ts	100%	✅
monaco-editor-glyph-margin-widget.model.ts	100%	✅
monaco-editor-inline-widget.model.ts	100%	✅
monaco-editor-overlay-widget.model.ts	100%	✅
monaco-editor-view-zone.model.ts	90%	✅
monaco-editor.component.ts	96.1%	✅

Screenshots

General UI

Dark mode:

Light mode:

Build annotations

After building:

After changing the files:

Tutor feedback

Summary by CodeRabbit

• New Features

  • Integrated Monaco editor for enhanced code editing experience.
  • Added ability to render build annotations (errors, warnings) in the Monaco editor.
  • Introduced styling for Monaco editor in both default and dark themes.

• Enhancements

  • Improved error log parsing logic for build logs.
  • Added conditional rendering for tab size selector in code editor settings.

• Documentation

  • Updated documentation to include Monaco editor configuration and setup.

• Tests

  • Added comprehensive tests for Monaco editor components and functionalities.

• Style

  • Introduced new styling variables and stylesheets for Monaco editor customization.

• Chores

  • Configured Jest to support Monaco editor testing environment.

[coolchock]

tested on ts3, works as described

[undernagruzez]

Deployed the latest version on ts3
Works as intended, the monaco editor is the default editor and default operations can be performed