Merge pull request #151 from marp-team/heading-divider-map

Update slide plugin and heading divider plugin to apply the correct mapped line of slides

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Update slide plugin and heading divider plugin to apply the correct mapped line of slides ([#151](https://github.com/marp-team/marpit/pull/151))
+
 ## v0.9.1 - 2019-04-05
 
 ### Added

src/markdown/heading_divider.js

@@ -43,6 +43,7 @@ function headingDivider(md) {
       if (token && splitFunc(token) && newTokens.some(t => !t.hidden)) {
         const hr = new state.Token('hr', '', 0)
         hr.hidden = true
+        hr.map = token.map
 
         newTokens.push(hr)
       }

src/markdown/slide.js

@@ -38,7 +38,12 @@ function slide(md, opts = {}) {
 
     state.tokens = split(state.tokens, t => t.type === 'hr', true).reduce(
       (arr, slideTokens, idx) => {
-        const hrFirst = slideTokens[0] && slideTokens[0].type === 'hr'
+        const firstHr =
+          slideTokens[0] && slideTokens[0].type === 'hr'
+            ? slideTokens[0]
+            : undefined
+
+        const mapTarget = firstHr || slideTokens.find(t => t.map)
 
         return [
           ...arr,
@@ -52,14 +57,14 @@ function slide(md, opts = {}) {
               open: {
                 block: true,
                 meta: { marpitSlide: idx, marpitSlideElement: 1 },
-                map: hrFirst ? slideTokens[0].map : undefined,
+                map: mapTarget ? mapTarget.map : [0, 1],
               },
               close: {
                 block: true,
                 meta: { marpitSlide: idx, marpitSlideElement: -1 },
               },
             },
-            slideTokens.slice(hrFirst ? 1 : 0)
+            slideTokens.slice(firstHr ? 1 : 0)
           ),
         ]
       },

test/markdown/heading_divider.js

@@ -102,6 +102,18 @@ describe('Marpit heading divider plugin', () => {
         const $ = cheerio.load(mdWithSlide(marpitStub(4)).render(markdownText))
         expect($('section')).toHaveLength(4)
       })
+
+      it('maps corresponded line of slide to heading', () => {
+        const tokens = mdWithSlide(marpitStub(4)).parse(markdownText)
+        const [first, second, third, fourth] = tokens.filter(
+          t => t.type === 'marpit_slide_open'
+        )
+
+        expect(first.map).toStrictEqual([0, 1])
+        expect(second.map).toStrictEqual([1, 2])
+        expect(third.map).toStrictEqual([2, 3])
+        expect(fourth.map).toStrictEqual([3, 4])
+      })
     })
 
     context('with invalid headingDivider option', () => {

test/markdown/slide.js

@@ -9,6 +9,7 @@ describe('Marpit slide plugin', () => {
 
     return instance.use(slide, ...args)
   }
+  const multiMd = '# foo\n\n---\n\n## bar'
 
   context('with default options', () => {
     const markdown = md()
@@ -19,12 +20,24 @@ describe('Marpit slide plugin', () => {
       expect($('section#1')).toHaveLength(1)
 
       // Multi page
-      const $multi = cheerio.load(markdown.render('# foo\n\n---\n\n## bar'))
+      const $multi = cheerio.load(markdown.render(multiMd))
       expect($multi('section')).toHaveLength(2)
       expect($multi('section#1 > h1').text()).toBe('foo')
       expect($multi('section#2 > h2').text()).toBe('bar')
     })
 
+    it('maps corresponded line of slide', () => {
+      const [open] = markdown.parse('')
+      expect(open.map).toStrictEqual([0, 1])
+
+      const [first, second] = markdown
+        .parse(multiMd)
+        .filter(t => t.type === 'marpit_slide_open')
+
+      expect(first.map).toStrictEqual([0, 1])
+      expect(second.map).toStrictEqual([2, 3])
+    })
+
     it('ignores in #renderInline', () => {
       const $ = cheerio.load(md().renderInline(''))
       expect($('section')).toHaveLength(0)
@@ -38,7 +51,7 @@ describe('Marpit slide plugin', () => {
       const $ = cheerio.load(markdown.render(''))
       expect($('section.page#1[tabindex=-1]')).toHaveLength(1)
 
-      const $multi = cheerio.load(markdown.render('# foo\n\n---\n\n## bar'))
+      const $multi = cheerio.load(markdown.render(multiMd))
       expect($multi('section.page#1[tabindex=-1] > h1').text()).toBe('foo')
       expect($multi('section.page#2[tabindex=-1] > h2').text()).toBe('bar')
     })
@@ -61,9 +74,7 @@ describe('Marpit slide plugin', () => {
         const $ = cheerio.load(markdown(i => `page${i + 1}`).render(''))
         expect($('section#page1')).toHaveLength(1)
 
-        const $multi = cheerio.load(
-          markdown(i => (i + 1) * 2).render('# foo\n\n---\n\n## bar')
-        )
+        const $multi = cheerio.load(markdown(i => (i + 1) * 2).render(multiMd))
         expect($multi('section#2 > h1').text()).toBe('foo')
         expect($multi('section#4 > h2').text()).toBe('bar')
       })