Fix #953 -- Render markdown in email text previews

src/pretix/static/pretixcontrol/js/ui/mail.js

@@ -3,9 +3,9 @@ function preview_task_callback(data, jqXHR, status) {
     if (data.item) {
         $('#' + data.item + '_panel').data('ajaxing', false);
         for (var m in data.msgs){
-            var target = $('pre[for=' + data.item + '][lang=' + m +']');
+            var target = $('div[for=' + data.item + '][lang=' + m +']');
             if (target.length === 1){
-                target.text(data.msgs[m]);
+                target.html(data.msgs[m]);
             }
         }
     }
@@ -15,7 +15,7 @@ function preview_task_error(item) {
     "use strict";
     return function(jqXHR, textStatus, errorThrown) {
         $('#' + item + '_panel').data('ajaxing', false);
-        $('#' + item + '_preview pre').text(gettext('An error has occurred.'));
+        $('#' + item + '_preview div').text(gettext('An error has occurred.'));
         if (textStatus === "timeout") {
             alert(gettext("The request took to long. Please try again."));
         } else {
@@ -49,7 +49,7 @@ $(function () {
 
         // prepare for ajax
         $('#' + itemName + '_panel').data('ajaxing', true);
-        $('#' + itemName + '_preview pre').text(gettext('Generating messages …'));
+        $('#' + itemName + '_preview div').text(gettext('Generating messages …'));
 
         $.ajax(
             {

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -133,16 +133,18 @@ div[data-formset-body], div[data-formset-form], div[data-nested-formset-form], d
   line-height: 30px;
 }
 
-pre.mail-preview {
-  white-space: pre-line;       /* Since CSS 2.1 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+div.mail-preview {
+  border: 1px solid #ccc;
+  border-top-width: 1px;
+  border-radius: 3px;
 }
 
-.mail-preview-group pre[lang] {
+.mail-preview-group div[lang] {
   @include border-top-radius(0px);
   @include border-bottom-radius(0px);
   border-top-width: 0;
   margin-bottom: 0;
+  padding: 15px;
 
   &:first-child {
     @include border-top-radius($input-border-radius);
@@ -152,6 +154,32 @@ pre.mail-preview {
     @include border-bottom-radius($input-border-radius);
     margin-bottom: 20px;
   }
+  h2, h3 {
+    margin-bottom: 20px;
+    margin-top: 10px;
+  }
+  p {
+    margin: 0 0 10px;
+
+    /* These are technically the same, but use both */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+
+    -ms-word-break: break-all;
+    /* This is the dangerous one in WebKit, as it breaks things wherever */
+    word-break: break-all;
+    /* Instead use this non-standard one: */
+    word-break: break-word;
+
+    /* Adds a hyphen where the word breaks, if supported (No Blink) */
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .search-line {