improved spreadsheet editing

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

frontend/src/Components/MarkdownEditor.svelte

@@ -20,6 +20,7 @@
     let start     = 0;
     let stored_source = $state(store_id ? localStorage.getItem(store_id) : null);
     let timer     = null;
+    let sheet     = null;
 
     async function applyEdit(){
         let success = await onSet(editValue.source);
@@ -80,10 +81,13 @@
 
 
     function oncontextmenu(evt){
-         evt.preventDefault();
-         evt.stopPropagation();
-         startEdit();
-         return false;
+        if (evt.target) {
+            evt.preventDefault();
+            evt.stopPropagation();
+        }
+        sheet = evt.sheet ? evt : null; // store position of activated cell to focus after editing starts
+        startEdit();
+        return false;
     }
 
     function onmousedown(evt){
@@ -96,6 +100,10 @@
         measured(evt, evt.timeStamp - start);
     }
 
+    function onresize(evt){
+        console.log('onresize()',evt);
+    }
+
     function ontouchstart(evt){
         evt.preventDefault();
         start = evt.timeStamp;
@@ -137,8 +145,8 @@
     {#if stored_source}
     <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" bind:markdown={editValue} />
+    <textarea bind:value={editValue.source} onkeyup={typed} onresize={onresize} data="test" autofocus={!simple}></textarea>
+    <Display classes="preview" bind:markdown={editValue} sheet={sheet} />
     {#if !simple}
     <div class="buttons">
         <button class="cancel" onclick={e => editing = false}>{t('cancel')}</button>
@@ -146,6 +154,6 @@
     </div>
     {/if}
 {:else}
-    <Display classes={{editable}} markdown={value} {onclick} {oncontextmenu}  title={t('right_click_to_edit')} wrapper={type} />
+    <Display classes={{editable}} markdown={value} {onclick} {oncontextmenu} title={t('right_click_to_edit')} wrapper={type} />
 {/if}
 </div>