placidenduwayo
/
angular-app-monaco-editor-integration
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

new changes

placidenduwayo 2 years ago
parent
8855e7a5e4
commit
acde61f155
3 changed files with 77 additions and 66 deletions
Split View Show Diff Stats
  1. 1
    1
      src/app/pages/monaco-editor-test/monaco-editor-test/monaco-editor-test.component.html
  2. 31
    22
      src/app/pages/monaco-editor-test/monaco-editor-test/monaco-editor-test.component.ts
  3. 45
    43
      src/monaco-editor/monaco-editor-config.ts

+ 1
- 1
src/app/pages/monaco-editor-test/monaco-editor-test/monaco-editor-test.component.html View File 

@@ -4,7 +4,7 @@
4 4 
         style="height: 100%"
5 5 
         [options]="options"
6 6 
         [model]="model"
7 
-        [(ngModel)]="html_placeholder"
7 
+        [(ngModel)]="java_placeholder"
8 8 
         (onInit)="onInit($event)">
9 9 
     </ngx-monaco-editor>
10 10 
 </div>

+ 31
- 22
src/app/pages/monaco-editor-test/monaco-editor-test/monaco-editor-test.component.ts View File 

@@ -1,37 +1,37 @@
1 1 
 import { Component } from '@angular/core';
2 
-import {NgxEditorModel } from 'ngx-monaco-editor-v2'
2 
+import { NgxEditorModel } from 'ngx-monaco-editor-v2'
3 3
4 4 
 @Component({
5 5 
   selector: 'app-monaco-editor',
6 6 
   templateUrl: './monaco-editor-test.component.html',
7 7 
   styleUrls: ['./monaco-editor-test.component.scss']
8 8 
 })
9 
-export class MonacoEditorTestComponent{
9 
+export class MonacoEditorTestComponent {
10 10
11 
-  onInit(editor:any) {
11 
+  onInit(editor: any) {
12 12 
     let line = editor.getPosition();
13 13 
     console.log(line);
14 14 
   }
15 
-
16 
-  languages = ['java','csharp','python','html'];
15 
+
16 
+  languages = ['java', 'csharp', 'python', 'html'];
17 17 
   theme: string = 'vs-dark';
18 
-
19 
-  ts_placeholder: string=
20 
-  `//typescript placeholder function
18 
+
19 
+  ts_placeholder: string =
20 
+    `//typescript placeholder function
21 21 
   function printHello () {
22 22 
     console.log("Hello world!");
23 23 
   }`;
24 
-
25 
-  java_placeholder: string =
26 
-  `//java placeholder class
24 
+
25 
+  java_placeholder: string =
26 
+    `//java placeholder class
27 27 
   public class TestHelloWorld {
28 28 
     public static void main (String [] args){
29 29 
       System.out.println("Hello World");
30 30 
     }
31 31 
   }`;
32 32
33 
-  csharp_placeholder: string =
34 
-  `//csharp placeholder class
33 
+  csharp_placeholder: string =
34 
+    `//csharp placeholder class
35 35 
   using System;
36 36 
   namespace Demo
37 37 
   {
 
@@ -40,16 +40,17 @@ export class MonacoEditorTestComponent{
40 40 
       Console.WriteLine("Hello World");
41 41 
     }
42 42 
   }`;
43 
-  json_placeholder: string ='';
43 
+  json_placeholder: string = '';
44 44
45 
-  html_placeholder: string =`
45 
+  html_placeholder: string = `
46 46 
   <html>
47 47 
     <title>Monaco editor integration</title>
48 48 
     <body>
49 49 
       <!-- the body of the page -->
50 50 
     </body>
51 51 
   </html>`;
52 
-  css_placeholder: string ='';
52 
+
53 
+  css_placeholder: string = '';
53 54
54 55 
   python_placeholder: string = `
55 56 
   class ClassName {
 
@@ -60,16 +61,24 @@ export class MonacoEditorTestComponent{
60 61 
   }`;
61 62
62 63 
   options = {
63 
-    theme:this.theme,
64 
+    theme: this.theme,
64 65 
     automaticLayout: true,
65 
-    quickSuggestions:true,
66 
-    wordBasedSuggestions:true
66 
+    quickSuggestions: true,
67 
+    wordBasedSuggestions: true
67 68 
   };
68 69
70 
+  placeholders: Array<string> = [
71 
+    this.java_placeholder,
72 
+    this.csharp_placeholder,
73 
+    this.python_placeholder,
74 
+    this.html_placeholder,
75 
+    this.json_placeholder,
76 
+    this.css_placeholder
77 
+  ]
78 
+
69 79 
   model: NgxEditorModel = {
70 
-    value: this.html_placeholder,
71 
-    language: this.languages[3],
80 
+    value: this.placeholders[0],
81 
+    language: this.languages[0],
72 82 
   }
73 83
74 84 
 }
75 
-

+ 45
- 43
src/monaco-editor/monaco-editor-config.ts View File 

@@ -1,71 +1,73 @@
1 
+
1 2 
 declare var monaco: any;
2 3
3 
-async function onMonacoEditorLoad(range: Range, languages=['java','csharp','python','html']) {
4 
-  const allLangs = await (<any>window).monaco.languages.getLanguages();
4 
+async function onMonacoEditorLoad(languages: Array<string> = ['java', 'csharp', 'python', 'html', 'json', 'css'], id: any) {
5 
+  const allLangs = await monaco.languages.getLanguages();
5 6 
   console.log('all supported languages:', allLangs);
6 7 
   console.log(monaco);
7 
-  monaco.languages.register({id: languages[3]});
8 
-  monaco.languages.registerCompletionItemProvider(languages[3],{
9 
-    triggerCharacters : ['.'],
10 
-    provideCompletionItems: function(model:any, position: any){
8 
+  monaco.languages.register({ id: languages[0] });
9 
+  monaco.languages.registerCompletionItemProvider(languages[0], {
10 
+    triggerCharacters: ['.'],
11 
+    provideCompletionItems: function (model: any, position: any) {
11 12 
       var textUntilPosition = model.getValueInRange(
12 
-        {startLineNumber: 1, startColumn: 1,
13 
-          endLineNumber: position.lineNumber,
13 
+        {
14 
+          startLineNumber: 1, startColumn: 1,
15 
+          endLineNumber: position.lineNumber,
14 16 
           endColumn: position.column
15 17 
         }
16 18 
       );
17 
-        console.log(textUntilPosition);
18 
-        var match = textUntilPosition.match(/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/);
19 
-        if (!match) {
20 
-            return { suggestions: [] };
21 
-        }
22 
-        var word = model.getWordUntilPosition(position);
23 
-        var range = {
24 
-          startLineNumber: position.lineNumber,
25 
-          endLineNumber: position.lineNumber,
26 
-          startColumn: word.startColumn,
27 
-          endColumn: word.endColumn
19 
+      console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!', textUntilPosition);
20 
+      var match = textUntilPosition.match(/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/);
21 
+      if (!match) {
22 
+        return { suggestions: [] };
23 
+      }
24 
+      var word = model.getWordUntilPosition(position);
25 
+      var range = {
26 
+        startLineNumber: position.lineNumber,
27 
+        endLineNumber: position.lineNumber,
28 
+        startColumn: word.startColumn,
29 
+        endColumn: word.endColumn
28 30 
       };
29 31
30 32 
       var suggestions = [
31 33 
         {
32 
-            label: '"lodash"',
33 
-            kind: monaco.languages.CompletionItemKind.Function,
34 
-            documentation: "The Lodash library exported as Node.js modules.",
35 
-            insertText: '"lodash": "*"',
36 
-            range: range
34 
+          label: '"lodash"',
35 
+          kind: monaco.languages.CompletionItemKind.Function,
36 
+          documentation: "The Lodash library exported as Node.js modules.",
37 
+          insertText: '"lodash": "*"',
38 
+          range: range
37 39 
         },
38 40 
         {
39 
-            label: '"express"',
40 
-            kind: monaco.languages.CompletionItemKind.Function,
41 
-            documentation: "Fast, unopinionated, minimalist web framework",
42 
-            insertText: '"express": "*"',
43 
-            range: range
41 
+          label: '"express"',
42 
+          kind: monaco.languages.CompletionItemKind.Function,
43 
+          documentation: "Fast, unopinionated, minimalist web framework",
44 
+          insertText: '"express": "*"',
45 
+          range: range
44 46 
         },
45 47 
         {
46 
-            label: '"mkdirp"',
47 
-            kind: monaco.languages.CompletionItemKind.Function,
48 
-            documentation: "Recursively mkdir, like <code>mkdir -p</code>",
49 
-            insertText: '"mkdirp": "*"',
50 
-            range: range
48 
+          label: '"mkdirp"',
49 
+          kind: monaco.languages.CompletionItemKind.Function,
50 
+          documentation: "Recursively mkdir, like <code>mkdir -p</code>",
51 
+          insertText: '"mkdirp": "*"',
52 
+          range: range
51 53 
         },
52 54 
         {
53 
-            label: '"my-third-party-library"',
54 
-            kind: monaco.languages.CompletionItemKind.Function,
55 
-            documentation: "Describe your library here",
56 
-            insertText: '"${1:my-third-party-library}": "${2:1.2.3}"',
57 
-            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
58 
-            range: range
55 
+          label: '"my-third-party-library"',
56 
+          kind: monaco.languages.CompletionItemKind.Function,
57 
+          documentation: "Describe your library here",
58 
+          insertText: '"${1:my-third-party-library}": "${2:1.2.3}"',
59 
+          insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
60 
+          range: range
59 61 
         }
60 
-    ];
61 
-    return{suggestions:suggestions};
62 
+      ];
63 
+      return { suggestions: suggestions };
62 64 
     }
63 65
64 66 
   });
65 67 
 }
66 68
67 69 
 export const monacoConfig = {
68 
-  baseUrl:'./assets',
70 
+  baseUrl: './assets',
69 71 
   defaultOptions: { scrollBeyondLastLine: false },
70 72 
   onMonacoLoad: onMonacoEditorLoad
71 73 
 };

Powered by TurnKey Linux.