content: // @flow
  /* eslint no-div-regex: "off" */
  
  import React from 'react'
  import PropTypes from 'prop-types'
  import classNames from 'classnames'
  import { withStyles } from '@material-ui/core/styles'
  import marked from 'marked'
  import prism from 'docs/src/utils/prism'
  
  const renderer = new marked.Renderer()
  
  renderer.heading = (text, level) => {
    const escapedText = text
      .toLowerCase()
      .replace(/=&gt;|&lt;| \/&gt;|<code>|<\/code>/g, '')
      .replace(/[^\w]+/g, '-')
  
    return (
      `
      <h${level}>
        <a class="anchor-link" id="${escapedText}"></a>${text}` +
      `<a class="anchor-link-style" href="#${escapedText}">${'#'}</a>
      </h${level}>
    `
    )
  }
  
  marked.setOptions({
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    highlight(code) {
      return prism.highlight(code, prism.languages.jsx)
    },
    renderer,
  })
  
  const anchorLinkStyle = theme => ({
    '& .anchor-link-style': {
      opacity: 0,
      // To prevent the link to get the focus.
      display: 'none',
    },
    '&:hover .anchor-link-style': {
      display: 'inline',
      opacity: 1,
      fontSize: '0.8em',
      lineHeight: '1',
      paddingLeft: theme.spacing.unit,
      color: theme.palette.text.hint,
    },
  })
  
  const styles = theme => ({
    root: {
      fontFamily: theme.typography.fontFamily,
      marginTop: theme.spacing.unit * 2,
      marginBottom: theme.spacing.unit * 2,
      padding: '0 10px',
      '& .anchor-link': {
        marginTop: -theme.spacing.unit * 12, // Offset for the anchor.
        position: 'absolute',
      },
      '& pre': {
        margin: `${theme.spacing.unit * 3}px 0`,
        padding: '12px 18px',
        backgroundColor: theme.palette.background.paper,
        borderRadius: 3,
        overflow: 'auto',
      },
      '& code': {
        display: 'inline-block',
        fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
        padding: '3px 6px',
        color: theme.palette.text.primary,
        backgroundColor: theme.palette.background.paper,
      },
      '& p code, & ul code, & pre code': {
        fontSize: 14,
        lineHeight: 1.6,
      },
      '& h1': {
        ...theme.typography.h1,
        color: theme.palette.text.primary,
        margin: '0.7em 0',
      },
      '& h2': {
        ...theme.typography.h2,
        color: theme.palette.text.primary,
        margin: '0.5em 0 0.7em',
        ...anchorLinkStyle(theme),
      },
      '& h3': {
        ...theme.typography.h3,
        color: theme.palette.text.primary,
        margin: '0.5em 0 0.7em',
        ...anchorLinkStyle(theme),
      },
      '& h4': {
        ...theme.typography.h4,
        color: theme.palette.text.primary,
        margin: '0.5em 0 0.7em',
        ...anchorLinkStyle(theme),
      },
      '& h5': {
        ...theme.typography.h5,
        color: theme.palette.text.primary,
        margin: '0.5em 0 0.7em',
        ...anchorLinkStyle(theme),
      },
      '& h6': {
        ...theme.typography.h6,
        color: theme.palette.text.primary,
        margin: '0.5em 0 0.7em',
        ...anchorLinkStyle(theme),
      },
      '& p, & ul, & ol': {
        lineHeight: 1.6,
        color: theme.palette.text.primary,
      },
      '& table': {
        width: '100%',
        display: 'block',
        overflowX: 'auto',
        borderCollapse: 'collapse',
        borderSpacing: 0,
        overflow: 'hidden',
      },
      '& thead': {
        fontSize: 12,
        fontWeight: theme.typography.fontWeightMedium,
        color: theme.palette.text.secondary,
      },
      '& tbody': {
        fontSize: 13,
        lineHeight: 1.5,
        color: theme.palette.text.primary,
      },
      '& td': {
        borderBottom: `1px solid ${theme.palette.text.lightDivider}`,
        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 5}px ${
          theme.spacing.unit
        }px ${theme.spacing.unit * 3}px`,
        textAlign: 'left',
      },
      '& td:last-child': {
        paddingRight: theme.spacing.unit * 3,
      },
      '& td compact': {
        paddingRight: theme.spacing.unit * 3,
      },
      '& td code': {
        fontSize: 13,
        lineHeight: 1.6,
      },
      '& th': {
        whiteSpace: 'pre',
        borderBottom: `1px solid ${theme.palette.text.lightDivider}`,
        padding: `0 ${theme.spacing.unit * 5}px 0 ${theme.spacing.unit * 3}px`,
        textAlign: 'left',
      },
      '& th:last-child': {
        paddingRight: theme.spacing.unit * 3,
      },
      '& tr': {
        height: 48,
      },
      '& thead tr': {
        height: 64,
      },
      '& strong': {
        fontWeight: theme.typography.fontWeightMedium,
      },
      '& blockquote': {
        borderLeft: `5px solid ${theme.palette.text.hint}`,
        background: theme.palette.background.paper,
        padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 3}px`,
        margin: `${theme.spacing.unit * 3}px 0`,
      },
      '& a, & a code': {
        color: theme.palette.accent.A400,
        textDecoration: 'none',
        '&:hover': {
          textDecoration: 'underline',
        },
      },
    },
  })
  
  function MarkdownElement(props) {
    const { classes, className, text, ...other } = props
  
    return (
      <div
        className={classNames(classes.root, 'markdown-body', className)}
        dangerouslySetInnerHTML={{ __html: marked(text) }}
        {...other}
      />
    )
  }
  
  MarkdownElement.propTypes = {
    classes: PropTypes.object.isRequired,
    className: PropTypes.string,
    text: PropTypes.string.isRequired,
  }
  
  export default withStyles(styles)(MarkdownElement)
  