In svelte, I know that one can use editablecontent with bind:innerHTML to bind the content of a div with a variable. But in my case I want to modify the variable only when the div loses the focus (on:blur). So I tried to write this, inspired by what I do on input:

<script>
    let html = 'Write some text!';
</script>

If I change this:

<div innerHTML={html} on:blur={(e) => {html = e.target.innerHTML;}} contenteditable />

This one will not be updated, but ONLY after I click outside of the field (so bind:innerHTML is not what I want):

<div innerHTML={html} on:blur={(e) => {html = e.target.innerHTML;}} contenteditable />

{html}

<style>
    [contenteditable] {
        padding: 0.5em;
        border: 1px solid #eee;
        border-radius: 4px;
    }
</style>

but this fail: the variable is modified on blur, but if the variable is changed from another field, it does not update its value.

Any idea what I’m doing wrong here?