WIP: feat(angular): add groovy in angular

verify/angular/package.json

@@ -20,7 +20,26 @@
     "monaco-editor-wrapper": "~6.3.0",
     "monaco-languageclient-examples": "~2025.2.5",
     "rxjs": "~7.8.1",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.14.10",
+    "@codingame/monaco-vscode-configuration-service-override": "~10.1.1",
+    "@codingame/monaco-vscode-cpp-default-extension": "~10.1.1",
+    "@codingame/monaco-vscode-files-service-override": "~10.1.1",
+    "@codingame/monaco-vscode-groovy-default-extension": "~10.1.1",
+    "@codingame/monaco-vscode-keybindings-service-override": "~10.1.1",
+    "@codingame/monaco-vscode-lifecycle-service-override": "~10.1.1",
+    "@codingame/monaco-vscode-localization-service-override": "~10.1.1",
+    "@codingame/monaco-vscode-java-default-extension": "~10.1.1",
+    "@codingame/monaco-vscode-javascript-default-extension": "~10.1.1",
+    "@codingame/monaco-vscode-json-default-extension": "~10.1.1",
+    "@codingame/monaco-vscode-python-default-extension": "~10.1.1",
+    "@codingame/monaco-vscode-standalone-languages": "~10.1.1",
+    "@codingame/monaco-vscode-standalone-typescript-language-features": "~10.1.1",
+    "@codingame/monaco-vscode-standalone-json-language-features": "~10.1.1",
+    "@codingame/monaco-vscode-textmate-service-override": "~10.1.1",
+    "@codingame/monaco-vscode-theme-defaults-default-extension": "~10.1.1",
+    "@codingame/monaco-vscode-theme-service-override": "~10.1.1",
+    "@codingame/monaco-vscode-typescript-basics-default-extension": "~10.1.1",
+    "@codingame/monaco-vscode-typescript-language-features-default-extension": "~10.1.1"
   },
   "devDependencies": {
     "@angular-builders/custom-esbuild": "~18.0.0",

verify/angular/src/app/app.component.html

@@ -1,11 +1,20 @@
-<h2>Angular Monaco Editor demo with saving code to a mock HTTP server </h2>
-<div class="editor-container">
-    <monaco-angular-wrapper
-        [wrapperConfig]="wrapperConfig()"
-        [monacoEditorId]="editorId"
-        [editorInlineStyle]="editorInlineStyle()"
-        (onTextChanged)="onTextChanged($event)"
-    ></monaco-angular-wrapper>
-
-    <button class="save-button" (click)="save()">Save</button>
+<h2 class="text-2xl font-bold m-6">Angular Monaco Editor Demo</h2>
+
+<div class="flex justify-between space-x-4"> <!-- Flex container to hold both editors -->
+
+
+  <!-- Groovy Editor -->
+  <div class="editor-container flex-1 p-4 border rounded shadow-lg bg-white">
+      <h1 class="text-xl font-semibold mb-4">Groovy Editor</h1>
+      <monaco-angular-wrapper
+          [wrapperConfig]="groovyWrapperConfig()"
+          [monacoEditorId]="groovyEditorId"
+          [editorInlineStyle]="editorInlineStyle()"
+          (onTextChanged)="onTextChanged($event)"
+      ></monaco-angular-wrapper>
+
+      <button class="save-button mt-4 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400">
+          Save
+      </button>
+  </div>
 </div>

verify/angular/src/app/app.component.ts

@@ -6,7 +6,6 @@
 import { AfterViewInit, Component, inject, signal } from '@angular/core';
 import { WrapperConfig } from 'monaco-editor-wrapper';
 import { MonacoAngularWrapperComponent } from '../monaco-angular-wrapper/monaco-angular-wrapper.component';
-import { buildJsonClientUserConfig } from 'monaco-languageclient-examples/json-client';
 import { SaveCodeService } from '../save-code.service';
 import { firstValueFrom } from 'rxjs';
 @Component({
@@ -19,9 +18,10 @@ import { firstValueFrom } from 'rxjs';
 export class AppComponent implements AfterViewInit {
     private saveCodeService = inject(SaveCodeService);
     wrapperConfig = signal<WrapperConfig | undefined>(undefined); // this can be updated at runtime
-
+    groovyWrapperConfig = signal<WrapperConfig | undefined>(undefined); // this can be updated at runtime
     title = 'angular demo for saving code';
     editorId = 'monaco-editor-root'; // this can be parameterized or it can be in a loop to support multiple editors
+    groovyEditorId = 'monaco-editor-groovy'; // this can be parameterized or it can be in a loop to support multiple editors
     editorInlineStyle = signal('height: 50vh;');
     readonly codeText = signal('');
 

verify/angular/src/config/groovy.config.ts

@@ -0,0 +1,51 @@
+/* --------------------------------------------------------------------------------------------
+ * Copyright (c) 2024 TypeFox and others.
+ * Licensed under the MIT License. See LICENSE in the package root for license information.
+ * ------------------------------------------------------------------------------------------ */
+
+import { LogLevel } from 'vscode';
+import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
+import { WrapperConfig } from 'monaco-editor-wrapper';
+import { configureMonacoWorkers } from 'monaco-languageclient-examples';
+export function getGroovyClientConfig(htmlContainerId: string) {
+    const userConfig: WrapperConfig = {
+        logLevel: LogLevel.Debug,
+        vscodeApiConfig: {
+            userServices: {
+                ...getKeybindingsServiceOverride(),
+            },
+            userConfiguration: {
+                json: JSON.stringify({
+                    'workbench.colorTheme': 'Default Dark Modern',
+                    'editor.guides.bracketPairsHorizontal': 'active',
+                    'editor.wordBasedSuggestions': 'off',
+                    'editor.experimental.asyncTokenization': true,
+                }),
+            },
+        },
+        editorAppConfig: {
+            $type: 'extended',
+            codeResources: {
+                main: {
+                    text: '',
+                    fileExt: 'groovy',
+                },
+            },
+            useDiffEditor: false,
+            monacoWorkerFactory: configureMonacoWorkers,
+            htmlContainer: document.getElementById(htmlContainerId)!,
+        },
+        languageClientConfigs: {
+            groovy: {
+                languageId: 'groovy',
+                connection: {
+                    options: {
+                        $type: 'WebSocketUrl',
+                        url: 'ws://localhost:30002/groovy',
+                    },
+                },
+            },
+        },
+    };
+    return userConfig;
+}

verify/angular/src/index.html

@@ -2,9 +2,10 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>HelloWorld</title>
+  <title>Angular Wrapper Demo</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body>
   <app-root></app-root>