jinja2 template: added SimpleMDE editor for markdown editing

Author: cmeerw

CHANGES.txt

@@ -58,8 +58,8 @@ Features:
   property 'messages.author' is not allowed (because 'messages' is a
   multilink). A multilink at the end (e.g. messages in the example) is
   fine.
-- Added markdown rendering using either markdown or markdown2.
-  (Christof Meerwald)
+- Added markdown rendering using markdown, markdown2 or mistune; use
+  SimpleMDE markdown editor in jinja2 template (Christof Meerwald)
 - Allow filtering by multiple date ranges or empty date. Date ranges are
   separated by comma, an empty date is represented by '-'
 

share/roundup/templates/jinja2/html/issue.item.html

@@ -18,8 +18,38 @@
   {% endif %}
 {% endblock %}
 
-{% block content %}
+{% block extracss %}
+  {% if context.is_edit_ok() %}
+    <link rel="stylesheet" type="text/css" href="@@file/simplemde.min.css">
+  {% endif %}
+{% endblock %}
+
+{% block extrajs %}
+  {% if context.is_edit_ok() %}
+    <script src='@@file/simplemde.min.js'></script>
+    <script type="text/javascript">
+    (function () {
+      var node = $('#change_note')[0];
+      var initSimpleMde = function () {
+        node.parentNode.appendChild($('<input/>', { type: 'hidden', name: 'msg-1@type', value: 'text/markdown'})[0]);
+        var simplemde = new SimpleMDE({ element: node, status: false, styleSelectedText: false });
+        simplemde.render();
+      };
+      {% if context.id %}
+      if (node.value) {
+        initSimpleMde();
+      } else {
+        node.addEventListener('focus', initSimpleMde);
+      }
+      {% else %}
+      initSimpleMde();
+      {% endif %}
+    }) ();
+    </script>
+  {% endif %}
+{% endblock %}
 
+{% block content %}
   {% include 'layout/permission.html' %}
 
   {% if context.is_view_ok() %}
@@ -69,13 +99,18 @@ <h4>Messages</h4>
         </div>
       </div>
       <div>
-        <pre>{{ msg.content.hyperlinked()|u|safe }}</pre>
+      {% if msg.type == 'text/markdown' %}
+        <div class="msg">{{ msg.content.markdown()|u|safe }}</div>
+      {% elif msg.type == 'text/x-rst' %}
+        <div class="msg">{{ msg.content.rst()|u|safe }}</div>
+      {% else %}
+        <pre class="msg">{{ msg.content.hyperlinked()|u|safe }}</pre>
+      {% endif %}
       </div>
     {% endfor %}
   {% endif %}
 
   <div class='vspace-five'></div>
 
   {{ context.history()|u|safe }}
-
 {% endblock %}

share/roundup/templates/jinja2/html/msg.index.html

@@ -27,7 +27,13 @@
         </div>
       </dl>
       <div>
-        <pre>{{ msg.content.hyperlinked()|u|safe }}</pre>
+      {% if msg.type == 'text/markdown' %}
+        <div class="msg">{{ msg.content.markdown()|u|safe }}</div>
+      {% elif msg.type == 'text/x-rst' %}
+        <div class="msg">{{ msg.content.rst()|u|safe }}</div>
+      {% else %}
+        <pre class="msg">{{ msg.content.hyperlinked()|u|safe }}</pre>
+      {% endif %}
       </div>
     </div>
     <hr>

share/roundup/templates/jinja2/html/msg.item.html

@@ -41,7 +41,13 @@
     </dl>
     <div>
       <h4>Content</h4>
-      <pre>{{ context.content.hyperlinked()|u|safe }}</pre>
+      {% if context.type == 'text/markdown' %}
+        <div class="msg">{{ context.content.markdown()|u|safe }}</div>
+      {% elif context.type == 'text/x-rst' %}
+        <div class="msg">{{ context.content.rst()|u|safe }}</div>
+      {% else %}
+        <pre class="msg">{{ context.content.hyperlinked()|u|safe }}</pre>
+      {% endif %}
     </div>
   {% endif %}
 

share/roundup/templates/jinja2/static/simplemde.min.css

@@ -37,12 +37,6 @@ tr.info {
   background-color: #d9edf7;
 }
 
-pre {
-  background-color: #f0f0f0;
-  border: 1pt solid gray;
-  padding: 6pt;
-}
-
 footer {
   font-size: 1.2em;
 }
@@ -61,6 +55,34 @@ footer {
   padding:.3rem;
 }
 
+.msg {
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  border: 1px solid #d4d4d4;
+  padding: 6px;
+}
+
+blockquote {
+  display: block;
+  background: #e8e8e8;
+  white-space: pre-line;
+  border-radius: 4px;
+  border: 1px solid #d4d4d4;
+  margin: 0 1rem;
+  padding: 0 .2rem;
+}
+
+code {
+  background: #e8e8e8;
+  white-space: pre;
+  border-radius: 4px;
+  border: 1px solid #d4d4d4;
+}
+
+pre > code {
+  display: block;
+}
+
 input:required {
   border-width: 1.5px;
   border-color: #6e747a;