Development: Update monaco-editor to 0.52.0 (#9431)

angular.json

@@ -113,7 +113,7 @@
               },
               {
                 "glob": "**/*",
-                "input": "./node_modules/monaco-editor/min/vs",
+                "input": "./node_modules/monaco-editor/bundles/vs",
                 "output": "vs"
               }
             ],

package.json

@@ -58,7 +58,7 @@
         "jszip": "3.10.1",
         "lodash-es": "4.17.21",
         "mobile-drag-drop": "3.0.0-rc.0",
-        "monaco-editor": "0.51.0",
+        "monaco-editor": "0.52.0",
         "ngx-infinite-scroll": "18.0.0",
         "ngx-webstorage": "18.0.0",
         "papaparse": "5.4.1",

prebuild.mjs

@@ -5,10 +5,11 @@
  * - webpack.DefinePlugin and
  * - MergeJsonWebpackPlugin
  */
-import fs from "fs";
-import path from "path";
-import { hashElement } from "folder-hash";
-import { fileURLToPath } from "url";
+import fs from 'fs';
+import path from 'path';
+import { hashElement } from 'folder-hash';
+import { fileURLToPath } from 'url';
+import * as esbuild from 'esbuild';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -111,4 +112,25 @@ for (const group of groups) {
     }
 }
 
+/*
+ * The workers of the monaco editor must be bundled separately.
+ * Specialized workers are available in the vs/esm/language/ directory.
+ * Be sure to modify the MonacoConfig if you choose to add a worker here.
+ * For more details, refer to https://github.com/microsoft/monaco-editor/blob/main/samples/browser-esm-esbuild/build.js
+ */
+const workerEntryPoints = [
+    'vs/language/json/json.worker.js',
+    'vs/language/css/css.worker.js',
+    'vs/language/html/html.worker.js',
+    'vs/language/typescript/ts.worker.js',
+    'vs/editor/editor.worker.js'
+];
+await esbuild.build({
+    entryPoints: workerEntryPoints.map((entry) => `node_modules/monaco-editor/esm/${entry}`),
+    bundle: true,
+    format: 'esm',
+    outbase: 'node_modules/monaco-editor/esm',
+    outdir: 'node_modules/monaco-editor/bundles'
+});
+
 console.log("Pre-Build complete!");

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

@@ -1,19 +1,23 @@
 /**
  * Sets up the MonacoEnvironment for the monaco editor's service worker.
+ * See https://github.com/microsoft/monaco-editor/blob/main/samples/browser-esm-esbuild/index.js
  */
 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';
+        getWorkerUrl: (_moduleId: string, label: string): string => {
+            if (label === 'json') {
+                return './vs/language/json/json.worker.js';
+            }
+            if (label === 'css' || label === 'scss' || label === 'less') {
+                return './vs/language/css/css.worker.js';
+            }
+            if (label === 'html' || label === 'handlebars' || label === 'razor') {
+                return './vs/language/html/html.worker.js';
+            }
+            if (label === 'typescript' || label === 'javascript') {
+                return './vs/language/typescript/ts.worker.js';
+            }
+            return './vs/editor/editor.worker.js';
         },
     };
 }

src/main/webapp/app/shared/monaco-editor/model/actions/adapter/monaco-text-editor.adapter.ts

@@ -152,8 +152,8 @@ export class MonacoTextEditorAdapter implements TextEditor {
         return this.editor.getDomNode() ?? undefined;
     }
 
-    typeText(text: string) {
-        this.editor.trigger('MonacoTextEditorAdapter::typeText', 'type', { text });
+    triggerCompletion(): void {
+        this.editor.trigger('MonacoTextEditorAdapter::triggerCompletion', 'editor.action.triggerSuggest', {});
     }
 
     getTextAtRange(range: TextEditorRange): string {

src/main/webapp/app/shared/monaco-editor/model/actions/adapter/text-editor.interface.ts

@@ -42,10 +42,9 @@ export interface TextEditor {
     getDomNode(): HTMLElement | undefined;
 
     /**
-     * Types the given text into the editor as if the user had typed it, e.g. to trigger a completer registered in the editor.
-     * @param text The text to type into the editor.
+     * Triggers the completion in the editor, e.g. by showing a widget.
      */
-    typeText(text: string): void;
+    triggerCompletion(): void;
 
     /**
      * Retrieves the text at the given range in the editor.

src/main/webapp/app/shared/monaco-editor/model/actions/communication/channel-reference.action.ts

@@ -44,11 +44,12 @@ export class ChannelReferenceAction extends TextEditorAction {
     }
 
     /**
-     * Types the text '#' into the editor and focuses it. This will trigger the completion provider to show the available channels.
+     * Inserts the text '#' into the editor and focuses it. This method will trigger the completion provider to show the available channels.
      * @param editor The editor to type the text into.
      */
     run(editor: TextEditor) {
-        this.typeText(editor, ChannelReferenceAction.DEFAULT_INSERT_TEXT);
+        this.replaceTextAtCurrentSelection(editor, ChannelReferenceAction.DEFAULT_INSERT_TEXT);
+        editor.triggerCompletion();
         editor.focus();
     }
 

src/main/webapp/app/shared/monaco-editor/model/actions/communication/exercise-reference.action.ts

@@ -52,11 +52,12 @@ export class ExerciseReferenceAction extends TextEditorDomainActionWithOptions {
     }
 
     /**
-     * Types the text '/exercise' into the editor and focuses it. This will trigger the completion provider to show the available exercises.
-     * @param editor The editor to type the text into.
+     * Inserts the text '/exercise' into the editor and focuses it. This method will trigger the completion provider to show the available exercises.
+     * @param editor The editor to insert the text into.
      */
     run(editor: TextEditor): void {
-        this.typeText(editor, ExerciseReferenceAction.DEFAULT_INSERT_TEXT);
+        this.replaceTextAtCurrentSelection(editor, ExerciseReferenceAction.DEFAULT_INSERT_TEXT);
+        editor.triggerCompletion();
         editor.focus();
     }
 

src/main/webapp/app/shared/monaco-editor/model/actions/communication/user-mention.action.ts

@@ -45,11 +45,12 @@ export class UserMentionAction extends TextEditorAction {
     }
 
     /**
-     * Types the text '@' into the editor and focuses it. This will trigger the completion provider to show the available users.
-     * @param editor The editor to type the text into.
+     * Inserts the text '@' into the editor and focuses it. This method will trigger the completion provider to show the available users.
+     * @param editor The editor to insert the text into.
      */
     run(editor: TextEditor) {
-        this.typeText(editor, UserMentionAction.DEFAULT_INSERT_TEXT);
+        this.replaceTextAtCurrentSelection(editor, UserMentionAction.DEFAULT_INSERT_TEXT);
+        editor.triggerCompletion();
         editor.focus();
     }
 

src/main/webapp/app/shared/monaco-editor/model/actions/text-editor-action.model.ts

@@ -148,15 +148,6 @@ export abstract class TextEditorAction implements Disposable {
         return text.startsWith(openDelimiter) && text.endsWith(closeDelimiter) && text.length >= openDelimiter.length + closeDelimiter.length;
     }
 
-    /**
-     * Types the given text in the editor at the current cursor position. You can use this e.g. to trigger a suggestion.
-     * @param editor The editor to type the text in.
-     * @param text The text to type.
-     */
-    typeText(editor: TextEditor, text: string): void {
-        editor.typeText(text);
-    }
-
     /**
      * Replaces the text at the current selection with the given text. If there is no selection, the text is inserted at the current cursor position.
      * @param editor The editor to replace the text in.