🐛 Fixed appearance of some welcome email image captions

closes https://linear.app/ghost/issue/NY-1233

Welcome emails use `<figure>` and `<figcaption>` for images and their
captions, which some email clients don't support. That causes the
styling to be messed up in those clients.

[Newsletter rendering had already fixed this.][0] This patch fixes it
the same way.

In the long term, we should unify these renderers. In the short term,
let's fix this bug.

[0]: https://github.com/TryGhost/Ghost/blob/d26bfdb0b20f029a82709782804164d621848d3f/ghost/core/core/server/services/email-service/email-renderer.js#L514-L544

Author: EvanHahn

ghost/core/core/server/services/email-rendering/finalize.js

@@ -1,10 +1,39 @@
+const cheerio = require('cheerio');
 const juice = require('juice');
 const htmlToPlaintext = require('@tryghost/html-to-plaintext');
 
+/**
+ * @param {string} html
+ * @returns {string}
+ */
+const finalizeHtml = (html) => {
+    // Add a class to each figcaption so we can style them in the email.
+    let $ = cheerio.load(html, null, false);
+    $('figcaption').addClass('kg-card-figcaption');
+    html = $.html();
+
+    const juicedHtml = juice(html, {inlinePseudoElements: true, removeStyleTags: true});
+
+    // Many email clients, like Outlook and Yahoo, [lack support for <figure>
+    // and <figcaption>][0]. To work around this, change the tags to <div>s.
+    // Juice should have properly styled them.
+    //
+    // [0]: https://www.caniemail.com/features/html-semantics/
+    $ = cheerio.load(juicedHtml, null, false);
+    $('figure, figcaption').each((_, el) => {
+        el.tagName = 'div';
+    });
+
+    return $.html();
+};
+
 module.exports = {
+    /**
+     * @param {string} html
+     * @returns {{html: string, plaintext: string}}
+     */
     finalize(html) {
-        const inlinedHtml = juice(html, {inlinePseudoElements: true, removeStyleTags: true});
-        const plaintext = htmlToPlaintext.email(inlinedHtml);
-        return {html: inlinedHtml, plaintext};
+        const resultHtml = finalizeHtml(html);
+        return {html: resultHtml, plaintext: htmlToPlaintext.email(resultHtml)};
     }
 };

ghost/core/test/unit/server/services/member-welcome-emails/member-welcome-email-renderer.test.js

@@ -902,7 +902,7 @@ describe('MemberWelcomeEmailRenderer', function () {
                 assert(!$button.attr('style')?.includes('margin: 0 auto'), 'button should not have margin: 0 auto');
             });
 
-            it('inlines figcaption styles for image card captions', async function () {
+            it('uses <div>s with inline styles for image cards', async function () {
                 lexicalRenderStub.resolves(`
                     <figure class="kg-card kg-image-card kg-card-hascaption">
                         <img src="https://example.com/photo.jpg" class="kg-image" alt="alt text" loading="lazy" width="600" height="400">
@@ -919,10 +919,15 @@ describe('MemberWelcomeEmailRenderer', function () {
                 });
 
                 const $ = cheerio.load(result.html);
-                const $figcaption = $('figcaption');
-                assert.equal($figcaption.text(), 'A caption');
-                assert($figcaption.attr('style').includes('text-align: center'), 'figcaption should be centered');
-                assert($figcaption.attr('style').includes('font-size: 13px'), 'figcaption should have 13px font');
+
+                assert.equal($('figure').length, 0);
+                assert.equal($('figcaption').length, 0);
+
+                const $caption = $('.kg-image-card .kg-card-figcaption');
+                assert.equal($caption.text(), 'A caption');
+                assert($caption.attr('style').includes('text-align: center'), 'caption should be centered');
+                assert($caption.attr('style').includes('font-size: 13px'), 'caption should have 13px font');
+                assert($caption.attr('style').includes('font-family: -apple-system'), 'caption should keep caption font family');
             });
 
             it('inlines figure margin and image max-width for image cards', async function () {
@@ -941,8 +946,9 @@ describe('MemberWelcomeEmailRenderer', function () {
                 });
 
                 const $ = cheerio.load(result.html);
-                assert($('figure').attr('style').includes('margin: 0 0 1.5em'), 'figure should have bottom margin');
-                assert($('figure img.kg-image').attr('style').includes('max-width: 100%'), 'img should have max-width: 100%');
+                const $figure = $('.kg-image-card');
+                assert($figure.attr('style').includes('margin: 0 0 1.5em'), 'figure should have bottom margin');
+                assert($figure.find('img').attr('style').includes('max-width: 100%'), 'img should have max-width: 100%');
             });
 
             it('inlines width 100% on button card outer table', async function () {