Get README to render.

app/assets/javascripts/repo/repo_binary_viewer.js

@@ -19,8 +19,8 @@ export default class RepoBinaryViewer {
       },
 
       methods: {
-        supportedNonBinaryFileType(fileExt) {
-          switch(fileExt) {
+        supportedNonBinaryFileType() {
+          switch(this.activeFile.extension) {
             case 'md':
               this.binaryTypes.markdown = true;
               return true;
@@ -33,12 +33,13 @@ export default class RepoBinaryViewer {
 
       watch: {
         blobRaw() {
-          if(!this.binary) return;
-          let supported = supportedNonBinaryFileType();
+          let supported = this.supportedNonBinaryFileType();
           if(supported) {
-
+            this.binaryTypes.markdown = true;
+            this.binary = true;
             return;
           }
+          if(!this.binary) return;
           switch(this.binaryMimeType) {
             case 'image/png':
               this.binaryTypes.png = true;

app/assets/javascripts/repo/repo_editor.js

@@ -31,6 +31,7 @@ export default class RepoEditor {
     this.vue = new Vue({
       data: () => Store,
       created () {
+        this.showHide();
         if(this.blobRaw !== ''){
           monacoEditor.setModel(
             monaco.editor.createModel(
@@ -41,29 +42,32 @@ export default class RepoEditor {
         }
       },
 
-      watch: {
-        isTree() {
-          if(!this.openedFiles.length) {
+      methods: {
+        showHide() {
+          if((!this.openedFiles.length) || this.binary) {
             self.el.style.display = 'none';
           } else {
             self.el.style.display = 'inline-block';
           }
+        }
+      },
+
+      watch: {
+        isTree() {
+          this.showHide();
         },
 
         openedFiles() {
-          if((!this.openedFiles.length) || this.binary) {
-            self.el.style.display = 'none';
-          } else {
-            self.el.style.display = 'inline-block';
-          }
+          this.showHide();
+        },
+
+        binary() {
+          this.showHide();
         },
 
         blobRaw() {
-          if(this.binary) {
-            self.el.style.display = 'none';
-          } else {
-            self.el.style.display = 'inline-block'; 
-          }
+          this.showHide();
+
           if(!this.isTree) {
             self.monacoEditor.setModel(
               monaco.editor.createModel(

app/assets/javascripts/repo/repo_helper.js

@@ -183,6 +183,7 @@ let RepoHelper = {
           this.addToOpenedFiles(data);
           this.setActiveFile(data);
         }
+        
         // if the file tree is empty
         if(Store.files.length === 0) {
           const parentURL = this.blobURLtoParent(Service.url);

app/views/projects/tree/_tree_content.html.haml

@@ -21,6 +21,7 @@
     #ide{ data: { url: repo_url } }
     #binary-viewer{ "v-if" => "binary" }
       %img{"v-if" => "binaryTypes.png", ":src" => "pngBlobWithDataURI"}
+      %div{"v-if" => "binaryTypes.markdown", "v-html" => "activeFile.html"}
 - if can_edit_tree?
   = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post
   = render 'projects/blob/new_dir'