Spaces:
Running
Running
File size: 5,273 Bytes
dc9e27a |
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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import { replaceStr, mergeReplaceToDiv } from '../../utils/tools';
import { Popover } from 'antd';
import classNames from 'classnames';
import styles from './index.module.less';
import { useEffect } from 'react';
interface IMarkdownProps {
source: string;
refList?: any;
quoType?: string;
chatIsOver?: boolean;
}
const CustomMarkdown = ({ source, refList = null, quoType = 'single', chatIsOver = false }: IMarkdownProps) => {
const linkToExtend = (url: string) => {
window.open(url);
};
const CustomI = ({ children, className, ...props }: any) => {
const content = refList
? Object.keys(refList).map((item) => {
if (Number(item) === Number(children)) {
return (
<li
key={`ref-item-${item}`}
onClick={() => {
linkToExtend(refList[item].url);
}}
>
<div className={styles.url}>{refList[item].url}</div>
<div className={styles.title}>{refList[item].title}</div>
<div className={styles.summ}>{refList[item].summ}</div>
</li>
);
} else {
return null;
}
})
: null;
return className.includes('custom') ? (
<Popover overlayClassName="iQuoPopover" content={content} arrow={false} key={`iQuoPopover-${children}`}>
<b className={styles.footerFlag}>{children}</b>
</Popover>
) : (
<code>{children}</code>
);
};
const CustomDiv = ({ children, className, ...props }: any) => {
const list = props['data-ids'].split(',');
const content = refList
? Object.keys(refList).map((item) => {
if (list.includes(String(item))) {
return (
<>
<li
className={styles.mergeQuoLi}
key={`ref-item-${refList[item].title}`}
onClick={() => {
linkToExtend(refList[item].url);
}}
>
<div className={styles.url}>{refList[item].url}</div>
<div className={styles.title}>{refList[item].title}</div>
</li>
<div className={classNames(styles.line, 'line')} />
</>
);
} else {
return null;
}
})
: null;
return className.includes('mergeQuo') ? (
<Popover content={content} arrow={false} overlayClassName="mergeQuoPopover" key={`custom-dev-${props['data-ids']}`}>
<b className={styles.footerFlag}>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.49491 2.65877C3.29849 4.06934 2.07828 5.71113 1.83428 7.58413C1.45443 10.4999 4.06198 11.9272 5.3832 10.6448C6.70443 9.36248 5.91243 7.73483 4.95574 7.28993C3.99904 6.84499 3.41399 6.99995 3.51604 6.40539C3.6181 5.81085 4.97919 4.16241 6.17496 3.39472C6.2543 3.32725 6.28448 3.19635 6.2081 3.09704C6.15784 3.03174 6.05929 2.90365 5.91243 2.71278C5.78401 2.54586 5.66099 2.55211 5.49491 2.65877Z"
fill="#121316"
fillOpacity="0.35"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.2801 2.65877C9.08366 4.06934 7.86344 5.71113 7.61943 7.58413C7.2396 10.4999 9.84715 11.9272 11.1684 10.6448C12.4896 9.36248 11.6976 7.73483 10.7409 7.28993C9.78421 6.84499 9.19913 6.99995 9.30121 6.40539C9.40327 5.81085 10.7644 4.16241 11.9601 3.39472C12.0395 3.32725 12.0697 3.19635 11.9932 3.09704C11.943 3.03174 11.8445 2.90365 11.6976 2.71278C11.5692 2.54586 11.4462 2.55211 11.2801 2.65877Z"
fill="#121316"
fillOpacity="0.35"
/>
</svg>
</b>
</Popover>
) : (
<code>{children}</code>
);
};
return (
<div className={styles.markdownCon}>
<ReactMarkdown rehypePlugins={[rehypeRaw]} components={refList && Object.keys(refList)?.length ? { i: CustomI, span: CustomDiv } : {}}>
{
refList ?
quoType === 'merge' ? mergeReplaceToDiv(source) :
replaceStr(source) :
source
}
</ReactMarkdown>
</div>
);
};
export default CustomMarkdown;
|