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}