added html and css editors

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

@@ -2,24 +2,29 @@ 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 '!!raw-loader!./injects/editor-init.js';
+import initJs from '!!raw-loader!./injects/editor-init.js';
+import initHtml from '!!raw-loader!./injects/editor-init.html';
+import initCss from '!!raw-loader!./injects/editor-init.css';
 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 {
 
-    public input: string = initScript;
+    public input: string = "";
+    public language: string = "";
 
     onInit(): void {
 
         this.initWorkers();
+        this.language = this.getAttribute("language")?.toLocaleLowerCase() ?? "javascript";
+        this.input = this.setInitInput(this.language);
 
         const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
 
         var editor = monaco.editor.create(this, {
             value: this.input,
-            language: 'javascript',
+            language: this.language,
             automaticLayout: true,
             contextmenu: false,
             minimap: {
@@ -29,12 +34,45 @@ export class CodeEditor extends BaseElement {
             theme: prefersDarkScheme.matches ? 'vs-dark' : 'vs-light'
         });
 
+
+
+
+        var debounce = debounceManager(1000);
+        editor.onDidChangeModelContent((e) => {
+            this.input = editor.getValue();
+            debounce.ensureDebounce(() => {
+                this.outputFrame.setScript(this.language, this.input);
+            });
+        });
+
+        this.waitFor(this.outputFrame, () => {
+            this.outputFrame.setScript(this.language, this.input);
+        });
+
+    }
+
+    setInitInput(language: string | null) {
+        if (language) {
+            if (language.toLowerCase() === "javascript") {
+                this.initJs();
+                return initJs;
+            }
+            else if (language.toLowerCase() === 'html') {
+                return initHtml;
+            }
+            else if (language.toLowerCase() === 'css') {
+                return initCss;
+            }
+        }
+        return "";
+    }
+
+    initJs() {
         monaco.languages.typescript.javascriptDefaults.addExtraLib(declarations, 'ts:filename/declarations.d.ts');
 
         monaco.languages.registerCompletionItemProvider("javascript", {
-            triggerCharacters: ["."],
-            provideCompletionItems: (model, position, context, token) => (
-                {
+            provideCompletionItems: (model, position, context, token) => {
+                return {
                     suggestions: [
                         {
                             label: 'for',
@@ -60,24 +98,11 @@ export class CodeEditor extends BaseElement {
                         }
                     ]
                 }
-            )
+            }
         });
-
-
-        var debounce = debounceManager(1000);
-        editor.onDidChangeModelContent((e) => {
-            this.input = editor.getValue();
-            debounce.ensureDebounce(() => {
-                this.outputFrame.setScript(this.input);
-            });
-        });
-
-        this.waitFor(this.outputFrame, () => {
-            this.outputFrame.setScript(this.input);
-        });
-
     }
 
+
     initWorkers() {
         // @ts-ignore
         self.MonacoEnvironment = {