implemented editing of document in GUI + respective handlers in backend

frontend/src/Components/LineEditor.svelte

@@ -1,13 +1,14 @@
 <script>
     import { activeField } from './field_sync.svelte.js';
 
-    let { editable = false, value = $bindable(null) } = $props();
+    let { editable = false, value = $bindable(null), onSet = (newVal) => {return true;} } = $props();
     let editing = $state(false);
 
     let editValue = value;
 
-    function applyEdit(){
-        value = editValue;
+    async function applyEdit(){
+        let success = await onSet(editValue);
+        if (success) value = editValue;
         editing=false;
     }
 
@@ -30,11 +31,15 @@
 </script>
 
 <style>
+    input{
+        min-width: 40px;
+        min-height: 20px;
+    }
     div{
         min-width: 40px;
         min-height: 20px;
     }
-    div:hover{
+    .editable:hover{
         border: 1px dotted;
     }
 </style>
@@ -42,5 +47,5 @@
 {#if editable && editing}
 <input bind:value={editValue} onkeyup={typed} autofocus />
 {:else}
-<span onclick={startEdit}>{value}</span>
+<div onclick={startEdit} class={{editable}}>{value}</div>
 {/if}

frontend/src/Components/MarkdownEditor.svelte

@@ -1,16 +1,20 @@
 <script>
     import { activeField } from './field_sync.svelte.js';
 
-    let { editable = false, value = $bindable(null) } = $props();
+    let { editable = false, value = $bindable(null), onSet = (newVal) => {} } = $props();
     let editing = $state(false);
 
     let editValue = $state({source:value.source,rendered:value.rendered});
 
     let timer = null;
-    function applyEdit(){
-        value.source = editValue.source;
-        value.rendered = editValue.rendered;
-        editing = false;
+
+    async function applyEdit(){
+        let success = await onSet(editValue.source);
+        if (success) {
+            value.source = editValue.source;
+            value.rendered = editValue.rendered;
+            editing = false;
+        } else resetEdit();
     }
 
     function resetEdit(){
@@ -54,12 +58,12 @@
         min-width: 40px;
         min-height: 20px;
     }
-    div:hover{
+    div.editable:hover{
         border: 1px dotted;
     }
 </style>
 
-{#if editable && editing}
+{#if editing}
 <textarea bind:value={editValue.source} onkeyup={typed} autofocus></textarea>
 {/if}
-<div onclick={startEdit}>{@html editValue.rendered}</div>
+<div onclick={startEdit} class={{editable}}>{@html editValue.rendered}</div>

frontend/src/Components/MultilineEditor.svelte

@@ -1,14 +1,16 @@
 <script>
     import { activeField } from './field_sync.svelte.js';
 
-    let { editable = false, value = $bindable(null) } = $props();
+    let { editable = false, value = $bindable(null), onSet = (newVal) => {} } = $props();
     let editing = $state(false);
 
     let editValue = $state(value);
 
     let timer = null;
-    function applyEdit(){
-        value = editValue;
+
+    async function applyEdit(){
+        let success = await onSet(editValue);
+        if (success) value = editValue;
         editing = false;
     }
 
@@ -39,7 +41,7 @@
         min-width: 40px;
         min-height: 20px;
     }
-    div:hover{
+    div.editable:hover{
         border: 1px dotted;
     }
 </style>
@@ -47,7 +49,7 @@
 {#if editable && editing}
 <textarea bind:value={editValue} onkeyup={typed} autofocus></textarea>
 {:else}
-<div onclick={startEdit}>
+<div onclick={startEdit} class={{editable}}>
     {#each value.split("\n") as line}
     {line}<br/>
     {/each}

frontend/src/Components/PriceEditor.svelte

@@ -1,13 +1,14 @@
 <script>
     import { activeField } from './field_sync.svelte.js';
 
-    let { editable = false, currency, value = $bindable(null) } = $props();
+    let { editable = false, currency, value = $bindable(null), onSet = (newVal) => {} } = $props();
     let editing = $state(false);
 
     let editValue = value/100;
 
-    function applyEdit(){
-        value = editValue * 100;
+    async function applyEdit(){
+        let success = await onSet(editValue * 100);
+        if (success) value = editValue * 100;
         editing = false;
     }
 
@@ -31,11 +32,18 @@
 
 <style>
     input{width:100px}
+    div{
+        min-width: 40px;
+        min-height: 20px;
+    }
+    .editable:hover{
+        border: 1px dotted;
+    }
 </style>
 
 {#if editable && editing}
 <input type="number" step=".01" bind:value={editValue} onkeyup={typed} />&nbsp;{currency}
 {:else}
-<div onclick={startEdit}>{Number(value/100).toFixed(2)}&nbsp;{currency}</div>
+<div onclick={startEdit} class={{editable}}>{Number(value/100).toFixed(2)}&nbsp;{currency}</div>
 {/if}