Email template editor: put the cards in tabs and show a rendered preview #119

New Issue

2026-08-22T09:50:10-05:00

bermudalamb commented

2026-08-22 09:50:10 -05:00

Follow-up to #92, which shipped the editable templates as a column of stacked cards in Admin, Settings. Two problems with that layout now that there are six templates.

The cards stack vertically, so reaching the cart reminder means scrolling past five editors. Which template you are editing is knowable only from a card title you have already scrolled past.

There is no way to see what the email will look like. The editor is a markdown textarea; what gets sent is rendered HTML, with placeholders substituted and, for the two favorite templates, the consent footer appended by the server. An admin editing copy cannot currently tell whether the result reads correctly.

Change 1: tabs

One tab per template, replacing the stacked column. The tab label carries the same Default / Customised tag the card title carries today, so which templates have been customised is visible without opening each one.

Change 2: preview

A preview alongside the editor showing the rendered email: markdown rendered to HTML, placeholders substituted with representative sample values, and the consent footer included for favoriteSold and favoriteWithdrawn so that what is shown matches what is sent.

Render it on the server, not in the browser. The backend already owns renderTemplate(), and markdown-it is configured there with html: false, which is the control that stops an admin putting script into a customer's inbox. A second renderer in the frontend would be a second place for that setting to be wrong, and a preview that renders differently from the mailer is worse than no preview at all. POST /api/admin/email-templates/:key/preview, taking the unsaved subject and body and returning rendered HTML, keeps exactly one renderer in the system.

Preview the unsaved draft rather than the stored version, so the admin sees the effect of an edit before committing to it.

Verification

Every template is reachable without scrolling.
The preview of an unsaved edit reflects that edit, not the stored copy.
A body containing <script> shows escaped in the preview, matching what the mailer emits.
Both favorite templates show the consent footer in the preview; the other four do not.

Follow-up to #92, which shipped the editable templates as a column of stacked cards in Admin, Settings. Two problems with that layout now that there are six templates. The cards stack vertically, so reaching the cart reminder means scrolling past five editors. Which template you are editing is knowable only from a card title you have already scrolled past. There is no way to see what the email will look like. The editor is a markdown textarea; what gets sent is rendered HTML, with placeholders substituted and, for the two favorite templates, the consent footer appended by the server. An admin editing copy cannot currently tell whether the result reads correctly. ## Change 1: tabs One tab per template, replacing the stacked column. The tab label carries the same Default / Customised tag the card title carries today, so which templates have been customised is visible without opening each one. ## Change 2: preview A preview alongside the editor showing the rendered email: markdown rendered to HTML, placeholders substituted with representative sample values, and the consent footer included for `favoriteSold` and `favoriteWithdrawn` so that what is shown matches what is sent. Render it on the server, not in the browser. The backend already owns `renderTemplate()`, and markdown-it is configured there with `html: false`, which is the control that stops an admin putting script into a customer's inbox. A second renderer in the frontend would be a second place for that setting to be wrong, and a preview that renders differently from the mailer is worse than no preview at all. `POST /api/admin/email-templates/:key/preview`, taking the unsaved subject and body and returning rendered HTML, keeps exactly one renderer in the system. Preview the unsaved draft rather than the stored version, so the admin sees the effect of an edit before committing to it. ## Verification - Every template is reachable without scrolling. - The preview of an unsaved edit reflects that edit, not the stored copy. - A body containing `<script>` shows escaped in the preview, matching what the mailer emits. - Both favorite templates show the consent footer in the preview; the other four do not.

bermudalamb added this to the Make the password-reset email editable from Admin project 2026-08-22 09:59:01 -05:00

bermudalamb self-assigned this 2026-08-22 09:59:06 -05:00

bermudalamb referenced this issue from a commit

2026-08-22 12:54:24 -05:00

feat: tabs and a rendered preview for the email templates (#119)

bermudalamb referenced a pull request that will close this issue

2026-08-22 12:55:02 -05:00

feat: tabs and a rendered preview for the email templates (#119) #128

bermudalamb added reference feature/119-email-template-tabs

2026-08-22 12:56:25 -05:00

bermudalamb moved this to In Progress in Make the password-reset email editable from Admin on 2026-08-22 12:56:56 -05:00

bermudalamb closed this issue