From 28f426c38397076d036bff18cbf877ced67dbef3 Mon Sep 17 00:00:00 2001
From: Geoff Cox <redgeoff@gmail.com>
Date: Thu, 23 Sep 2021 06:14:51 -0700
Subject: [PATCH] fix(text): remove margin from wrapping elements (#293)

---
 src/text.js | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/text.js b/src/text.js
index 460950d8..3282f639 100644
--- a/src/text.js
+++ b/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;