cedric
55b41a906b
- Parser markdown avec marked pour rendu HTML complet - Styles CSS pour éléments markdown (headings, listes, code, etc.) - Nettoyage automatique des styles temporaires - Fallback texte brut si parsing markdown échoue
257 lines
8.4 KiB
JavaScript
257 lines
8.4 KiB
JavaScript
'use client'
|
|
|
|
import {useState} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import Button from '@mui/material/Button'
|
|
import CircularProgress from '@mui/material/CircularProgress'
|
|
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf'
|
|
import {formatDate} from '@/lib/format.js'
|
|
|
|
// Helper function to render markdown to HTML
|
|
const renderMarkdownToHtml = async content => {
|
|
if (!content) {
|
|
return 'Aucun contenu disponible'
|
|
}
|
|
|
|
// Check if content contains markdown syntax
|
|
const hasMarkdown = content.includes('**')
|
|
|| content.includes('*')
|
|
|| content.includes('#')
|
|
|| content.includes('[')
|
|
|| content.includes('`')
|
|
|| content.includes('> ')
|
|
|| content.includes('- ')
|
|
|| content.includes('1. ')
|
|
|
|
if (!hasMarkdown) {
|
|
// Simple text with line breaks
|
|
return content.replaceAll('\n', '<br>')
|
|
}
|
|
|
|
try {
|
|
// Dynamic import of markdown parser
|
|
const {marked} = await import('marked')
|
|
// Configure marked for better PDF rendering
|
|
marked.setOptions({
|
|
breaks: true, // Convert \n to <br>
|
|
gfm: true, // GitHub flavored markdown
|
|
headerIds: false, // No header IDs needed for PDF
|
|
mangle: false // Don't mangle email addresses
|
|
})
|
|
|
|
return marked(content)
|
|
} catch (error) {
|
|
console.warn('Failed to parse markdown, falling back to plain text:', error)
|
|
return content.replaceAll('\n', '<br>')
|
|
}
|
|
}
|
|
|
|
export default function ExportPdfButton({versionData, size = 'medium', variant = 'outlined'}) {
|
|
const [isExporting, setIsExporting] = useState(false)
|
|
|
|
const handleExportPdf = async () => {
|
|
setIsExporting(true)
|
|
|
|
try {
|
|
const {default: jsPDF} = await import('jspdf')
|
|
const {default: html2canvas} = await import('html2canvas')
|
|
|
|
// Créer un élément temporaire avec le contenu formaté
|
|
const tempDiv = document.createElement('div')
|
|
tempDiv.style.cssText = `
|
|
padding: 40px;
|
|
font-family: 'Roboto', Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background-color: white;
|
|
width: 210mm;
|
|
position: fixed;
|
|
top: -9999px;
|
|
left: -9999px;
|
|
z-index: -1;
|
|
`
|
|
|
|
// Add CSS styles for markdown elements
|
|
const styleElement = document.createElement('style')
|
|
styleElement.textContent = `
|
|
.pdf-content h1, .pdf-content h2, .pdf-content h3, .pdf-content h4, .pdf-content h5, .pdf-content h6 {
|
|
margin: 20px 0 10px 0;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.pdf-content h1 { font-size: 24px; color: #1976d2; }
|
|
.pdf-content h2 { font-size: 20px; }
|
|
.pdf-content h3 { font-size: 18px; }
|
|
.pdf-content h4 { font-size: 16px; }
|
|
.pdf-content p { margin: 10px 0; }
|
|
.pdf-content strong, .pdf-content b { font-weight: bold; }
|
|
.pdf-content em, .pdf-content i { font-style: italic; }
|
|
.pdf-content ul, .pdf-content ol {
|
|
margin: 10px 0;
|
|
padding-left: 25px;
|
|
}
|
|
.pdf-content li { margin: 5px 0; }
|
|
.pdf-content blockquote {
|
|
margin: 15px 0;
|
|
padding: 10px 20px;
|
|
border-left: 4px solid #1976d2;
|
|
background-color: #f5f5f5;
|
|
font-style: italic;
|
|
}
|
|
.pdf-content code {
|
|
background-color: #f5f5f5;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 13px;
|
|
}
|
|
.pdf-content pre {
|
|
background-color: #f5f5f5;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
overflow-x: auto;
|
|
margin: 15px 0;
|
|
}
|
|
.pdf-content pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
.pdf-content a { color: #1976d2; text-decoration: underline; }
|
|
.pdf-content hr {
|
|
border: none;
|
|
border-top: 1px solid #ccc;
|
|
margin: 20px 0;
|
|
}
|
|
.pdf-content table {
|
|
border-collapse: collapse;
|
|
margin: 15px 0;
|
|
width: 100%;
|
|
}
|
|
.pdf-content th, .pdf-content td {
|
|
border: 1px solid #ccc;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
.pdf-content th {
|
|
background-color: #f5f5f5;
|
|
font-weight: bold;
|
|
}
|
|
`
|
|
document.head.append(styleElement)
|
|
|
|
const authorName = versionData.user_created?.split('-')[0] || 'Système'
|
|
const createdAt = new Date(versionData.date_created)
|
|
const threeDaysAgo = new Date(Date.now() - (3 * 24 * 60 * 60 * 1000))
|
|
const voteStatus = createdAt < threeDaysAgo ? 'fermé' : 'ouvert'
|
|
const voteColor = voteStatus === 'ouvert' ? '#2e7d32' : '#d32f2f'
|
|
|
|
// Render markdown content to HTML
|
|
const renderedContent = await renderMarkdownToHtml(versionData.delta?.contenu)
|
|
|
|
tempDiv.innerHTML = `
|
|
<div style="margin-bottom: 30px; border-bottom: 2px solid #1976d2; padding-bottom: 20px;">
|
|
<h1 style="color: #1976d2; margin: 0 0 10px 0; font-size: 28px; font-weight: bold;">
|
|
${versionData.name}
|
|
</h1>
|
|
<div style="margin-top: 15px;">
|
|
<p style="margin: 5px 0; color: #666; font-size: 14px;">
|
|
<strong>Auteur :</strong> @${authorName}
|
|
</p>
|
|
<p style="margin: 5px 0; color: #666; font-size: 14px;">
|
|
<strong>Date de création :</strong> ${formatDate(versionData.date_created, 'PPpp')}
|
|
</p>
|
|
<p style="margin: 5px 0; color: #666; font-size: 14px;">
|
|
<strong>Statut du vote :</strong>
|
|
<span style="color: ${voteColor}; font-weight: bold;">${voteStatus}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 20px;">
|
|
<h2 style="color: #333; font-size: 20px; margin-bottom: 15px; font-weight: bold;">
|
|
Contenu
|
|
</h2>
|
|
<div class="pdf-content" style="font-size: 14px; line-height: 1.8; text-align: justify;">
|
|
${renderedContent}
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; font-size: 12px; color: #888; text-align: center;">
|
|
Exporté depuis Konstitisyon.la le ${formatDate(new Date(), 'PPpp')}
|
|
</div>
|
|
`
|
|
|
|
document.body.append(tempDiv)
|
|
|
|
// Générer le canvas avec une meilleure qualité
|
|
const canvas = await html2canvas(tempDiv, {
|
|
scale: 2,
|
|
useCORS: true,
|
|
allowTaint: true,
|
|
backgroundColor: '#ffffff',
|
|
width: tempDiv.scrollWidth,
|
|
height: tempDiv.scrollHeight
|
|
})
|
|
|
|
tempDiv.remove()
|
|
styleElement.remove() // Clean up styles
|
|
|
|
// Créer le PDF
|
|
const imgData = canvas.toDataURL('image/png', 1)
|
|
const pdf = new jsPDF('p', 'mm', 'a4') // eslint-disable-line new-cap
|
|
|
|
const pageWidth = pdf.internal.pageSize.getWidth()
|
|
const pageHeight = pdf.internal.pageSize.getHeight()
|
|
const imgWidth = pageWidth
|
|
const imgHeight = (canvas.height * imgWidth) / canvas.width
|
|
|
|
let heightLeft = imgHeight
|
|
let position = 0
|
|
|
|
// Ajouter la première page
|
|
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
|
|
heightLeft -= pageHeight
|
|
|
|
// Ajouter des pages supplémentaires si nécessaire
|
|
while (heightLeft >= 0) {
|
|
position = heightLeft - imgHeight
|
|
pdf.addPage()
|
|
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
|
|
heightLeft -= pageHeight
|
|
}
|
|
|
|
// Nom du fichier sécurisé
|
|
const fileName = `${versionData.name.replaceAll(/[^a-zA-Z\d\s]/g, '').replaceAll(/\s+/g, '_')}_${formatDate(new Date(), 'yyyy-MM-dd')}.pdf`
|
|
pdf.save(fileName)
|
|
} catch (error) {
|
|
console.error('Erreur lors de l\'export PDF:', error)
|
|
} finally {
|
|
setIsExporting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant={variant}
|
|
size={size}
|
|
startIcon={isExporting ? <CircularProgress size={16} /> : <PictureAsPdfIcon />}
|
|
disabled={isExporting}
|
|
sx={{
|
|
minWidth: size === 'small' ? 'auto' : undefined,
|
|
'&:disabled': {
|
|
opacity: 0.6
|
|
}
|
|
}}
|
|
onClick={handleExportPdf}
|
|
>
|
|
{isExporting ? 'Export...' : (size === 'small' ? 'PDF' : 'Exporter PDF')}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
ExportPdfButton.propTypes = {
|
|
versionData: PropTypes.object.isRequired,
|
|
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
variant: PropTypes.oneOf(['text', 'outlined', 'contained'])
|
|
}
|