Normalize known self-closing HTML elements

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Changed
+
+- Normalize known self-closing HTML elements with `xhtmlOut: true` ([#66](https://github.com/marp-team/marp-core/pull/66))
+
 ## v0.5.2 - 2019-01-31
 
 ### Changed

package.json

@@ -76,6 +76,7 @@
     "rollup-plugin-postcss": "^2.0.1",
     "rollup-plugin-terser": "^4.0.3",
     "rollup-plugin-typescript": "^1.0.0",
+    "self-closing-tags": "^1.0.1",
     "stylelint": "^9.10.1",
     "stylelint-config-prettier": "^4.0.0",
     "stylelint-config-standard": "^18.2.0",

src/html/html.ts

@@ -1,19 +1,36 @@
+import selfClosingTags from 'self-closing-tags'
 import { FilterXSS } from 'xss'
 import { MarpOptions } from '../marp'
 import { marpEnabledSymbol } from '../symbol'
 
+const selfClosingRegexp = /\s*\/?>$/
+
 export function markdown(md, opts: MarpOptions['html']): void {
-  if (typeof opts === 'object') {
-    const { html_inline, html_block } = md.renderer.rules
-    const filter = new FilterXSS({ whiteList: opts })
+  const filterOpts = {
+    onIgnoreTag: (_, html) => (opts === true ? html : undefined),
+    whiteList: typeof opts === 'object' ? opts : {},
+  }
+  const filter = new FilterXSS(filterOpts)
+  const xhtmlOutFilter = new FilterXSS({
+    ...filterOpts,
+    onTag: (tag, html, { isClosing }: any) => {
+      if (selfClosingTags.includes(tag)) {
+        const attrs = html.slice(tag.length + (isClosing ? 2 : 1), -1).trim()
+        return `<${tag} ${attrs}>`.replace(selfClosingRegexp, ' />')
+      }
+    },
+  })
 
-    const sanitizedRenderer = (original: Function) => (...args) => {
-      const ret = original(...args)
+  const { html_inline, html_block } = md.renderer.rules
 
-      return md[marpEnabledSymbol] ? filter.process(ret) : ret
-    }
+  const sanitizedRenderer = (original: Function) => (...args) => {
+    const ret = original(...args)
+    if (!md[marpEnabledSymbol]) return ret
 
-    md.renderer.rules.html_inline = sanitizedRenderer(html_inline)
-    md.renderer.rules.html_block = sanitizedRenderer(html_block)
+    const sanitized = filter.process(ret)
+    return md.options.xhtmlOut ? xhtmlOutFilter.process(sanitized) : sanitized
   }
+
+  md.renderer.rules.html_inline = sanitizedRenderer(html_inline)
+  md.renderer.rules.html_block = sanitizedRenderer(html_block)
 }

test/marp.ts

@@ -178,6 +178,16 @@ describe('Marp', () => {
         expect(cheerio.load(html)('br')).toHaveLength(1)
       })
 
+      it('renders void element with normalized', () => {
+        expect(marp().render('<br>').html).toContain('<br />')
+        expect(marp().render('<br  >').html).toContain('<br />')
+        expect(marp().render('<br/>').html).toContain('<br />')
+        expect(marp().render('<br />').html).toContain('<br />')
+        expect(marp().render('<br class="sanitize">').html).toContain('<br />')
+        expect(marp().render('<br></br>').html).toContain('<br /><br />')
+        expect(marp().render('<BR >').html).toContain('<br />')
+      })
+
       // https://github.com/yhatt/marp/issues/243
       it('does not sanitize header and footer', () => {
         const markdown = '<!--\nheader: "**header**"\nfooter: "*footer*"\n-->'
@@ -189,9 +199,23 @@ describe('Marp', () => {
     })
 
     context('with true', () => {
+      const m = marp({ html: true })
+
       it('allows HTML tag', () => {
-        const { html } = marp({ html: true }).render('<b>abc</b>')
-        expect(cheerio.load(html)('b')).toHaveLength(1)
+        const { html } = m.render('<b data-custom="test">abc</b>')
+        expect(cheerio.load(html)('b[data-custom="test"]')).toHaveLength(1)
+      })
+
+      it('renders void element with normalized', () => {
+        expect(m.render('<br>').html).toContain('<br />')
+        expect(m.render('<br  >').html).toContain('<br />')
+        expect(m.render('<br/>').html).toContain('<br />')
+        expect(m.render('<br />').html).toContain('<br />')
+        expect(m.render('<br></br>').html).toContain('<br /><br />')
+        expect(m.render('<BR >').html).toContain('<br />')
+        expect(m.render('<br  class="normalize">').html).toContain(
+          '<br class="normalize" />'
+        )
       })
     })
 
@@ -203,29 +227,45 @@ describe('Marp', () => {
     })
 
     context('with whitelist', () => {
-      const whitelist = { p: ['class'] }
+      const m = marp({ html: { hr: ['id'], p: ['class'] } })
 
       it('allows whitelisted tags and attributes', () => {
-        const markdown =
-          '<p>\ntest\n</p>\n\n<p class="class" title="title">test</p>'
-
-        const { html } = marp({ html: whitelist }).render(markdown)
-        const $ = cheerio.load(html)
+        const md = '<p>\ntest\n</p>\n\n<p class="class" title="title">test</p>'
+        const $ = cheerio.load(m.render(md).html)
 
         expect($('p')).toHaveLength(2)
         expect($('p.class')).toHaveLength(1)
         expect($('p[title]')).toHaveLength(0)
       })
+
+      it('renders void element with normalized', () => {
+        expect(m.render('<hr id="test">').html).toContain('<hr id="test" />')
+        expect(m.render('<hr class="test">').html).toContain('<hr />')
+        expect(m.render('<p>').html).toContain('<p>')
+      })
+    })
+
+    context("with markdown-it's xhtmlOut option as false", () => {
+      const m = marp({ markdown: { xhtmlOut: false } })
+
+      it('does not normalize void element', () => {
+        expect(m.render('<br>').html).toContain('<br>')
+        expect(m.render('<br />').html).toContain('<br />')
+        expect(m.render('<br class="sanitize">').html).toContain('<br>')
+        expect(m.render('<br></br>').html).toContain('<br></br>')
+      })
     })
 
     context('with disabled Marpit features', () => {
       const instance = marp().use(marpitDisablePlugin)
 
       it('does not sanitize HTML', () => {
-        const { html } = instance.render('<b>abc</b>\n\n<div>\ntest\n</div>')
+        const { html } = instance.render(
+          '<b data-custom="test">abc</b>\n\n<div>\ntest\n</div>'
+        )
         const $ = cheerio.load(html)
 
-        expect($('b')).toHaveLength(1)
+        expect($('b[data-custom="test"]')).toHaveLength(1)
         expect($('div')).toHaveLength(1)
       })
     })

yarn.lock

@@ -5598,6 +5598,11 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
+self-closing-tags@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/self-closing-tags/-/self-closing-tags-1.0.1.tgz#6c5fa497994bb826b484216916371accee490a5d"
+  integrity sha512-7t6hNbYMxM+VHXTgJmxwgZgLGktuXtVVD5AivWzNTdJBM4DBjnDKDzkf2SrNjihaArpeJYNjxkELBu1evI4lQA==
+
 "semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5, semver@^5.5.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"