From 0df2b6b1bfb919d8486f1e5e220d49f648d96c9f Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Mon, 5 Sep 2022 18:58:34 +0300
Subject: [PATCH] Add saving json from monaco-editor

---
 app/components/monaco-editor.hbs               |  2 +-
 app/components/monaco-editor.js                | 18 ++++++++++++++++++
 .../indexes/item/documents/document/edit.js    |  9 ++-------
 app/models/index.js                            |  6 +++++-
 .../indexes/item/documents/document/edit.hbs   | 10 ++++++----
 5 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/app/components/monaco-editor.hbs b/app/components/monaco-editor.hbs
index 4db3d9b..03090e2 100644
--- a/app/components/monaco-editor.hbs
+++ b/app/components/monaco-editor.hbs
@@ -1 +1 @@
-<div {{did-insert this.initEditor}} class="h-80" ...attributes></div>
+<div {{did-insert this.initEditor}} class="mb-4" ...attributes></div>
diff --git a/app/components/monaco-editor.js b/app/components/monaco-editor.js
index c693d39..1f2dc2c 100644
--- a/app/components/monaco-editor.js
+++ b/app/components/monaco-editor.js
@@ -8,10 +8,28 @@ export default class MonacoEditorComponent extends Component {
     this.editor = monaco.editor.create(el, {
       value: this.args.value,
       language: this.args.language,
+      lineNumbers: 'off',
+      roundedSelection: false,
+      scrollBeyondLastLine: false,
       minimap: {
         enabled: false,
       },
     });
+
+    // Add onChange event
+    if (this.args.onChange) {
+      this.editor.onDidChangeModelContent(() => {
+        this.args.onChange(this.editor.getValue());
+      });
+    }
+
+    // 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();
+    });
   }
 
   willDestroy() {
diff --git a/app/controllers/admin/indexes/item/documents/document/edit.js b/app/controllers/admin/indexes/item/documents/document/edit.js
index c57f5d3..4831095 100644
--- a/app/controllers/admin/indexes/item/documents/document/edit.js
+++ b/app/controllers/admin/indexes/item/documents/document/edit.js
@@ -3,12 +3,7 @@ import { action } from '@ember/object';
 
 export default class AdminIndexesItemDocumentsDocumentEditController extends Controller {
   @action
-  save(event) {
-    event.preventDefault();
-
-    const formData = new FormData(event.currentTarget);
-    const data = formData.get('document');
-
-    this.model.index.saveDocument(data);
+  save() {
+    this.model.index.saveDocument(this.model.document);
   }
 }
diff --git a/app/models/index.js b/app/models/index.js
index 3865987..ea2e1f0 100644
--- a/app/models/index.js
+++ b/app/models/index.js
@@ -48,9 +48,13 @@ export default class Index {
   }
 
   saveDocument(document) {
+    if (typeof document === 'string') {
+      document = JSON.parse(document);
+    }
+
     return query(`${this.path}/documents`, {
       method: 'POST',
-      body: JSON.stringify([JSON.parse(document)]),
+      body: JSON.stringify([document]),
     });
   }
 
diff --git a/app/templates/admin/indexes/item/documents/document/edit.hbs b/app/templates/admin/indexes/item/documents/document/edit.hbs
index efa3922..47117ca 100644
--- a/app/templates/admin/indexes/item/documents/document/edit.hbs
+++ b/app/templates/admin/indexes/item/documents/document/edit.hbs
@@ -1,5 +1,7 @@
-<form {{on 'submit' this.save}}>
-  <MonacoEditor @value={{stringify @model.document}} @language='json'/>
+<MonacoEditor
+  @value={{stringify @model.document}}
+  @language='json'
+  @onChange={{set this.model 'document'}}
+/>
 
-  <Button type='submit' @text='Save' @style='primary' />
-</form>
+<Button type='submit' @text='Save' @style='primary' @onClick={{this.save}} />