Merge branch 'module/spreadsheet' into dev

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "jspreadsheet-ce": "^5.0.4",
         "svelte-tiny-router": "^1.0.5"
       },
       "devDependencies": {
@@ -488,6 +489,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@jspreadsheet/formula": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@jspreadsheet/formula/-/formula-2.0.2.tgz",
+      "integrity": "sha512-PDQYf9REQA53I7tVYkvkeyQxrd5jcjUeHgItYnRpjN2QiIQwawSqBDtGGEVQTSboTG+JwgGCuhvOpj7FxeKwew=="
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.44.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.44.1.tgz",
@@ -951,6 +957,20 @@
         "@types/estree": "^1.0.6"
       }
     },
+    "node_modules/jspreadsheet-ce": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/jspreadsheet-ce/-/jspreadsheet-ce-5.0.4.tgz",
+      "integrity": "sha512-ra1JI1n+tEGgRMzTzNkPZjG0HZz8W6bFGAiTiHl+eYarXdRmS5qDc/ua3l2ev7oZ6Og9kjfrXYHVLUWiVc308w==",
+      "dependencies": {
+        "@jspreadsheet/formula": "^2.0.2",
+        "jsuites": "^5.12.0"
+      }
+    },
+    "node_modules/jsuites": {
+      "version": "5.13.5",
+      "resolved": "https://registry.npmjs.org/jsuites/-/jsuites-5.13.5.tgz",
+      "integrity": "sha512-cvkcpy/v5I3+IAcNPE4UP38PFCEfUQw9JI5NN61dlcXLwkD+2UTIOsRPvgMLeqI1eDWHL4AHfrbcE/+TFciUsw=="
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "dev": true,

frontend/package.json

@@ -14,6 +14,7 @@
     "vite": "^6.3.5"
   },
   "dependencies": {
+    "jspreadsheet-ce": "^5.0.4",
     "svelte-tiny-router": "^1.0.5"
   }
 }

frontend/src/App.svelte

@@ -33,6 +33,7 @@
     import ResetPw     from "./routes/user/ResetPw.svelte";
     import Search      from "./routes/search/Search.svelte";
     import SendDoc     from "./routes/document/Send.svelte";
+    import Spreadsheet from "./routes/calc.svelte";
     import Stock       from './routes/stock/Index.svelte';
     import TagList     from "./routes/tags/Index.svelte";
     import TagUses     from "./routes/tags/TagUses.svelte";
@@ -89,6 +90,7 @@
         <Route path="/"                            component={User} />
         <Route path="/bookmark"                    component={Bookmarks} />
         <Route path="/bookmark/:id/view"           component={Bookmark} />
+        <Route path="/calc"                        component={Spreadsheet} />
         <Route path="/company"                     component={Companies} />
         <Route path="/contact"                     component={ContactList} />
         <Route path="/document"                    component={DocList} />

frontend/src/Components/MarkdownDisplay.svelte

@@ -0,0 +1,78 @@
+<script>
+	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;
+	const number = /^[0-9.-]+$/
+
+	function update(sheet, index){
+		const data        = sheet.getData(false,false,'|',false);
+		markdown.source = replaceNthSpreadsheet(markdown.source,index,data);
+	}
+
+	function replaceNthSpreadsheet(text, n, newContent) {
+		const blocks = text.match(regex) || [];
+		if (blocks.length < n+1){
+			console.warn(`cannot replace block ${n}: only ${blocks.length} blocks found!`);
+			return text;
+		}
+		let count = 0;
+		return text.replace(regex, (match) => count++ === n ? `@startsheet\n${newContent}\n@endsheet` : match);
+	}
+
+	function formatCell(cell, value, x, y, instance, options){
+		value = value.trim();
+		if (value.startsWith('=') || number.test(value)) cell.style.textAlign = 'right';
+	}
+
+	async function transform(){
+		if (!markdown.rendered) return;
+		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, '|');
+            let columns = {};
+
+            for (let row of parsed){
+                for (let col in row){
+                    let data = ""+row[col];
+                    if (data.startsWith('=')) continue;
+                    let len  = data.length;
+                    columns[col] = Math.max(columns[col]??0,len);
+                }
+            }
+            columns = Object.values(columns).map((len) => {return {
+                align: 'left',
+                render: formatCell,
+                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);
+		}
+	}
+
+	onMount(() => { setTimeout(transform,200)});
+
+</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" bind: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

@@ -0,0 +1,59 @@
+<script>
+	import { onMount } from 'svelte';
+
+	var spreadsheet = null;
+
+	const config = {
+	    worksheets: [{
+	            data: [
+	                ["1","Sum of A:","=SUM(A1:A99)"],
+	                ["2"],
+	                ["3"],
+	                ["4"]
+	            ],
+	            columns: [
+	                { type: 'autonumber', title: 'amount' },
+	                { type: 'text', width: '350px', title: 'description', align: 'right' },
+	                { type: 'text', width: '250px', title: 'value' },
+	            ],
+	            // Name of the worksheet
+	            worksheetName: 'Albums'
+	    }],
+	    onchange: update
+	};
+
+
+	function update(instance, cell, x, y, value) {
+		console.log({instance,cell,x,y,value});
+		console.log(spreadsheet[0].getData());
+	}
+
+	let loading = true;
+	let module  = null;
+
+	async function load(){
+	    try {
+			const module = await import('jspreadsheet-ce'); // path or package name
+		    await import('jspreadsheet-ce/dist/jspreadsheet.css');
+
+			let jspreadsheet = module.default ?? module;
+			let element = document.getElementById('spreadsheet');
+			console.log(element);
+			spreadsheet = jspreadsheet(element, config);
+	    } catch (e) {
+			console.log(e);
+	    } finally {
+			loading = false;
+	    }
+	}
+
+
+	onMount(load);
+</script>
+
+{#if loading}
+Loading…
+{:else}
+
+{/if}
+<div id="spreadsheet">Spreadsheet loading…</div>