Svelte: Contenteditable support

[Rich-Harris]

Via https://github.com/sveltejs/svelte/issues/10 / https://github.com/sveltejs/svelte/pull/309. In Ractive this was done with...

<div contenteditable value='{{foo}}'></div>

...so the Svelte equivalent would be

<div contenteditable bind:value='foo'></div>

Arguably this should warn or throw if the element contains any children.

[Conduitry]

It seems like this almost works already. If you change addElementBindings.js to use the input event instead of the change event in this case, then you can use bind:innerHTML='whatever' to do the two-way binding.

Is bind:value less confusing, even if it's less technically correct? We could put in special cases for contenteditable elements to always do the getting and setting with .innerHTML for contenteditable elements instead of .value.

[xori]

Personally I think bind:innerHTML='value' makes more sense. Divs don't have value properties after all. Vue opts for :text='val' and :html='val' which also make sense.

[nomve]

I know it would be nice if it kind of worked out of the box, but this works too...

<h1 ref:title on:input="set({title: this.textContent})" contenteditable="true"></h1>

<script>
    export default {
        oncreate() {
            this.refs.title.textContent = this.get().title
        },
        data() {
            return {
                title: 'test'
            }
        }
    }
</script>

it just shows pesky warnings that h1 is empty... but even an empty space fixes that.

[leporo]

I've submitted a pull request implementing xori's suggestion for bind:text and bind:html. It basically maps :text to Element.textContent and :html to Element.innerHTML.

For non-contenteditable elements it throws a validation error.