Fix: Force markdown-to-jsx to render text in a <p> instead of a <span> (

#725)

quantizor/markdown-to-jsx#132

package.json

@@ -65,7 +65,7 @@
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.4",
     "lowercase-keys": "^1.0.0",
-    "markdown-to-jsx": "^6.1.3",
+    "markdown-to-jsx": "6.2.1",
     "minimist": "^1.2.0",
     "prop-types": "^15.6.0",
     "q-i": "^1.2.0",
@@ -92,7 +92,7 @@
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.0.2",
+    "babel-eslint": "^8.0.3",
     "babel-jest": "^21.2.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-system-import-transformer": "^3.1.0",
@@ -124,9 +124,9 @@
     "lint-staged": "^4.3.0",
     "prettier": "^1.9.1",
     "raf": "^3.4.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
     "rimraf": "^2.6.2",
     "semantic-release-tamia": "^1.1.1",
     "strip-shebang": "^1.0.2",

src/rsg-components/Markdown/Markdown.js

@@ -195,7 +195,9 @@ const styles = ({ space, fontFamily, fontSize, color, borderRadius }) => ({
 
 function Markdown({ classes, text, inline }) {
 	const overrides = inline ? getInlineOverrides(classes) : getBaseOverrides(classes);
-	return compiler(text, { overrides });
+	// HACK: Add \n to force markdown-to-jsx to render text in a <p> instead of a <span>
+	// https://github.com/probablyup/markdown-to-jsx/issues/132
+	return compiler(text + '\n', { overrides });
 }
 
 Markdown.propTypes = {

src/rsg-components/Markdown/Markdown.spec.js

@@ -23,6 +23,12 @@ Text with *some* **formatting** and a [link](/foo).
 		expect(html(actual)).toMatchSnapshot();
 	});
 
+	it('should render Markdown in a p tag even for one paragraph', () => {
+		const actual = render(<Markdown text="pizza" />);
+
+		expect(html(actual)).toMatchSnapshot();
+	});
+
 	it('should render Markdown in span in inline mode', () => {
 		const markdown = 'Hello *world*!';
 		const actual = render(<Markdown text={markdown} inline />);

src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Markdown should render Markdown in a p tag even for one paragraph 1`] = `
+
+<p class="rsg--para-17">
+  pizza
+</p>
+
+`;
+
 exports[`Markdown should render Markdown in span in inline mode 1`] = `
 
 <span class="rsg--text-27 rsg--inheritSize-28 rsg--baseColor-32">