ability to preview notes

app/assets/javascripts/application.js

@@ -18,6 +18,7 @@
 //= require chosen-jquery
 //= require raphael
 //= require branch-graph
+//= require Markdown.Converter
 //= require_tree .
 
 $(document).ready(function(){
@@ -26,7 +27,6 @@ $(document).ready(function(){
     $(this).select();
   });
 
-
   $('body').on('ajax:complete, ajax:beforeSend, submit', 'form', function(e){
     var buttons = $('[type="submit"]', this);
     switch( e.type ){
@@ -70,6 +70,24 @@ $(document).ready(function(){
   $(".supp_diff_link").bind("click", function() {
     showDiff(this);
   });
+
+  /**
+   * Note markdown preview
+   *
+   */
+  $('#preview-link').on('click', function(e) {
+    var note = $('#note_note').val();
+    if (note.trim().length === 0) { note = 'Nothing to preview'; }
+    var converter = new Markdown.Converter();
+    var md_preview = converter.makeHtml(note);
+    $('#preview-note').html(md_preview);
+
+    var previewLinkText = ($(this).text() == 'Preview' ? 'Edit' : 'Preview');
+    $(this).text(previewLinkText);
+
+    $('#preview-note, #note_note').toggle();
+    e.preventDefault();
+  });
 });
 
 function focusSearch() {

app/views/notes/_form.html.haml

@@ -7,10 +7,12 @@
 
   = f.hidden_field :noteable_id
   = f.hidden_field :noteable_type
-  = f.text_area :note,  :size => 255
+  = f.text_area :note, :size => 255
+  #preview-note.well.hide
   %p.hint
     = link_to "Gitlab Markdown", help_markdown_path, :target => '_blank'
     is enabled.
+    = link_to 'Preview', '#', :id => 'preview-link'
 
   .row.note_advanced_opts.hide
     .span4