Add the option to introduce rich-text placeholders (#4657)

* Add the option to introduce rich-text placeholders

* Add tests in test_format

* Add some css

* Block vs inline

* Some fixed css

* Update src/pretix/control/forms/event.py

Co-authored-by: Mira <weller@rami.io>

* Add missing docstring prat

---------

Co-authored-by: Mira <weller@rami.io>

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

@@ -194,66 +194,6 @@ div[data-formset-body], div[data-formset-form], div[data-nested-formset-form], d
   line-height: 30px;
 }
 
-div.mail-preview {
-  border: 1px solid #ccc;
-  border-top-width: 1px;
-  border-radius: 3px;
-
-  .placeholder {
-    background: var(--pretix-brand-warning-transparent-60);
-  }
-}
-
-.mail-preview-group div[lang] {
-  @include border-top-radius(0px);
-  @include border-bottom-radius(0px);
-  border-top-width: 0;
-  margin-bottom: 0;
-  padding-right: 15px;
-  padding-bottom: 8px;
-
-  &:first-child {
-    @include border-top-radius($input-border-radius);
-    border-top-width: 1px;
-  }
-  &:last-child {
-    @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;
-  }
-  /* Reset styling from bootstrap that we don't actually have in emails */
-  pre {
-    background: none;
-    border: none;
-    padding: 0;
-  }
-}
-
 .search-line {
   width: 100%;
   margin-bottom: 20px;

src/pretix/static/pretixcontrol/scss/_mail_preview.scss

@@ -0,0 +1,93 @@
+div.mail-preview {
+  border: 1px solid #ccc;
+  border-top-width: 1px;
+  border-radius: 3px;
+
+  .placeholder {
+    background: var(--pretix-brand-warning-transparent-60);
+  }
+  .placeholder-html {
+    background: none;
+    outline: 2px solid var(--pretix-brand-warning-transparent-60);
+    display: inline-block;
+  }
+}
+
+.mail-preview-group div[lang] {
+  @include border-top-radius(0px);
+  @include border-bottom-radius(0px);
+  border-top-width: 0;
+  margin-bottom: 0;
+  padding-right: 15px;
+  padding-bottom: 8px;
+
+  &:first-child {
+    @include border-top-radius($input-border-radius);
+    border-top-width: 1px;
+  }
+  &:last-child {
+    @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;
+  }
+  /* Reset styling from bootstrap that we don't actually have in emails */
+  pre {
+    background: none;
+    border: none;
+    padding: 0;
+  }
+
+  /* Add some basic styling similar to our default email renderers */
+  a.button {
+    display: inline-block;
+    padding: 10px 16px;
+    font-size: 14px;
+    line-height: 1.33333;
+    border: 1px solid #cccccc;
+    border-radius: 6px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    margin: 5px;
+    text-decoration: none;
+    color: var(--pretix-brand-primary);
+  }
+
+  table {
+    width: 100%;
+  }
+
+  table td {
+    vertical-align: top;
+    text-align: left;
+    padding: 0;
+  }
+
+  .text-right, table td.text-right {
+    text-align: right;
+  }
+}

src/pretix/static/pretixcontrol/scss/main.scss

@@ -12,6 +12,7 @@
 @import "_flags.scss";
 @import "_orders.scss";
 @import "_dashboard.scss";
+@import "_mail_preview.scss";
 @import "../../pretixbase/scss/webfont.scss";
 @import "../../fileupload/jquery.fileupload.scss";
 @import "../../leaflet/leaflet.scss";