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

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

import React, { useContext, useEffect, useMemo } from 'react';
import { rehype } from 'rehype';
import rehypePrism from 'rehype-prism-plus';
import { EditorContext } from '../../Context';
import { jsx as _jsx } from "react/jsx-runtime";
function html2Escape(sHtml) {
  return sHtml.replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, str => {
    return str.replace(/[<&"]/g, c => ({
      '<': '&lt;',
      '>': '&gt;',
      '&': '&amp;',
      '"': '&quot;'
    })[c]);
  }).replace(/[<&"]/g, c => ({
    '<': '&lt;',
    '>': '&gt;',
    '&': '&amp;',
    '"': '&quot;'
  })[c]);
}
export default function Markdown(props) {
  var {
    prefixCls
  } = props;
  var {
    markdown = '',
    highlightEnable,
    dispatch
  } = useContext(EditorContext);
  var preRef = /*#__PURE__*/React.createRef();
  useEffect(() => {
    if (preRef.current && dispatch) {
      dispatch({
        textareaPre: preRef.current
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return useMemo(() => {
    if (!markdown) {
      return /*#__PURE__*/_jsx("pre", {
        ref: preRef,
        className: prefixCls + "-text-pre wmde-markdown-color"
      });
    }
    var mdStr = "<pre class=\"language-markdown " + prefixCls + "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">" + html2Escape(markdown) + "\n</code></pre>";
    if (highlightEnable) {
      try {
        mdStr = rehype().data('settings', {
          fragment: true
        }).use(rehypePrism, {
          ignoreMissing: true
        }).processSync(mdStr).toString();
      } catch (error) {}
    }
    return /*#__PURE__*/React.createElement('div', {
      className: 'wmde-markdown-color',
      dangerouslySetInnerHTML: {
        __html: mdStr || ''
      }
    });
  }, [markdown, preRef, prefixCls]);
}
//# sourceMappingURL=Markdown.js.map