Render announcements, question replies, and messages as markdown

Author: prandla

cms/server/admin/templates/announcements.html

@@ -24,7 +24,8 @@ <h2 id="title_announcements" class="toggling_on">Announcements</h2>
           </div>
           <div class="notification_text">
             <label for="new_text">Text</label>
-            <textarea name="text" id="new_text" style="width: 100%" ></textarea>
+            <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;.
           </div>
           <input type="submit"
                  value="Add announcement" />

cms/server/admin/templates/participation.html

@@ -179,6 +179,7 @@ <h2 id="title_questions" class="toggling_on">Questions</h2>
             <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;.
             </div>
             <input type="submit" value="Send"/>
           </form>
@@ -210,7 +211,8 @@ <h2 id="title_messages" class="toggling_on">Messages</h2>
             </div>
             <div class="notification_text">
               Text:
-              <textarea name="message_text" style="width: 100%" ></textarea>
+              <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;.
             </div>
           <input type="submit" value="Send"/>
           </div>

cms/server/admin/templates/questions.html

@@ -121,6 +121,7 @@ <h1>Questions</h1>
           <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;.
           </div>
           <input type="submit" value="Send"/>
         </form>

cms/server/contest/static/cws_style.css

@@ -92,6 +92,11 @@ div.question_list div.answer div.body,
 div.message_list div.message div.body {
     padding-top: 5px;
     clear: both;
+}
+
+/* admin-sent messages have markdown formatting and thus don't need
+ * mucking with whitespace, but user questions are plaintext */
+div.question_list div.question div.body {
     white-space: pre-line;
 }
 

cms/server/contest/templates/communication.html

@@ -22,7 +22,7 @@ <h4 class="subject empty">{% trans %}(no subject){% endtrans %}</h4>
         {% endif %}
         <span class="timestamp">{{ msg.timestamp|format_datetime_smart }}</span>
         {% if msg.text|length > 0 %}
-        <div class="body">{{ msg.text }}</div>
+        <div class="body">{{ msg.text | markdown }}</div>
         {% endif %}
     </div>
     {% endfor %}
@@ -91,7 +91,7 @@ <h4 class="subject empty">{% trans %}(no subject){% endtrans %}</h4>
             {% endif %}
         <span class="timestamp">{{ msg.reply_timestamp|format_datetime_smart }}</span>
             {% if msg.reply_text|length > 0 %}
-        <div class="body">{{ msg.reply_text }}</div>
+        <div class="body">{{ msg.reply_text | markdown }}</div>
             {% endif %}
     </div>
         {% else %}
@@ -118,7 +118,7 @@ <h4 class="subject empty">{% trans %}(no subject){% endtrans %}</h4>
         {% endif %}
         <span class="timestamp">{{ msg.timestamp|format_datetime_smart }}</span>
         {% if msg.text|length > 0 %}
-        <div class="body">{{ msg.text }}</div>
+        <div class="body">{{ msg.text | markdown }}</div>
         {% endif %}
     </div>
     {% endfor %}

cms/server/jinja2_toolbox.py

@@ -28,6 +28,8 @@
 from jinja2 import Environment, StrictUndefined, contextfilter, \
     contextfunction, environmentfunction
 from jinja2.runtime import Context
+import markdown_it
+import markupsafe
 
 from cms import TOKEN_MODE_DISABLED, TOKEN_MODE_FINITE, TOKEN_MODE_INFINITE, \
     TOKEN_MODE_MIXED, FEEDBACK_LEVEL_FULL, FEEDBACK_LEVEL_RESTRICTED, \
@@ -138,6 +140,19 @@ def today(ctx: Context, dt: datetime) -> bool:
         == now.replace(tzinfo=utc).astimezone(timezone).date()
 
 
+def markdown_filter(text: str) -> markupsafe.Markup:
+    """Renders text as markdown and returns a Markup object
+    corresponding to it.
+
+    text: The markdown text to render.
+
+    return: rendered HTML wrapped in the Markup class.
+    """
+    md = markdown_it.MarkdownIt('js-default')
+    html = md.render(text)
+    return markupsafe.Markup(html)
+
+
 def instrument_generic_toolbox(env: Environment):
     env.globals["iter"] = iter
     env.globals["next"] = next
@@ -163,6 +178,7 @@ def instrument_generic_toolbox(env: Environment):
     env.filters["any"] = any_
     env.filters["dictselect"] = dictselect
     env.filters["make_timestamp"] = make_timestamp
+    env.filters["markdown"] = markdown_filter
 
     env.tests["contains"] = lambda s, p: p in s
     env.tests["endswith"] = lambda s, p: s.endswith(p)

requirements.txt

@@ -15,6 +15,7 @@ chardet>=3.0,<5.3  # https://pypi.python.org/pypi/chardet
 babel==2.12.1  # http://babel.pocoo.org/en/latest/changelog.html
 pyxdg>=0.26,<0.29  # https://freedesktop.org/wiki/Software/pyxdg/
 Jinja2>=2.10,<2.11  # http://jinja.pocoo.org/docs/latest/changelog/
+markdown-it-py==3.0.0  # https://github.com/executablebooks/markdown-it-py/blob/master/CHANGELOG.md
 
 # See https://github.com/pallets/markupsafe/issues/286 but breaking change in
 # MarkupSafe causes jinja to break