Fix scroll events and add minHeight and maxHeight to monaco componet

app/components/monaco-editor.js

@@ -60,6 +60,9 @@ export default class MonacoEditorComponent extends Component {
       minimap: {
         enabled: false,
       },
+      scrollbar: {
+        alwaysConsumeMouseWheel: false,
+      },
     };
 
     if (this.args.uri) {
@@ -75,12 +78,14 @@ export default class MonacoEditorComponent extends Component {
 
     this.editor = editor.create(el, options);
 
+    const minHeight = this.args.minHeight ?? 160;
+    const maxHeight = this.args.maxHeight ?? 420;
     // Autoresize height of element
     const onDidContentSizeChangeHandler = this.editor.onDidContentSizeChange(
       () => {
         const contentHeight = Math.min(
-          Math.max(this.editor.getContentHeight(), 160),
-          420
+          Math.max(this.editor.getContentHeight(), minHeight),
+          maxHeight
         );
 
         el.style.height = `${contentHeight + 1}px`;

app/templates/admin/indexes/item/documents/index.hbs

@@ -153,6 +153,7 @@
         @value={{json-stringify item}}
         @language='json'
         @readOnly={{true}}
+        @minHeight={{0}}
         class='mb-4'
       />
     {{/each}}