feat: support multi-format — images, CSV, JSON, TXT + fix PDF embed
CI / lint (push) Failing after 19s
CI / test (push) Has been skipped
CI / build (push) Has been skipped
CI / e2e (push) Has been skipped
CI / security (push) Successful in 14s
Desktop Build / build-windows (push) Has been cancelled
Desktop Build / build-linux (push) Has been cancelled

- PDF: <iframe> → <embed> (plus compatible webview Tauri)
- Images: .png .jpg .gif .svg .webp .bmp .ico → rendu standalone avec toolbar
- CSV: rendu en tableau HTML avec headers sticky
- JSON: affichage formaté avec indentation (html.escape)
- Texte: .txt .log .yml .yaml .py .js .sh .toml .ini → <pre> mono
- CSS: .image-viewer-body, .csv-table, .text-viewer, .json-viewer, .file-toolbar
This commit is contained in:
2026-07-27 15:06:24 -04:00
parent 2ba7138881
commit e213ad183e
5 changed files with 239 additions and 22 deletions
+66 -1
View File
@@ -431,13 +431,78 @@ export function renderFile(data) {
</div>
<div class="pdf-body">
${tocHtml}
<iframe src="${pdfUrl}" class="pdf-iframe" title="${escapeHtml(data.title)}"></iframe>
<embed src="${pdfUrl}" class="pdf-iframe" type="application/pdf" title="${escapeHtml(data.title)}"></embed>
</div>
</div>`;
lucide.createIcons();
return;
}
// Handle images
if (data.is_image) {
const imgUrl = `/api/file/${encodeURIComponent(data.vault)}/raw?path=${encodeURIComponent(data.path)}`;
area.innerHTML = `
<div class="image-viewer-container">
<div class="file-toolbar">
<span class="file-info">${escapeHtml(data.title)}</span>
<button class="btn-action" onclick="window.open('${imgUrl}', '_blank')">
<i data-lucide="maximize" style="width:14px;height:14px"></i> Plein écran
</button>
<button class="btn-action" onclick="window.open('/api/file/${encodeURIComponent(data.vault)}/download?path=${encodeURIComponent(data.path)}', '_blank')">
<i data-lucide="download" style="width:14px;height:14px"></i> Télécharger
</button>
</div>
<div class="image-viewer-body">
${data.html}
</div>
</div>`;
lucide.createIcons();
return;
}
// Handle CSV
if (data.is_csv) {
area.innerHTML = `
<div class="text-viewer-container">
<div class="file-toolbar">
<span class="file-info">CSV — ${escapeHtml(data.title)}</span>
<button class="btn-action" onclick="window.open('/api/file/${encodeURIComponent(data.vault)}/download?path=${encodeURIComponent(data.path)}', '_blank')">
<i data-lucide="download" style="width:14px;height:14px"></i> Télécharger
</button>
</div>
<div class="text-viewer-body">${data.html}</div>
</div>`;
lucide.createIcons();
return;
}
// Handle JSON and plain text
if (data.is_json || data.extension === '.txt' || data.extension === '.log' || data.extension === '.yml' || data.extension === '.yaml' || data.extension === '.sh' || data.extension === '.py' || data.extension === '.js' || data.extension === '.toml' || data.extension === '.ini' || data.extension === '.cfg' || data.extension === '.conf' || data.extension === '.env') {
// Read raw content for plain text
fetch(`/api/file/${encodeURIComponent(data.vault)}/raw?path=${encodeURIComponent(data.path)}`)
.then(r => r.text())
.then(text => {
const extClass = `lang-${data.extension.replace('.', '')}`;
area.innerHTML = `
<div class="text-viewer-container">
<div class="file-toolbar">
<span class="file-info">${escapeHtml(data.title)}</span>
<button class="btn-action" onclick="window.open('/api/file/${encodeURIComponent(data.vault)}/download?path=${encodeURIComponent(data.path)}', '_blank')">
<i data-lucide="download" style="width:14px;height:14px"></i> Télécharger
</button>
</div>
<div class="text-viewer-body">
<pre class="${extClass}"><code>${escapeHtml(text)}</code></pre>
</div>
</div>`;
lucide.createIcons();
})
.catch(() => {
area.innerHTML = `<p class="error">Erreur lors du chargement du fichier.</p>`;
});
return;
}
// Handle unsupported (binary) files
if (data.unsupported) {
const sizeStr = data.size_bytes