Function TableWrapper

src/renderer/src/components/common/markdown/Markdown.tsx:66–197

(props: { children: ReactElement })

}

export function TableWrapper(props: { children: ReactElement }) {
  const ref = useRef<HTMLDivElement>(null)
  const [isCopied, setIsCopied] = useState(false)
  const [tableMarkdown, setTableMarkdown] = useState('')
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [tableHtml, setTableHtml] = useState('')
  const [tableTextMarkdown, setTableTextMarkdown] = useState('')

  useEffect(() => {
    if (ref.current) {
      const table = ref.current.querySelector('table')
      if (table) {
        const markdown = convertTableToMarkdown(table)
        setTableMarkdown(markdown)
        setTableHtml(table.outerHTML)

        const textMarkdown = convertTableToTextList(table)
        setTableTextMarkdown(textMarkdown)
      }
    }
  }, [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 convertTableToTextList = (table: HTMLTableElement): string => {
    const thead = table.querySelector('thead')
    const tbody = table.querySelector('tbody')

    let headers: string[] = []
    if (thead) {
      const headerRow = thead.querySelector('tr')