@uiw/react-md-editor/lib/components/TextArea/Markdown.js

A markdown editor with preview, implemented with React.js and TypeScript.

"use strict";

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

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

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

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

var _rehype = require("rehype");

var _rehypePrism = _interopRequireDefault(require("@mapbox/rehype-prism"));

var _Context = require("../../Context");

var _jsxRuntime = require("react/jsx-runtime");

// @ts-ignore
function Markdown(props) {
  var prefixCls = props.prefixCls;

  var _useContext = (0, _react.useContext)(_Context.EditorContext),
      _useContext$markdown = _useContext.markdown,
      markdown = _useContext$markdown === void 0 ? '' : _useContext$markdown,
      highlightEnable = _useContext.highlightEnable,
      dispatch = _useContext.dispatch;

  var preRef = /*#__PURE__*/_react.default.createRef();

  (0, _react.useEffect)(function () {
    if (preRef.current && dispatch) {
      dispatch({
        textareaPre: preRef.current
      });
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, []);

  function html2Escape(sHtml) {
    return sHtml.replace(/```(.*)\s+([\s\S]*?)(\s.+)?```/g, function (str) {
      return str.replace(/[<>&"]/g, function (c) {
        return {
          '<': '&lt;',
          '>': '&gt;',
          '&': '&amp;',
          '"': '&quot;'
        }[c];
      });
    }).replace(/[<>&"]/g, function (c) {
      return {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
        '"': '&quot;'
      }[c];
    });
  }

  return (0, _react.useMemo)(function () {
    if (!highlightEnable || !markdown) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
        children: markdown || '',
        ref: preRef,
        className: "".concat(prefixCls, "-text-pre wmde-markdown-color")
      });
    }

    var str = (0, _rehype.rehype)().data('settings', {
      fragment: true
    }).use(_rehypePrism.default, {
      ignoreMissing: true
    }).processSync("<pre class=\"language-markdown ".concat(prefixCls, "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">").concat(html2Escape(markdown), "\n</code></pre>"));
    return /*#__PURE__*/_react.default.createElement('div', {
      className: 'wmde-markdown-color',
      dangerouslySetInnerHTML: {
        __html: str.value
      }
    });
  }, [highlightEnable, markdown, preRef, prefixCls]);
}

module.exports = exports.default;
//# sourceMappingURL=Markdown.js.map