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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.renderer = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _marked = _interopRequireDefault(require("marked"));

var _highlight = _interopRequireDefault(require("highlight.js"));

var _clsx = _interopRequireDefault(require("clsx"));

var _core = require("@material-ui/core");

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) { (0, _defineProperty2.default)(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; }

const styles = theme => (0, _core.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
    }
  }
});

const renderer = new _marked.default.Renderer();
exports.renderer = 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 _highlight.default.highlightAuto(code).value;
  },

  renderer
};
const MarkdownElement = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const classes = props.classes,
        className = props.className,
        options = props.markedOptions,
        text = props.text,
        other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "markedOptions", "text"]);
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    ref: ref,
    className: (0, _clsx.default)(classes.root, 'markdown-body', className) // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: (0, _marked.default)(text, _objectSpread(_objectSpread({}, defaultOptions), options))
    }
  }, other));
});

var _default = (0, _core.withStyles)(styles, {
  name: 'EgMarkdownElement'
})(MarkdownElement);

exports.default = _default;