From 4a8582eba92cf95bf22cc74ac23221614d4b982a Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Sat, 15 Oct 2022 09:55:37 +0300
Subject: [PATCH] Add validation

---
 app/components/index-setting.hbs |  1 +
 app/components/index-setting.js  |  5 +++++
 app/components/monaco-editor.js  | 27 +++++++++++++++++++++------
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/app/components/index-setting.hbs b/app/components/index-setting.hbs
index 7a5b867..326b230 100644
--- a/app/components/index-setting.hbs
+++ b/app/components/index-setting.hbs
@@ -7,6 +7,7 @@
       @language='json'
       @sendValue={{this.save}}
       @invoker={{this.invoker}}
+      @onDidChangeValidation={{this.onDidChangeValidation}}
       class='h-40'
     />
   </Form::Element>
diff --git a/app/components/index-setting.js b/app/components/index-setting.js
index d8b46bd..6fd6758 100644
--- a/app/components/index-setting.js
+++ b/app/components/index-setting.js
@@ -49,4 +49,9 @@ export default class FormIndexSettingComponent extends Component {
       this.error = error.error || error;
     }
   }
+
+  @action
+  onDidChangeValidation(error) {
+    this.error = error;
+  }
 }
diff --git a/app/components/monaco-editor.js b/app/components/monaco-editor.js
index 79febdd..82cfacb 100644
--- a/app/components/monaco-editor.js
+++ b/app/components/monaco-editor.js
@@ -1,6 +1,7 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { Uri, editor } from 'monaco-editor/esm/vs/editor/editor.api.js';
+import { registerDestructor } from '@ember/destroyable';
 
 // This is needed because the SimpleWorker.js in monaco-editor has the following code:
 // loaderConfiguration = self.requirejs.s.contexts._.config;
@@ -57,15 +58,29 @@ export default class MonacoEditorComponent extends Component {
     // }
 
     // Autoresize height of element
-    this.editor.onDidContentSizeChange(() => {
-      const contentHeight = Math.min(
-        Math.max(this.editor.getContentHeight(), 160),
-        420
+    const onDidContentSizeChangeHandler = this.editor.onDidContentSizeChange(
+      () => {
+        const contentHeight = Math.min(
+          Math.max(this.editor.getContentHeight(), 160),
+          420
+        );
+
+        el.style.height = `${contentHeight + 1}px`;
+        this.editor.layout();
+      }
+    );
+    registerDestructor(this, onDidContentSizeChangeHandler.dispose);
+
+    const onDidChangeMarkersHandler = editor.onDidChangeMarkers((uris) => {
+      const error = uris.find(
+        (item) => item.toString() === this.modelUri.toString()
       );
 
-      el.style.height = `${contentHeight + 1}px`;
-      this.editor.layout();
+      this.args.onDidChangeValidation?.(
+        error ? 'Error: the value is invalid' : false
+      );
     });
+    registerDestructor(this, onDidChangeMarkersHandler.dispose);
   }
 
   @action