Properly render the news preview in both dark and lightmode.

This requires us to render the email template in an iframe to prevent it's styles leaking out into the main page.

Author: dpage

media/css/main.css

@@ -1851,6 +1851,14 @@ details.release-notes-list {
     max-width: 650px;
 }
 
+.moderation-preview-iframe {
+    width: 100%;
+    min-height: 400px;
+    border: 1px solid var(--button-input-bdr-color);
+    border-radius: 5px;
+    background-color: #fff;
+}
+
 /* Buttons that are images */
 button.imagebutton {
     border: 0;

media/js/moderation_preview.js

@@ -0,0 +1,36 @@
+/*
+ * Moderation preview handler
+ * Renders HTML content in iframes to isolate styles from the main page
+ */
+document.addEventListener('DOMContentLoaded', function() {
+    /* Find preview data textareas and render them in iframes */
+    var dataAreas = document.getElementsByClassName('moderation-preview-data');
+    for (var i = 0; i < dataAreas.length; i++) {
+        var dataArea = dataAreas[i];
+        var container = dataArea.parentElement;
+        var content = dataArea.value;
+
+        /* Create an iframe to isolate the HTML content styles */
+        var iframe = document.createElement('iframe');
+        iframe.className = 'moderation-preview-iframe';
+        iframe.sandbox = 'allow-same-origin';
+        iframe.srcdoc = content;
+
+        /* Resize iframe to fit content after it loads */
+        iframe.onload = function() {
+            try {
+                var contentHeight = this.contentDocument.body.scrollHeight;
+                if (contentHeight > 0) {
+                    this.style.height = (contentHeight + 20) + 'px';
+                }
+            } catch (e) {
+                /* Only ignore SecurityError/cross-origin errors, rethrow others */
+                if (e.name !== 'SecurityError') {
+                    throw e;
+                }
+            }
+        };
+
+        container.appendChild(iframe);
+    }
+});

templates/account/submit_preview.html

@@ -17,11 +17,24 @@ <h2>Your {{objtype}}</h2>
 {%for fld, title, contents, mdcontents, note in preview %}
 <div class="row">
   <div class="col-sm-2 col-form-label"><strong>{{title}}</strong></div>
-  <div class="col-sm-10">{%if mdcontents%}<div class="moderation-mdpreview-wrap">{{mdcontents|safe}}</div>{%else%}{{contents}}{%endif%}</div>
+  <div class="col-sm-10">
+    {%if mdcontents%}
+      <div class="moderation-mdpreview-wrap moderation-preview-container">
+        {# Use hidden textarea to store raw HTML without browser parsing #}
+        <textarea class="moderation-preview-data" style="display:none;">{{mdcontents}}</textarea>
+      </div>
+    {%else%}
+      {{contents}}
+    {%endif%}
+  </div>
 </div>
 {%endfor%}
 
 <h2>Confirm</h2>
 {%include "base/form_contents.html" with savebutton="Submit for moderation"%}
 
 {%endblock%}
+
+{%block extrascript%}
+<script src="/media/js/moderation_preview.js?{{gitrev}}"></script>
+{%endblock%}