@e-group/material-lab/esm/MarkdownElement/MarkdownElement.js

EGroup Team Lab - Incubator for EGroup Team experimental React components.

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React, { forwardRef } from 'react';
import marked from 'marked';
import hljs from 'highlight.js';
import clsx from 'clsx';
import { withStyles, createStyles } from '@material-ui/core';

const styles = theme => createStyles({
  root: {
    lineHeight: '2.2rem',
    fontFamily: theme.typography.fontFamily,
    "& pre code[class*='language-']": {
      display: 'block',
      overflowX: 'auto',
      padding: '.5em',
      color: '#333',
      background: '#f8f8f8'
    },
    '& img': {
      margin: '20px 0',
      boxShadow: '0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12)'
    },
    '& hr': {
      height: '1px',
      margin: 0,
      border: 'none',
      flexShrink: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.12)'
    },
    '& a': {
      fontSize: theme.typography.body1.fontSize,
      fontWeight: theme.typography.body1.fontWeight
    },
    '& h1': {
      fontSize: theme.typography.h5.fontSize,
      fontWeight: theme.typography.h5.fontWeight
    },
    '& h2': {
      fontSize: theme.typography.h6.fontSize,
      fontWeight: theme.typography.h6.fontWeight
    },
    '& h3': {
      marginBottom: '0.35em',
      fontSize: theme.typography.subtitle1.fontSize,
      fontWeight: 500
    },
    '& .table-container': {
      overflowX: 'auto'
    },
    '& table': {
      display: 'table',
      whiteSpace: 'nowrap',
      width: '100%',
      borderCollapse: 'collapse',
      borderSpacing: 0
    },
    '& tbody': {
      display: 'table-row-group',
      color: theme.palette.text.primary,
      fontSize: theme.typography.pxToRem(14),
      fontWeight: theme.typography.fontWeightRegular
    },
    '& thead': {
      display: 'table-header-group',
      color: theme.palette.text.secondary,
      fontSize: theme.typography.pxToRem(14),
      fontWeight: theme.typography.fontWeightMedium
    },
    '& tfoot': {
      display: 'table-footer-group',
      borderBottom: 0,
      color: theme.palette.text.secondary,
      fontSize: theme.typography.pxToRem(14)
    },
    '& tr': {
      color: 'inherit',
      display: 'table-row',
      height: 48,
      verticalAlign: 'middle',
      // We disable the focus ring for mouse, touch and keyboard users.
      outline: 'none'
    },
    '& td,th': {
      display: 'table-cell',
      verticalAlign: 'inherit',
      // Workaround for a rendering bug with spanned columns in Chrome 62.0.
      // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
      borderBottom: '1px solid rgba(224, 224, 224, 1)',
      textAlign: 'left',
      padding: '4px 56px 4px 24px',
      '&:last-child': {
        paddingRight: 24
      }
    },
    // inner table style fixed
    '& table table tbody tr:last-child td': {
      borderBottom: 0
    },
    '& table table': {
      marginBottom: 0
    },
    '& table table td': {
      padding: 0
    }
  }
});

export const renderer = new marked.Renderer();

renderer.table = (header, body) => "\n    <div class=\"table-container\">\n      <table>\n        <thead>".concat(header, "</thead>\n        <tbody>").concat(body, "</tbody>\n      </table>\n    </div>\n  ");

const defaultOptions = {
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,

  highlight(code) {
    return hljs.highlightAuto(code).value;
  },

  renderer
};
const MarkdownElement = /*#__PURE__*/forwardRef((props, ref) => {
  const classes = props.classes,
        className = props.className,
        options = props.markedOptions,
        text = props.text,
        other = _objectWithoutProperties(props, ["classes", "className", "markedOptions", "text"]);

  return /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    className: clsx(classes.root, 'markdown-body', className) // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: marked(text, _objectSpread(_objectSpread({}, defaultOptions), options))
    }
  }, other));
});
export default withStyles(styles, {
  name: 'EgMarkdownElement'
})(MarkdownElement);