svelte-streamdown 2.4.5 → 2.5.1

package/dist/Elements/Mermaid.svelte

@@ -5,13 +5,16 @@
 	import type { MermaidConfig } from 'mermaid';
 	import { on } from 'svelte/events';
 	import { usePanzoom } from '../utils/panzoom.svelte';
+	import { fitViewIcon, fullscreenIcon, zoomInIcon, zoomOutIcon } from './icons.js';
 
 	const streamdown = useStreamdown();
 
 	const {
-		token
+		token,
+		id
 	}: {
 		token: Tokens.Code;
+		id: string;
 	} = $props();
 
 	let mermaid = $state<any>(null);
@@ -154,6 +157,7 @@
 	const renderMermaid = async (code: string, element: HTMLElement) => {
 		try {
 			// Sanitize the code first
+			const sanitizedCode = sanitizeMermaidCode(code);
 
 			// Default configuration
 			const defaultConfig: MermaidConfig = {
@@ -172,8 +176,7 @@
 			};
 
 			// Initialize mermaid with merged config
-			const mergedConfig = { ...defaultConfig };
-			mermaid.initialize(mergedConfig);
+			mermaid.initialize(defaultConfig);
 
 			const chartHash = code.split('').reduce((acc, char) => {
 				return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
@@ -182,186 +185,86 @@
 			const uniqueId = `mermaid-${Math.abs(chartHash)}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 
 			// Render the diagram
-			const { svg: svgString } = await mermaid.render(uniqueId, sanitizeMermaidCode(code));
-			const svg = new DOMParser().parseFromString(svgString, 'image/svg+xml').documentElement;
-
-			const svgTarget = element.querySelector('[data-mermaid-svg]')!;
-			svg.id = uniqueId;
-			Array.from(svg.attributes).forEach((attribute) => {
-				svgTarget.setAttribute(attribute.name, attribute.value);
-			});
-			svgTarget.innerHTML = svg.innerHTML;
-
-			panzoom.zoomToFit();
-			panzoom.zoomToFit();
+			const { svg: svgString } = await mermaid.render(uniqueId, sanitizedCode);
+
+			// Insert the SVG into the target element
+			const svgTarget = element.querySelector('[data-mermaid-svg]') as SVGElement;
+			if (svgTarget) {
+				svgTarget.innerHTML = svgString;
+				svgTarget.id = uniqueId;
+
+				// Apply any additional attributes from the rendered SVG
+				const tempSvg = new DOMParser().parseFromString(svgString, 'image/svg+xml').documentElement;
+				Array.from(tempSvg.attributes).forEach((attribute) => {
+					if (attribute.name !== 'id') {
+						svgTarget.setAttribute(attribute.name, attribute.value);
+					}
+				});
+
+				panzoom.zoomToFit();
+				panzoom.zoomToFit();
+			}
 		} catch (err) {
-			const sanitizedCode = sanitizeMermaidCode(code);
+			console.warn('Mermaid rendering error:', err);
+			// Could show error state in UI here
 		}
 	};
 </script>
 
-{#if mermaid}
-	<div
-		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
-		class={streamdown.theme.mermaid.base}
-		{@attach (node) => renderMermaid(token.text, node)}
-		{@attach insider.attach}
-		data-expanded={'false'}
-	>
-		{#if streamdown.controls.mermaid}
-			<div class={streamdown.theme.mermaid.buttons}>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Zoom to fit"
-					onclick={() => panzoom.zoomToFit()}
-					data-panzoom-ignore
-				>
-					{@render (streamdown.icons?.fitView || fitViewIcon)()}
-				</button>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Zoom in"
-					onclick={() => panzoom.zoomIn()}
-					data-panzoom-ignore
-				>
-					{@render (streamdown.icons?.zoomIn || zoomInIcon)()}
-				</button>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Zoom out"
-					onclick={() => panzoom.zoomOut()}
-					data-panzoom-ignore
-				>
-					{@render (streamdown.icons?.zoomOut || zoomOutIcon)()}
-				</button>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Toggle expand"
-					onclick={() => panzoom.toggleExpand()}
-					data-panzoom-ignore
-				>
-					{@render (streamdown.icons?.fullscreen || fullscreenIcon)()}
-				</button>
-			</div>
-		{/if}
-		<svg {@attach panzoom.attach} data-mermaid-svg></svg>
-	</div>
-{:else}
-	<div class={streamdown.theme.mermaid.base}></div>
-{/if}
-
-{#snippet zoomInIcon()}
-	<svg
-		class={streamdown.theme.mermaid.icon}
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" />
-		<line x1="11" x2="11" y1="8" y2="14" />
-		<line x1="8" x2="14" y1="11" y2="11" />
-	</svg>
-{/snippet}
-
-{#snippet zoomOutIcon()}
-	<svg
-		class={streamdown.theme.mermaid.icon}
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
-			x1="8"
-			x2="14"
-			y1="11"
-			y2="11"
-		/>
-	</svg>
-{/snippet}
-
-{#snippet fitViewIcon()}
-	<svg
-		class={streamdown.theme.mermaid.icon}
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path d="M3 7V5a2 2 0 0 1 2-2h2" />
-		<path d="M17 3h2a2 2 0 0 1 2 2v2" /><path d="M21 17v2a2 2 0 0 1-2 2h-2" />
-		<path d="M7 21H5a2 2 0 0 1-2-2v-2" /><rect width="10" height="8" x="7" y="8" rx="1" />
-	</svg>
-{/snippet}
-
-{#snippet fullscreenIcon()}
-	<svg
-		class={streamdown.theme.mermaid.icon}
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path d="m15 15 6 6" /><path d="m15 9 6-6" /><path d="M21 16v5h-5" /><path d="M21 8V3h-5" />
-		<path d="M3 16v5h5" /><path d="m3 21 6-6" /><path d="M3 8V3h5" /><path d="M9 9 3 3" />
-	</svg>
-{/snippet}
+<div data-streamdown-mermaid={id}>
+	{#if mermaid}
+		<div
+			style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+			class={streamdown.theme.mermaid.base}
+			{@attach (node) => renderMermaid(token.text, node)}
+			{@attach insider.attach}
+			data-expanded={'false'}
+		>
+			{#if streamdown.controls.mermaid}
+				<div class={streamdown.theme.mermaid.buttons}>
+					<button
+						class={streamdown.theme.components.button}
+						aria-label="Zoom to fit"
+						onclick={() => panzoom.zoomToFit()}
+						data-panzoom-ignore
+					>
+						{@render (streamdown.icons?.fitView || fitViewIcon)()}
+					</button>
+					<button
+						class={streamdown.theme.components.button}
+						aria-label="Zoom in"
+						onclick={() => panzoom.zoomIn()}
+						data-panzoom-ignore
+					>
+						{@render (streamdown.icons?.zoomIn || zoomInIcon)()}
+					</button>
+					<button
+						class={streamdown.theme.components.button}
+						aria-label="Zoom out"
+						onclick={() => panzoom.zoomOut()}
+						data-panzoom-ignore
+					>
+						{@render (streamdown.icons?.zoomOut || zoomOutIcon)()}
+					</button>
+					<button
+						class={streamdown.theme.components.button}
+						aria-label="Toggle expand"
+						onclick={() => panzoom.toggleExpand()}
+						data-panzoom-ignore
+					>
+						{@render (streamdown.icons?.fullscreen || fullscreenIcon)()}
+					</button>
+				</div>
+			{/if}
+			<svg {@attach panzoom.attach} data-mermaid-svg></svg>
+		</div>
+	{:else}
+		<div class={streamdown.theme.mermaid.base}></div>
+	{/if}
+</div>
 
 <style>
-	/* View Transition styles for zoom effect */
-	::view-transition-old(panzoom-element),
-	::view-transition-new(panzoom-element) {
-		/* Animate both scale and opacity for smooth zoom */
-		animation-duration: 0.3s;
-		animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
-	}
-
-	/* Zoom in animation (expand) */
-	::view-transition-old(panzoom-element) {
-		animation-name: zoom-out;
-	}
-
-	::view-transition-new(panzoom-element) {
-		animation-name: zoom-in;
-	}
-
-	@keyframes zoom-out {
-		from {
-			transform: scale(1);
-		}
-		to {
-			transform: scale(0.8);
-		}
-	}
-
-	@keyframes zoom-in {
-		from {
-			transform: scale(1.2);
-		}
-		to {
-			transform: scale(1);
-		}
-	}
-
 	:global([data-expanded='true']) {
-		::view-transition-old(panzoom-element),
-		::view-transition-new(panzoom-element) {
-			animation-duration: 0.3s;
-			animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
-		}
 		position: fixed;
 		top: 16px;
 		left: 16px;
@@ -370,4 +273,13 @@
 		z-index: 2147483647;
 		margin: 0px;
 	}
+
+	/* Hide Mermaid's temporary rendering containers */
+	:global(div[id^='dmermaid-']) {
+		position: absolute !important;
+		left: -9999px !important;
+		top: -9999px !important;
+		visibility: hidden !important;
+		pointer-events: none !important;
+	}
 </style>

package/dist/Elements/Mermaid.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Tokens } from 'marked';
 type $$ComponentProps = {
     token: Tokens.Code;
+    id: string;
 };
 declare const Mermaid: import("svelte").Component<$$ComponentProps, {}, "">;
 type Mermaid = ReturnType<typeof Mermaid>;

package/dist/Elements/TableDownload.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	import { useStreamdown } from '../context.svelte.js';
+	import { scale } from 'svelte/transition';
+	import { checkIcon, copyIcon, downloadIcon } from './icons.js';
+	import { Popover } from './popover.svelte.js';
+	import { useClickOutside } from '../utils/useClickOutside.svelte.js';
+	import { useKeyDown } from '../utils/useKeyDown.svelte.js';
+	import type { TableToken } from '../marked/marked-table.js';
+	import { useCopy } from '../utils/copy.svelte.js';
+	import { save } from '../utils/save.js';
+
+	let {
+		token,
+		id
+	}: {
+		token: TableToken;
+		id: string;
+	} = $props();
+	const streamdown = useStreamdown();
+	const popover = new Popover();
+	let modeState = $state<'download' | 'copy'>('download');
+
+	useKeyDown({
+		keys: ['Escape'],
+		get isActive() {
+			return popover.isOpen;
+		},
+		callback: () => {
+			popover.isOpen = false;
+		}
+	});
+	const clickOutside = useClickOutside({
+		get isActive() {
+			return popover.isOpen;
+		},
+		callback: () => {
+			popover.isOpen = false;
+		}
+	});
+
+	let copyValue = $state(token.raw);
+
+	const copy = useCopy({
+		get content() {
+			return copyValue;
+		}
+	});
+
+	const copyOrDownload = (type: 'Markdown' | 'HTML' | 'CSV') => {
+		if (type === 'Markdown') {
+			copyValue = token.raw;
+			if (modeState === 'copy') {
+				copy.copy();
+			} else {
+				save('table.md', copyValue, 'text/markdown');
+			}
+		} else if (type === 'HTML') {
+			const table = document.querySelector(`[data-streamdown-table=${id}]`);
+
+			if (table) {
+				let html = (table.cloneNode(true) as HTMLElement).outerHTML;
+				// remove comments
+				html = html.replace(/<!--[\s\S]*?-->/g, '');
+				copyValue = html;
+				// Remove class and style attributes
+				html = html.replace(/class="[^"]*"/g, '');
+				html = html.replace(/style="[^"]*"/g, '');
+				// remove space between the tag name and the closing chrevron like <table  > -> <table> for every tagnmae
+				html = html.replace(/<([^>]+)>\s+</g, '<$1><');
+				// Remove spaces before closing bracket >
+				html = html.replace(/\s+>/g, '>');
+				// Remove spaces after opening bracket <
+				html = html.replace(/<\s+/g, '<');
+				// Collapse multiple spaces within tags to single space
+				html = html.replace(/<([^>]+)>/g, (match) => match.replace(/\s+/g, ' '));
+
+				copyValue = html;
+
+				if (modeState === 'copy') {
+					copy.copy();
+				} else {
+					save('table.html', copyValue, 'text/html');
+				}
+			}
+		} else if (type === 'CSV') {
+			const table = document.querySelector(`[data-streamdown-table=${id}]`);
+
+			if (table) {
+				const rows = table.querySelectorAll('tr');
+				const rowSpanFills: Array<{ rowIndex: number; colIndex: number; colSpan: number }> = [];
+
+				const matrix = Array.from(rows).reduce((acc, row, rowIndex) => {
+					const cells = row.querySelectorAll('td, th');
+					const rowData: string[] = [];
+					let actualCol = 0; // Track actual column position in the output matrix
+
+					Array.from(cells).forEach((cell) => {
+						const colSpan = parseInt(cell.getAttribute('colspan') || '1');
+						const rowSpan = parseInt(cell.getAttribute('rowspan') || '1');
+
+						// Add the cell content
+						// Add the cell content, quoting if it contains commas, quotes, or newlines
+						const content = cell.textContent || '';
+						const needsQuoting = /[,"\n]/.test(content);
+						const escapedContent = content.replace(/"/g, '""');
+						rowData.push(needsQuoting ? `"${escapedContent}"` : content);
+
+						// Add empty cells for colspan
+						for (let i = 0; i < colSpan - 1; i++) {
+							rowData.push('');
+						}
+
+						// Track rowspan fills needed in future rows
+						if (rowSpan > 1) {
+							for (let r = 1; r < rowSpan; r++) {
+								rowSpanFills.push({
+									rowIndex: rowIndex + r,
+									colIndex: actualCol,
+									colSpan: colSpan
+								});
+							}
+						}
+
+						actualCol += colSpan;
+					});
+
+					acc.push(rowData);
+					return acc;
+				}, [] as string[][]);
+
+				// Process rowspan fills - insert empty cells at correct positions
+				rowSpanFills.forEach(({ rowIndex, colIndex, colSpan }) => {
+					if (matrix[rowIndex]) {
+						matrix[rowIndex].splice(colIndex, 0, ...Array(colSpan).fill(''));
+					}
+				});
+
+				const csv = matrix.map((row) => row.join(',')).join('\n');
+				copyValue = csv;
+				if (modeState === 'copy') {
+					copy.copy();
+				} else {
+					save('table.csv', copyValue, 'text/csv');
+				}
+			}
+		}
+		popover.isOpen = false;
+	};
+</script>
+
+{#if popover.isOpen}
+	<dialog
+		id={'table-download-popover'}
+		aria-modal="false"
+		transition:scale|global={{ start: 0.95, duration: 100 }}
+		{@attach clickOutside.attachment}
+		{@attach popover.popoverAttachment}
+		open
+		style:width="fit-content !important"
+		style:min-width="fit-content !important"
+		class={streamdown.theme.components.popover}
+	>
+		{#each ['Markdown', 'HTML', 'CSV'] as type}
+			<button
+				style="width: 100%; text-align: left; justify-content: flex-start; padding: 1rem 1rem; margin: 0.2rem 0;"
+				onclick={() => copyOrDownload(type as 'Markdown' | 'HTML' | 'CSV')}
+				class={streamdown.theme.components.button}
+			>
+				{type}
+			</button>
+		{/each}
+	</dialog>
+{/if}
+
+<div
+	data-streamdown-table-download
+	class=" right-0 ml-auto flex items-center justify-end gap-2 p-1"
+>
+	{#each ['download', 'copy'] as mode (mode)}
+		<button
+			class={streamdown.theme.components.button}
+			onclick={async (e: MouseEvent) => {
+				if (modeState === mode && popover.isOpen) {
+					popover.isOpen = false;
+					return;
+				}
+				if (popover.isOpen && modeState !== mode) {
+					popover.isOpen = false;
+					const wait = new Promise((resolve) => {
+						setTimeout(resolve, 80);
+					});
+					await wait;
+				}
+				popover.reference = e.target as HTMLButtonElement;
+				popover.isOpen = true;
+				modeState = mode as 'download' | 'copy';
+			}}
+			{@attach clickOutside.attachment}
+			title={mode === 'download' ? 'Download table' : 'Copy table'}
+		>
+			{#if mode === 'download'}
+				{@render (streamdown.icons?.download || downloadIcon)()}
+			{:else if copy.isCopied}
+				{@render (streamdown.icons?.check || checkIcon)()}
+			{:else}
+				{@render (streamdown.icons?.copy || copyIcon)()}
+			{/if}
+		</button>
+	{/each}
+</div>
+
+<style>
+	:global([data-streamdown-table-download] + div) {
+		margin-top: 0px;
+	}
+</style>

package/dist/Elements/TableDownload.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TableToken } from '../marked/marked-table.js';
+type $$ComponentProps = {
+    token: TableToken;
+    id: string;
+};
+declare const TableDownload: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableDownload = ReturnType<typeof TableDownload>;
+export default TableDownload;

package/dist/Elements/icons.d.ts

@@ -0,0 +1,9 @@
+export declare const copyIcon: import("svelte").Snippet<[]>;
+export declare const downloadIcon: import("svelte").Snippet<[]>;
+export declare const checkIcon: import("svelte").Snippet<[]>;
+export declare const zoomInIcon: import("svelte").Snippet<[]>;
+export declare const zoomOutIcon: import("svelte").Snippet<[]>;
+export declare const fitViewIcon: import("svelte").Snippet<[]>;
+export declare const fullscreenIcon: import("svelte").Snippet<[]>;
+export declare const chevronRight: import("svelte").Snippet<[]>;
+export declare const chevronLeft: import("svelte").Snippet<[]>;