ORGANISATION-KA-INTERNATIONALE/konstitisyon.nu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ajouté support markdown dans export PDF

Browse Source 
- 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
This commit is contained in:
Cédric Famibelle-Pronzola
2025-07-23 20:35:41 +04:00
parent 19941839a6
commit 55b41a906b
3 changed files with 119 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/versions/export-pdf-button.js
+113 -2
View File
@@ -7,6 +7,45 @@ 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)
@@ -32,12 +71,83 @@ export default function ExportPdfButton({versionData, size = 'medium', variant =
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;">
@@ -61,8 +171,8 @@ export default function ExportPdfButton({versionData, size = 'medium', variant =
<h2 style="color: #333; font-size: 20px; margin-bottom: 15px; font-weight: bold;">
Contenu
</h2>
<div style="white-space: pre-wrap; font-size: 14px; line-height: 1.8; text-align: justify;">
${versionData.delta?.contenu || 'Aucun contenu disponible'}
<div class="pdf-content" style="font-size: 14px; line-height: 1.8; text-align: justify;">
${renderedContent}
</div>
</div>
@@ -84,6 +194,7 @@ export default function ExportPdfButton({versionData, size = 'medium', variant =
})
tempDiv.remove()
styleElement.remove() // Clean up styles
// Créer le PDF
const imgData = canvas.toDataURL('image/png', 1)
package.json
+1
View File
@@ -19,6 +19,7 @@
"date-fns": "^3.6.0",
"html2canvas": "^1.4.1",
"jspdf": "^3.0.1",
"marked": "^16.1.1",
"next": "^14.2.3",
"next-auth": "^5.0.0-beta.18",
"react": "^18.3.1",
yarn.lock
+5
View File
@@ -3195,6 +3195,11 @@ markdown-table@^3.0.0:
resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.4.tgz#fe44d6d410ff9d6f2ea1797a3f60aa4d2b631c2a"
integrity sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==
marked@^16.1.1:
version "16.1.1"
resolved "https://registry.yarnpkg.com/marked/-/marked-16.1.1.tgz#a7839dcf19fa5e349cad12c561f231320690acd4"
integrity sha512-ij/2lXfCRT71L6u0M29tJPhP0bM5shLL3u5BePhFwPELj2blMJ6GDtD7PfJhRLhJ/c2UwrK17ySVcDzy2YHjHQ==
mdast-util-find-and-replace@^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz#70a3174c894e14df722abf43bc250cbae44b11df"