From c2137d23c89202b12b52b961b9a8440ce624ee72 Mon Sep 17 00:00:00 2001
From: rahul Bajaj <you@example.com>
Date: Apr 04 2018 13:19:55 +0000
Subject: Add preview feature while editing comment.


Fixes https://pagure.io/pagure/issue/1674
Fixes https://pagure.io/pagure/issue/1732
Fixes https://pagure.io/pagure/pull-request/1734

Signed-off-by: Pierre-Yves Chibon <pingou@pingoured.fr>

---

diff --git a/pagure/templates/comment_update.html b/pagure/templates/comment_update.html
index 6cb83fa..3ded1ac 100644
--- a/pagure/templates/comment_update.html
+++ b/pagure/templates/comment_update.html
@@ -9,16 +9,23 @@
     onsubmit="return try_async_comment(this, null)" >
 
 
-    <div class="tabs ui-widget ui-widget-content ui-corner-all"
-        id="comment_block">
+    <fieldset class="form-group">
+      <label for="comment"><strong>Edit comment</strong></label>
+      <small class="text-muted pull-xs-right">
+        <span class="btn btn-sm btn-secondary inactive"
+          aria-pressed="false" id="edit_previewinmarkdown">Preview
+        </span>
+      </small>
 
       <div id="edit">
         <textarea class="form-control" id="update_comment" name="update_comment" style="width:100%;">
           {{- comment.comment -}}
         </textarea>
       </div>
+      <div id="preview">
+      </div>
+    </fieldset>
 
-    <div>
 
   {{ form.csrf_token }}
     <div>
@@ -32,6 +39,43 @@
 
 </section>
 <script>
+  $("#preview").hide();
+    $("#edit_previewinmarkdown").click(
+      function(event, ui) {
+        if ($("#edit_previewinmarkdown").hasClass("inactive")){
+          var _text = $("#update_comment").val();
+          var _url = "{{ url_for('ui_ns.markdown_preview',
+                        repo=repo.name,
+                        user=repo.user.user if repo.is_fork,
+                        namespace=repo.namespace) | safe}}";
+          $.ajax({
+            url: _url ,
+            type: 'POST',
+            data: {
+              content: _text,
+              csrf_token: "{{ form.csrf_token.current_token }}",
+            },
+            dataType: 'html',
+            success: function(res) {
+                var preview = emojione.toImage(res);
+                $("#preview").html(preview);
+                $("#edit_previewinmarkdown").toggleClass("inactive active");
+                $("#update_comment").hide();
+                $("#preview" ).show();
+            },
+            error: function() {
+                alert('Unable to generate preview!');
+            }
+          });
+          return false;
+        } else if ($("#edit_previewinmarkdown").hasClass("active")){
+            $("#edit_previewinmarkdown").toggleClass("active inactive");
+            $("#update_comment").show();
+            $("#preview").hide();
+        }
+    }
+  );
+
   $.get("{{ url_for('api_ns.api_users') }}", {
     pattern: '*'
   }).done(function(resp) {