Fix #953 -- Render markdown in email text previews

src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html

@@ -36,7 +36,7 @@
                                 </div>
                                 <div id="{{ item }}_preview" class="tab-pane mail-preview-group">
                                     {% for l in request.event.settings.locales %}
-                                        <pre lang="{{ l }}" for="{{ item }}" class="mail-preview"></pre>
+                                        <div lang="{{ l }}" for="{{ item }}" class="mail-preview"></div>
                                     {% endfor %}
                                 </div>
                             </div>

src/pretix/control/views/event.py

@@ -5,6 +5,7 @@ from datetime import timedelta
 from decimal import Decimal
 from urllib.parse import urlsplit
 
+import bleach
 from django.conf import settings
 from django.contrib import messages
 from django.contrib.contenttypes.models import ContentType
@@ -38,6 +39,7 @@ from pretix.base.services import tickets
 from pretix.base.services.invoices import build_preview_invoice_pdf
 from pretix.base.signals import register_ticket_outputs
 from pretix.base.templatetags.money import money_filter
+from pretix.base.templatetags.rich_text import markdown_compile
 from pretix.control.forms.event import (
     CommentForm, DisplaySettingsForm, EventDeleteForm, EventMetaValueForm,
     EventSettingsForm, EventUpdateForm, InvoiceSettingsForm, MailSettingsForm,
@@ -614,7 +616,9 @@ class MailSettingsPreview(EventPermissionRequiredMixin, View):
                 idx = matched.group('idx')
                 if idx in self.supported_locale:
                     with translation.override(self.supported_locale[idx]):
-                        msgs[self.supported_locale[idx]] = v.format_map(self.placeholders(preview_item))
+                        msgs[self.supported_locale[idx]] = bleach.linkify(markdown_compile(
+                            v.format_map(self.placeholders(preview_item))
+                        ))
 
         return JsonResponse({
             'item': preview_item,

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 {