@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'; // @ts-ignore

import rehypePrism from '@mapbox/rehype-prism';
import { EditorContext } from '../../Context';
import { jsx as _jsx } from "react/jsx-runtime";
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

  }, []);

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

  return useMemo(() => {
    if (!highlightEnable || !markdown) {
      return /*#__PURE__*/_jsx("pre", {
        children: markdown || '',
        ref: preRef,
        className: prefixCls + "-text-pre wmde-markdown-color"
      });
    }

    var str = rehype().data('settings', {
      fragment: true
    }).use(rehypePrism, {
      ignoreMissing: true
    }).processSync("<pre class=\"language-markdown " + prefixCls + "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">" + html2Escape(markdown) + "</code></pre>");
    return /*#__PURE__*/React.createElement('div', {
      className: 'wmde-markdown-color',
      dangerouslySetInnerHTML: {
        __html: str.value
      }
    });
  }, [highlightEnable, markdown, preRef, prefixCls]);
}
//# sourceMappingURL=Markdown.js.map