working on document editor

frontend/src/routes/document/Position.svelte

@@ -2,25 +2,36 @@
     import { useTinyRouter } from 'svelte-tiny-router';
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
-
-    var { currency, pos = $bindable(null) } = $props();
+    import LineEditor from '../../Components/LineEditor.svelte';
+    import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
+    import PriceEditor from '../../Components/PriceEditor.svelte';
+    var { currency, editable, pos = $bindable(null) } = $props();
 
     console.log(pos);
 </script>
 {#if pos}
     <tr>
         <td>{pos.number}</td>
-        <td>{pos.item}</td>
-        <td class="title">{pos.title}</td>
-        <td>{pos.amount}</td>
-        <td>{pos.unit}</td>
-        <td>{pos.unit_price/100}&nbsp;{currency}</td>
-        <td>{pos.net_price/100}&nbsp;{currency}</td>
+        <td>
+            <LineEditor bind:value={pos.item} editable={editable} />
+        </td>
+        <td class="title">
+            <LineEditor bind:value={pos.title} editable={editable} />
+        </td>
+        <td>
+            <LineEditor bind:value={pos.amount} editable={editable} />
+        </td>
+        <td>
+            <LineEditor bind:value={pos.unit} editable={editable} />
+        </td>
+        <td>
+            <PriceEditor bind:value={pos.unit_price} editable={editable} currency={currency} /></td>
+        <td>{Number(pos.amount * pos.unit_price/100).toFixed(2)}&nbsp;{currency}</td>
         <td>{pos.tax}&nbsp;%</td>
     </tr>
     <tr>
         <td class="error">⏫<br/>⏬</td>
-        <td colspan="6">{@html pos.description}</td>
+        <td colspan="6"><MarkdownEditor bind:value={pos.description} editable={editable} /></td>
         <td></td>
     </tr>
 {/if}