fix: use HTML content for markdown copy button (#12187)

This commit is contained in:
jardel 2025-12-30 13:35:15 +08:00 committed by GitHub
parent ed4353b054
commit 068cf1083c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -4,6 +4,7 @@ import store from '@renderer/store'
import { messageBlocksSelectors } from '@renderer/store/messageBlock'
import { Tooltip } from 'antd'
import { Check } from 'lucide-react'
import MarkdownIt from 'markdown-it'
import React, { memo, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
@ -22,18 +23,26 @@ const Table: React.FC<Props> = ({ children, node, blockId }) => {
const { t } = useTranslation()
const [copied, setCopied] = useTemporaryValue(false, 2000)
const handleCopyTable = useCallback(() => {
const handleCopyTable = useCallback(async () => {
const tableMarkdown = extractTableMarkdown(blockId ?? '', node?.position)
if (!tableMarkdown) return
navigator.clipboard
.writeText(tableMarkdown)
.then(() => {
setCopied(true)
})
.catch((error) => {
window.toast?.error(`${t('message.copy.failed')}: ${error}`)
})
try {
const tableHtml = convertMarkdownTableToHtml(tableMarkdown)
if (navigator.clipboard && window.ClipboardItem) {
const clipboardItem = new ClipboardItem({
'text/plain': new Blob([tableMarkdown], { type: 'text/plain' }),
'text/html': new Blob([tableHtml], { type: 'text/html' })
})
await navigator.clipboard.write([clipboardItem])
} else {
await navigator.clipboard.writeText(tableMarkdown)
}
setCopied(true)
} catch (error) {
window.toast?.error(`${t('message.copy.failed')}: ${error}`)
}
}, [blockId, node?.position, setCopied, t])
return (
@ -60,7 +69,6 @@ export function extractTableMarkdown(blockId: string, position: any): string {
if (!position || !blockId) return ''
const block = messageBlocksSelectors.selectById(store.getState(), blockId)
if (!block || !('content' in block) || typeof block.content !== 'string') return ''
const { start, end } = position
@ -71,6 +79,16 @@ export function extractTableMarkdown(blockId: string, position: any): string {
return tableLines.join('\n').trim()
}
function convertMarkdownTableToHtml(markdownTable: string): string {
const md = new MarkdownIt({
html: true,
breaks: false,
linkify: false
})
return md.render(markdownTable)
}
const TableWrapper = styled.div`
position: relative;