Add bind:text and bind:html support for contenteditable elements

[leporo]

Fixes #310

Adds a special :text and :html bindings for contenteditable elements.

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@9754f2a). Click here to learn what that means.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #2379   +/-   ##
=========================================
  Coverage          ?   91.83%           
=========================================
  Files             ?        1           
  Lines             ?       49           
  Branches          ?        0           
=========================================
  Hits              ?       45           
  Misses            ?        4           
  Partials          ?        0

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9754f2a...c1960f9. Read the comment docs.

[Rich-Harris]

This is really cool, thank you!

A couple of things I noticed testing it out locally:

• The initial state of the element isn't reflected in the binding if the binding's initial value was undefined. With things like <select> elements, we do do that: https://svelte.dev/repl?version=3.0.0-beta.28&gist=be55d4ae54197e3052d9c9038911b61e. Would it be practical to do it here?
• When editing HTML, my cursor keeps being reset to the beginning of the element, no matter where I'm typing. Not sure how easy this would be to fix. (It's happening in Chrome, I didn't test elsewhere.)

[leporo]

The initial state of the element isn't reflected in the binding

Do you mean something like this?

<script>
   let story;
   let name = 'John';
</script>

<editor contenteditable bind:html={story}>
    <h1>Name Your Story</h1>
    <p>Write your story, {name}!<p>
</editor>

It seems natural, but the implementation can be unnecessarily complex:

1. A detached element may be needed to handle a case when bound variable value is set to undefined after the component is mounted.
2. SSR should override the placeholder, but save it somehow to handle undefined assignments.

So I feel like it's safer to disallow nested blocks for contenteditable elements with :text or :html bindings and let a developer handle it via beforeUpdate.

When editing HTML, my cursor keeps being reset to the beginning of the element

I'm really sorry, I should have tested it.
I've fixed it by the cost of an extra access to textContent/innerHTML.

[ludwigschubert]

Are there any concerns left regarding this PR? If not, could I do anything to help get it merged? :-) Thanks for the new bindings!

[Rich-Harris]

This is released in 3.6.0 — the bindings got renamed to innerHTML and textContent, because they're just referencing properties of the element (and this is how existing bindings work). Thank you!