feat: Add table copy functionality to Markdown component with styled copy button, enhancing user experience for table data management

Author: experdot

src/renderer/src/components/common/markdown/Markdown.tsx

@@ -11,7 +11,7 @@ import RehypeHighlight from 'rehype-highlight'
 import mermaid from 'mermaid'
 
 import React from 'react'
-import { useRef, useState, RefObject, useEffect, useMemo } from 'react'
+import { useRef, useState, RefObject, useEffect, useMemo, ReactElement } from 'react'
 
 import LoadingIcon from './three-dots.svg'
 import { useDebouncedCallback } from 'use-debounce'
@@ -62,6 +62,72 @@ export function Mermaid(props: { code: string }) {
   )
 }
 
+export function TableWrapper(props: { children: ReactElement }) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [isCopied, setIsCopied] = useState(false)
+  const [tableMarkdown, setTableMarkdown] = useState('')
+
+  useEffect(() => {
+    if (ref.current) {
+      const table = ref.current.querySelector('table')
+      if (table) {
+        const markdown = convertTableToMarkdown(table)
+        setTableMarkdown(markdown)
+      }
+    }
+  }, [props.children])
+
+  const convertTableToMarkdown = (table: HTMLTableElement): string => {
+    const rows: string[][] = []
+    const thead = table.querySelector('thead')
+    const tbody = table.querySelector('tbody')
+
+    if (thead) {
+      const headerRow = thead.querySelector('tr')
+      if (headerRow) {
+        const headers = Array.from(headerRow.querySelectorAll('th')).map(
+          (th) => th.textContent?.trim() || ''
+        )
+        rows.push(headers)
+        rows.push(headers.map(() => '---'))
+      }
+    }
+
+    if (tbody) {
+      const bodyRows = tbody.querySelectorAll('tr')
+      bodyRows.forEach((tr) => {
+        const cells = Array.from(tr.querySelectorAll('td')).map(
+          (td) => td.textContent?.trim() || ''
+        )
+        rows.push(cells)
+      })
+    }
+
+    return rows.map((row) => '| ' + row.join(' | ') + ' |').join('\n')
+  }
+
+  const handleCopy = async () => {
+    if (tableMarkdown) {
+      const success = await copyToClipboard(tableMarkdown)
+      if (success) {
+        setIsCopied(true)
+        setTimeout(() => setIsCopied(false), 2000)
+      }
+    }
+  }
+
+  return (
+    <div className="table-wrapper" ref={ref}>
+      <span
+        className={`copy-table-button ${isCopied ? 'copied' : ''}`}
+        onClick={handleCopy}
+        title={isCopied ? '已复制!' : '复制表格'}
+      ></span>
+      {props.children}
+    </div>
+  )
+}
+
 export function PreCode(props: { children: any }) {
   const ref = useRef<HTMLPreElement>(null)
   const refText = ref.current?.innerText
@@ -164,7 +230,8 @@ function _MarkDownContent(props: { content: string }) {
           const isInternal = /^\/#/i.test(href)
           const target = isInternal ? '_self' : (aProps.target ?? '_blank')
           return <a {...aProps} target={target} />
-        }
+        },
+        table: (tableProps) => <TableWrapper>{<table {...tableProps} />}</TableWrapper>
       }}
     >
       {escapedContent}

src/renderer/src/components/common/markdown/markdown.scss

@@ -309,6 +309,66 @@
   overflow: auto;
 }
 
+.markdown-body .table-wrapper {
+  position: relative;
+  margin-bottom: 16px;
+
+  .copy-table-button {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 24px;
+    height: 24px;
+    background: rgba(0, 0, 0, 0.3);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    opacity: 0;
+    transition:
+      opacity 0.2s ease,
+      background-color 0.2s ease;
+    z-index: 10;
+
+    /* 复制图标 */
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 14px;
+      height: 14px;
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+
+    &:active {
+      background: rgba(0, 0, 0, 0.6);
+    }
+
+    /* 复制成功状态 */
+    &.copied {
+      background: rgba(34, 197, 94, 0.8);
+      opacity: 1;
+
+      &::before {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/%3E%3C/svg%3E");
+      }
+    }
+  }
+
+  &:hover .copy-table-button {
+    opacity: 0.6;
+  }
+
+  .copy-table-button:hover {
+    background: rgba(0, 0, 0, 0.5);
+    opacity: 1;
+  }
+}
+
 .markdown-body td,
 .markdown-body th {
   padding: 0;
@@ -1227,3 +1287,27 @@
     }
   }
 }
+
+.dark .markdown-body .table-wrapper .copy-table-button {
+  background: rgba(255, 255, 255, 0.15);
+
+  &::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z'/%3E%3C/svg%3E");
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.25);
+  }
+
+  &:active {
+    background: rgba(255, 255, 255, 0.35);
+  }
+
+  &.copied {
+    background: rgba(34, 197, 94, 0.8);
+
+    &::before {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/%3E%3C/svg%3E");
+    }
+  }
+}