Update monaco and refactor usage to remove all internal scrollbars

angular.json

@@ -30,11 +30,8 @@
                 "input": "node_modules/ionicons/dist/ionicons/svg",
                 "output": "./svg"
               },
-              {
-                "glob": "**/*",
-                "input": "node_modules/ngx-monaco-editor/assets/monaco",
-                "output": "./assets/monaco/"
-              },
+              { "glob": "**/*", "input": "node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" },
+
               "src/manifest.webmanifest"
             ],
             "styles": [

package.json

@@ -38,7 +38,7 @@
     "moment": "^2.24.0",
     "ng-connection-service": "^1.0.4",
     "ngx-markdown": "^10.1.1",
-    "ngx-monaco-editor": "^8.1.1",
+    "ngx-monaco-editor": "^9.0.0",
     "rxjs": "~6.6.3",
     "tslib": "^1.9.0",
     "uuid": "^3.4.0",

src/app/components/editor/code/code.component.html

@@ -1,4 +1,4 @@
-<div class="code-wrapper" style="width: 100%; height: 600px; margin-top: 10px;" *ngIf="!notAvailableOffline">
+<div class="code-wrapper" style="width: 100%; margin-top: 10px;" *ngIf="!notAvailableOffline">
   <ion-toolbar>
       <ion-item>
         <ion-label position="floating">Language</ion-label>
@@ -7,12 +7,14 @@
         </ion-select>
       </ion-item>
   </ion-toolbar>
-  <div class="ed-wrapper" style="width: 100%; height: 540px;">
+  <div class="editor-container" #editorContainer>
     <ngx-monaco-editor style="width: 100%; height: 100%;"
-      [options]="editorOptions"
-      [(ngModel)]="editorValue"
-      (ngModelChange)="onEditorModelChange($event)"
-      #theEditor
+       [options]="editorOptions"
+       [(ngModel)]="editorValue"
+       (onInit)="onMonacoEditorInit($event)"
+       (ngModelChange)="onEditorModelChange($event)"
+       #theEditor
+       class="editor"
     ></ngx-monaco-editor>
   </div>
 </div>

src/app/components/editor/code/code.component.ts

@@ -1,8 +1,9 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
 import {v4} from 'uuid';
 import {ApiService, ResourceNotAvailableOfflineError} from '../../../service/api.service';
 import {EditorNodeContract} from '../../nodes/EditorNode.contract';
 import {EditorService} from '../../../service/editor.service';
+import {EditorComponent} from 'ngx-monaco-editor';
 
 @Component({
     selector: 'editor-code',
@@ -12,16 +13,24 @@ import {EditorService} from '../../../service/editor.service';
 export class CodeComponent extends EditorNodeContract implements OnInit {
     @Input() nodeId: string;
     @Input() editorUUID?: string;
+    @ViewChild('theEditor') theEditor: EditorComponent;
+    @ViewChild('editorContainer') editorContainer: ElementRef;
     public dirty = false;
     protected dbRecord: any = {};
     protected codeRefId!: string;
     public notAvailableOffline = false;
+    public containerHeight = 540;
 
     public editorOptions = {
         theme: this.isDark() ? 'vs-dark' : 'vs',
         language: 'javascript',
         uri: v4(),
         readOnly: false,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        scrollbar: {
+            alwaysConsumeMouseWheel: false,
+        },
     };
 
     public editorValue = '';
@@ -195,6 +204,24 @@ export class CodeComponent extends EditorNodeContract implements OnInit {
         });
     }
 
+    onMonacoEditorInit(editor) {
+        let ignoreEvent = false;
+        const updateHeight = () => {
+            const contentHeight = Math.max(540, editor.getContentHeight());
+            this.containerHeight = contentHeight;
+
+            try {
+                ignoreEvent = true;
+                editor.layout({ width: this.editorContainer.nativeElement.offsetWidth, height: contentHeight });
+            } finally {
+                ignoreEvent = false;
+            }
+        };
+
+        editor.onDidContentSizeChange(updateHeight);
+        updateHeight();
+    }
+
     public onEditorModelChange($event) {
         if ( this.editorValue !== this.dbRecord.code ) {
             this.dirty = true;

src/app/components/nodes/markdown/markdown.component.html

@@ -1,9 +1,10 @@
 <div class="container" (dblclick)="onFocusIn()" (resized)="onEditorHostResize($event)">
-    <div class="editor-container" *ngIf="showEditor">
+    <div class="editor-container" *ngIf="showEditor" #editorContainer>
         <ngx-monaco-editor class="editor"
             [options]="editorOptions"
             [(ngModel)]="contents"
             (ngModelChange)="onContentsChanged($event)"
+            (onInit)="onMonacoEditorInit($event)"
             #editor
         ></ngx-monaco-editor>
     </div>

src/app/components/nodes/markdown/markdown.component.ts

@@ -1,7 +1,8 @@
-import {Component, HostListener, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, HostListener, Input, OnInit, ViewChild} from '@angular/core';
 import {EditorNodeContract} from '../EditorNode.contract';
 import {EditorService} from '../../../service/editor.service';
 import {v4} from 'uuid';
+import {EditorComponent} from 'ngx-monaco-editor';
 
 @Component({
     selector: 'editor-markdown',
@@ -12,6 +13,8 @@ export class MarkdownComponent extends EditorNodeContract implements OnInit {
     // @ViewChild('editable') editable;
     @Input() nodeId: string;
     @Input() editorUUID?: string;
+    @ViewChild('editor') editor: EditorComponent;
+    @ViewChild('editorContainer') editorContainer: ElementRef;
 
     // public isFocused = false;
     public initialValue = 'Click to edit...';
@@ -21,6 +24,7 @@ export class MarkdownComponent extends EditorNodeContract implements OnInit {
     public showEditor = false;
     protected hadOneFocusOut = false;
     public singleColumn = false;
+    public containerHeight = 540;
 
     public editorOptions = {
         theme: this.isDark() ? 'vs-dark' : 'vs',
@@ -29,6 +33,10 @@ export class MarkdownComponent extends EditorNodeContract implements OnInit {
         readOnly: false,
         automaticLayout: true,
         wordWrap: 'on',
+        scrollBeyondLastLine: false,
+        scrollbar: {
+            alwaysConsumeMouseWheel: false,
+        },
     };
 
     constructor(
@@ -59,6 +67,24 @@ export class MarkdownComponent extends EditorNodeContract implements OnInit {
         });
     }
 
+    onMonacoEditorInit(editor) {
+        let ignoreEvent = false;
+        const updateHeight = () => {
+            const contentHeight = Math.max(540, editor.getContentHeight());
+            this.containerHeight = contentHeight;
+
+            try {
+                ignoreEvent = true;
+                editor.layout({ width: this.editorContainer.nativeElement.offsetWidth, height: contentHeight });
+            } finally {
+                ignoreEvent = false;
+            }
+        };
+
+        editor.onDidContentSizeChange(updateHeight);
+        updateHeight();
+    }
+
     public isDirty(): boolean | Promise<boolean> {
         return this.dirtyOverride || this.contents !== this.savedValue;
     }