Add MonacoEditor to index settins page

app/components/index-setting.hbs

@@ -1,10 +1,9 @@
-<Form::Element>
-  <Form::Textarea
-    @label={{namelize @name}}
-    @name={{@name}}
-    @value={{this.value}}
-    @required={{true}}
+<Form::Element @label={{namelize @name}}>
+  <MonacoEditor
+    @value={{json-stringify this.value}}
+    @language='json'
     @onChange={{set this 'value'}}
+    class="h-80"
   />
 
   <Button @text='Save' @style='primary' @onClick={{this.save}} />

app/components/index-setting.js

@@ -13,14 +13,12 @@ export default class FormIndexSettingComponent extends Component {
 
   @action
   save() {
-    this.args.index.updateSetting(this.args.name, JSON.parse(this.value));
+    this.args.index.updateSetting(this.args.name, this.value);
   }
 
   @action
   async setInitialValue() {
-    const value = await this.args.index.getSetting(this.args.name);
-
-    this.value = JSON.stringify(value);
+    this.value = await this.args.index.getSetting(this.args.name);
   }
 
   @action

app/components/monaco-editor.hbs

@@ -1 +1,8 @@
-<div {{did-insert this.initEditor}} class="mb-4" ...attributes></div>
+<div
+  {{did-insert this.initEditor}}
+  {{did-update this.updateValue @value}}
+  class='border mb-4'
+  ...attributes
+></div>
+
+{{yield (hash editor=this.editor sendValue=this.sendValue)}}

app/components/monaco-editor.js

@@ -17,21 +17,40 @@ export default class MonacoEditorComponent extends Component {
     });
 
     // Add onChange event
-    if (this.args.onChange) {
-      this.editor.onDidChangeModelContent(() => {
-        this.args.onChange(this.editor.getValue());
-      });
-    }
+    // if (this.args.onChange) {
+    //   this.editor.onDidChangeModelContent(() => {
+    //     this.args.onChange(this.editor.getValue());
+    //   });
+    // }
+
+    // Autoresize height of element
+    this.editor.onDidContentSizeChange(() => {
+      const contentHeight = Math.min(
+        Math.max(this.editor.getContentHeight(), 180),
+        500
+      );
 
-    // autoresize height of element
-    const disposable = this.editor.onDidContentSizeChange(() => {
-      const contentHeight = Math.min(320, this.editor.getContentHeight());
       el.style.height = `${contentHeight}px`;
       this.editor.layout();
-      disposable.dispose();
     });
   }
 
+  @action
+  updateValue(el, value) {
+    if (typeof value !== 'string') {
+      value = JSON.stringify(value);
+    }
+
+    if (value !== this.editor.getValue()) {
+      this.editor?.setValue(value);
+    }
+  }
+
+  @action
+  sendValue() {
+    this.args.sendValue?.(this.editor.getValue());
+  }
+
   willDestroy() {
     this.editor?.dispose();
 

app/controllers/admin/indexes/item/documents/document/edit.js

@@ -3,7 +3,7 @@ import { action } from '@ember/object';
 
 export default class AdminIndexesItemDocumentsDocumentEditController extends Controller {
   @action
-  save() {
-    this.model.index.saveDocument(this.model.document);
+  save(value) {
+    this.model.index.saveDocument(JSON.parse(value));
   }
 }

app/helpers/json-stringify.js

@@ -1,5 +1,5 @@
 import { helper } from '@ember/component/helper';
 
-export default helper(function jsonStringify([data], { replacer, space }) {
+export default helper(function jsonStringify([data], { replacer, space = 2 }) {
   return JSON.stringify(data, replacer, space);
 });

app/templates/admin/indexes/item/documents/document/edit.hbs

@@ -1,7 +1,13 @@
 <MonacoEditor
-  @value={{stringify @model.document}}
+  @value={{json-stringify @model.document}}
   @language='json'
-  @onChange={{set this.model 'document'}}
-/>
-
-<Button type='submit' @text='Save' @style='primary' @onClick={{this.save}} />
+  @sendValue={{this.save}}
+  as |monaco|
+>
+  <Button
+    type='submit'
+    @text='Save'
+    @style='primary'
+    @onClick={{monaco.sendValue}}
+  />
+</MonacoEditor>