import React , { useContext , useEffect , useMemo } from 'react' ; import { rehype } from 'rehype' ; import rehypePrism from '@mapbox/rehype-prism' ; import { IProps } from '../../Editor' ; import { EditorContext } from '../../Context' ; export interface MarkdownProps extends IProps , React . HTMLAttributes < HTMLPreElement > { } export default function Markdown ( props ) { const { prefixCls } = props ; const { markdown = '' , highlightEnable , dispatch } = useContext ( EditorContext ) ; const preRef = React . createRef < HTMLPreElement > ( ) ; useEffect ( ( ) => { if ( preRef . current && dispatch ) { dispatch ( { textareaPre : preRef . current } ) ; } } , [ ] ) ; function html2Escape ( sHtml ) { return sHtml . replace ( /```(.*)\s+([\s\S]*?)(\s.+)?```/g , ( str ) => { return str . replace ( /[<>&"]/g , ( c ) => ( ( { '<' : '&lt;' , '>' : '&gt;' , '&' : '&amp;' , '"' : '&quot;' } as Record < string , string > ) [ c ] ) ) ; } ) . replace ( /[<>&"]/g , ( c ) => ( ( { '<' : '&lt;' , '>' : '&gt;' , '&' : '&amp;' , '"' : '&quot;' } as Record < string , string > ) [ c ] ) ) ; } return useMemo ( ( ) => { if ( ! highlightEnable || ! markdown ) { return < pre children = { markdown || '' } ref = { preRef } className = { `${ prefixCls }-text-pre wmde-markdown-color` } />; } const 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 ) }\n</code></pre>` ) ; return React . createElement ( 'div' , { className : 'wmde-markdown-color' , dangerouslySetInnerHTML : { __html : str . value as string } , } ) ; } , [ highlightEnable , markdown , preRef , prefixCls ] ) ; }