Merge pull request #123 from marp-team/collect-inline-svg-tokens

Include inline SVG elements when rendered with htmlAsArray env

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Include inline SVG elements when rendered with `htmlAsArray` env ([#123](https://github.com/marp-team/marpit/pull/123))
+
 ### Changed
 
 - Small update for README and docs ([#122](https://github.com/marp-team/marpit/pull/122))

src/markdown/collect.js

@@ -20,6 +20,7 @@ function collect(md, marpit) {
     marpit.lastSlideTokens = []
 
     let currentPage
+    let pageIdx = -1
 
     const collectComment = token => {
       if (
@@ -33,21 +34,15 @@ function collect(md, marpit) {
       currentPage >= 0 && marpit.lastSlideTokens[currentPage] !== undefined
 
     for (const token of state.tokens) {
-      if (
-        token.type === 'marpit_slide_open' &&
-        token.meta &&
-        token.meta.marpitSlide !== undefined
-      ) {
-        currentPage = token.meta.marpitSlide
+      if (token.meta && token.meta.marpitSlideElement === 1) {
+        pageIdx += 1
+        currentPage = pageIdx
 
-        if (
-          currentPage >= 0 &&
-          marpit.lastSlideTokens[currentPage] === undefined
-        ) {
+        if (marpit.lastSlideTokens[currentPage] === undefined) {
           marpit.lastSlideTokens[currentPage] = [token]
           marpit.lastComments[currentPage] = []
         }
-      } else if (token.type === 'marpit_slide_close') {
+      } else if (token.meta && token.meta.marpitSlideElement === -1) {
         if (collectable()) marpit.lastSlideTokens[currentPage].push(token)
         currentPage = undefined
       } else {

test/markdown/collect.js

@@ -3,16 +3,18 @@ import MarkdownIt from 'markdown-it'
 import applyDirectives from '../../src/markdown/directives/apply'
 import collect from '../../src/markdown/collect'
 import comment from '../../src/markdown/comment'
+import inlineSVG from '../../src/markdown/inline_svg'
 import parseDirectives from '../../src/markdown/directives/parse'
 import slide from '../../src/markdown/slide'
+import { ThemeSet } from '../../src/index'
 
 describe('Marpit collect plugin', () => {
-  const themeSet = new Map()
-  themeSet.set('default', true)
+  const themeSet = new ThemeSet()
 
-  const marpitStub = () => ({
+  const marpitStub = (svg = false) => ({
     themeSet,
     lastGlobalDirectives: {},
+    options: { inlineSVG: svg },
   })
 
   const md = marpitInstance =>
@@ -22,6 +24,7 @@ describe('Marpit collect plugin', () => {
       .use(parseDirectives, { themeSet: marpitInstance.themeSet })
       .use(applyDirectives)
       .use(collect, marpitInstance)
+      .use(inlineSVG, marpitInstance)
 
   const text = dedent`
     ---
@@ -141,4 +144,25 @@ describe('Marpit collect plugin', () => {
       })
     }
   )
+
+  context('with inline SVG mode', () => {
+    it('includes inline SVG tokens in collected result', () => {
+      const marpit = marpitStub()
+      const marpitSVG = marpitStub(true)
+
+      md(marpit).render(text)
+      md(marpitSVG).render(text)
+
+      expect(marpitSVG.lastComments).toStrictEqual(marpit.lastComments)
+      expect(marpitSVG.lastSlideTokens).toHaveLength(4)
+
+      for (const tokens of marpitSVG.lastSlideTokens) {
+        const [open] = tokens
+        const [close] = tokens.slice(-1)
+
+        expect(open.type).toBe('marpit_inline_svg_open')
+        expect(close.type).toBe('marpit_inline_svg_close')
+      }
+    })
+  })
 })

test/marpit.js

@@ -141,6 +141,16 @@ describe('Marpit', () => {
             expect(countDecl(ret.root, '--theme-defined')).toBe(1)
           })
       })
+
+      context('when passed htmlAsArray env', () => {
+        it('outputs HTML including inline SVG as array', () => {
+          const { html } = instance(true).render('# Hi', { htmlAsArray: true })
+          expect(html).toHaveLength(1)
+
+          const $ = cheerio.load(html[0], { lowerCaseTags: false })
+          expect($('svg > foreignObject')).toHaveLength(1)
+        })
+      })
     })
 
     context('with backgroundSyntax option', () => {