diff --git a/app/controllers/admin/indexes/item/documents/document/edit.js b/app/controllers/admin/indexes/item/documents/document/edit.js
index bfcb8fe..e988bed 100644
--- a/app/controllers/admin/indexes/item/documents/document/edit.js
+++ b/app/controllers/admin/indexes/item/documents/document/edit.js
@@ -2,12 +2,19 @@ import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
+import ActionInvoker from 'meiliadmin/lib/action-invoker';
 
 export default class AdminIndexesItemDocumentsDocumentEditController extends Controller {
   @service router;
 
   @tracked error;
 
+  constructor() {
+    super(...arguments);
+
+    this.invoker = new ActionInvoker();
+  }
+
   @action
   save(value) {
     this.error = null;
diff --git a/app/templates/admin/indexes/item/documents/document/edit.hbs b/app/templates/admin/indexes/item/documents/document/edit.hbs
index fbd61a8..b69cf50 100644
--- a/app/templates/admin/indexes/item/documents/document/edit.hbs
+++ b/app/templates/admin/indexes/item/documents/document/edit.hbs
@@ -1,17 +1,18 @@
-<Form::Element @errors={{array this.error}}>
-  <MonacoEditor
-    @value={{json-stringify @model.document}}
-    @language='json'
-    @sendValue={{this.save}}
-    as |monaco|
-  >
-    <Button
-      type='submit'
-      @text='Save'
-      @style='primary'
-      @onClick={{monaco.invokeSendValue}}
+<div class='mb-4'>
+  <Form::Element @errors={{array this.error}}>
+    <MonacoEditor
+      @value={{json-stringify @model.document}}
+      @language='json'
+      @sendValue={{this.save}}
+      @invoker={{this.invoker}}
     />
+  </Form::Element>
 
-    <Button @text='Cancel' @onClick={{this.cancel}} />
-  </MonacoEditor>
-</Form::Element>
+  <Button
+    type='submit'
+    @text='Save'
+    @style='primary'
+    @onClick={{fn this.invoker.invoke 'invokeSendValue'}}
+  />
+  <Button @text='Cancel' @onClick={{this.cancel}} />
+</div>