set init settings for languages + fixes

codeeditor-app/app.less

@@ -1,4 +1,5 @@
 @import url('../shared/theme.less');
+@import url('../shared/flex.less');
 
 html, body {
     margin: 0;
@@ -9,18 +10,6 @@ html, body {
 }
 
 
-.flex-horiz {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    overflow: hidden;
-}
-
-.flex-vert {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
 
 .flex-horiz > * {
     min-height: auto !important;
@@ -33,37 +22,10 @@ html, body {
 }
 
 
-.flex-horiz > *, .flex-vert > * {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 1px;
-    position: relative;
-}
-
 .animate .flex-horiz > *, .animate .flex-vert > * {
     transition: all 280ms ease-in-out;
 }
 
-.flex-horiz .flex-shrink, .flex-vert .flex-shrink {
-    flex-grow: 0;
-    flex-shrink: 1;
-}
-
-.flex-horiz .flex-grow, .flex-vert .flex-grow {
-    flex-grow: 1;
-    flex-shrink: 0;
-}
-
-.flex-reset {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-}
-
 body {
     font-family: @primary-font-family;
 }

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

@@ -14,8 +14,7 @@ export class CodeEditor extends BaseElement {
         this.initWorkers();
         this.input = this.setInitInput();
         this.language = this.tagName.substring(0, this.tagName.indexOf("-")).toLocaleLowerCase();
-
-        console.log(this.language);
+        this.setInitSettings();
 
         const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
 

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

@@ -1,7 +1,8 @@
 import { CodeEditor } from "./code-editor";
 import * as monaco from 'monaco-editor';
 import initCss from '!!raw-loader!./injects/editor-init.css';
-import { createScript } from "../../../shared/create-script";
+
+import flexCss from '!!raw-loader!../../../shared/flex.less';
 
 export class CssCodeEditor extends CodeEditor {
     setInitInput(): string {
@@ -16,7 +17,7 @@ export class CssCodeEditor extends CodeEditor {
                         {
                             label: 'insert-flex',
                             kind: monaco.languages.CompletionItemKind.Snippet,
-                            insertText: createScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', false).toString(),
+                            insertText: flexCss,
                             range: <any>null,
                             insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                         }

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

@@ -1,7 +1,6 @@
 import { CodeEditor } from "./code-editor";
 import * as monaco from 'monaco-editor';
 import initHtml from '!!raw-loader!./injects/editor-init.html';
-import { createScript } from "../../../shared/create-script";
 
 export class HtmlCodeEditor extends CodeEditor {
     setInitInput(): string {
@@ -16,7 +15,7 @@ export class HtmlCodeEditor extends CodeEditor {
                         {
                             label: 'jqueryCDN',
                             kind: monaco.languages.CompletionItemKind.Snippet,
-                            insertText: createScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', false).toString(),
+                            insertText: "<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>",
                             range: <any>null,
                             insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                         }

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

@@ -31,8 +31,8 @@ export class JavascriptCodeEditor extends CodeEditor {
                             insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                         },
                         {
-                            label: 'spiralBoxesSolutionSnippet',
-                            detail: "inserts solution of spiral boxes",
+                            label: 'spiralSolutionSnippet',
+                            detail: "",
                             kind: monaco.languages.CompletionItemKind.Snippet,
                             insertText: spiralBoxesSolutionScript,
                             range: <any>null,

shared/flex.less

@@ -0,0 +1,29 @@
+.flex-horiz {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    overflow: hidden;
+}
+
+.flex-vert {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.flex-horiz > *, .flex-vert > * {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 1px;
+    position: relative;
+}
+
+.flex-horiz .flex-shrink, .flex-vert .flex-shrink {
+    flex-grow: 0;
+    flex-shrink: 1;
+}
+
+.flex-horiz .flex-grow, .flex-vert .flex-grow {
+    flex-grow: 1;
+    flex-shrink: 0;
+}