Auto adjust height of code editor

src/app/configuration/code-with-syntax-highlighting/code-with-syntax-highlighting.component.html

@@ -1,5 +1,5 @@
 <div class="code-editor" #codeEditor>
-    <textarea (input)="onValueChange($event)" (resize)="resizeEvent($event)" [(ngModel)]="textValue">
+    <textarea (input)="onValueChange($event)" (resize)="resizeEvent($event)" [(ngModel)]="textValue" #textarea>
     </textarea>
     <code #code class="language-yaml" [innerHTML]="highlightedText"></code>
 </div>

src/app/configuration/code-with-syntax-highlighting/code-with-syntax-highlighting.component.scss

@@ -26,6 +26,7 @@
     font-family: inherit;
     line-height: inherit;
     border: none;
+    overflow: hidden
 }
 
 .code-editor textarea:focus {

src/app/configuration/code-with-syntax-highlighting/code-with-syntax-highlighting.component.ts

@@ -1,16 +1,15 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, Output, SimpleChanges, ViewChild } from '@angular/core';
 import 'prismjs'
 import 'prismjs/components/prism-yaml'
 
-
 declare var Prism: any;
 
 @Component({
   selector: 'app-code-with-syntax-highlighting',
   templateUrl: './code-with-syntax-highlighting.component.html',
   styleUrls: ['./code-with-syntax-highlighting.component.scss']
 })
-export class CodeWithSyntaxHighlightingComponent implements AfterViewInit {
+export class CodeWithSyntaxHighlightingComponent implements AfterViewInit, OnDestroy {
 
   @Input()
   textValue: string;
@@ -24,11 +23,16 @@ export class CodeWithSyntaxHighlightingComponent implements AfterViewInit {
   @ViewChild('code')
   codeBlock: ElementRef;
 
+  @ViewChild('textarea')
+  textarea: ElementRef;
+
   public highlightedText: string;
 
+  private observer = new MutationObserver(() => this.resize())
+
   ngAfterViewInit() {
     this.setHighlightedText(this.textValue)
-
+    this.observer.observe(this.textarea.nativeElement, {attributes: true})
   }
 
   setHighlightedText(textValue) {
@@ -38,6 +42,7 @@ export class CodeWithSyntaxHighlightingComponent implements AfterViewInit {
   ngOnChanges(changes: SimpleChanges) {
     this.textValue = changes.textValue.currentValue
     this.setHighlightedText(changes.textValue.currentValue)
+
   }
 
   onValueChange(event) {
@@ -49,6 +54,17 @@ export class CodeWithSyntaxHighlightingComponent implements AfterViewInit {
     this.codeEditor.nativeElement.style.height = event.height + 'px'
     this.codeBlock.nativeElement.style.height = event.height + 'px'
   }
+
+  resize() {
+    const scrollHeight = this.textarea.nativeElement.scrollHeight
+    if (scrollHeight > 0) {
+      this.resizeEvent({height: scrollHeight})
+    }
+  }
+
+  ngOnDestroy() {
+    this.observer.disconnect()
+  }
 }