From c2137d23c89202b12b52b961b9a8440ce624ee72 Mon Sep 17 00:00:00 2001
From: rahul Bajaj <you@example.com>
Date: Apr 04 2018 13:19:55 +0000
Subject: [PATCH 1/2] 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) {

From 323c58f3025a2681f8ef1d23168dc96ec8557118 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Chibon <pingou@pingoured.fr>
Date: Apr 04 2018 13:19:55 +0000
Subject: [PATCH 2/2] Add a preview button when editing the initial comment of a PR


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

---

diff --git a/pagure/templates/pull_request_title.html b/pagure/templates/pull_request_title.html
index 0cb39ee..fbe1efd 100644
--- a/pagure/templates/pull_request_title.html
+++ b/pagure/templates/pull_request_title.html
@@ -8,7 +8,9 @@
 {% block header %}
 <link href="{{ url_for('static', filename='vendor/emojione/emojione.sprites.css') }}"
   rel="stylesheet" />
-  <link href="{{ url_for('static', filename='vendor/selectize/selectize.bootstrap3.css') }}"
+<link href="{{ url_for('static', filename='vendor/selectize/selectize.bootstrap3.css') }}"
+  rel="stylesheet" />
+<link href="{{ url_for('static', filename='vendor/jquery.atwho/jquery.atwho.css') }}"
   rel="stylesheet" />
 {% endblock %}
 
@@ -31,9 +33,24 @@
             {{ render_bootstrap_field(
                 form.title,
                 field_description="the new title of your pull-request") }}
-            {{ render_bootstrap_field(
-                form.initial_comment,
-                field_description="description of your pull-request") }}
+
+            <fieldset class="form-group">
+              <label for="comment"><strong>Initial 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="initial_comment" name="initial_comment" style="width:100%;">
+                  {{- form.initial_comment.data -}}
+                </textarea>
+              </div>
+              <div id="preview">
+              </div>
+            </fieldset>
+
           </table>
           <p class="buttons indent">
             <input type="submit" class="btn btn-primary" value="Edit">
@@ -54,3 +71,59 @@
 </div>
 
 {% endblock %}
+
+{% block jscripts %}
+{{ super() }}
+<script type="text/javascript"
+  src="{{ url_for('static', filename='vendor/emojione/emojione.min.js') }}">
+</script>
+<script type="text/javascript"
+  src="{{ url_for('static', filename='emoji/emojicomplete.js') }}">
+</script>
+<script type="text/javascript"
+  src="{{ url_for('static', filename='vendor/jquery.caret/jquery.caret.min.js') }}">
+</script>
+<script type="text/javascript"
+  src="{{ url_for('static', filename='vendor/jquery.atwho/jquery.atwho.min.js') }}">
+</script>
+
+<script>
+  $("#preview").hide();
+  $("#edit_previewinmarkdown").click(
+    function(event, ui) {
+      if ($("#edit_previewinmarkdown").hasClass("inactive")){
+        var _text = $("#initial_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");
+              $("#initial_comment").hide();
+              $("#preview" ).show();
+          },
+          error: function() {
+              alert('Unable to generate preview!');
+          }
+        });
+        return false;
+      } else if ($("#edit_previewinmarkdown").hasClass("active")){
+          $("#edit_previewinmarkdown").toggleClass("active inactive");
+          $("#initial_comment").show();
+          $("#preview").hide();
+      }
+    }
+  );
+</script>
+
+{% endblock %}

