<script>
    import LineEditor from '../../Components/LineEditor.svelte';
    import { fn } from '../../vcard.js';
    import { t } from '../../translations.svelte';

    let { code, patch = (from, to) => true } = $props();

    let value = $derived(fn(code));

    function onSet(newVal){
        const newCode = code.replace(value,newVal);
        return patch(code,newCode);
    }
</script>

{#if value}
<LineEditor type="span" editable={true} {value} {onSet} title={t('formatted_name')}/>
{/if}