fix(text): remove margin from wrapping elements (#293)

src/text.js

@@ -1,21 +1,11 @@
 import React from 'react';
-import attach from './attach';
-import Typography from '@material-ui/core/Typography';
+import useComponent from './use-component';
 import ReactMarkdown from 'react-markdown';
 
-class Text extends React.PureComponent {
-  render() {
-    const { text } = this.props;
+export default function Text(props) {
+  const { text } = useComponent(props.component, ['text']);
 
-    // We use component=div to force usage of a div, instead of a p, as properly formatted HTML
-    // cannot nest tags like h1 under a <p>.
-    return (
-      <Typography component="div">
-        <ReactMarkdown source={text} />
-      </Typography>
-    );
-  }
+  // As per https://github.com/remarkjs/react-markdown/issues/42, `renderers={{paragraph: 'span'}}`
+  // substitutes the p tag with a span so that there is no margin
+  return <ReactMarkdown renderers={{ paragraph: 'span' }} source={text} />;
 }
-
-Text = attach(['text'])(Text);
-export default Text;