Update how to render figcaption for advanced bg

A previous way was actually rendered Marpit reserved keywords in `<figcaption>`. A new logic is taking much simpler string concat while parsing.
marp-team · Sep 11, 2023 · 8a34849 · 8a34849
1 parent ce50a28
commit 8a34849
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 24 deletions.
diff --git a/src/markdown/background_image/advanced.js b/src/markdown/background_image/advanced.js
@@ -101,9 +101,7 @@ function _advancedBackground(md) {
                             style: style.toString(),
                             open: {
                               meta: {
-                                // For getting better alt text, we should store
-                                // the reference of the original image token.
-                                marpitBackgroundSource: img.source,
+                                marpitBackgroundAlt: img.alt,
                               },
                             },
                           },
@@ -168,27 +166,16 @@ function _advancedBackground(md) {
     tokens,
     idx,
     options,
-    env,
+    _env,
     self,
   ) => {
     const token = tokens[idx]
     const open = self.renderToken(tokens, idx, options)
 
-    if (token.meta && token.meta.marpitBackgroundSource) {
-      // Try to render figcaption for background image
-      // (Image token after parsed has text children without Marpit keywords)
-      const figcaption = self
-        .renderInlineAsText(
-          token.meta.marpitBackgroundSource.children,
-          options,
-          env,
-        )
-        .trim()
-
-      if (figcaption)
-        return `${open}<figcaption>${md.utils.escapeHtml(
-          figcaption,
-        )}</figcaption>`
+    if (token.meta?.marpitBackgroundAlt) {
+      return `${open}<figcaption>${md.utils.escapeHtml(
+        token.meta.marpitBackgroundAlt,
+      )}</figcaption>`
     }
 
     return open

diff --git a/src/markdown/background_image/apply.js b/src/markdown/background_image/apply.js
@@ -74,6 +74,7 @@ function _backgroundImageApply(md) {
                 size,
                 url,
                 width,
+                options,
               } = t.meta.marpitImage
 
               if (background && !url.match(/^\s*$/)) {
@@ -85,6 +86,11 @@ function _backgroundImageApply(md) {
                   }
                 } else {
                   // Background image
+                  let altText = ''
+
+                  for (const opt of options)
+                    if (!opt.consumed) altText += opt.leading + opt.content
+
                   current.images = [
                     ...(current.images || []),
                     {
@@ -100,7 +106,7 @@ function _backgroundImageApply(md) {
                       })(),
                       url,
                       width,
-                      source: t,
+                      alt: altText.trimStart(),
                     },
                   ]
                 }

diff --git a/src/markdown/image/parse.js b/src/markdown/image/parse.js
@@ -124,7 +124,7 @@ function _parseImage(md) {
 
       if (hasConsumed) {
         let newTokens = []
-        md.inline.parse(updatedAlt.trimLeft(), state.md, state.env, newTokens)
+        md.inline.parse(updatedAlt.trimStart(), state.md, state.env, newTokens)
 
         token.children = newTokens
       }

diff --git a/test/markdown/directives/apply.js b/test/markdown/directives/apply.js
@@ -284,7 +284,6 @@ describe('Marpit directives apply plugin', () => {
               `
 
               const $ = load(mdWithSVG().render(paginateDirs))
-              console.log($.html())
               const sections = $('section')
 
               expect(sections.eq(0).data('marpit-pagination')).toBeUndefined()

diff --git a/test/marpit.js b/test/marpit.js
@@ -340,7 +340,9 @@ describe('Marpit', () => {
       describe('Advanced background image powered by inline SVG mode', () => {
         it('has figure element with background-image in the isolated layer', async () => {
           const $ = load(
-            new Marpit({ inlineSVG: true }).render('![bg Advanced](test)').html,
+            new Marpit({ inlineSVG: true }).render(
+              '![bg  Advanced background](test)',
+            ).html,
           )
 
           const figure = $('figure')
@@ -352,7 +354,7 @@ describe('Marpit', () => {
             expect(decl.value).toBe('url("test")')
           })
 
-          expect(figure.find('figcaption').text()).toBe('Advanced')
+          expect(figure.find('figcaption').html()).toBe('Advanced background')
         })
       })
     })