diff --git a/app/components/index-setting.hbs b/app/components/index-setting.hbs
index 0570d37..56939c2 100644
--- a/app/components/index-setting.hbs
+++ b/app/components/index-setting.hbs
@@ -1,12 +1,13 @@
 <Form::Element @label={{namelize @name}}>
   <MonacoEditor
-    @value={{json-stringify this.value}}
+    @value={{this.value}}
     @language='json'
-    @onChange={{set this 'value'}}
-    class="h-80"
-  />
-
-  <Button @text='Save' @style='primary' @onClick={{this.save}} />
-  <Button @text='Cancel' @onClick={{this.setInitialValue}} />
-  <Button @text='Reset' @onClick={{this.reset}} />
+    @sendValue={{this.save}}
+    class='h-40'
+    as |monaco|
+  >
+    <Button @text='Save' @style='primary' @onClick={{monaco.triggerSendValue}} />
+    <Button @text='Cancel' @onClick={{this.setInitialValue}} />
+    <Button @text='Reset' @onClick={{this.reset}} />
+  </MonacoEditor>
 </Form::Element>
diff --git a/app/components/index-setting.js b/app/components/index-setting.js
index d3c295b..1ca5da1 100644
--- a/app/components/index-setting.js
+++ b/app/components/index-setting.js
@@ -18,7 +18,8 @@ export default class FormIndexSettingComponent extends Component {
 
   @action
   async setInitialValue() {
-    this.value = await this.args.index.getSetting(this.args.name);
+    const result = await this.args.index.getSetting(this.args.name);
+    this.value = JSON.stringify(result);
   }
 
   @action
diff --git a/app/components/monaco-editor.hbs b/app/components/monaco-editor.hbs
index bb04c4a..53610e7 100644
--- a/app/components/monaco-editor.hbs
+++ b/app/components/monaco-editor.hbs
@@ -5,4 +5,4 @@
   ...attributes
 ></div>
 
-{{yield (hash editor=this.editor sendValue=this.sendValue)}}
+{{yield (hash editor=this.editor triggerSendValue=this.triggerSendValue)}}
diff --git a/app/components/monaco-editor.js b/app/components/monaco-editor.js
index be88114..55582d3 100644
--- a/app/components/monaco-editor.js
+++ b/app/components/monaco-editor.js
@@ -26,8 +26,8 @@ export default class MonacoEditorComponent extends Component {
     // Autoresize height of element
     this.editor.onDidContentSizeChange(() => {
       const contentHeight = Math.min(
-        Math.max(this.editor.getContentHeight(), 180),
-        500
+        Math.max(this.editor.getContentHeight(), 160),
+        420
       );
 
       el.style.height = `${contentHeight}px`;
@@ -36,18 +36,14 @@ export default class MonacoEditorComponent extends Component {
   }
 
   @action
-  updateValue(el, value) {
-    if (typeof value !== 'string') {
-      value = JSON.stringify(value);
-    }
-
+  updateValue(el, [value]) {
     if (value !== this.editor.getValue()) {
       this.editor?.setValue(value);
     }
   }
 
   @action
-  sendValue() {
+  triggerSendValue() {
     this.args.sendValue?.(this.editor.getValue());
   }
 
diff --git a/app/routes/admin/indexes/item/documents/document/edit.js b/app/routes/admin/indexes/item/documents/document/edit.js
index d42e01a..75d21dc 100644
--- a/app/routes/admin/indexes/item/documents/document/edit.js
+++ b/app/routes/admin/indexes/item/documents/document/edit.js
@@ -1,3 +1,16 @@
 import Route from '@ember/routing/route';
+import { hash } from 'rsvp';
 
-export default class AdminIndexesItemDocumentsDocumentEditRoute extends Route {}
+export default class AdminIndexesItemDocumentsDocumentEditRoute extends Route {
+  model() {
+    const index = this.modelFor('admin.indexes.item');
+    const { document_id } = this.paramsFor(
+      'admin.indexes.item.documents.document'
+    );
+
+    return hash({
+      index,
+      document: index.getDocument(document_id),
+    });
+  }
+}
diff --git a/app/routes/admin/indexes/item/documents/document/index.js b/app/routes/admin/indexes/item/documents/document/index.js
index 1a56359..ddb6df4 100644
--- a/app/routes/admin/indexes/item/documents/document/index.js
+++ b/app/routes/admin/indexes/item/documents/document/index.js
@@ -1,3 +1,16 @@
 import Route from '@ember/routing/route';
+import { hash } from 'rsvp';
 
-export default class AdminIndexesItemDocumentsDocumentIndexRoute extends Route {}
+export default class AdminIndexesItemDocumentsDocumentIndexRoute extends Route {
+  model() {
+    const index = this.modelFor('admin.indexes.item');
+    const { document_id } = this.paramsFor(
+      'admin.indexes.item.documents.document'
+    );
+
+    return hash({
+      index,
+      document: index.getDocument(document_id),
+    });
+  }
+}
diff --git a/app/templates/admin/indexes/item/documents/document/edit.hbs b/app/templates/admin/indexes/item/documents/document/edit.hbs
index a76584b..0d235c6 100644
--- a/app/templates/admin/indexes/item/documents/document/edit.hbs
+++ b/app/templates/admin/indexes/item/documents/document/edit.hbs
@@ -8,6 +8,6 @@
     type='submit'
     @text='Save'
     @style='primary'
-    @onClick={{monaco.sendValue}}
+    @onClick={{monaco.triggerSendValue}}
   />
 </MonacoEditor>