From 6b9187f420cfacb37a71ce9987a132c57f133a33 Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Mon, 2 Mar 2026 12:01:16 +0100
Subject: [PATCH] fix(articles): iframe preview + collapsible meta + word count
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the auto-escaped `{{ body_html }}` div (showed raw HTML tags)
with a sandboxed `<iframe srcdoc>` pattern matching the email preview.
Both the initial page load and the HTMX live-update endpoint now build
a full `preview_doc` document embedding the public CSS and wrapping
content in `<div class="article-body">` — pixel-perfect against the
live article, admin styles fully isolated.

Also:
- Delete ~65 lines of redundant `.preview-body` custom CSS
- Add "Meta ▾" toolbar toggle to collapse/expand metadata strip
- Add word count footer in the editor pane (updates on input)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |   3 +
 web/src/padelnomics/admin/routes.py           |  29 +++-
 .../admin/templates/admin/article_form.html   | 145 ++++++++----------
 .../admin/partials/article_preview.html       |  11 +-
 4 files changed, 99 insertions(+), 89 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2c54e0..dbd229e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+### Fixed
+- **Article editor preview now renders HTML correctly** — replaced the raw `{{ body_html }}` div (which Jinja2 auto-escaped to literal `<h1>...</h1>` text) with a sandboxed `<iframe srcdoc="...">` pattern. The route builds a full `preview_doc` HTML document embedding the public site stylesheet (`/static/css/output.css`) and wraps content in `<div class="article-body">`, so the preview is pixel-perfect against the live article. The `article_preview` POST endpoint uses the same pattern for HTMX live updates. Removed ~65 lines of redundant `.preview-body` custom CSS from the editor template.
+
 ### Changed
 - **Unified confirm dialog — pure HTMX `hx-confirm` + `<form method="dialog">`** — eliminated the `confirmAction()` JS function and the duplicate `cloneNode` hack. All confirmation prompts now go through a single `showConfirm()` Promise-based function called by the `htmx:confirm` interceptor. The dialog HTML uses `<form method="dialog">` for native close semantics (`returnValue` is `"ok"` or `"cancel"`), removing the need to clone and replace buttons on every invocation. All 12 Padelnomics call sites converted from `onclick=confirmAction(...)` to `hx-boost="true"` + `hx-confirm="..."` on the submit button. Pipeline trigger endpoints updated to treat `HX-Boosted: true` requests as non-HTMX (returning a redirect rather than an inline partial) so boosted form submissions flow through the normal redirect cycle. Same changes applied to BeanFlows and the quart-saas-boilerplate template.
   - `web/src/padelnomics/admin/templates/admin/base_admin.html`: replaced dialog `<div>` with `<form method="dialog">`, replaced `confirmAction()` + inline `htmx:confirm` handler with unified `showConfirm()` + single `htmx:confirm` listener
diff --git a/web/src/padelnomics/admin/routes.py b/web/src/padelnomics/admin/routes.py
index 7a0a43e..8801fc3 100644
--- a/web/src/padelnomics/admin/routes.py
+++ b/web/src/padelnomics/admin/routes.py
@@ -2540,11 +2540,11 @@ async def article_new():
 
         if not title or not body:
             await flash("Title and body are required.", "error")
-            return await render_template("admin/article_form.html", data=dict(form), editing=False)
+            return await render_template("admin/article_form.html", data=dict(form), editing=False, preview_doc="")
 
         if is_reserved_path(url_path):
             await flash(f"URL path '{url_path}' conflicts with a reserved route.", "error")
-            return await render_template("admin/article_form.html", data=dict(form), editing=False)
+            return await render_template("admin/article_form.html", data=dict(form), editing=False, preview_doc="")
 
         # Render markdown → HTML with scenario + product cards baked in
         body_html = mistune.html(body)
@@ -2577,7 +2577,7 @@ async def article_new():
         await flash(f"Article '{title}' created.", "success")
         return redirect(url_for("admin.articles"))
 
-    return await render_template("admin/article_form.html", data={}, editing=False, body_html="")
+    return await render_template("admin/article_form.html", data={}, editing=False, preview_doc="")
 
 
 @bp.route("/articles/<int:article_id>/edit", methods=["GET", "POST"])
@@ -2613,7 +2613,7 @@ async def article_edit(article_id: int):
         if is_reserved_path(url_path):
             await flash(f"URL path '{url_path}' conflicts with a reserved route.", "error")
             return await render_template(
-                "admin/article_form.html", data=dict(form), editing=True, article_id=article_id,
+                "admin/article_form.html", data=dict(form), editing=True, article_id=article_id, preview_doc="",
             )
 
         # Re-render if body provided
@@ -2658,6 +2658,13 @@ async def article_edit(article_id: int):
     body = raw[m.end():].lstrip("\n") if m else raw
 
     body_html = mistune.html(body) if body else ""
+    css_url = url_for("static", filename="css/output.css")
+    preview_doc = (
+        f"<!doctype html><html><head>"
+        f"<link rel='stylesheet' href='{css_url}'>"
+        f"<style>html,body{{margin:0;padding:0}}body{{padding:2rem 2.5rem}}</style>"
+        f"</head><body><div class='article-body'>{body_html}</div></body></html>"
+    ) if body_html else ""
 
     data = {**dict(article), "body": body}
     return await render_template(
@@ -2665,7 +2672,7 @@ async def article_edit(article_id: int):
         data=data,
         editing=True,
         article_id=article_id,
-        body_html=body_html,
+        preview_doc=preview_doc,
     )
 
 
@@ -2674,13 +2681,19 @@ async def article_edit(article_id: int):
 @csrf_protect
 async def article_preview():
     """Render markdown body to HTML for the live editor preview panel."""
-    from markupsafe import Markup
     form = await request.form
     body = form.get("body", "")
     m = _FRONTMATTER_RE.match(body)
     body = body[m.end():].lstrip("\n") if m else body
-    body_html = Markup(mistune.html(body)) if body else ""
-    return await render_template("admin/partials/article_preview.html", body_html=body_html)
+    body_html = mistune.html(body) if body else ""
+    css_url = url_for("static", filename="css/output.css")
+    preview_doc = (
+        f"<!doctype html><html><head>"
+        f"<link rel='stylesheet' href='{css_url}'>"
+        f"<style>html,body{{margin:0;padding:0}}body{{padding:2rem 2.5rem}}</style>"
+        f"</head><body><div class='article-body'>{body_html}</div></body></html>"
+    ) if body_html else ""
+    return await render_template("admin/partials/article_preview.html", preview_doc=preview_doc)
 
 
 @bp.route("/articles/<int:article_id>/delete", methods=["POST"])
diff --git a/web/src/padelnomics/admin/templates/admin/article_form.html b/web/src/padelnomics/admin/templates/admin/article_form.html
index e488873..ae2b9f0 100644
--- a/web/src/padelnomics/admin/templates/admin/article_form.html
+++ b/web/src/padelnomics/admin/templates/admin/article_form.html
@@ -195,84 +195,50 @@
   .ae-editor::placeholder { color: #CBD5E1; }
   .ae-editor:focus { outline: none; }
 
-  /* Preview pane */
-  .ae-preview {
+  /* Preview pane — iframe fills the content area */
+  #ae-preview-content {
     flex: 1;
-    overflow-y: auto;
-    padding: 1.5rem 2rem;
-    background: #fff;
+    display: flex;
+    min-height: 0;
   }
 
-  /* Preview typography — maps rendered markdown */
-  .ae-preview .preview-body { max-width: 42rem; }
-  .ae-preview .preview-body h1 {
-    font-family: var(--font-display);
-    font-size: 1.625rem; font-weight: 700;
-    color: #0F172A; margin: 0 0 1rem;
-    line-height: 1.25;
-  }
-  .ae-preview .preview-body h2 {
-    font-family: var(--font-display);
-    font-size: 1.25rem; font-weight: 600;
-    color: #0F172A; margin: 1.75rem 0 0.625rem;
-  }
-  .ae-preview .preview-body h3 {
-    font-size: 1.0625rem; font-weight: 600;
-    color: #0F172A; margin: 1.25rem 0 0.5rem;
-  }
-  .ae-preview .preview-body h4 {
-    font-size: 0.9375rem; font-weight: 600;
-    color: #334155; margin: 1rem 0 0.375rem;
-  }
-  .ae-preview .preview-body p  { margin: 0 0 0.875rem; color: #1E293B; line-height: 1.75; }
-  .ae-preview .preview-body ul,
-  .ae-preview .preview-body ol { margin: 0 0 0.875rem 1.375rem; color: #1E293B; }
-  .ae-preview .preview-body li { margin: 0.3rem 0; line-height: 1.65; }
-  .ae-preview .preview-body code {
-    font-family: var(--font-mono); font-size: 0.8125rem;
-    background: #F1F5F9; color: #1D4ED8;
-    padding: 0.1rem 0.35rem; border-radius: 3px;
-  }
-  .ae-preview .preview-body pre {
-    background: #0F172A; color: #CBD5E1;
-    padding: 1rem 1.125rem; border-radius: 6px;
-    overflow-x: auto; margin: 0 0 0.875rem;
-    font-size: 0.8125rem; line-height: 1.65;
-  }
-  .ae-preview .preview-body pre code {
-    background: none; color: inherit; padding: 0;
-  }
-  .ae-preview .preview-body blockquote {
-    border-left: 3px solid #1D4ED8;
-    padding-left: 1rem; margin: 0 0 0.875rem;
-    color: #475569;
-  }
-  .ae-preview .preview-body a { color: #1D4ED8; }
-  .ae-preview .preview-body hr {
-    border: none; border-top: 1px solid #E2E8F0;
-    margin: 1.5rem 0;
-  }
-  .ae-preview .preview-body strong { font-weight: 600; color: #0F172A; }
-  .ae-preview .preview-body table {
-    width: 100%; border-collapse: collapse;
-    font-size: 0.875rem; margin: 0 0 0.875rem;
-  }
-  .ae-preview .preview-body th {
-    background: #F8FAFC; font-weight: 600;
-    padding: 0.5rem 0.75rem; text-align: left;
-    border: 1px solid #E2E8F0; color: #0F172A;
-  }
-  .ae-preview .preview-body td {
-    padding: 0.5rem 0.75rem;
-    border: 1px solid #E2E8F0; color: #1E293B;
-  }
-  .ae-preview .preview-body tr:nth-child(even) td { background: #F8FAFC; }
-
   .preview-placeholder {
     font-size: 0.875rem;
     color: #94A3B8;
     font-style: italic;
-    margin: 0;
+    margin: 1.5rem 2rem;
+  }
+
+  /* Collapsible metadata */
+  .ae-meta--collapsed { display: none; }
+
+  .ae-toolbar__toggle {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #64748B;
+    background: none;
+    border: 1px solid #E2E8F0;
+    border-radius: 4px;
+    padding: 0.25rem 0.6rem;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .ae-toolbar__toggle:hover { color: #0F172A; border-color: #94A3B8; }
+
+  /* Word count footer */
+  .ae-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0.25rem 0.875rem;
+    background: #F8FAFC;
+    border-top: 1px solid #E2E8F0;
+    flex-shrink: 0;
+  }
+  .ae-wordcount {
+    font-size: 0.625rem;
+    font-family: var(--font-mono);
+    color: #94A3B8;
   }
 
   /* HTMX loading indicator — htmx toggles .htmx-request on the element */
@@ -308,6 +274,8 @@
       {{ data.get('status', 'draft') }}
     </span>
     {% endif %}
+    <button type="button" class="ae-toolbar__toggle"
+      onclick="document.querySelector('.ae-meta').classList.toggle('ae-meta--collapsed')">Meta ▾</button>
     <button form="ae-form" type="submit" class="btn btn-sm">
       {% if editing %}Save Changes{% else %}Create Article{% endif %}
     </button>
@@ -400,6 +368,9 @@
           hx-include="[name=csrf_token]"
           hx-indicator="#ae-loading"
         >{{ data.get('body', '') }}</textarea>
+        <div class="ae-footer">
+          <span id="ae-wordcount" class="ae-wordcount">0 words</span>
+        </div>
       </div>
 
       <!-- Right — Rendered preview -->
@@ -408,14 +379,17 @@
           <span class="ae-pane__label">Preview</span>
           <span id="ae-loading" class="ae-loading">Rendering…</span>
         </div>
-        <div class="ae-preview">
-          <div id="ae-preview-content">
-            {% if body_html %}
-            <div class="preview-body">{{ body_html }}</div>
-            {% else %}
-            <p class="preview-placeholder">Start writing to see a preview.</p>
-            {% endif %}
-          </div>
+        <div id="ae-preview-content" style="flex:1;display:flex;min-height:0;">
+          {% if preview_doc %}
+          <iframe
+            srcdoc="{{ preview_doc | e }}"
+            style="flex:1;width:100%;border:none;display:block;"
+            sandbox="allow-same-origin"
+            title="Article preview"
+          ></iframe>
+          {% else %}
+          <p class="preview-placeholder">Start writing to see a preview.</p>
+          {% endif %}
         </div>
       </div>
 
@@ -423,4 +397,17 @@
   </form>
 
 </div>
+<script>
+(function () {
+  var textarea = document.getElementById('body');
+  var counter = document.getElementById('ae-wordcount');
+  function updateCount() {
+    var text = textarea.value.trim();
+    var count = text ? text.split(/\s+/).length : 0;
+    counter.textContent = count + (count === 1 ? ' word' : ' words');
+  }
+  textarea.addEventListener('input', updateCount);
+  updateCount();
+}());
+</script>
 {% endblock %}
diff --git a/web/src/padelnomics/admin/templates/admin/partials/article_preview.html b/web/src/padelnomics/admin/templates/admin/partials/article_preview.html
index 92fba48..7630039 100644
--- a/web/src/padelnomics/admin/templates/admin/partials/article_preview.html
+++ b/web/src/padelnomics/admin/templates/admin/partials/article_preview.html
@@ -1,5 +1,12 @@
-{% if body_html %}
-<div class="preview-body">{{ body_html }}</div>
+{# HTMX partial: sandboxed iframe showing a rendered article preview.
+   Rendered by POST /admin/articles/preview. #}
+{% if preview_doc %}
+<iframe
+  srcdoc="{{ preview_doc | e }}"
+  style="flex:1;width:100%;border:none;display:block;"
+  sandbox="allow-same-origin"
+  title="Article preview"
+></iframe>
 {% else %}
 <p class="preview-placeholder">Start writing to see a preview.</p>
 {% endif %}