116 lines
2.4 KiB
TypeScript
116 lines
2.4 KiB
TypeScript
import ReactMarkdown from 'react-markdown';
|
|
import rehypeRaw from 'rehype-raw';
|
|
import rehypeHighlight from 'rehype-highlight';
|
|
import remarkGfm from 'remark-gfm';
|
|
import remarkBreaks from 'remark-breaks';
|
|
import { FC } from 'react';
|
|
import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
|
|
import { BrowserOpenURL } from '../../wailsjs/runtime';
|
|
|
|
const Hyperlink: FC<any> = ({ href, children }) => {
|
|
return (
|
|
<span
|
|
style={{ color: '#8ab4f8', cursor: 'pointer' }}
|
|
onClick={() => {
|
|
BrowserOpenURL(href);
|
|
}}
|
|
>
|
|
{/*@ts-ignore*/}
|
|
{children}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const MarkdownRender: FC<ReactMarkdownOptions & { disabled?: boolean }> = (props) => {
|
|
return (
|
|
<div dir="auto" className="markdown-body">
|
|
{props.disabled ?
|
|
<div style={{ whiteSpace: 'pre-wrap' }}>
|
|
{props.children}
|
|
</div> :
|
|
<ReactMarkdown
|
|
allowedElements={[
|
|
'div',
|
|
'p',
|
|
'span',
|
|
|
|
'video',
|
|
'img',
|
|
|
|
'abbr',
|
|
'acronym',
|
|
'b',
|
|
'blockquote',
|
|
'code',
|
|
'em',
|
|
'i',
|
|
'li',
|
|
'ol',
|
|
'ul',
|
|
'strong',
|
|
'table',
|
|
'tr',
|
|
'td',
|
|
'th',
|
|
|
|
'details',
|
|
'summary',
|
|
'kbd',
|
|
'samp',
|
|
'sub',
|
|
'sup',
|
|
'ins',
|
|
'del',
|
|
'var',
|
|
'q',
|
|
'dl',
|
|
'dt',
|
|
'dd',
|
|
'ruby',
|
|
'rt',
|
|
'rp',
|
|
|
|
'br',
|
|
'hr',
|
|
|
|
'h1',
|
|
'h2',
|
|
'h3',
|
|
'h4',
|
|
'h5',
|
|
'h6',
|
|
|
|
'thead',
|
|
'tbody',
|
|
'tfoot',
|
|
'u',
|
|
's',
|
|
'a',
|
|
'pre',
|
|
'cite'
|
|
]}
|
|
unwrapDisallowed={true}
|
|
remarkPlugins={[remarkGfm, remarkBreaks]}
|
|
rehypePlugins={[
|
|
rehypeRaw,
|
|
[
|
|
rehypeHighlight,
|
|
{
|
|
detect: true,
|
|
ignoreMissing: true
|
|
}
|
|
]
|
|
]}
|
|
components={{
|
|
a: Hyperlink
|
|
}}
|
|
>
|
|
{props.children}
|
|
</ReactMarkdown>
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MarkdownRender;
|