Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 3x 4x 4x 4x 4x 4x 4x 4x 12x 12x 4x 4x 4x 4x 4x | import React, { useImperativeHandle } from 'react';
import ReactMarkdown, { type UrlTransform } from 'react-markdown';
import { type PluggableList } from 'unified';
import gfm from 'remark-gfm';
import raw from 'rehype-raw';
import { remarkAlert } from 'remark-github-blockquote-alert';
import { useCopied } from './plugins/useCopied';
import { type MarkdownPreviewProps, type MarkdownPreviewRef } from './Props';
import './styles/markdown.less';
/**
* https://github.com/uiwjs/react-md-editor/issues/607
*/
const defaultUrlTransform: UrlTransform = (url) => url;
export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props, ref) => {
const {
prefixCls = 'wmde-markdown wmde-markdown-color',
className,
source,
style,
disableCopy = false,
skipHtml = true,
onScroll,
onMouseOver,
pluginsFilter,
rehypeRewrite: rewrite,
wrapperElement = {},
warpperElement = {},
urlTransform,
...other
} = props;
const mdp = React.useRef<HTMLDivElement>(null);
useImperativeHandle(ref, () => ({ ...props, mdp }), [mdp, props]);
const cls = `${prefixCls || ''} ${className || ''}`;
useCopied(mdp);
const rehypePlugins: PluggableList = [...(other.rehypePlugins || [])];
const customProps: MarkdownPreviewProps = {
allowElement: (element, index, parent) => {
Iif (other.allowElement) {
return other.allowElement(element, index, parent);
}
return /^[A-Za-z0-9]+$/.test(element.tagName);
},
};
Eif (skipHtml) {
rehypePlugins.push(raw);
}
const remarkPlugins = [remarkAlert, ...(other.remarkPlugins || []), gfm];
const wrapperProps = { ...warpperElement, ...wrapperElement };
return (
<div ref={mdp} onScroll={onScroll} onMouseOver={onMouseOver} {...wrapperProps} className={cls} style={style}>
<ReactMarkdown
{...customProps}
{...other}
skipHtml={skipHtml}
urlTransform={urlTransform || defaultUrlTransform}
rehypePlugins={pluginsFilter ? pluginsFilter('rehype', rehypePlugins) : rehypePlugins}
remarkPlugins={pluginsFilter ? pluginsFilter('remark', remarkPlugins) : remarkPlugins}
children={source || ''}
/>
</div>
);
});
|