Add latest changes from gitlab-org/gitlab@master

1 files changed, 30 insertions, 18 deletions

diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 880272752b5..d71ac766933 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -65,6 +65,8 @@ export default {
       modelManager: new ModelManager(),
       isEditorLoading: true,
       unwatchCiYaml: null,
+      SELivepreviewExtension: null,
+      MarkdownLivePreview: null,
     };
   },
   computed: {
@@ -307,17 +309,33 @@ export default {
           },
         ]);
 
-        if (
-          this.fileType === MARKDOWN_FILE_TYPE &&
-          this.editor?.getEditorType() === EDITOR_TYPE_CODE &&
-          this.previewMarkdownPath
-        ) {
+        this.$nextTick(() => {
+          this.setupEditor();
+        });
+      }
+    },
+
+    setupEditor() {
+      if (!this.file || !this.editor || this.file.loading) return;
+
+      const useLivePreviewExtension = () => {
+        this.SELivepreviewExtension = this.editor.use({
+          definition: this.MarkdownLivePreview,
+          setupOptions: { previewMarkdownPath: this.previewMarkdownPath },
+        });
+      };
+      if (
+        this.fileType === MARKDOWN_FILE_TYPE &&
+        this.editor?.getEditorType() === EDITOR_TYPE_CODE &&
+        this.previewMarkdownPath
+      ) {
+        if (this.MarkdownLivePreview) {
+          useLivePreviewExtension();
+        } else {
           import('~/editor/extensions/source_editor_markdown_livepreview_ext')
-            .then(({ EditorMarkdownPreviewExtension: MarkdownLivePreview }) => {
-              this.editor.use({
-                definition: MarkdownLivePreview,
-                setupOptions: { previewMarkdownPath: this.previewMarkdownPath },
-              });
+            .then(({ EditorMarkdownPreviewExtension }) => {
+              this.MarkdownLivePreview = EditorMarkdownPreviewExtension;
+              useLivePreviewExtension();
             })
             .catch((e) =>
               createFlash({
@@ -325,15 +343,9 @@ export default {
               }),
             );
         }
-
-        this.$nextTick(() => {
-          this.setupEditor();
-        });
+      } else if (this.SELivepreviewExtension) {
+        this.editor.unuse(this.SELivepreviewExtension);
       }
-    },
-
-    setupEditor() {
-      if (!this.file || !this.editor || this.file.loading) return;
 
       const head = this.getStagedFile(this.file.path);