working on address card editor

frontend/src/routes/contact/ExtraField.svelte

@@ -1,14 +1,25 @@
 <script>
+    import LineEditor from '../../Components/LineEditor.svelte';
+    import MultiLineEditor from '../../Components/MultilineEditor.svelte';
     import { extra } from '../../vcard.js';
+    import { t } from '../../translations.svelte';
 
-    let { code } = $props();
+    let { code, patch = (from, to) => true } = $props();
 
     let field = $derived(extra(code));
 
+    function onSet(newVal){
+        const newCode = code.replace(field.value,newVal.replaceAll('\n','\\n'));
+        return patch(code,newCode);
+    }
 </script>
 
 {#if field}
-<span class={field.name}>
-    {field.value}
-</span>
+<div class={field.name}>
+    {#if field.value.includes('\\n')}
+    <MultiLineEditor type="div" editable={true} value={field.value.replaceAll('\\n','\n')} {onSet} title={t(field.name)+' – '+t('long_click_to_edit')} />
+    {:else}
+    <LineEditor type="div" editable={true} value={field.value} {onSet} title={t(field.name)+' – '+t('long_click_to_edit')} />
+    {/if}
+</div>
 {/if}