fix: array-based className handling (#16)

Author: szymonchudy

src/mapChildren.js

@@ -3,6 +3,11 @@ import { createElement } from 'react'
 function mapChild (child, i, depth) {
   if (child.tagName) {
     const props = Object.assign({ key: 'lo-' + depth + '-' + i }, child.properties)
+
+    if (Array.isArray(props.className)) {
+      props.className = props.className.join(' ')
+    }
+
     const children = child.children ? child.children.map(mapWithDepth(depth + 1)) : null
 
     return createElement(child.tagName, props, children)

test/Lowlight.test.js

@@ -86,6 +86,14 @@ describe('react-lowlight', () => {
       ].join('')
     )
   })
+
+  it('should properly join array-based class names in child elements', () => {
+    const code = 'function foo() {}'
+
+    expect(render({ value: code, language: 'js' }, { withWrapper: true })).toBe(
+      '<pre class="lowlight"><code class="hljs js"><span class="hljs-keyword">function</span> <span class="hljs-title function_">foo</span>(<span class="hljs-params"></span>) {}</code></pre>'
+    )
+  })
 })
 
 function render (props, options = {}) {