new changes

angular.json

@@ -51,7 +51,7 @@
               {
                 "glob": "**/*",
                 "input": "node_modules/monaco-editor",
-                "output": "/assets/monaco"
+                "output": "./assets/monaco/"
               },
               "src/favicon.ico",
               "src/assets"
@@ -60,7 +60,8 @@
               "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+            ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -6637,9 +6637,9 @@
       "dev": true
     },
     "monaco-editor": {
-      "version": "0.36.1",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.36.1.tgz",
-      "integrity": "sha512-/CaclMHKQ3A6rnzBzOADfwdSJ25BFoFT0Emxsc4zYVyav5SkK9iA6lEtIeuN/oRYbwPgviJT+t3l+sjFa28jYg=="
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.34.1.tgz",
+      "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ=="
     },
     "ms": {
       "version": "2.1.2",

package.json

@@ -21,7 +21,7 @@
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
     "bootstrap": "^5.2.3",
-    "monaco-editor": "^0.36.1",
+    "monaco-editor": "^0.34.1",
     "ngx-monaco-editor-v2": "^15.0.1",
     "primeicons": "^6.0.1",
     "primeng": "^15.2.0",

src/app/app-routing.module.ts

@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-const routes: Routes = [];
+const routes: Routes = [
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/pages/monaco-editor-test/monaco-editor-test.module.ts

@@ -4,8 +4,8 @@ import { CommonModule } from '@angular/common';
 import { MonacoEditorTestRoutingModule } from './monaco-editor-test-routing.module';
 import { MonacoEditorTestComponent } from './monaco-editor-test/monaco-editor-test.component';
 import { FormsModule } from '@angular/forms';
-import { MonacoEditorModule} from 'ngx-monaco-editor-v2'
-import { monacoConfig } from 'src/monaco-config';
+import { MonacoEditorModule} from 'ngx-monaco-editor-v2';
+import { monacoConfig } from 'src/monaco-editor/monaco-editor-config';
 
 
 @NgModule({

src/app/pages/monaco-editor-test/monaco-editor-test/monaco-editor-test.component.html

@@ -1,3 +1,10 @@
 <h1></h1>
-<ngx-monaco-editor class="code-editor" [options]="options" [(ngModel)]="java_placeholder"></ngx-monaco-editor>
-  
+<div style="height: 500px">
+    <ngx-monaco-editor 
+        style="height: 100%" 
+        [options]="options"
+        [model]="model"
+        [(ngModel)]="html_placeholder"
+        (onInit)="onInit($event)">
+    </ngx-monaco-editor>
+</div>

src/app/pages/monaco-editor-test/monaco-editor-test/monaco-editor-test.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import {NgxEditorModel } from 'ngx-monaco-editor-v2'
 
 @Component({
   selector: 'app-monaco-editor',
@@ -6,26 +7,23 @@ import { Component } from '@angular/core';
   styleUrls: ['./monaco-editor-test.component.scss']
 })
 export class MonacoEditorTestComponent{
-    
-  language: string = 'java';
-  theme: string = 'vs-dark';
-
-    options = {
-      theme:this.theme,
-      language: this.language,
-      automaticLayout: true,
-      quickSuggestions:true,
-      wordBasedSuggestions:true
 
-    };
-  js_placeholder: string=
-  `
+  onInit(editor:any) {
+    let line = editor.getPosition();
+    console.log(line);
+  }
+     
+  languages = ['java','csharp','python','html'];
+  theme: string = 'vs-dark';
+    
+  ts_placeholder: string=
+  `//typescript placeholder function
   function printHello () {
     console.log("Hello world!");
   }`;
   
   java_placeholder: string = 
-  `
+  `//java placeholder class
   public class TestHelloWorld {
     public static void main (String [] args){
       System.out.println("Hello World");
@@ -33,7 +31,7 @@ export class MonacoEditorTestComponent{
   }`;
 
   csharp_placeholder: string = 
-  `
+  `//csharp placeholder class
   using System;
   namespace Demo
   {
@@ -44,9 +42,34 @@ export class MonacoEditorTestComponent{
   }`;
   json_placeholder: string ='';
 
-  onInit(editor: { getPosition: () => any; }) {
-    let line = editor.getPosition();
-    console.log(line);
+  html_placeholder: string =`
+  <html>
+    <title>Monaco editor integration</title>
+    <body>
+      <!-- the body of the page -->
+    </body>
+  </html>`;
+  css_placeholder: string ='';
+
+  python_placeholder: string = `
+  class ClassName {
+    __init__(){}
+    def method() {
+
+    }
+  }`;
+
+  options = {
+    theme:this.theme,
+    automaticLayout: true,
+    quickSuggestions:true,
+    wordBasedSuggestions:true
+  };
+
+  model: NgxEditorModel = {
+    value: this.html_placeholder,
+    language: this.languages[3],
   }
+
 }
  

src/monaco-config.ts

@@ -1,41 +0,0 @@
-import { NgxMonacoEditorConfig } from "ngx-monaco-editor-v2";
-
-
-export function onMonacoEditorLoad(id: string = 'java') {
-
-  (<any>window).monaco.languages.register({ id });
-
-  (<any>window).monaco.languages.registerCompletionItemProvider(id, {
-    triggerCharacters : ['1'],
-    providerCompletionItems: function () {
-      var suggestions = [
-        {
-          label: 'simpleText',
-          kind: (<any>window).monaco.languages.CompletionItemKind.Text,
-          insertText: 'simpleText'
-        },
-        {
-          label: 'testing',
-          kind: (<any>window).monaco.languages.CompletionItemKind.Keyword,
-          insertText: 'testing(${1:condition})',
-          insertTextRules: (<any>window).monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-        },
-        {
-          label: 'ifelse',
-          kind: (<any>window).monaco.languages.CompletionItemKind.Snippet,
-          insertTest: ['if (${1:condition}) {', '\t$0', '} else {', '\t', '}'].join('\n'),
-          insertTextRules: (<any>window).monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-          documentation: 'If-Else Statement'
-        },
-      ];
-      return { suggestions: suggestions };
-    }
-  });
-
-}
-
-export const monacoConfig: NgxMonacoEditorConfig = {
-  baseUrl: './assets',
-  defaultOptions: { scrollBeyondLastLine: false },
-  onMonacoLoad: onMonacoEditorLoad
-};

src/monaco-editor/monaco-editor-config.ts

@@ -0,0 +1,71 @@
+declare var monaco: any;
+
+async function onMonacoEditorLoad(range: Range, languages=['java','csharp','python','html']) {
+  const allLangs = await (<any>window).monaco.languages.getLanguages();
+  console.log('all supported languages:', allLangs);
+  console.log(monaco);
+  monaco.languages.register({id: languages[3]});
+  monaco.languages.registerCompletionItemProvider(languages[3],{
+    triggerCharacters : ['.'],
+    provideCompletionItems: function(model:any, position: any){
+      var textUntilPosition = model.getValueInRange(
+        {startLineNumber: 1, startColumn: 1, 
+          endLineNumber: position.lineNumber, 
+          endColumn: position.column
+        }
+      );
+        console.log(textUntilPosition);
+        var match = textUntilPosition.match(/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/);
+        if (!match) {
+            return { suggestions: [] };
+        }
+        var word = model.getWordUntilPosition(position);
+        var range = {
+          startLineNumber: position.lineNumber,
+          endLineNumber: position.lineNumber,
+          startColumn: word.startColumn,
+          endColumn: word.endColumn
+      };
+
+      var suggestions = [
+        {
+            label: '"lodash"',
+            kind: monaco.languages.CompletionItemKind.Function,
+            documentation: "The Lodash library exported as Node.js modules.",
+            insertText: '"lodash": "*"',
+            range: range
+        },
+        {
+            label: '"express"',
+            kind: monaco.languages.CompletionItemKind.Function,
+            documentation: "Fast, unopinionated, minimalist web framework",
+            insertText: '"express": "*"',
+            range: range
+        },
+        {
+            label: '"mkdirp"',
+            kind: monaco.languages.CompletionItemKind.Function,
+            documentation: "Recursively mkdir, like <code>mkdir -p</code>",
+            insertText: '"mkdirp": "*"',
+            range: range
+        },
+        {
+            label: '"my-third-party-library"',
+            kind: monaco.languages.CompletionItemKind.Function,
+            documentation: "Describe your library here",
+            insertText: '"${1:my-third-party-library}": "${2:1.2.3}"',
+            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+            range: range
+        }
+    ];
+    return{suggestions:suggestions};
+    }
+
+  });
+}
+
+export const monacoConfig = {
+  baseUrl:'./assets',
+  defaultOptions: { scrollBeyondLastLine: false },
+  onMonacoLoad: onMonacoEditorLoad
+};