add previewing markdown in AWS

Author: prandla

cms/server/admin/handlers/__init__.py

@@ -73,7 +73,8 @@
     LoginHandler, \
     LogoutHandler, \
     ResourcesHandler, \
-    NotificationsHandler
+    NotificationsHandler, \
+    MarkdownRenderHandler
 from .submission import \
     SubmissionHandler, \
     SubmissionCommentHandler, \
@@ -113,6 +114,7 @@
     (r"/resources/([0-9]+|all)/([0-9]+)", ResourcesHandler),
     (r"/notifications", NotificationsHandler),
     (r"/file/([a-f0-9]+)/([a-zA-Z0-9_.-]+)", FileFromDigestHandler),
+    (r"/render_markdown", MarkdownRenderHandler),
 
     # Contest
 

cms/server/admin/handlers/main.py

@@ -30,6 +30,7 @@
 
 from cms import ServiceCoord, get_service_shards, get_service_address
 from cms.db import Admin, Contest, Question
+from cms.server.jinja2_toolbox import markdown_filter
 from cmscommon.crypto import validate_password
 from cmscommon.datetime import make_datetime, make_timestamp
 from .base import BaseHandler, SimpleHandler, require_permission
@@ -167,3 +168,13 @@ def get(self):
         self.service.notifications = []
 
         self.write(json.dumps(res))
+
+class MarkdownRenderHandler(BaseHandler):
+    """Renders Markdown for AWS message previews."""
+
+    @require_permission(BaseHandler.AUTHENTICATED)
+    def post(self):
+        data = self.get_argument("input")
+        rendered = markdown_filter(data)
+        self.write(rendered)
+

cms/server/admin/static/aws_style.css

@@ -52,6 +52,10 @@ strong, .bold {
     font-weight: bold;
 }
 
+em {
+    font-style: italic;
+}
+
 .login_error {
     color: #F31313;
 }
@@ -420,7 +424,7 @@ th .column-sort {
   text-decoration: underline;
 }
 
-.reply_question textarea {
+.markdown_input {
     width: 100%;
 }
 

cms/server/admin/static/aws_utils.js

@@ -849,10 +849,29 @@ CMS.AWSUtils.prototype.question_reply_toggle = function(event, invoker) {
  * Updates visibility of answer box when choosing quick answers.
  */
 CMS.AWSUtils.prototype.update_additional_answer = function(event, invoker) {
-    var obj = invoker.parentElement.querySelector(".alternative_answer");
+    var obj = $(invoker).parent().find(".alternative_answer");
     if (invoker.value == "other") {
-        obj.style.display = "block";
+        obj.css("display", "");
     } else {
-        obj.style.display = "none";
+        obj.css("display", "none");
     }
 }
+
+/**
+ * Used by templates/macro/markdown_input.html.
+ * Asks the server to render the markdown input and displays it.
+ */
+CMS.AWSUtils.prototype.render_markdown_preview = function(target) {
+    var form_element = $(target).closest("form");
+    var md_text = form_element.find(".markdown_input").val();
+    $.ajax({
+        type: "POST",
+        url: this.url("render_markdown"),
+        data: {input: md_text},
+        dataType: "text",
+        headers: {"X-XSRFToken": get_cookie("_xsrf")},
+        success: function(response) {
+            form_element.find(".markdown_preview").html(response);
+        },
+    });
+}

cms/server/admin/templates/announcements.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% import 'macro/markdown_input.html' as macro_markdown %}
 
 {% block core %}
 <div class="core_title">
@@ -23,12 +24,12 @@ <h2 id="title_announcements" class="toggling_on">Announcements</h2>
             </datalist>
           </div>
           <div class="notification_text">
-            <label for="new_text">Text</label>
-            <textarea name="text" id="new_text" style="width: 100%" ></textarea><br/>
-            You can use Markdown here. URLs are not automatically linked, surround them with &lt;&gt; like &lt;http://example.org&gt;.
+            <label for="text">Text</label>
+            {{ macro_markdown.markdown_input("text") }}
           </div>
           <input type="submit"
                  value="Add announcement" />
+          {{ macro_markdown.markdown_preview() }}
         </form>
       </div>
     </div>

cms/server/admin/templates/macro/markdown_input.html

@@ -0,0 +1,9 @@
+{% macro markdown_input(name) %}
+<textarea name="{{ name }}" class="markdown_input"></textarea><br/>
+You can use Markdown here. URLs are not automatically linked, surround them with &lt;&gt; like &lt;http://example.org&gt;.
+<div class="markdown_preview"></div>
+{% endmacro %}
+
+{% macro markdown_preview() %}
+<input type="button" value="Preview Markdown" onclick="utils.render_markdown_preview(this)" />
+{% endmacro %}

cms/server/admin/templates/macro/question.html

@@ -1,5 +1,7 @@
 {# This macro should be imported "with context". #}
 
+{% import 'macro/markdown_input.html' as macro_markdown %}
+
 {% macro question(msg, user_id) %}
 {#
 Render one question by a participant.
@@ -96,10 +98,12 @@
         <br/>
         <div class="alternative_answer">
           Alternative answer:<br/>
-          <textarea name="reply_question_text"></textarea><br/>
-          You can use Markdown here. URLs are not automatically linked, surround them with &lt;&gt; like &lt;http://example.org&gt;.
+          {{ macro_markdown.markdown_input("reply_question_text") }}
         </div>
         <input type="submit" value="Send"/>
+        <span class="alternative_answer">
+          {{ macro_markdown.markdown_preview() }}
+        </span>
       </form>
     </div>
 {% endif %}

cms/server/admin/templates/participation.html

@@ -3,6 +3,7 @@
 {% extends "base.html" %}
 {% import 'macro/submission.html' as macro_submission %}
 {% import 'macro/question.html' as macro_question with context %}
+{% import 'macro/markdown_input.html' as macro_markdown %}
 
 {% block core %}
 <h1>
@@ -148,10 +149,10 @@ <h2 id="title_messages" class="toggling_on">Messages</h2>
             </div>
             <div class="notification_text">
               Text:
-              <textarea name="message_text" style="width: 100%" ></textarea><br/>
-              You can use Markdown here. URLs are not automatically linked, surround them with &lt;&gt; like &lt;http://example.org&gt;.
+              {{ macro_markdown.markdown_input("message_text") }}
             </div>
           <input type="submit" value="Send"/>
+          {{ macro_markdown.markdown_preview() }}
           </div>
         </form>
       </div>