Skip to content

Commit aaa49bd

Browse files
committed
refac
1 parent 8da02c6 commit aaa49bd

File tree

1 file changed

+37
-1
lines changed

1 file changed

+37
-1
lines changed

src/lib/components/chat/FileNav/FilePreview.svelte

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import DOMPurify from 'dompurify';
66
import { settings } from '$lib/stores';
77
import { isCodeFile, highlightCode } from '$lib/utils/codeHighlight';
8+
import { initMermaid, renderMermaidDiagram } from '$lib/utils';
89
import Spinner from '../../common/Spinner.svelte';
910
import PDFViewer from '../../common/PDFViewer.svelte';
1011
import JsonTreeView from './JsonTreeView.svelte';
@@ -92,6 +93,41 @@
9293
? DOMPurify.sanitize(marked.parse(fileContent, { async: false }) as string)
9394
: '';
9495
96+
let markdownEl: HTMLDivElement;
97+
let mermaidInstance: any = null;
98+
99+
const renderMermaidBlocks = async (el: HTMLDivElement) => {
100+
if (!el) return;
101+
const codeEls = el.querySelectorAll('code.language-mermaid');
102+
if (codeEls.length === 0) return;
103+
104+
if (!mermaidInstance) {
105+
mermaidInstance = await initMermaid();
106+
}
107+
108+
for (const codeEl of codeEls) {
109+
const pre = codeEl.parentElement;
110+
if (!pre || pre.tagName !== 'PRE' || pre.dataset.mermaidRendered) continue;
111+
pre.dataset.mermaidRendered = 'true';
112+
113+
try {
114+
const svg = await renderMermaidDiagram(mermaidInstance, codeEl.textContent ?? '');
115+
if (svg) {
116+
const wrapper = document.createElement('div');
117+
wrapper.className = 'mermaid-diagram flex justify-center py-2';
118+
wrapper.innerHTML = svg;
119+
pre.replaceWith(wrapper);
120+
}
121+
} catch (e) {
122+
console.error('Mermaid render error:', e);
123+
}
124+
}
125+
};
126+
127+
$: if (renderedHtml && markdownEl) {
128+
tick().then(() => renderMermaidBlocks(markdownEl));
129+
}
130+
95131
// Simple CSV parser that handles quoted fields
96132
const parseCsv = (text: string, delimiter: string): string[][] => {
97133
const rows: string[][] = [];
@@ -341,7 +377,7 @@
341377
title="HTML Preview"
342378
/>
343379
{:else if isMarkdown && !showRaw}
344-
<div class="prose dark:prose-invert max-w-full text-sm p-3">
380+
<div bind:this={markdownEl} class="prose dark:prose-invert max-w-full text-sm p-3">
345381
{@html renderedHtml}
346382
</div>
347383
{:else if isCsv && !showRaw && csvRows.length > 0}

0 commit comments

Comments
 (0)