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

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

core/src/main/java/de/srsoftware/umbrella/core/Util.java

@@ -119,11 +119,17 @@ jspreadsheet(document.getElementById('spreadsheet'), {
 		if (source == null) return source;
 		try {
 			var matcher = SPREADSHEET_PATTERN.matcher(source);
+			var count = 0;
 			while (matcher.find()){
+				count++;
 				var sheetData = matcher.group(0).trim();
 				var start = matcher.start(0);
 				var end = matcher.end(0);
-				source = source.substring(0, start) + SCRIPT + source.substring(end);
+				source = source.substring(0, start)
+						+ "<div class=\"spreadsheet\" id=\"spreadsheet-"+count+"\">"
+						+ sheetData.substring(11,sheetData.length()-10)
+						+ "</div>"
+						+ source.substring(end);
 				matcher = SPREADSHEET_PATTERN.matcher(source);
 			}
 			if (plantumlJar != null && plantumlJar.exists()) {

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}

frontend/src/Components/MarkdownEditor.svelte

@@ -3,6 +3,8 @@
     import { api, target } from '../urls.svelte.js';
     import { t }           from '../translations.svelte.js';
 
+    import Display from './MarkdownDisplay.svelte';
+
     let {
         editable = true,
         onclick  = evt => {},
@@ -136,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>
-    <div class="preview">{@html target(editValue.rendered)}</div>
+    <Display classes="preview" markdown={editValue} />
     {#if !simple}
     <div class="buttons">
         <button class="cancel" onclick={e => editing = false}>{t('cancel')}</button>
@@ -144,6 +146,6 @@
     </div>
     {/if}
 {:else}
-    <svelte:element this={type} {onclick} {oncontextmenu} class={{editable}} title={t('right_click_to_edit')} >{@html target(value.rendered)}</svelte:element>
+    <Display classes={{editable}} markdown={value} {onclick} {oncontextmenu}  title={t('right_click_to_edit')} wrapper={type} />
 {/if}
 </div>

frontend/src/routes/calc.svelte

@@ -29,6 +29,7 @@
 	}
 
 	let loading = true;
+	let module  = null;
 
 	async function load(){
 	    try {