Support MDX in the Highlight component

storybookjs · Aug 4, 2020 · 200871b · 200871b
1 parent 58d18e8
commit 200871b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/components/Highlight.js b/src/components/Highlight.js
@@ -69,8 +69,12 @@ export class Highlight extends React.Component {
   }
 
   render() {
-    const { children, language, ...rest } = this.props;
-    const codeBlock = <div dangerouslySetInnerHTML={{ __html: children }} />;
+    const { children, language, withHTMLChildren, ...rest } = this.props;
+    const codeBlock = withHTMLChildren ? (
+      <div dangerouslySetInnerHTML={{ __html: children }} />
+    ) : (
+      children
+    );
 
     return (
       <HighlightBlock {...rest}>
@@ -89,8 +93,10 @@ export class Highlight extends React.Component {
 Highlight.propTypes = {
   children: PropTypes.node.isRequired,
   language: PropTypes.oneOf(languages),
+  withHTMLChildren: PropTypes.bool,
 };
 
 Highlight.defaultProps = {
   language: null,
+  withHTMLChildren: true,
 };
diff --git a/src/components/Highlight.stories.js b/src/components/Highlight.stories.js
@@ -75,7 +75,7 @@ export default {
   component: Highlight,
 };
 
-export const Basic = args => <Highlight {...args} />;
+export const Basic = (args) => <Highlight {...args} />;
 Basic.args = {};
 
 export const Bash = () => (
@@ -150,3 +150,15 @@ const StyledHighlight = styled(Highlight)`
 `;
 
 export const CustomStyling = () => <StyledHighlight language="json">{jsonCode}</StyledHighlight>;
+
+/* eslint-disable */
+function WrapperComponent({ children }) {
+  return <div dangerouslySetInnerHTML={{ __html: children }} />;
+}
+/* eslint-enable */
+
+export const WithComponentChildren = () => (
+  <Highlight withHTMLChildren={false}>
+    <WrapperComponent>{javascriptCodeWithWrappers}</WrapperComponent>
+  </Highlight>
+);