make wmd editor for comments

lms/static/coffee/src/discussion/views/discussion_thread_view.coffee

@@ -76,6 +76,7 @@ if Backbone?
         view.on "comment:endorse", @endorseThread
         view.render()
         @$el.find(".responses").append(view.el)
+        view.afterInsert()
 
     addComment: =>
       @model.comment()

lms/static/coffee/src/discussion/views/response_comment_show_view.coffee

@@ -25,9 +25,6 @@ if Backbone?
     convertMath: ->
       body = @$el.find(".response-body")
       body.html DiscussionUtil.postMathJaxProcessor DiscussionUtil.markdownWithHighlight body.html()
-      # This removes paragraphs so that comments are more compact
-      body.children("p").each (index, elem) ->
-        $(elem).replaceWith($(elem).html())
       MathJax.Hub.Queue ["Typeset", MathJax.Hub, body[0]]
 
     markAsStaff: ->

lms/static/coffee/src/discussion/views/thread_response_view.coffee

@@ -3,7 +3,8 @@ if Backbone?
     tagName: "li"
 
     events:
-        "submit .comment-form": "submitComment"
+        "click .discussion-submit-comment": "submitComment"
+        "focus .wmd-input": "showEditorChrome"
 
     $: (selector) ->
       @$el.find(selector)
@@ -13,7 +14,10 @@ if Backbone?
 
     renderTemplate: ->
       @template = _.template($("#thread-response-template").html())
-      @template(@model.toJSON())
+
+      templateData = @model.toJSON()
+      templateData.wmdId = @model.id ? (new Date()).getTime()
+      @template(templateData)
 
     render: ->
       @$el.html(@renderTemplate())
@@ -25,6 +29,18 @@ if Backbone?
       @renderComments()
       @
 
+    afterInsert: ->
+      @makeWmdEditor "comment-body"
+      @hideEditorChrome()
+
+    hideEditorChrome: ->
+      @$('.wmd-button-row').hide()
+      @$('.wmd-preview').hide()
+
+    showEditorChrome: ->
+      @$('.wmd-button-row').show()
+      @$('.wmd-preview').show()
+
     renderComments: ->
       comments = new Comments()
       comments.comparator = (comment) ->
@@ -42,19 +58,18 @@ if Backbone?
       comment.set('thread', @model.get('thread'))
       view = new ResponseCommentView(model: comment)
       view.render()
-      @$el.find(".comments li:last").before(view.el)
+      @$el.find(".comments .new-comment").before(view.el)
       view
 
     submitComment: (event) ->
       event.preventDefault()
       url = @model.urlFor('reply')
-      body = @$(".comment-form-input").val()
-      if not body.trim().length
-        return
+      body = @getWmdContent("comment-body")
+      return if not body.trim().length
+      @setWmdContent("comment-body", "")
       comment = new Comment(body: body, created_at: (new Date()).toISOString(), username: window.user.get("username"), user_id: window.user.get("id"), id:"unsaved")
       view = @renderComment(comment)
       @trigger "comment:add", comment
-      @$(".comment-form-input").val("")
 
       DiscussionUtil.safeAjax
         $elem: $(event.target)

lms/templates/discussion/_underscore_templates.html

@@ -76,9 +76,13 @@
 <script type="text/template" id="thread-response-template">
     <div class="discussion-response"></div>
     <ol class="comments">
-        <li class="response-local">
-            <form class="comment-form">
-                <input type="text" placeholder="Comment&hellip;" class="comment-form-input">
+        <li class="new-comment response-local">
+            <form class="comment-form" data-id="${'<%- wmdId %>'}">
+                <ul class="discussion-errors"></ul>
+                <div class="comment-body" data-id="${'<%- wmdId %>'}"></div>
+                <div class="comment-post-control">
+                    <a class="discussion-submit-comment control-button" href="#">Submit</a>
+                </div>
             </form>
         </li>
     </ol>