Browse Source

new changes

placidenduwayo 1 year ago
parent
commit
acde61f155

+ 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.