@uiw/react-markdown-preview
Version:
React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style.
84 lines (78 loc) • 11.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React, { useImperativeHandle } from 'react';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm'; // @ts-ignore
import slug from 'remark-slug'; // @ts-ignore
import headings from 'remark-autolink-headings';
import rehypeRaw from 'rehype-raw';
import rehypePrism from '@mapbox/rehype-prism';
import rehypeRewrite from 'rehype-rewrite';
import "./styles/markdown.css";
import "./styles/markdowncolor.css";
var rehypeRewriteHandle = function rehypeRewriteHandle(node, index, parent) {
if (node.type === 'element' && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName) && index !== 0) {
var child = node.children && node.children[0] ? node.children[0] : null;
if (child && child.properties && child.properties.ariaHidden === 'true') {
child.properties = _objectSpread({
class: 'anchor'
}, child.properties);
child.children = [{
type: 'element',
tagName: 'svg',
properties: {
class: 'octicon octicon-link',
viewBox: '0 0 16 16',
version: '1.1',
width: '16',
height: '16',
ariaHidden: 'true'
},
children: [{
type: 'element',
tagName: 'path',
properties: {
fillRule: 'evenodd',
d: 'M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'
}
}]
}];
}
}
};
export default /*#__PURE__*/React.forwardRef(function (props, ref) {
var _ref = props || {},
className = _ref.className,
source = _ref.source,
style = _ref.style,
onScroll = _ref.onScroll,
onMouseOver = _ref.onMouseOver,
_ref$warpperElement = _ref.warpperElement,
warpperElement = _ref$warpperElement === void 0 ? {} : _ref$warpperElement,
other = _objectWithoutProperties(_ref, ["className", "source", "style", "onScroll", "onMouseOver", "warpperElement"]);
var mdp = /*#__PURE__*/React.createRef();
useImperativeHandle(ref, function () {
return _objectSpread(_objectSpread({}, props), {}, {
mdp: mdp
});
}, [mdp, props]);
var cls = "wmde-markdown wmde-markdown-color ".concat(className || '');
return /*#__PURE__*/React.createElement("div", _extends({
ref: mdp,
onScroll: onScroll,
onMouseOver: onMouseOver
}, warpperElement, {
className: cls,
style: style
}), /*#__PURE__*/React.createElement(ReactMarkdown, _extends({}, other, {
plugins: [gfm].concat(_toConsumableArray(other.plugins || [])),
rehypePlugins: [[rehypePrism, {
ignoreMissing: true
}], [rehypeRewrite, rehypeRewriteHandle], rehypeRaw].concat(_toConsumableArray(other.rehypePlugins || [])),
remarkPlugins: [slug, headings].concat(_toConsumableArray(other.remarkPlugins || [])),
children: source || ''
})));
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9pbmRleC50c3giXSwibmFtZXMiOlsiUmVhY3QiLCJ1c2VJbXBlcmF0aXZlSGFuZGxlIiwiUmVhY3RNYXJrZG93biIsImdmbSIsInNsdWciLCJoZWFkaW5ncyIsInJlaHlwZVJhdyIsInJlaHlwZVByaXNtIiwicmVoeXBlUmV3cml0ZSIsInJlaHlwZVJld3JpdGVIYW5kbGUiLCJub2RlIiwiaW5kZXgiLCJwYXJlbnQiLCJ0eXBlIiwidGVzdCIsInRhZ05hbWUiLCJjaGlsZCIsImNoaWxkcmVuIiwicHJvcGVydGllcyIsImFyaWFIaWRkZW4iLCJjbGFzcyIsInZpZXdCb3giLCJ2ZXJzaW9uIiwid2lkdGgiLCJoZWlnaHQiLCJmaWxsUnVsZSIsImQiLCJmb3J3YXJkUmVmIiwicHJvcHMiLCJyZWYiLCJjbGFzc05hbWUiLCJzb3VyY2UiLCJzdHlsZSIsIm9uU2Nyb2xsIiwib25Nb3VzZU92ZXIiLCJ3YXJwcGVyRWxlbWVudCIsIm90aGVyIiwibWRwIiwiY3JlYXRlUmVmIiwiY2xzIiwicGx1Z2lucyIsImlnbm9yZU1pc3NpbmciLCJyZWh5cGVQbHVnaW5zIiwicmVtYXJrUGx1Z2lucyJdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU9BLEtBQVAsSUFBZ0JDLG1CQUFoQixRQUEyQyxPQUEzQztBQUNBLE9BQU9DLGFBQVAsTUFBMEIsZ0JBQTFCO0FBQ0EsT0FBT0MsR0FBUCxNQUFnQixZQUFoQixDLENBQ0E7O0FBQ0EsT0FBT0MsSUFBUCxNQUFpQixhQUFqQixDLENBQ0E7O0FBQ0EsT0FBT0MsUUFBUCxNQUFxQiwwQkFBckI7QUFDQSxPQUFPQyxTQUFQLE1BQXNCLFlBQXRCO0FBQ0EsT0FBT0MsV0FBUCxNQUF3QixzQkFBeEI7QUFDQSxPQUFPQyxhQUFQLE1BQTBCLGdCQUExQjtBQUNBO0FBQ0E7O0FBRUEsSUFBTUMsbUJBQW1CLEdBQUcsU0FBdEJBLG1CQUFzQixDQUFDQyxJQUFELEVBQVlDLEtBQVosRUFBMkJDLE1BQTNCLEVBQTJDO0FBQ3JF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QixLQUFkLENBQUgsRUFBMkMsQ0FBQ2pDLGFBQUQsRUFBZ0JDLG1CQUFoQixDQUEzQyxFQUFpRkgsU0FBakYsNEJBQWdHOEIsS0FBSyxDQUFDTSxhQUFOLElBQXVCLEVBQXZILEVBSGY7QUFJRSxJQUFBLGFBQWEsR0FBSXRDLElBQUosRUFBVUMsUUFBViw0QkFBd0IrQixLQUFLLENBQUNPLGFBQU4sSUFBdUIsRUFBL0MsRUFKZjtBQUtFLElBQUEsUUFBUSxFQUFFWixNQUFNLElBQUk7QUFMdEIsS0FERixDQURGO0FBV0QsQ0FqQmMsQ0FBZiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VJbXBlcmF0aXZlSGFuZGxlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IFJlYWN0TWFya2Rvd24gZnJvbSAncmVhY3QtbWFya2Rvd24nO1xuaW1wb3J0IGdmbSBmcm9tICdyZW1hcmstZ2ZtJztcbi8vIEB0cy1pZ25vcmVcbmltcG9ydCBzbHVnIGZyb20gJ3JlbWFyay1zbHVnJztcbi8vIEB0cy1pZ25vcmVcbmltcG9ydCBoZWFkaW5ncyBmcm9tICdyZW1hcmstYXV0b2xpbmstaGVhZGluZ3MnXG5pbXBvcnQgcmVoeXBlUmF3IGZyb20gJ3JlaHlwZS1yYXcnO1xuaW1wb3J0IHJlaHlwZVByaXNtIGZyb20gJ0BtYXBib3gvcmVoeXBlLXByaXNtJztcbmltcG9ydCByZWh5cGVSZXdyaXRlIGZyb20gJ3JlaHlwZS1yZXdyaXRlJztcbmltcG9ydCAnLi9zdHlsZXMvbWFya2Rvd24ubGVzcyc7XG5pbXBvcnQgJy4vc3R5bGVzL21hcmtkb3duY29sb3IubGVzcyc7XG5cbmNvbnN0IHJlaHlwZVJld3JpdGVIYW5kbGUgPSAobm9kZTogYW55LCBpbmRleDogbnVtYmVyLCBwYXJlbnQ6IGFueSkgPT4ge1xuICBpZiAobm9kZS50eXBlID09PSAnZWxlbWVudCcgJiYgcGFyZW50LnR5cGUgPT09ICdyb290JyAmJiAvaCgxfDJ8M3w0fDV8NikvLnRlc3Qobm9kZS50YWdOYW1lKSAmJiBpbmRleCAhPT0gMCkge1xuICAgIGNvbnN0IGNoaWxkID0gbm9kZS5jaGlsZHJlbiAmJiBub2RlLmNoaWxkcmVuWzBdID8gbm9kZS5jaGlsZHJlblswXSA6IG51bGw7XG4gICAgaWYgKGNoaWxkICYmIGNoaWxkLnByb3BlcnRpZXMgJiYgY2hpbGQucHJvcGVydGllcy5hcmlhSGlkZGVuID09PSAndHJ1ZScpIHtcbiAgICAgIGNoaWxkLnByb3BlcnRpZXMgPSB7IGNsYXNzOiAnYW5jaG9yJywgLi4uY2hpbGQucHJvcGVydGllcyB9O1xuICAgICAgY2hpbGQuY2hpbGRyZW4gPSBbXG4gICAgICAgIHtcbiAgICAgICAgICB0eXBlOiAnZWxlbWVudCcsXG4gICAgICAgICAgdGFnTmFtZTogJ3N2ZycsXG4gICAgICAgICAgcHJvcGVydGllczoge1xuICAgICAgICAgICAgY2xhc3M6ICdvY3RpY29uIG9jdGljb24tbGluaycsXG4gICAgICAgICAgICB2aWV3Qm94OiAnMCAwIDE2IDE2JyxcbiAgICAgICAgICAgIHZlcnNpb246ICcxLjEnLFxuICAgICAgICAgICAgd2lkdGg6ICcxNicsXG4gICAgICAgICAgICBoZWlnaHQ6ICcxNicsXG4gICAgICAgICAgICBhcmlhSGlkZGVuOiAndHJ1ZScsXG4gICAgICAgICAgfSxcbiAgICAgICAgICBjaGlsZHJlbjogW1xuICAgICAgICAgICAge1xuICAgICAgICAgICAgICB0eXBlOiAnZWxlbWVudCcsXG4gICAgICAgICAgICAgIHRhZ05hbWU6ICdwYXRoJyxcbiAgICAgICAgICAgICAgcHJvcGVydGllczoge1xuICAgICAgICAgICAgICAgIGZpbGxSdWxlOiAnZXZlbm9kZCcsXG4gICAgICAgICAgICAgICAgZDogJ003Ljc3NSAzLjI3NWEuNzUuNzUgMCAwMDEuMDYgMS4wNmwxLjI1LTEuMjVhMiAyIDAgMTEyLjgzIDIuODNsLTIuNSAyLjVhMiAyIDAgMDEtMi44MyAwIC43NS43NSAwIDAwLTEuMDYgMS4wNiAzLjUgMy41IDAgMDA0Ljk1IDBsMi41LTIuNWEzLjUgMy41IDAgMDAtNC45NS00Ljk1bC0xLjI1IDEuMjV6bS00LjY5IDkuNjRhMiAyIDAgMDEwLTIuODNsMi41LTIuNWEyIDIgMCAwMTIuODMgMCAuNzUuNzUgMCAwMDEuMDYtMS4wNiAzLjUgMy41IDAgMDAtNC45NSAwbC0yLjUgMi41YTMuNSAzLjUgMCAwMDQuOTUgNC45NWwxLjI1LTEuMjVhLjc1Ljc1IDAgMDAtMS4wNi0xLjA2bC0xLjI1IDEuMjVhMiAyIDAgMDEtMi44MyAweicsXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICBdXG4gICAgICAgIH1cbiAgICAgIF07XG4gICAgfVxuICB9XG59XG5cbmV4cG9ydCB0eXBlIE1hcmtkb3duUHJldmlld1Byb3BzID0ge1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG4gIHNvdXJjZT86IHN0cmluZztcbiAgc3R5bGU/OiBSZWFjdC5DU1NQcm9wZXJ0aWVzO1xuICB3YXJwcGVyRWxlbWVudD86IFJlYWN0LkRldGFpbGVkSFRNTFByb3BzPFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PiwgSFRNTERpdkVsZW1lbnQ+O1xuICBvblNjcm9sbD86IChlOiBSZWFjdC5VSUV2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4gdm9pZDtcbiAgb25Nb3VzZU92ZXI/OiAoZTogUmVhY3QuTW91c2VFdmVudDxIVE1MRGl2RWxlbWVudD4pID0+IHZvaWQ7XG59ICYgT21pdDxSZWFjdE1hcmtkb3duLlJlYWN0TWFya2Rvd25PcHRpb25zLCAnY2hpbGRyZW4nPjtcblxuZXhwb3J0IHR5cGUgTWFya2Rvd25QcmV2aWV3UmVmID0ge1xuICBtZHA6IFJlYWN0LlJlZk9iamVjdDxIVE1MRGl2RWxlbWVudD47XG59ICYgTWFya2Rvd25QcmV2aWV3UHJvcHM7XG5cbmV4cG9ydCBkZWZhdWx0IFJlYWN0LmZvcndhcmRSZWY8TWFya2Rvd25QcmV2aWV3UmVmLCBNYXJrZG93blByZXZpZXdQcm9wcz4oKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3QgeyBjbGFzc05hbWUsIHNvdXJjZSwgc3R5bGUsIG9uU2Nyb2xsLCBvbk1vdXNlT3Zlciwgd2FycHBlckVsZW1lbnQgPSB7fSwgLi4ub3RoZXIgIH0gPSBwcm9wcyB8fCB7fTtcbiAgY29uc3QgbWRwID0gUmVhY3QuY3JlYXRlUmVmPEhUTUxEaXZFbGVtZW50PigpO1xuICB1c2VJbXBlcmF0aXZlSGFuZGxlKHJlZiwgKCkgPT4gKHsgLi4ucHJvcHMsIG1kcCB9KSwgW21kcCwgcHJvcHNdKTtcblxuICBjb25zdCBjbHMgPSBgd21kZS1tYXJrZG93biB3bWRlLW1hcmtkb3duLWNvbG9yICR7Y2xhc3NOYW1lIHx8ICcnfWA7XG4gIHJldHVybiAoXG4gICAgPGRpdiByZWY9e21kcH0gb25TY3JvbGw9e29uU2Nyb2xsfSBvbk1vdXNlT3Zlcj17b25Nb3VzZU92ZXJ9IHsuLi53YXJwcGVyRWxlbWVudH0gY2xhc3NOYW1lPXtjbHN9IHN0eWxlPXtzdHlsZX0+XG4gICAgICA8UmVhY3RNYXJrZG93blxuICAgICAgICB7Li4ub3RoZXJ9XG4gICAgICAgIHBsdWdpbnM9e1tnZm0sIC4uLihvdGhlci5wbHVnaW5zIHx8IFtdKV19XG4gICAgICAgIHJlaHlwZVBsdWdpbnM9e1tbcmVoeXBlUHJpc20sIHsgaWdub3JlTWlzc2luZzogdHJ1ZSB9XSwgW3JlaHlwZVJld3JpdGUsIHJlaHlwZVJld3JpdGVIYW5kbGVdLCByZWh5cGVSYXcsIC4uLihvdGhlci5yZWh5cGVQbHVnaW5zIHx8IFtdKV19XG4gICAgICAgIHJlbWFya1BsdWdpbnM9e1sgc2x1ZywgaGVhZGluZ3MsIC4uLihvdGhlci5yZW1hcmtQbHVnaW5zIHx8IFtdKSBdfVxuICAgICAgICBjaGlsZHJlbj17c291cmNlIHx8ICcnfVxuICAgICAgLz5cbiAgICA8L2Rpdj5cbiAgKTtcbn0pO1xuIl19