diff --git a/src/Linkify/Linkify.js b/src/Linkify/Linkify.js index a35d961..8a79606 100644 --- a/src/Linkify/Linkify.js +++ b/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 ( , link: p => , + code: ({ value }) =>
{value}
, ...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(), diff --git a/src/Linkify/Linkify.mdx b/src/Linkify/Linkify.mdx index 9ce9545..3531d1c 100644 --- a/src/Linkify/Linkify.mdx +++ b/src/Linkify/Linkify.mdx @@ -17,14 +17,10 @@ Automatically parse links contained in a body of text. All props except for `lin {() => { - const testEvaluatedUrl = 'https://www.facebook.com/heydoctor.co'; + const markdownString = `Checkout http://google.com. Another one that's not so great is http://bing.com. You could also checkout duckduckgo.com if you're into that whole privacy thing. {}} 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 ( - - Checkout http://google.com. Another one that's not so great is - http://bing.com. You could also checkout duckduckgo.com if you're into that whole privacy thing. - {}} alt="hacker" /> Oh, and you should also check out - https://heydoctor.co. And this [markdown link](https://heydoctor.com) - + ); }} diff --git a/src/Linkify/Linkify.spec.js b/src/Linkify/Linkify.spec.js index 84a28e9..4f01330 100644 --- a/src/Linkify/Linkify.spec.js +++ b/src/Linkify/Linkify.spec.js @@ -4,14 +4,14 @@ import Linkify from './Linkify'; describe('Linkify', () => { test('converts links to anchor tags', () => { - const { asFragment } = renderWithTheme(Hello! https://google.com is a cool site.); + const { asFragment } = renderWithTheme(); expect(asFragment()).toMatchSnapshot(); }); test('escapes HTML entities', () => { const { asFragment } = renderWithTheme( - {` {}} alt="hacker" />heheh got hacked`} + {}} alt="hacker" />heheh got hacked`} /> ); expect(asFragment()).toMatchSnapshot(); @@ -19,14 +19,21 @@ describe('Linkify', () => { test('can receive linkStyle', () => { const { asFragment } = renderWithTheme( - Hello! https://google.com is a cool site. + ); expect(asFragment()).toMatchSnapshot(); }); test('can render markdown', () => { - const { asFragment } = renderWithTheme([this is a link](http://google.com)); + const { asFragment } = renderWithTheme(); + + expect(asFragment()).toMatchSnapshot(); + }); + + test('reformats code blocks', () => { + const linkContent = "dear doctor,\n\n I'm \"5'9\" and 160'"; + const { asFragment } = renderWithTheme(); expect(asFragment()).toMatchSnapshot(); }); diff --git a/src/Linkify/__snapshots__/Linkify.spec.js.snap b/src/Linkify/__snapshots__/Linkify.spec.js.snap index f2a2849..0d805c4 100644 --- a/src/Linkify/__snapshots__/Linkify.spec.js.snap +++ b/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; }
- .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; }
`; + +exports[`Linkify reformats code blocks 1`] = ` + + .c0 { + white-space: pre-wrap; +} + +.c0 p:first-child { + margin-top: 0; +} + +.c0 div + div { + margin-top: 8px; +} + +
+
+ dear doctor, +
+
+ I'm "5'9" and 160' +
+
+
+`;