Improve rendering header and footer to use inline tokens

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Improve rendering header and footer to use inline tokens ([#66](https://github.com/marp-team/marpit/pull/66))
+
 ## v0.0.14 - 2018-09-02
 
 ### Added

src/markdown/directives/directives.js

@@ -99,10 +99,10 @@ export const locals = {
     return { color: value }
   },
   footer(value) {
-    return { footer: value }
+    return typeof value === 'string' ? { footer: value } : {}
   },
   header(value) {
-    return { header: value }
+    return typeof value === 'string' ? { header: value } : {}
   },
   paginate(value) {
     return { paginate: (value || '').toLowerCase() === 'true' }

src/markdown/header_and_footer.js

@@ -1,5 +1,4 @@
 /** @module */
-import Token from 'markdown-it/lib/token'
 import wrapTokens from '../helpers/wrap_tokens'
 
 /**
@@ -17,26 +16,26 @@ function headerAndFooter(md) {
     state => {
       if (state.inlineMode) return
 
-      const renderedInlines = new Map()
-      const getRendered = markdown => {
-        let rendered = renderedInlines.get(markdown)
+      const parsedInlines = new Map()
+      const getParsed = markdown => {
+        let parsed = parsedInlines.get(markdown)
 
-        if (!rendered) {
-          rendered = md.renderInline(markdown, state.env)
-          renderedInlines.set(markdown, rendered)
+        if (!parsed) {
+          parsed = md.parseInline(markdown, state.env)
+          delete parsed.map
+
+          parsedInlines.set(markdown, parsed)
         }
 
-        return rendered
+        return parsed
       }
 
-      const createMarginalTokens = (tag, markdown) => {
-        const token = new Token('html_block', '', 0)
-        token.content = getRendered(markdown)
-
-        return wrapTokens(`marpit_${tag}`, { tag, close: { block: true } }, [
-          token,
-        ])
-      }
+      const createMarginalTokens = (tag, markdown) =>
+        wrapTokens(
+          `marpit_${tag}`,
+          { tag, close: { block: true } },
+          getParsed(markdown)
+        )
 
       let current
 

test/markdown/header_and_footer.js

@@ -57,6 +57,11 @@ describe('Marpit header and footer plugin', () => {
         expect(img.attr('src')).toBe('https://example.com/image.jpg')
       })
     })
+
+    it('ignores invalid directives like defined as object', () => {
+      const $ = cheerio.load(md().render('<!-- header: ["test"] -->'))
+      expect($('header')).toHaveLength(0)
+    })
   })
 
   describe('Footer local directive', () => {
@@ -92,5 +97,10 @@ describe('Marpit header and footer plugin', () => {
         expect(img.attr('src')).toBe('https://example.com/image.jpg')
       })
     })
+
+    it('ignores invalid directives like defined as object', () => {
+      const $ = cheerio.load(md().render('<!-- footer: ["test"] -->'))
+      expect($('footer')).toHaveLength(0)
+    })
   })
 })