From: Dave Page <dpage@pgadmin.org>
Date: Fri, 28 Nov 2025 08:52:04 +0000 (+0000)
Subject: Properly render the news preview in both dark and lightmode.
X-Git-Url: http://git.postgresql.org/gitweb/static/gitweb.js?a=commitdiff_plain;h=33978aec1cf4e7612247ec262c5252688a74dba8;p=pgweb.git

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.
---

diff --git a/media/css/main.css b/media/css/main.css
index 3be226d3..28e01b8d 100644
--- a/media/css/main.css
+++ b/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;
diff --git a/media/js/moderation_preview.js b/media/js/moderation_preview.js
new file mode 100644
index 00000000..cff19fff
--- /dev/null
+++ b/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);
+    }
+});
diff --git a/templates/account/submit_preview.html b/templates/account/submit_preview.html
index 054e03bf..c7ac5a6e 100644
--- a/templates/account/submit_preview.html
+++ b/templates/account/submit_preview.html
@@ -17,7 +17,16 @@
 {%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%}
 
@@ -25,3 +34,7 @@
 {%include "base/form_contents.html" with savebutton="Submit for moderation"%}
 
 {%endblock%}
+
+{%block extrascript%}
+<script src="/https/git.postgresql.org/media/js/moderation_preview.js?{{gitrev}}"></script>
+{%endblock%}