diff --git a/app/components/index-setting.hbs b/app/components/index-setting.hbs
index 8212e12..702026c 100644
--- a/app/components/index-setting.hbs
+++ b/app/components/index-setting.hbs
@@ -1,18 +1,20 @@
-<Form::Element @label={{namelize @name}} @errors={{array this.error}}>
-  <MonacoEditor
-    @value={{json-stringify this.value}}
-    @language='json'
-    @sendValue={{this.save}}
-    class='h-40'
-    as |monaco|
-  >
-    <Button
-      @text='Save'
-      @style='primary'
-      @size='sm'
-      @onClick={{monaco.invokeSendValue}}
+<div class='mb-4'>
+  <Form::Element @label={{namelize @name}} @errors={{array this.error}}>
+    <MonacoEditor
+      @value={{json-stringify this.value}}
+      @language='json'
+      @sendValue={{this.save}}
+      @invoker={{this.invoker}}
+      class='h-40'
     />
-    <Button @text='Cancel' @size='sm' @onClick={{this.setInitialValue}} />
-    <Button @text='Reset' @size='sm' @onClick={{this.reset}} />
-  </MonacoEditor>
-</Form::Element>
+  </Form::Element>
+
+  <Button
+    @text='Save'
+    @style='primary'
+    @size='sm'
+    @onClick={{fn this.invoker.invoke 'invokeSendValue'}}
+  />
+  <Button @text='Cancel' @size='sm' @onClick={{this.setInitialValue}} />
+  <Button @text='Reset' @size='sm' @onClick={{this.reset}} />
+</div>
diff --git a/app/components/index-setting.js b/app/components/index-setting.js
index 76c0281..ec2cd4f 100644
--- a/app/components/index-setting.js
+++ b/app/components/index-setting.js
@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import ActionInvoker from '../lib/action-invoker';
 
 export default class FormIndexSettingComponent extends Component {
   @tracked value;
@@ -9,6 +10,8 @@ export default class FormIndexSettingComponent extends Component {
   constructor() {
     super(...arguments);
 
+    this.invoker = new ActionInvoker();
+
     this.setInitialValue();
   }
 
diff --git a/app/components/monaco-editor.hbs b/app/components/monaco-editor.hbs
index 81487ee..3ff2296 100644
--- a/app/components/monaco-editor.hbs
+++ b/app/components/monaco-editor.hbs
@@ -1,7 +1,7 @@
 <div
   {{did-insert this.initEditor}}
   {{did-update this.updateValue @value}}
-  class='border mb-4'
+  class='border'
   ...attributes
 ></div>
 
diff --git a/app/components/monaco-editor.js b/app/components/monaco-editor.js
index f8f091e..67d3f42 100644
--- a/app/components/monaco-editor.js
+++ b/app/components/monaco-editor.js
@@ -3,6 +3,12 @@ import Component from '@glimmer/component';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 
 export default class MonacoEditorComponent extends Component {
+  constructor(owner, args) {
+    super(owner, args);
+
+    this.args.invoker?.subscribe(this);
+  }
+
   @action
   initEditor(el) {
     this.editor = monaco.editor.create(el, {
diff --git a/app/lib/action-invoker.js b/app/lib/action-invoker.js
new file mode 100644
index 0000000..adab499
--- /dev/null
+++ b/app/lib/action-invoker.js
@@ -0,0 +1,24 @@
+import { registerDestructor } from '@ember/destroyable';
+import { action } from '@ember/object';
+
+export default class ActionInvoker {
+  constructor() {
+    this.contexts = new Set();
+  }
+
+  @action
+  invoke(action, ...args) {
+    this.contexts.forEach((item) => {
+      item[action]?.(...args);
+    });
+  }
+
+  @action
+  subscribe(context) {
+    this.contexts = this.contexts.add(context);
+
+    registerDestructor(context, () => {
+      this.contexts.delete(context);
+    });
+  }
+}