Global-sales/src/views/accounts/HtmlPreview.jsx

import { Empty, Skeleton, Divider, Flex, Button } from 'antd'
import { Conditional } from '@/components/Conditional'
import { isEmpty, 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 { loading = false, value } = props

  const html = decodeHtml(value)

  if (loading) {
    return <Skeleton className='p-6' active />
  }

  return (
    <div className='border-solid border rounded border-gray-300'>
      <Conditional
        condition={isNotEmpty(html)}
        whenTrue={
          <pre className='whitespace-pre-wrap break-words ps-6 pe-6'>
            {html}
          </pre>
        }
        whenFalse={<Empty className='p-6' description={false} />}
      />
      <Divider />
      <Flex gap='middle' justify='flex-end' wrap className='p-6'>
        <Button
          onClick={() => {
            // setSnippetModalOpen(true)
          }}>
          编辑
        </Button>
        <Button
          onClick={() => {
            //
          }}>
          复制
        </Button>
        <Button
          danger
          onClick={() => {
            //
          }}>
          删除
        </Button>
      </Flex>
    </div>
  )
}

export default HtmlPreview