Updated editor height; visualized which is active

angular.json

@@ -1,3 +1,7 @@
+/* Using older build flow b/c of this issue:
+    https://github.com/issues/created?issue=mkslanc%7Cace-linters%7C172
+*/
+
 {
     "$schema":"./node_modules/@angular/cli/lib/config/schema.json",
     "version":1,

src/app/editor/ace/ace-editor.base.ts

@@ -15,6 +15,7 @@ export class AceEditorBase {
     cutBuffer: string = "";
     timerId: number   = -1;
     activeFile!: NewtonFile;
+    isDefault: boolean = false;
 
 
     constructor(
@@ -23,6 +24,14 @@ export class AceEditorBase {
     }
 
 
+    public addActiveStyling() {
+        this.editorElm.nativeElement.classList.add("active-editor")
+    }
+
+    public removeActiveStyling() {
+        this.editorElm.nativeElement.classList.remove("active-editor")
+    }
+
     protected search() {
         console.log(this.editor.getSession()["$modeId"])
     }

src/app/editor/ace/ace-editor.component.css

@@ -21,3 +21,8 @@
 }
 
 
+.active-editor {
+    border-style: solid;
+    border-width: thin;
+    border-color: rgba(124, 124, 124, 1);
+}

src/app/editor/ace/ace-editor.component.ts

@@ -35,6 +35,10 @@ export class AceEditorComponent extends AceEditorBase {
 
 
     public ngAfterViewInit(): void {
+        if (this.isDefault) {
+            this.addActiveStyling();
+        }
+
         this.loadAce();
     }
 

src/app/editor/editors.component.css

@@ -1,3 +1,3 @@
 .dropzone {
-    height: 80vh;
+    height: 95vh;
 }

src/app/editor/editors.component.ts

@@ -52,8 +52,10 @@ export class EditorsComponent {
         this.loadSubscribers();
         this.loadMainSubscribers();
 
-        let editor        = this.createEditor();
-        this.activeEditor = editor.instance.uuid;
+        let editor                = this.createEditor();
+        this.activeEditor         = editor.instance.uuid;
+        editor.instance.isDefault = true;
+
         this.createEditor();
     }
 
@@ -61,7 +63,9 @@ export class EditorsComponent {
         this.editorsService.newActiveEditor$().pipe(
             takeUntil(this.unsubscribe)
         ).subscribe((uuid: string) => {
+            this.editors.get(this.activeEditor).instance.removeActiveStyling();
             this.activeEditor = uuid;
+            this.editors.get(this.activeEditor).instance.addActiveStyling();
         });
 
         this.editorsService.loadTabToEditor$().pipe(

src/assets/css/ace-overrides.css

@@ -11,4 +11,4 @@
 
 .ace_autocomplete {
     background-color: #25282c !important;
-}
+}

src/assets/css/styles.css

@@ -28,14 +28,6 @@ body {
 }
 
 
-/*
-.tab {
-    float: left;
-    clear: left;
-    display: contents;
-}
-*/
-
 .tab {
     display: flex;
     overflow: auto;