From a42ed0dc7a73442cae5ee4169b9630947cdbc9b1 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Sat, 7 Feb 2026 20:05:03 -0500
Subject: [PATCH] Switch preview header from <template> to hidden div.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<template>.innerHTML has DocumentFragment quirks. Use a plain
hidden div instead — its innerHTML is read directly from the
normal DOM to clone the avatar and author header for previews.
---
 remarkbox/static/js/custom.js         | 20 +++++++-------------
 remarkbox/templates/snippets/forms.j2 |  4 ++--
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/remarkbox/static/js/custom.js b/remarkbox/static/js/custom.js
index cec20c2..a340fa9 100644
--- a/remarkbox/static/js/custom.js
+++ b/remarkbox/static/js/custom.js
@@ -59,24 +59,18 @@ function isReplyForm(form) {
 }
 
 function wrapPreviewAsNode(html, form) {
-    // Wrap preview HTML in node-like markup so it looks like a live comment.
-    // Uses server-rendered <template> for the avatar + author header.
-    var template = form.querySelector('.preview-header-template');
-    if (!template || !template.innerHTML.trim()) return html;
+    // Clone the hidden preview header (avatar + author + "just now")
+    // and wrap content in node-data div so it looks like a live comment.
+    var header = form.querySelector('.preview-header');
+    if (!header || !header.innerHTML.trim()) return html;
 
-    var headerHtml = template.innerHTML;
+    var headerHtml = header.innerHTML;
 
-    // For anonymous users, update name from the input field.
+    // For anonymous users, update the displayed name from the input field.
     var nameInput = form.querySelector('[name="anonymous_name"]');
     if (nameInput) {
         var name = nameInput.value.trim() || 'Anonymous';
-        var anonEl = template.content.querySelector('.preview-anon-name');
-        if (anonEl) {
-            headerHtml = headerHtml.replace(
-                '>' + anonEl.textContent + '<',
-                '>' + escapeHtml(name) + '<'
-            );
-        }
+        headerHtml = headerHtml.replace('>Anonymous<', '>' + escapeHtml(name) + '<');
     }
 
     return headerHtml + '<div class="node-data">' + html + '</div>';
diff --git a/remarkbox/templates/snippets/forms.j2 b/remarkbox/templates/snippets/forms.j2
index 83e82ee..5e66e0e 100644
--- a/remarkbox/templates/snippets/forms.j2
+++ b/remarkbox/templates/snippets/forms.j2
@@ -26,7 +26,7 @@
   {% set submit_button_value = request.namespace.submit_button_text or 'save message' %}
   {% include 'submit.j2' %}
 
-  <template class="preview-header-template">
+  <div class="preview-header js-only" style="display:none">
   {% if request.user and request.user.authenticated %}
   <img src="{{ request.user.avatar_uri(size=request.avatar_size) }}" class="avatar nested-avatar" align="left" />
   <span class="author-and-date">
@@ -39,7 +39,7 @@
     <span class="date">just now</span>
   </span>
   {% endif %}
-  </template>
+  </div>
 
   <details class="preview-details js-only" open>
   <summary class="action link preview-toggle"><span class="when-open">hide preview ▲</span><span class="when-closed">show preview ▼</span></summary>