fix(Linkify): Skip code block formatting (#38)

src/Linkify/Linkify.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { renderToStaticMarkup } from 'react-dom/server';
-import ReactMarkdown from 'react-markdown';
 import styled from 'styled-components';
+import ReactMarkdown from 'react-markdown';
 
 const Link = styled.a.attrs(() => ({
   target: '_blank',
@@ -13,19 +12,33 @@ const Link = styled.a.attrs(() => ({
 `;
 
 const Root = styled.div`
-  div:nth-child(n + 2) {
-    margin-top: 5px;
+  white-space: pre-wrap;
+
+  p:first-child {
+    margin-top: 0;
+  }
+
+  div + div {
+    margin-top: 8px;
   }
 `;
 
-export default function Linkify({ children, source, linkStyle, renderers, ...props }) {
+export default function Linkify({ source, linkStyle, renderers, ...props }) {
+  if (typeof source !== 'string') {
+    throw new Error('Molekule: source prop must be a valid markdown string');
+  }
+
+  // Convert all carriage returns to new lines
+  const markdownString = source.replace(/\r/g, '\n');
+
   return (
     <ReactMarkdown
-      source={renderToStaticMarkup(children || source)}
+      source={markdownString}
       renderers={{
         paragraph: 'div',
         root: p => <Root {...p} />,
         link: p => <Link {...p} style={linkStyle} />,
+        code: ({ value }) => <div>{value}</div>,
         ...renderers,
       }}
       {...props}
@@ -34,8 +47,7 @@ export default function Linkify({ children, source, linkStyle, renderers, ...pro
 }
 
 Linkify.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  source: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+  source: PropTypes.string,
   className: PropTypes.string,
   renderers: PropTypes.shape(),
   linkStyle: PropTypes.shape(),

src/Linkify/Linkify.mdx

@@ -17,14 +17,10 @@ Automatically parse links contained in a body of text. All props except for `lin
 
 <Playground>
   {() => {
-    const testEvaluatedUrl = 'https://www.facebook.com/heydoctor.co';
+    const markdownString  = `Checkout http://google.com. <span onmouseover="alert('yo')">Another</span> one that's not so great is http://bing.com. You could also checkout duckduckgo.com if you're into that whole privacy thing. <img src="fake.jpg" onError={() => {}} alt="hacker" /> Oh, and you should also check out https://heydoctor.co. And this [markdown link](https://heydoctor.com)\n\n\    I used to be interpreted as a code block but I shouldn't be anymore!!! And strings can have multiple       spaces      inside`;
+
     return (
-      <Linkify linkStyle={{ color: 'magenta' }}>
-        Checkout http://google.com. <span onmouseover="alert('yo')">Another</span> one that's not so great is
-        http://bing.com. You could also checkout duckduckgo.com if you're into that whole privacy thing.
-        <img src="fake.jpg" onError={() => {}} alt="hacker" /> Oh, and you should also check out
-        https://heydoctor.co. And this [markdown link](https://heydoctor.com)
-      </Linkify>
+      <Linkify linkStyle={{ color: 'magenta' }} source={markdownString} />
     );
   }}
 </Playground>

src/Linkify/Linkify.spec.js

@@ -4,29 +4,36 @@ import Linkify from './Linkify';
 
 describe('Linkify', () => {
   test('converts links to anchor tags', () => {
-    const { asFragment } = renderWithTheme(<Linkify>Hello! https://google.com is a cool site.</Linkify>);
+    const { asFragment } = renderWithTheme(<Linkify source="Hello! https://google.com is a cool site." />);
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('escapes HTML entities', () => {
     const { asFragment } = renderWithTheme(
-      <Linkify>{`<img src="fake.jpg" onError={() => {}} alt="hacker" /><span>heheh got hacked</span>`}</Linkify>
+      <Linkify source={`<img src="fake.jpg" onError={() => {}} alt="hacker" /><span>heheh got hacked</span>`} />
     );
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('can receive linkStyle', () => {
     const { asFragment } = renderWithTheme(
-      <Linkify linkStyle={{ color: 'magenta' }}>Hello! https://google.com is a cool site.</Linkify>
+      <Linkify linkStyle={{ color: 'magenta' }} source="Hello! https://google.com is a cool site." />
     );
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('can render markdown', () => {
-    const { asFragment } = renderWithTheme(<Linkify>[this is a link](http://google.com)</Linkify>);
+    const { asFragment } = renderWithTheme(<Linkify source="[this is a link](http://google.com)" />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('reformats code blocks', () => {
+    const linkContent = "dear doctor,\n\n    I'm \"5'9\" and 160'";
+    const { asFragment } = renderWithTheme(<Linkify source={linkContent} />);
 
     expect(asFragment()).toMatchSnapshot();
   });

src/Linkify/__snapshots__/Linkify.spec.js.snap

@@ -8,8 +8,16 @@ exports[`Linkify can receive linkStyle 1`] = `
   text-decoration: underline;
 }
 
-.c0 div:nth-child(n + 2) {
-  margin-top: 5px;
+.c0 {
+  white-space: pre-wrap;
+}
+
+.c0 p:first-child {
+  margin-top: 0;
+}
+
+.c0 div + div {
+  margin-top: 8px;
 }
 
 <div
@@ -40,8 +48,16 @@ exports[`Linkify can render markdown 1`] = `
   text-decoration: underline;
 }
 
-.c0 div:nth-child(n + 2) {
-  margin-top: 5px;
+.c0 {
+  white-space: pre-wrap;
+}
+
+.c0 p:first-child {
+  margin-top: 0;
+}
+
+.c0 div + div {
+  margin-top: 8px;
 }
 
 <div
@@ -69,8 +85,16 @@ exports[`Linkify converts links to anchor tags 1`] = `
   text-decoration: underline;
 }
 
-.c0 div:nth-child(n + 2) {
-  margin-top: 5px;
+.c0 {
+  white-space: pre-wrap;
+}
+
+.c0 p:first-child {
+  margin-top: 0;
+}
+
+.c0 div + div {
+  margin-top: 8px;
 }
 
 <div
@@ -94,8 +118,16 @@ exports[`Linkify converts links to anchor tags 1`] = `
 
 exports[`Linkify escapes HTML entities 1`] = `
 <DocumentFragment>
-  .c0 div:nth-child(n + 2) {
-  margin-top: 5px;
+  .c0 {
+  white-space: pre-wrap;
+}
+
+.c0 p:first-child {
+  margin-top: 0;
+}
+
+.c0 div + div {
+  margin-top: 8px;
 }
 
 <div
@@ -107,3 +139,30 @@ exports[`Linkify escapes HTML entities 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Linkify reformats code blocks 1`] = `
+<DocumentFragment>
+  .c0 {
+  white-space: pre-wrap;
+}
+
+.c0 p:first-child {
+  margin-top: 0;
+}
+
+.c0 div + div {
+  margin-top: 8px;
+}
+
+<div
+    class="re-linkify c0"
+  >
+    <div>
+      dear doctor,
+    </div>
+    <div>
+      I'm "5'9" and 160'
+    </div>
+  </div>
+</DocumentFragment>
+`;