Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

1 files changed, 26 insertions, 10 deletions

diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index 7bfda46d71c..e068910c626 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import { FileTemplateExtension } from '~/editor/extensions/source_editor_file_template_ext';
 import SourceEditor from '~/editor/source_editor';
+import { getBlobLanguage } from '~/editor/utils';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
@@ -16,16 +17,7 @@ export default class EditBlob {
     this.configureMonacoEditor();
 
     if (this.options.isMarkdown) {
-      import('~/editor/extensions/source_editor_markdown_ext')
-        .then(({ EditorMarkdownExtension: MarkdownExtension } = {}) => {
-          this.editor.use(new MarkdownExtension());
-          addEditorMarkdownListeners(this.editor);
-        })
-        .catch((e) =>
-          createFlash({
-            message: `${BLOB_EDITOR_ERROR}: ${e}`,
-          }),
-        );
+      this.fetchMarkdownExtension();
     }
 
     this.initModePanesAndLinks();
@@ -34,12 +26,30 @@ export default class EditBlob {
     this.editor.focus();
   }
 
+  fetchMarkdownExtension() {
+    import('~/editor/extensions/source_editor_markdown_ext')
+      .then(({ EditorMarkdownExtension: MarkdownExtension } = {}) => {
+        this.editor.use(
+          new MarkdownExtension({ instance: this.editor, projectPath: this.options.projectPath }),
+        );
+        this.hasMarkdownExtension = true;
+        addEditorMarkdownListeners(this.editor);
+      })
+      .catch((e) =>
+        createFlash({
+          message: `${BLOB_EDITOR_ERROR}: ${e}`,
+        }),
+      );
+  }
+
   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');
 
+    this.hasMarkdownExtension = false;
+
     const rootEditor = new SourceEditor();
 
     this.editor = rootEditor.createInstance({
@@ -51,6 +61,12 @@ export default class EditBlob {
 
     fileNameEl.addEventListener('change', () => {
       this.editor.updateModelLanguage(fileNameEl.value);
+      const newLang = getBlobLanguage(fileNameEl.value);
+      if (newLang === 'markdown') {
+        if (!this.hasMarkdownExtension) {
+          this.fetchMarkdownExtension();
+        }
+      }
     });
 
     form.addEventListener('submit', () => {