declarations support, color support, better inject

codeeditor-app/elements/code-editor/code-editor.ts

@@ -2,9 +2,10 @@ import { BaseElement } from "../../../shared/_base";
 import './code-editor.less';
 import * as monaco from 'monaco-editor';
 import { OutputFrame } from "../output-frame/output-frame";
-import initScript from './injects/editor-init.txt';
-import spiralBoxesSolutionScript from './injects/spiral-boxes-solution.txt';
+import initScript from '!!raw-loader!./injects/editor-init.js';
+import spiralBoxesSolutionScript from '!!raw-loader!./injects/spiral-boxes-solution.js';
 import { debounceManager } from "../../../shared/ensure-debounce";
+import declarations from '!!raw-loader!./injects/declarations.d.ts';
 
 export class CodeEditor extends BaseElement {
 
@@ -12,7 +13,6 @@ export class CodeEditor extends BaseElement {
 
     onInit(): void {
 
-
         this.initWorkers();
 
         const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
@@ -26,9 +26,11 @@ export class CodeEditor extends BaseElement {
                 enabled: false
             },
             autoIndent: "full",
-            theme: prefersDarkScheme.matches ? 'vs-dark' : 'vs-white'
+            theme: prefersDarkScheme.matches ? 'vs-dark' : 'vs-light'
         });
 
+        monaco.languages.typescript.javascriptDefaults.addExtraLib(declarations, 'ts:filename/declarations.d.ts');
+
         monaco.languages.registerCompletionItemProvider("javascript", {
             triggerCharacters: ["."],
             provideCompletionItems: (model, position, context, token) => (
@@ -48,58 +50,10 @@ export class CodeEditor extends BaseElement {
                             range: <any>null,
                             insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                         },
-                        {
-                            label: 'rect',
-                            detail: "details",
-                            kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'rect(${1:x}, ${2:y}, ${3:width}, ${4:height})',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-                        },
-                        {
-                            label: 'box',
-                            detail: "details",
-                            kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'box(${1:x}, ${2:y}, ${3:width}, ${4:height})',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-                        },
-                        {
-                            label: 'width',
-                            detail: "gets the width of the canvas",
-                            kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'width()',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace
-                        },
-                        {
-                            label: 'height',
-                            detail: "gets the height of the canvas",
-                            kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'height()',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace
-                        },
-                        {
-                            label: 'center',
-                            detail: "gets the center of the canvas",
-                            kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'center()',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace
-                        },
-                        {
-                            label: 'rand',
-                            detail: "gets a random number between two numbers",
-                            kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'rand(${1:from}, ${2:to})',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-                        },
                         {
                             label: 'spiralBoxesSolutionSnippet',
                             detail: "inserts solution of spiral boxes",
-                            kind: monaco.languages.CompletionItemKind.Function,
+                            kind: monaco.languages.CompletionItemKind.Snippet,
                             insertText: spiralBoxesSolutionScript,
                             range: <any>null,
                             insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet

codeeditor-app/elements/code-editor/injects/declarations.d.ts

@@ -0,0 +1,7 @@
+declare function box(x: number, y: number, width: number, height: number, color?: string): void;
+declare function rect(x: number, y: number, width: number, height: number, color?: string): void;
+declare function rand(from: number, to: number): number;
+declare function center(): number;
+declare function width(): number;
+declare function height(): number;
+declare function randomColor(randomOpacity: boolean = true): string;

codeeditor-app/elements/code-editor/injects/editor-init.js

@@ -1,4 +1,4 @@
 box(10, 10, 20, 20);
 box(50, rand(100, 200), 20, 20);
-box(160, 50, 20, 20);
+box(160, 50, 20, 20, randomColor());
 box(center(), center(), 20, 20);