1 files changed, 13 insertions, 10 deletions

diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index f021553ae98..007fbd29e82 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -8,7 +8,7 @@ import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
 import { insertFinalNewline } from '~/lib/utils/text_utility';
-import TemplateSelectorMediator from '../blob/file_template_mediator';
+import FilepathFormMediator from '~/blob/filepath_form_mediator';
 import { BLOB_EDITOR_ERROR, BLOB_PREVIEW_ERROR } from './constants';
 
 export default class EditBlob {
@@ -25,7 +25,7 @@ export default class EditBlob {
     }
 
     this.initModePanesAndLinks();
-    this.initFileSelectors();
+    this.initFilepathForm();
     this.initSoftWrap();
     this.editor.focus();
   }
@@ -56,7 +56,6 @@ export default class EditBlob {
 
   configureMonacoEditor() {
     const editorEl = document.getElementById('editor');
-    const fileNameEl = document.getElementById('file_path') || document.getElementById('file_name');
     const fileContentEl = document.getElementById('file-content');
     const form = document.querySelector('.js-edit-blob-form');
 
@@ -64,7 +63,6 @@ export default class EditBlob {
 
     this.editor = rootEditor.createInstance({
       el: editorEl,
-      blobPath: fileNameEl.value,
       blobContent: editorEl.innerText,
     });
     this.editor.use([
@@ -73,10 +71,6 @@ export default class EditBlob {
       { definition: FileTemplateExtension },
     ]);
 
-    fileNameEl.addEventListener('change', () => {
-      this.editor.updateModelLanguage(fileNameEl.value);
-    });
-
     form.addEventListener('submit', () => {
       fileContentEl.value = insertFinalNewline(this.editor.getValue());
     });
@@ -92,13 +86,22 @@ export default class EditBlob {
     });
   }
 
-  initFileSelectors() {
+  initFilepathForm() {
     const { currentAction, projectId } = this.options;
-    this.fileTemplateMediator = new TemplateSelectorMediator({
+    this.filepathFormMediator = new FilepathFormMediator({
       currentAction,
       editor: this.editor,
       projectId,
     });
+    this.initFilepathListeners();
+  }
+
+  initFilepathListeners() {
+    const fileNameEl = document.getElementById('file_path') || document.getElementById('file_name');
+    this.editor.updateModelLanguage(fileNameEl.value);
+    fileNameEl.addEventListener('input', () => {
+      this.editor.updateModelLanguage(fileNameEl.value);
+    });
   }
 
   initModePanesAndLinks() {