<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, 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}
<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('right_click_to_edit')} />
    {:else}
    <LineEditor type="div" editable={true} value={field.value} {onSet} title={t(field.name)+' – '+t('click_to_edit')} />
    {/if}
</div>
{/if}