1 files changed, 30 insertions, 44 deletions

diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index f14d86114b8..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: {
@@ -192,23 +194,6 @@ export default {
         this.createEditorInstance();
       }
     },
-    panelResizing() {
-      if (!this.panelResizing) {
-        this.refreshEditorDimensions();
-      }
-    },
-    showTabs() {
-      this.$nextTick(() => this.refreshEditorDimensions());
-    },
-    rightPaneIsOpen() {
-      this.refreshEditorDimensions();
-    },
-    showEditor(val) {
-      if (val) {
-        // We need to wait for the editor to actually be rendered.
-        this.$nextTick(() => this.refreshEditorDimensions());
-      }
-    },
     showContentViewer(val) {
       if (!val) return;
 
@@ -324,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({
@@ -342,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);
 
@@ -396,10 +391,6 @@ export default {
         fileLanguage: this.model.language,
       });
 
-      this.$nextTick(() => {
-        this.editor.updateDimensions();
-      });
-
       this.$emit('editorSetup');
       if (performance.getEntriesByName(WEBIDE_MARK_FILE_CLICKED).length) {
         eventHub.$emit(WEBIDE_MEASURE_FILE_AFTER_INTERACTION);
@@ -415,11 +406,6 @@ export default {
         });
       }
     },
-    refreshEditorDimensions() {
-      if (this.showEditor && this.editor) {
-        this.editor.updateDimensions();
-      }
-    },
     fetchEditorconfigRules() {
       return getRulesWithTraversal(this.file.path, (path) => {
         const entry = this.entries[path];