Fix binary files not showing anything in edit modemulti-file-editor-binary-editor

2 files changed, 20 insertions, 6 deletions

diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index 0d6729bb99b..1c864b176b1 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -27,6 +27,8 @@ export default {
       'changeFileContent',
     ]),
     initMonaco() {
+      if (this.shouldHideEditor) return;
+
       if (this.monacoInstance) {
         this.monacoInstance.setModel(null);
       }
@@ -94,8 +96,12 @@ export default {
 <template>
   <div
     id="ide"
-    v-if='!shouldHideEditor'
     class="blob-viewer-container blob-editor-container"
   >
+    <div
+      v-if="shouldHideEditor"
+      v-html="activeFile.html"
+    >
+    </div>
   </div>
 </template>
diff --git a/spec/javascripts/repo/components/repo_editor_spec.js b/spec/javascripts/repo/components/repo_editor_spec.js
index 82f914b7c9d..979d2185076 100644
--- a/spec/javascripts/repo/components/repo_editor_spec.js
+++ b/spec/javascripts/repo/components/repo_editor_spec.js
@@ -17,6 +17,7 @@ describe('RepoEditor', () => {
     f.active = true;
     f.tempFile = true;
     vm.$store.state.openFiles.push(f);
+    vm.$store.getters.activeFile.html = 'testing';
     vm.monaco = true;
 
     vm.$mount();
@@ -31,18 +32,25 @@ describe('RepoEditor', () => {
   it('renders an ide container', (done) => {
     Vue.nextTick(() => {
       expect(vm.shouldHideEditor).toBeFalsy();
+      expect(vm.$el.textContent.trim()).toBe('');
+
       done();
     });
   });
 
   describe('when open file is binary and not raw', () => {
-    it('does not render the IDE', (done) => {
+    beforeEach((done) => {
       vm.$store.getters.activeFile.binary = true;
 
-      Vue.nextTick(() => {
-        expect(vm.shouldHideEditor).toBeTruthy();
-        done();
-      });
+      Vue.nextTick(done);
+    });
+
+    it('does not render the IDE', () => {
+      expect(vm.shouldHideEditor).toBeTruthy();
+    });
+
+    it('shows activeFile html', () => {
+      expect(vm.$el.textContent.trim()).toBe('testing');
     });
   });
 });