@uiw/react-markdown-preview-example/esm/Markdown.js

Preview the markdown files and run the React examples in the documentation.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
var _excluded = ["components", "data", "node"],
  _excluded2 = ["source", "components", "data", "rehypeRewrite"];
var _templateObject;
import CodeLayout from 'react-code-preview-layout';
import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
import MarkdownPreview from '@uiw/react-markdown-preview';
import styled from 'styled-components';
import rehypeIgnore from 'rehype-ignore';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Preview = CodeLayout.Preview;
var Code = CodeLayout.Code;
var Toolbar = CodeLayout.Toolbar;
var MarkdownStyle = styled(MarkdownPreview)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  margin: 0 auto;\n  box-shadow:\n    rgb(8 15 41 / 8%) 0.5rem 0.5rem 2rem 0px,\n    rgb(8 15 41 / 8%) 0px 0px 1px 0px;\n  border: 1px solid var(--color-border-default, #30363d);\n  text-align: left;\n  max-width: 56rem;\n  overflow: auto;\n  padding: 2rem;\n  border-radius: 0.55rem;\n"])));
var CodePreview = _ref => {
  var {
      components,
      data,
      node
    } = _ref,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  if (node && node.type === 'element' && node.tagName === 'pre') {
    var _child$data, _child$properties, _node$position;
    var child = node.children[0];
    if (!child) return /*#__PURE__*/_jsx("pre", _extends({}, props));
    var meta = ((_child$data = child.data) == null ? void 0 : _child$data.meta) || ((_child$properties = child.properties) == null ? void 0 : _child$properties.dataMeta);
    if (!isMeta(meta)) {
      return /*#__PURE__*/_jsx("pre", _extends({}, props));
    }
    var line = node == null || (_node$position = node.position) == null ? void 0 : _node$position.start.line;
    var metaId = getMetaId(meta) || String(line);
    var Child = components["" + metaId];
    if (metaId && typeof Child === 'function') {
      var code = data[metaId].value || '';
      var {
        title,
        boreder = 1,
        checkered = 1,
        code: codeNum = 1,
        toolbar = 1
      } = getURLParameters(meta || '');
      return /*#__PURE__*/_jsxs(CodeLayout, {
        bordered: !!Number(boreder),
        disableCheckered: !Number(checkered),
        style: {
          marginBottom: 16
        },
        children: [/*#__PURE__*/_jsx(Preview, {
          children: /*#__PURE__*/_jsx(Child, {})
        }), !!Number(toolbar) && /*#__PURE__*/_jsx(Toolbar, {
          text: code,
          visibleButton: !!Number(codeNum),
          children: title || 'Code Example'
        }), !!Number(codeNum) && /*#__PURE__*/_jsx(Code, {
          tagName: "pre",
          style: {
            marginBottom: 0
          },
          className: props.className,
          children: props.children
        })]
      });
    }
  }
  return /*#__PURE__*/_jsx("code", _extends({}, props));
};
export default function Markdown(props) {
  var {
      components,
      data
    } = props,
    reset = _objectWithoutPropertiesLoose(props, _excluded2);
  return /*#__PURE__*/_jsx(MarkdownStyle, _extends({
    disableCopy: true,
    rehypePlugins: [rehypeIgnore, ...(reset.rehypePlugins || [])]
  }, reset, {
    source: data.source,
    components: _extends({}, components, {
      pre: rest => /*#__PURE__*/_jsx(CodePreview, _extends({}, rest, {
        components: data.components,
        data: data.data
      }))
    })
  }));
}