Refactore monaco-editor

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>

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

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)}}

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());
   }
 

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),
+    });
+  }
+}

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),
+    });
+  }
+}

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>