engineering/remarkbox
1
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Switch preview header from <template> to hidden div.

Browse source 
<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.
This commit is contained in:
russell@unturf.com 2026-02-07 20:05:03 -05:00
parent 18cd870956
commit a42ed0dc7a
2 changed files with 9 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

20
remarkbox/static/js/custom.js
View file

@ -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>';

4
remarkbox/templates/snippets/forms.j2
View file

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