improved layout and fixed bugs introduced new ones

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

@@ -2,12 +2,7 @@ import { BaseElement } from "../../../shared/_base";
 import './code-editor.less';
 import * as monaco from 'monaco-editor';
 import { OutputFrame } from "../output-frame/output-frame";
-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 {
 
@@ -17,8 +12,10 @@ export class CodeEditor extends BaseElement {
     onInit(): void {
 
         this.initWorkers();
-        this.language = this.getAttribute("language")?.toLocaleLowerCase() ?? "javascript";
-        this.input = this.setInitInput(this.language);
+        this.input = this.setInitInput();
+        this.language = this.tagName.substring(0, this.tagName.indexOf("-")).toLocaleLowerCase();
+
+        console.log(this.language);
 
         const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
 
@@ -34,72 +31,26 @@ 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.outputFrame.setContent(this.language, this.input);
             });
         });
 
         this.waitFor(this.outputFrame, () => {
-            this.outputFrame.setScript(this.language, this.input);
+            this.outputFrame.setContent(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;
-            }
-        }
+    setInitInput(): string {
         return "";
     }
 
-    initJs() {
-        monaco.languages.typescript.javascriptDefaults.addExtraLib(declarations, 'ts:filename/declarations.d.ts');
+    setInitSettings(): void {
 
-        monaco.languages.registerCompletionItemProvider("javascript", {
-            provideCompletionItems: (model, position, context, token) => {
-                return {
-                    suggestions: [
-                        {
-                            label: 'for',
-                            kind: monaco.languages.CompletionItemKind.Snippet,
-                            insertText: 'for (let i = 0; i < ${1:array}.length; i++) {\n\t$0\n}',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-                        },
-                        {
-                            label: 'forr',
-                            kind: monaco.languages.CompletionItemKind.Snippet,
-                            insertText: 'for (var i = ${1:array}.length - 1; i >= 0; i--) {\n\t$0\n}',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-                        },
-                        {
-                            label: 'spiralBoxesSolutionSnippet',
-                            detail: "inserts solution of spiral boxes",
-                            kind: monaco.languages.CompletionItemKind.Snippet,
-                            insertText: spiralBoxesSolutionScript,
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-                        }
-                    ]
-                }
-            }
-        });
     }