first working transition from source to table. next: writing back to source

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/Components/MarkdownDisplay.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { onMount } from 'svelte';
+	let { classes='markdown', markdown, onclick = null, oncontextmenu = null, title='', wrapper = 'div' } = $props();
+	let jspreadsheet = null;
+
+	async function transform(){
+		if (!markdown.rendered) return;
+		console.log('transform');
+		let sheets = document.getElementsByClassName('spreadsheet');
+		for (let i = 0; i < sheets.length; i++) {
+			if (!jspreadsheet) {
+				let module = await import('jspreadsheet-ce'); // path or package name
+				await import('jspreadsheet-ce/dist/jspreadsheet.css');
+				jspreadsheet = module.default ?? module;
+			}
+			if (!jspreadsheet) break; // break loop if library fails to load
+
+			let sheet = sheets[i];
+			let raw = sheet.innerHTML.trim();
+
+            // Use parseCSV from the helpers
+            const parsed = jspreadsheet.helpers.parseCSV(raw, '|');
+
+            jspreadsheet(document.getElementById(sheet.id), {worksheets:[{data:parsed}]});
+			//sheet.innerHTML = 'spreadsheet transformation not implemented, yet!';
+		}
+	}
+
+	// TODO: use target from urls.svelte to replace internal URLs
+	onMount(transform)
+</script>
+
+{#if markdown.rendered}
+<svelte:element this={wrapper} class={classes} {onclick} {oncontextmenu} {title}>
+	{@html markdown.rendered}
+</svelte:element>
+{/if}