fix: 使用 dangerouslySetInnerHTML 显示 HTML

2.0/email-builder
Jimmy Liow 11 months ago
parent 128fb346b3
commit 5d6715bd29

@ -1,22 +1,10 @@
import { Empty, Skeleton, Divider, Flex, Button } from 'antd' import { Empty, Skeleton, Divider, Flex, Button } from 'antd'
import { Conditional } from '@/components/Conditional' import { Conditional } from '@/components/Conditional'
import { isEmpty, isNotEmpty } from '@/utils/commons' import { isNotEmpty } from '@/utils/commons'
const decodeHtml = (text) => {
if (isEmpty(text)) return
const temp = document.createElement('div')
temp.innerHTML = text
return temp.innerText || temp.textContent
}
const HtmlPreview = (props) => { const HtmlPreview = (props) => {
const { loading = false, value } = props const { loading = false, value } = props
const html = decodeHtml(value)
if (loading) { if (loading) {
return <Skeleton className='p-6' active /> return <Skeleton className='p-6' active />
} }
@ -24,10 +12,9 @@ const HtmlPreview = (props) => {
return ( return (
<div className='border-solid border rounded border-gray-300'> <div className='border-solid border rounded border-gray-300'>
<Conditional <Conditional
condition={isNotEmpty(html)} condition={isNotEmpty(value)}
whenTrue={ whenTrue={
<pre className='whitespace-pre-wrap break-words ps-6 pe-6'> <pre className='whitespace-pre-wrap break-words ps-6 pe-6' dangerouslySetInnerHTML={{__html:value}}>
{html}
</pre> </pre>
} }
whenFalse={<Empty className='p-6' description={false} />} whenFalse={<Empty className='p-6' description={false} />}

Loading…
Cancel
Save