Description
I don't know whether this is a bug or a feature request, but I discovered today that you can't use each reliably within a contenteditable element.
I fathomed a technique to add elements using 3 setTimeouts and momentarily emptying the list (list = []), then doing innerHTML = "", and finally setting the list again (list = someNewList). Alas, for deleting an item there is no such workaround.
To explain this, suppose you have a <div> something like the following:
<div contenteditable="true">
{#each items as item}
<p>{item}</p>
{/each}
</div>-
When you press return in that div, it creates a
<p>that svelte doesn't know about. I'm solving this with an action that dispatches an event when the contenteditable blurs. -
When you delete a line, it removes a
<p>and if that was an original item i.e. inserted by svelte's{#each}then you get acannot read property 'removeChild' of nullwhen you re-set the list.
It strikes me that making svelte more aware of contenteditable is not the appropriate route to resolve this. So that rules out feature request.
Instead I'm left thinking, is this a bug? Should svelte disregard errors when removing elements that the user already removed - irrespective how they removed them?