use wmd editor for comments

lms/static/coffee/src/customwmd.coffee

@@ -109,7 +109,18 @@ $ ->
         converter.hooks.chain "postConversion", processor.replaceMath
         converter
 
-    Markdown.makeWmdEditor = (appended_id) ->
+    Markdown.makeWmdEditor = (elem, appended_id) ->
+      $elem = $(elem)
+      if not $elem.length
+        console.log "warning: elem for makeWmdEditor doesn't exist"
+        return
+      if not $elem.find(".wmd-panel").length
+        _append = appended_id || ""
+        $wmdPanel = $("<div>").addClass("wmd-panel")
+                   .append($("<div>").attr("id", "wmd-button-bar#{_append}"))
+                   .append($("<textarea>").addClass("wmd-input").attr("id", "wmd-input#{_append}"))
+                   .append($("<div>").attr("id", "wmd-preview#{_append}").addClass("wmd-panel wmd-preview"))
+        $elem.append($wmdPanel)
       converter = Markdown.getMathCompatibleConverter()
       editor = new Markdown.Editor(converter, appended_id)
       delayRenderer = new MathJaxDelayRenderer()

lms/static/coffee/src/discussion.coffee

@@ -13,7 +13,6 @@ $ ->
     Discussion.bindDiscussionEvents(discussion)
     Discussion.initializeDiscussion(discussion)
 
-  Markdown.makeWmdEditor()
 
 generateLocal = (elem) ->
   (selector) -> $(elem).find(selector)
@@ -52,6 +51,7 @@ Discussion =
     window.location.reload()
 
   initializeDiscussion: (discussion) ->
+
     initializeVote = (index, content) ->
       $content = $(content)
       $local = generateLocal($content.children(".discussion-content"))
@@ -87,6 +87,10 @@ Discussion =
         watchDiscussion = generateDiscussionLink("discussion-watch-discussion", "Watch", handleWatchDiscussion)
         $local(".discussion-title-wrapper").append(watchDiscussion)
 
+      newPostBody = $(discussion).find(".new-post-body")
+      if newPostBody.length
+        Markdown.makeWmdEditor newPostBody, "-new-post-body-#{$(discussion).attr('_id')}"
+
     initializeWatchThreads = (index, thread) ->
       $thread = $(thread)
       id = $thread.attr("_id")
@@ -149,7 +153,7 @@ Discussion =
       else
         editView = $("<div>").addClass("discussion-content-edit")
 
-        textarea = $("<textarea>").addClass("comment-edit")
+        textarea = $("<div>").addClass("comment-edit")
         editView.append(textarea)
 
         anonymousCheckbox = $("<input>").attr("type", "checkbox")
@@ -158,7 +162,8 @@ Discussion =
         anonymousLabel = $("<label>").attr("for", "discussion-post-anonymously-#{id}")
                                      .html("post anonymously")
         editView.append(anonymousCheckbox).append(anonymousLabel)
-        
+
+
         if $discussionContent.parent(".thread").attr("_id") not in $$user_info.subscribed_thread_ids
           watchCheckbox = $("<input>").attr("type", "checkbox")
                                       .addClass("discussion-auto-watch")
@@ -169,6 +174,8 @@ Discussion =
           editView.append(watchCheckbox).append(watchLabel)
         
         $discussionContent.append(editView)
+
+        Markdown.makeWmdEditor $local(".comment-edit"), "-comment-edit-#{id}"
       cancelReply = generateDiscussionLink("discussion-cancel-reply", "Cancel", handleCancelReply)
       submitReply = generateDiscussionLink("discussion-submit-reply", "Submit", handleSubmitReply)
       $local(".discussion-link").hide()
@@ -192,7 +199,8 @@ Discussion =
         url = Discussion.urlFor('create_sub_comment', id)
       else
         return
-      body = $local(".comment-edit").val()
+
+      body = $local("#wmd-input-comment-edit-#{id}").val()
 
       anonymous = false || $local(".discussion-post-anonymously").is(":checked")
       autowatch = false || $local(".discussion-auto-watch").is(":checked")
@@ -227,6 +235,8 @@ Discussion =
     $discussionNonContent = $discussion.children(".discussion-non-content")
     $local = (selector) -> $discussionNonContent.find(selector)
 
+    id = $discussion.attr("_id")
+
     handleSearch = (text, isSearchWithinBoard) ->
       if text.length
         if $local(".discussion-search-within-board").is(":checked")
@@ -236,7 +246,7 @@ Discussion =
 
     handleSubmitNewThread = (elem) ->
       title = $local(".new-post-title").val()
-      body = $local(".new-post-body").val()
+      body = $local("#wmd-input-new-post-body-#{id}").val()
       url = Discussion.urlFor('create_thread', $local(".new-post-form").attr("_id"))
       $.post url, {title: title, body: body}, (response, textStatus) ->
         if textStatus == "success"

lms/static/sass/_discussion.scss

@@ -91,6 +91,7 @@ $discussion_input_width: 60%;
   .discussion-right-wrapper {
     min-height: 40px;
     float: left;
+    width: 70%;
   }
   .new-post-form {
     .new-post-title, .new-post-body {
@@ -190,7 +191,6 @@ $discussion_input_width: 60%;
 
 .wmd-panel
 {
-  margin-left: 25%;
   margin-right: 25%;
   width: 50%;
   min-width: 500px;

lms/templates/discussion/inline.html

@@ -8,14 +8,10 @@
     ${search_bar}
     <form class="new-post-form" _id="${discussion_id}">
       <input type="text" class="new-post-title" placeholder="Title"/>
-      <textarea class="new-post-body"></textarea>
+      <div class="new-post-body">
+      </div>
       <a class="discussion-new-post" href="javascript:void(0)">New Post</a>
-        <div class="wmd-panel">
-          <div id="wmd-button-bar"></div>
-          <textarea class="wmd-input" id="wmd-input">
-          </textarea>
-          <div id="wmd-preview" class="wmd-panel wmd-preview"></div>
-        </div>
+        
     </form>
   </div>
   % for thread in threads:

lms/templates/discussion/thread.html

@@ -41,14 +41,17 @@
   % for comment in comments:
     <div class="comment" _id="${comment['id']}">
       <div class="discussion-content">
-        ${render_vote(comment)}
-        <div class="discussion-right-wrapper">
-          <div class="discussion-content-view">
-            <a class="comment-body" name="${comment['id']}">${comment['body']}</a>
-            <div class="info">
-              ${render_info(comment)}
-              ${render_reply()}
-              ${render_edit()}
+        <div class="discussion-upper-wrapper clearfix">
+          ${render_vote(comment)}
+          <div class="discussion-right-wrapper">
+            <div class="discussion-content-view">
+                <a class="comment-body" name="${comment['id']}">${comment['body']}</a>
+                <div class="info">
+                  ${render_info(comment)}
+                  ${render_reply()}
+                  ${render_edit()}
+                </div>
+              </div>
             </div>
           </div>
         </div>