first working version. need to improve styling (right align for number cells)

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

frontend/src/Components/MarkdownDisplay.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { onMount } from 'svelte';
-	let { classes='markdown', markdown, onclick = null, oncontextmenu = null, title='', wrapper = 'div' } = $props();
+	import { onMount, onDestroy } from 'svelte';
+	let { classes='markdown', markdown=$bindable({source:'',rendered:''}), onclick = null, oncontextmenu = null, title='', wrapper = 'div' } = $props();
 	let jspreadsheet = null;
 	const regex = /@startsheet[\s\S]*?@endsheet/g;
 
@@ -15,11 +15,10 @@
 			console.warn(`cannot replace block ${n}: only ${blocks.length} blocks found!`);
 			return text;
 		}
-
-		return text.replace(regex, (match, index) => index === n ? `@startsheet\n${newContent}\n@endsheet` : match);
+		let count = 0;
+		return text.replace(regex, (match) => count++ === n ? `@startsheet\n${newContent}\n@endsheet` : match);
 	}
 
-
 	async function transform(){
 		if (!markdown.rendered) return;
 		let sheets = document.getElementsByClassName('spreadsheet');
@@ -36,16 +35,31 @@
 
             // Use parseCSV from the helpers
             const parsed = jspreadsheet.helpers.parseCSV(raw, '|');
+            let columns = {};
 
-            jspreadsheet(document.getElementById(sheet.id), {
-                worksheets : [{data:parsed}],
+            for (let row of parsed){
+                for (let col in row){
+                    let data = ""+row[col];
+                    let len  = data.length;
+                    columns[col] = Math.max(columns[col]??0,len);
+                }
+            }
+            columns = Object.values(columns).map((len) => {return {
+                align: 'left',
+                width:`${len}0px`
+            }});
+			let config = {
+                worksheets : [{
+                    data:parsed,
+                    columns
+                }],
                 onchange   : (instance, cell, x, y, value) => update(instance, i)
-			});
+			};
+            let wb = jspreadsheet(document.getElementById(sheet.id), config);
 		}
 	}
 
-	// TODO: use target from urls.svelte to replace internal URLs
-	onMount(transform);
+	onMount(() => { setTimeout(transform,200)});
 
 </script>
 
@@ -53,4 +67,4 @@
 <svelte:element this={wrapper} class={classes} {onclick} {oncontextmenu} {title}>
 	{@html markdown.rendered}
 </svelte:element>
-{/if}
+{/if}

frontend/src/Components/MarkdownEditor.svelte

@@ -138,7 +138,7 @@
     <span id="restore_markdown" onclick={restore} class="hint">{t('unsaved_content')}</span>
     {/if}
     <textarea bind:value={editValue.source} onkeyup={typed} autofocus={!simple}></textarea>
-    <Display classes="preview" markdown={editValue} />
+    <Display classes="preview" bind:markdown={editValue} />
     {#if !simple}
     <div class="buttons">
         <button class="cancel" onclick={e => editing = false}>{t('cancel')}</button>