Hide & show toolbar on MR page

app/assets/javascripts/preview_markdown.js

@@ -117,12 +117,10 @@
   }());
   markdownPreview = new window.MarkdownPreview();
-
   previewButtonSelector = '.js-md-preview-button';
-
   writeButtonSelector = '.js-md-write-button';
-
   lastTextareaPreviewed = null;
+  const markdownToolbar = $('.md-header-toolbar');
   $.fn.setupMarkdownPreview = function () {
     var $form = $(this);
@@ -146,6 +144,7 @@
     // toggle content
     $form.find('.md-write-holder').hide();
     $form.find('.md-preview-holder').show();
+    markdownToolbar.removeClass('active');
     markdownPreview.showPreview($form);
   });
@@ -167,6 +166,7 @@
     $form.find('.md-write-holder').show();
     $form.find('textarea.markdown-area').focus();
     $form.find('.md-preview-holder').hide();
+    markdownToolbar.addClass('active');
     markdownPreview.hideReferencedCommands($form);
   });

app/views/projects/_md_preview.html.haml

@@ -17,7 +17,7 @@
         %a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 }
           Preview
-      %li.md-header-toolbar
+      %li.md-header-toolbar.active
         = markdown_toolbar_button({ icon: "bold", data: { "md-tag" => "**" }, title: "Add bold text" })
         = markdown_toolbar_button({ icon: "italic", data: { "md-tag" => "*" }, title: "Add italic text" })
         = markdown_toolbar_button({ icon: "quote", data: { "md-tag" => "> ", "md-prepend" => true }, title: "Insert a quote" })