General: Replace the remaining markdown editors with 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.
• 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.

Motivation and Context

We want to remove Ace from Artemis. However, the Markdown Editor (except for communication and programming exercise problem statements) still uses Ace.

Description

Replaced every usage of the old markdown editor with Monaco:

• Updating text, file upload, and modeling exercises
• Legal documents (e.g. imprint)
• Standardized competencies and course competencies/prerequisites
• Exams and exam announcements
• Lectures and lecture text units
• Grading instructions (/ structured grading criteria)
• DnD and MC quiz questions

Added editor actions for the grading instructions (criterion, instruction, credits, description, scale, feedback, and usage count) and multiple choice / dnd answers (wrong, correct, hint, explanation). These generally follow the same logic of the original markdown editor.

Note: I will remove the remaining references to Ace / Commands / EditorMode ... in a follow-up PR where I remove Ace from Artemis.

Steps for Testing

Default markdown editor

Prerequisites:

• 1 Admin

Test the markdown editors. In particular, verify that your changes to the markdown text are saved and that you can see your changes in the preview.

Exercises

Update/Create...

• A text exercise
• A file upload exercise
• A modeling exercise

Administrator

Modify...

• The imprint (go to Server Administration > Imprint)
• Knowledge areas (click the 👁️ icon to edit) of standardized competencies (Server Administration > Standardized competencies) and standardized competencies

Exam

• Update/Create an exam
• Make a live announcement during an exam

Courses and competencies

• Update a course
• Update a competency in a course
• Update a lecture in a course
• Update a lecture in a course in guided mode
• Update text unit of a lecture

---

Special markdown editors

Grading instructions

Prerequisites:

• 1 Instructor

1. Create a new exercise (Text is the simplest). At the bottom of the page, add some grading instructions.
2. Check that the changes are reflected in the markdown (under "Edit as Text")
3. Check that changes in the markdown are reflected in the "Edit" view.
4. Save the exercise. Verify that your changes are saved.

Quiz exercises (DnD; MC)

Prerequisites:

• 1 Instructor
• 1 Student

1. As the instructor, create a new quiz. Set the quiz duration to 60-90s for convenience
2. Add a multiple choice question
3. Modify the question. Add answer options and add explanations / hints to the answer options. Add a hint or an explanation to an answer option
4. Try out the visual editor and see that the changes carry over to the markdown text
5. Add a drag and drop question
6. Add a background image and text items.
7. Modify the question's markdown text, e.g. by adding an explanation and changing the hint.
8. Save the quiz and click "Start quiz"
9. Participate in the quiz as a student
10. Check that the questions match your input (explanations are only visible after the quiz & the results are visible)
11. As the instructor, go back to the quiz and click "Re-evaluate". Check that it displays properly and e.g. set an answer option invalid.

Testserver States

Note

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

Review Progress

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)
markdown-editor-monaco.component.ts	94.57%	✅
markdown-editor-parsing.helper.ts	100%	✅
monaco-exercise-reference.action.ts	94.73%	✅
monaco-grading-credits.action.ts	100%	✅
monaco-grading-criterion.action.ts	100%	✅
monaco-grading-description.action.ts	100%	✅
monaco-grading-feedback.action.ts	100%	✅
monaco-grading-instruction.action.ts	100%	✅
monaco-grading-scale.action.ts	100%	✅
monaco-grading-usage-count.action.ts	100%	✅
monaco-editor-action.model.ts	94.38%	✅
monaco-editor-domain-action.model.ts	100%	✅
monaco-formula.action.ts	100%	✅
monaco-task.action.ts	100%	✅
monaco-test-case.action.ts	96%	✅
monaco-correct-multiple-choice-answer.action.ts	100%	✅
monaco-quiz-explanation.action.ts	100%	✅
monaco-quiz-hint.action.ts	100%	✅
monaco-wrong-multiple-choice-answer.action.ts	100%	✅
monaco-editor-option-preset.model.ts	100%	✅
monaco-editor-option.helper.ts	100%	✅
monaco-editor.component.ts	96.15%	✅

Screenshots

Examples below

Standardized competencies

Exam live announcements

Grading instructions

Quiz MC

Quiz DND

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Introduced a new markdown editor component for improved editing experience across various sections of the application.
  • Added initial height configuration for the markdown editor, enhancing user interface adaptability.

• Bug Fixes

  • Streamlined button enabling logic for better usability.
  • Updated event handling for markdown content changes to ensure accurate state management.

• Tests

  • Updated unit tests to reflect changes in the markdown editor component and its associated functionalities.

[coderabbitai]

Actionable comments posted: 1

[JohannesWt]

Code looks good in general just two small (optional) comments

[coderabbitai]

Actionable comments posted: 3

Outside diff range comments (1)

src/main/webapp/app/exercises/shared/structured-grading-criterion/grading-instructions-details/grading-instructions-details.component.ts (1)

Line range hint 136-153: Consider using template literals for string concatenation.

Using template literals can improve readability and maintainability.

- let markdownText = '';
- markdownText =
- MonacoGradingInstructionAction.IDENTIFIER +
- '\n' +
- '\t' +
- this.generateCreditsText(instruction) +
- '\n' +
- '\t' +
- this.generateGradingScaleText(instruction) +
- '\n' +
- '\t' +
- this.generateInstructionDescriptionText(instruction) +
- '\n' +
- '\t' +
- this.generateInstructionFeedback(instruction) +
- '\n' +
- '\t' +
- this.generateUsageCount(instruction) +
- '\n' +
- '\n';
+ let markdownText = `${MonacoGradingInstructionAction.IDENTIFIER}
+ \t${this.generateCreditsText(instruction)}
+ \t${this.generateGradingScaleText(instruction)}
+ \t${this.generateInstructionDescriptionText(instruction)}
+ \t${this.generateInstructionFeedback(instruction)}
+ \t${this.generateUsageCount(instruction)}
+ \n`;

[az108]

Code LGTM, thank you for the quick changes 👍

[JohannesWt]

Code 👍

[SimonEntholzer]

Tested markdown editors in imprint, exam and quiz exercises on TS3

[coolchock]

tested in testing session on ts3, works as expected 👍

[janthoXO]

Tested markdown editors in code of conduct, competencies/prerequesites, Standardized Competency on TS3