diff --git a/CHANGELOG.md b/CHANGELOG.md index 19898bb..9386dab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## [Unreleased] +### Fixed + +- Advanced background: Exclude Marpit reserved image keywords from `
` correctly ([#373](https://github.com/marp-team/marpit/pull/373)) + ## v2.5.2 - 2023-09-11 ### Fixed diff --git a/src/markdown/background_image/advanced.js b/src/markdown/background_image/advanced.js index d3b44aa..213ffa2 100644 --- 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}
${md.utils.escapeHtml( - figcaption, - )}
` + if (token.meta?.marpitBackgroundAlt) { + return `${open}
${md.utils.escapeHtml( + token.meta.marpitBackgroundAlt, + )}
` } return open diff --git a/src/markdown/background_image/apply.js b/src/markdown/background_image/apply.js index 0da6d19..2f870a6 100644 --- 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 index 36b6aa7..4126894 100644 --- 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 index 45035b0..872c81b 100644 --- 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 index 1d73716..4469172 100644 --- a/test/marpit.js +++ b/test/marpit.js @@ -336,6 +336,27 @@ 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 background](test)', + ).html, + ) + + const figure = $('figure') + const ret = await postcssInstance.process(figure.attr('style'), { + from: undefined, + }) + + ret.root.walkDecls('background-image', (decl) => { + expect(decl.value).toBe('url("test")') + }) + + expect(figure.find('figcaption').html()).toBe('Advanced background') + }) + }) }) describe('CSS Filters', () => {