new changes

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

@@ -1,10 +1,6 @@
-<h1></h1>
-<div style="height: 500px">
-    <ngx-monaco-editor 
-        style="height: 100%" 
-        [options]="options"
-        [model]="model"
-        [(ngModel)]="java_placeholder"
-        (onInit)="onInit($event)">
-    </ngx-monaco-editor>
-</div>
+<ngx-monaco-editor 
+    style="margin-left: 1cm;margin-top: 1cm;margin-right: 1cm;height: 88%;" 
+    [options]="monacoOptions" 
+    [model]="model"
+    (onInit)="onInit($event)">
+</ngx-monaco-editor>

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

@@ -60,12 +60,20 @@ export class MonacoEditorTestComponent {
     }
   }`;
 
-  options = {
+  monacoOptions = {
     theme: this.theme,
     automaticLayout: true,
-    quickSuggestions: true,
-    wordBasedSuggestions: true
-  };
+    quickSuggestions: {
+      other: 'inline',
+      comments: true,
+      strings : true
+    },
+    wordBasedSuggestions: true,
+    glyphMargin: true,
+    fontSize: 20,
+    fixedOverflowWidgets: true,
+    acceptSuggestionOnEnter: "on",
+    };
 
   placeholders: Array<string> = [
     this.java_placeholder, 
@@ -80,5 +88,4 @@ export class MonacoEditorTestComponent {
     value: this.placeholders[0],
     language: this.languages[0],
   }
-
 }

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

@@ -1,23 +1,23 @@
 
-declare var monaco: any;
 
 async function onMonacoEditorLoad(languages: Array<string> = ['java', 'csharp', 'python', 'html', 'json', 'css']) {
-  const allLangs = await monaco.languages.getLanguages();
+  const allLangs =  (<any>window).monaco.languages.getLanguages();
   console.log('all supported languages:', allLangs);
-  console.log(monaco);
-  monaco.languages.register({ id: languages[0] });
-  monaco.languages.registerCompletionItemProvider(languages[0], {
+  console.log( (<any>window).monaco);
+  (<any>window).monaco.languages.register({ id: languages[0] });
+  (<any>window).monaco.languages.registerCompletionItemProvider(languages[0], {
     triggerCharacters: ['.'],
     provideCompletionItems: function (model: any, position: any) {
-      var textUntilPosition = model.getValueInRange(
+      const textUntilPosition = model.getValueInRange(
         {
-          startLineNumber: 1, startColumn: 1,
+          startLineNumber: position.lineNumber, 
+          startColumn: 1,
           endLineNumber: position.lineNumber,
           endColumn: position.column
         }
       );
-      console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!', textUntilPosition);
-      var match = textUntilPosition.match(/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/);
+      console.log(textUntilPosition);
+      const match = textUntilPosition.match(/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/);
       if (!match) {
         return { suggestions: [] };
       }
@@ -29,34 +29,34 @@ async function onMonacoEditorLoad(languages: Array<string> = ['java', 'csharp',
         endColumn: word.endColumn
       };
 
-      var suggestions = [
+      const suggestions = [
         {
           label: '"lodash"',
-          kind: monaco.languages.CompletionItemKind.Function,
+          kind:  (<any>window).monaco.languages.CompletionItemKind.Function,
           documentation: "The Lodash library exported as Node.js modules.",
           insertText: '"lodash": "*"',
           range: range
         },
         {
           label: '"express"',
-          kind: monaco.languages.CompletionItemKind.Function,
+          kind:  (<any>window).monaco.languages.CompletionItemKind.Function,
           documentation: "Fast, unopinionated, minimalist web framework",
           insertText: '"express": "*"',
           range: range
         },
         {
           label: '"mkdirp"',
-          kind: monaco.languages.CompletionItemKind.Function,
+          kind:  (<any>window).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,
+          kind:  (<any>window).monaco.languages.CompletionItemKind.Function,
           documentation: "Describe your library here",
           insertText: '"${1:my-third-party-library}": "${2:1.2.3}"',
-          insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+          insertTextRules:  (<any>window).monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
           range: range
         }
       ];