From 0bb6fa0d70b1018bc673e1cbfa021ce82137e110 Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Tue, 6 Sep 2022 13:22:13 +0300
Subject: [PATCH] Add MonacoEditor to index settins page

---
 app/components/index-setting.hbs              | 11 +++---
 app/components/index-setting.js               |  6 +--
 app/components/monaco-editor.hbs              |  9 ++++-
 app/components/monaco-editor.js               | 37 ++++++++++++++-----
 .../indexes/item/documents/document/edit.js   |  4 +-
 app/helpers/json-stringify.js                 |  2 +-
 .../indexes/item/documents/document/edit.hbs  | 16 +++++---
 7 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/app/components/index-setting.hbs b/app/components/index-setting.hbs
index d87701d..0570d37 100644
--- a/app/components/index-setting.hbs
+++ b/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}} />
diff --git a/app/components/index-setting.js b/app/components/index-setting.js
index 9a3aa65..d3c295b 100644
--- a/app/components/index-setting.js
+++ b/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
diff --git a/app/components/monaco-editor.hbs b/app/components/monaco-editor.hbs
index 03090e2..bb04c4a 100644
--- a/app/components/monaco-editor.hbs
+++ b/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)}}
diff --git a/app/components/monaco-editor.js b/app/components/monaco-editor.js
index 1f2dc2c..be88114 100644
--- a/app/components/monaco-editor.js
+++ b/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();
 
diff --git a/app/controllers/admin/indexes/item/documents/document/edit.js b/app/controllers/admin/indexes/item/documents/document/edit.js
index 4831095..fab42c3 100644
--- a/app/controllers/admin/indexes/item/documents/document/edit.js
+++ b/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));
   }
 }
diff --git a/app/helpers/json-stringify.js b/app/helpers/json-stringify.js
index 13686c7..165020f 100644
--- a/app/helpers/json-stringify.js
+++ b/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);
 });
diff --git a/app/templates/admin/indexes/item/documents/document/edit.hbs b/app/templates/admin/indexes/item/documents/document/edit.hbs
index 47117ca..a76584b 100644
--- a/app/templates/admin/indexes/item/documents/document/edit.hbs
+++ b/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>