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
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:
+66
-1
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user