From 204766ec0aa2b7b8a90371132a7cbf3d5eaef9f6 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 24 Jun 2019 13:00:16 -0400
Subject: [PATCH] add some docs, rename to textContent and innerHTML

---
 site/content/docs/02-template-syntax.md       |  8 +++++++
 src/compiler/compile/nodes/Element.ts         |  6 ++---
 .../render-dom/wrappers/Element/Binding.ts    | 22 +++----------------
 .../render-dom/wrappers/Element/index.ts      |  6 ++---
 .../compile/render-ssr/handlers/Element.ts    |  4 ++--
 .../main.svelte                               |  2 +-
 .../binding-contenteditable-html/main.svelte  |  2 +-
 .../main.svelte                               |  2 +-
 .../binding-contenteditable-text/main.svelte  |  2 +-
 .../contenteditable-dynamic/input.svelte      |  2 +-
 .../contenteditable-missing/errors.json       |  2 +-
 .../contenteditable-missing/input.svelte      |  2 +-
 12 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index 682012d88b..ceaa19a398 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -510,6 +510,14 @@ When the value of an `<option>` matches its text content, the attribute can be o
 </select>
 ```
 
+---
+
+Elements with the `contenteditable` attribute support `innerHTML` and `textContent` bindings.
+
+```html
+<div contenteditable="true" bind:innerHTML={html}></div>
+```
+
 ##### Media element bindings
 
 ---
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 3e883200a7..3fcc453926 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -608,8 +608,8 @@ export default class Element extends Node {
 					});
 				}
 			} else if (
-				name === 'text' ||
-				name === 'html'
+				name === 'textContent' ||
+				name === 'innerHTML'
 			) {
 				const contenteditable = this.attributes.find(
 					(attribute: Attribute) => attribute.name === 'contenteditable'
@@ -618,7 +618,7 @@ export default class Element extends Node {
 				if (!contenteditable) {
 					component.error(binding, {
 						code: `missing-contenteditable-attribute`,
-						message: `'contenteditable' attribute is required for text and html two-way bindings`
+						message: `'contenteditable' attribute is required for texContent and innerHTML two-way bindings`
 					});
 				} else if (contenteditable && !contenteditable.is_static) {
 					component.error(contenteditable, {
diff --git a/src/compiler/compile/render-dom/wrappers/Element/Binding.ts b/src/compiler/compile/render-dom/wrappers/Element/Binding.ts
index 7de661e3d1..a96b44f7f6 100644
--- a/src/compiler/compile/render-dom/wrappers/Element/Binding.ts
+++ b/src/compiler/compile/render-dom/wrappers/Element/Binding.ts
@@ -133,11 +133,11 @@ export default class BindingWrapper {
 				break;
 			}
 
-			case 'text':
+			case 'textContent':
 				update_conditions.push(`${this.snippet} !== ${parent.var}.textContent`);
 				break;
 
-			case 'html':
+			case 'innerHTML':
 				update_conditions.push(`${this.snippet} !== ${parent.var}.innerHTML`);
 				break;
 
@@ -170,7 +170,7 @@ export default class BindingWrapper {
 			);
 		}
 
-		if (this.node.name === 'html' || this.node.name === 'text') {
+		if (this.node.name === 'innerHTML' || this.node.name === 'textContent') {
 			block.builders.mount.add_block(`if (${this.snippet} !== void 0) ${update_dom}`);
 		} else if (!/(currentTime|paused)/.test(this.node.name)) {
 			block.builders.mount.add_block(update_dom);
@@ -208,14 +208,6 @@ function get_dom_updater(
 		return `${element.var}.checked = ${condition};`;
 	}
 
-	if (binding.node.name === 'text') {
-		return `${element.var}.textContent = ${binding.snippet};`;
-	}
-
-	if (binding.node.name === 'html') {
-		return `${element.var}.innerHTML = ${binding.snippet};`;
-	}
-
 	return `${element.var}.${binding.node.name} = ${binding.snippet};`;
 }
 
@@ -328,14 +320,6 @@ function get_value_from_dom(
 		return `@time_ranges_to_array(this.${name})`;
 	}
 
-	if (name === 'text') {
-		return `this.textContent`;
-	}
-
-	if (name === 'html') {
-		return `this.innerHTML`;
-	}
-
 	// everything else
 	return `this.${name}`;
 }
diff --git a/src/compiler/compile/render-dom/wrappers/Element/index.ts b/src/compiler/compile/render-dom/wrappers/Element/index.ts
index 2062ba1f14..9db034092b 100644
--- a/src/compiler/compile/render-dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render-dom/wrappers/Element/index.ts
@@ -30,7 +30,7 @@ const events = [
 	{
 		event_names: ['input'],
 		filter: (node: Element, name: string) =>
-			(name === 'text' || name === 'html') &&
+			(name === 'textContent' || name === 'innerHTML') &&
 			node.attributes.some(attribute => attribute.name === 'contenteditable')
 	},
 	{
@@ -515,8 +515,8 @@ export default class ElementWrapper extends Wrapper {
 				group.bindings.find(binding => {
 					return (
 						binding.node.name === 'indeterminate' ||
-						binding.node.name === 'text' ||
-						binding.node.name === 'html' ||
+						binding.node.name === 'textContent' ||
+						binding.node.name === 'innerHTML' ||
 						binding.is_readonly_media_attribute()
 					);
 				})
diff --git a/src/compiler/compile/render-ssr/handlers/Element.ts b/src/compiler/compile/render-ssr/handlers/Element.ts
index 0c2181a605..27cf858f1f 100644
--- a/src/compiler/compile/render-ssr/handlers/Element.ts
+++ b/src/compiler/compile/render-ssr/handlers/Element.ts
@@ -154,9 +154,9 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 
 		if (name === 'group') {
 			// TODO server-render group bindings
-		} else if (contenteditable && (name === 'text' || name === 'html')) {
+		} else if (contenteditable && (name === 'textContent' || name === 'innerHTML')) {
 			node_contents = snip(expression);
-			value = name === 'text' ? '@escape($$value)' : '$$value';
+			value = name === 'textContent' ? '@escape($$value)' : '$$value';
 		} else if (binding.name === 'value' && node.name === 'textarea') {
 			const snippet = snip(expression);
 			node_contents = '${(' + snippet + ') || ""}';
diff --git a/test/runtime/samples/binding-contenteditable-html-initial/main.svelte b/test/runtime/samples/binding-contenteditable-html-initial/main.svelte
index 1c05a0950d..119b41b52d 100644
--- a/test/runtime/samples/binding-contenteditable-html-initial/main.svelte
+++ b/test/runtime/samples/binding-contenteditable-html-initial/main.svelte
@@ -2,7 +2,7 @@
 	export let name;
 </script>
 
-<editor contenteditable="true" bind:html={name}>
+<editor contenteditable="true" bind:innerHTML={name}>
 	<b>world</b>
 </editor>
 <p>hello {@html name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-contenteditable-html/main.svelte b/test/runtime/samples/binding-contenteditable-html/main.svelte
index 09195ed558..f576cf1868 100644
--- a/test/runtime/samples/binding-contenteditable-html/main.svelte
+++ b/test/runtime/samples/binding-contenteditable-html/main.svelte
@@ -2,5 +2,5 @@
 	export let name;
 </script>
 
-<editor contenteditable="true" bind:html={name}></editor>
+<editor contenteditable="true" bind:innerHTML={name}></editor>
 <p>hello {@html name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-contenteditable-text-initial/main.svelte b/test/runtime/samples/binding-contenteditable-text-initial/main.svelte
index 633d268f43..b0938d4d0b 100644
--- a/test/runtime/samples/binding-contenteditable-text-initial/main.svelte
+++ b/test/runtime/samples/binding-contenteditable-text-initial/main.svelte
@@ -2,7 +2,7 @@
 	export let name;
 </script>
 
-<editor contenteditable="true" bind:text={name}>
+<editor contenteditable="true" bind:textContent={name}>
 	<b>world</b>
 </editor>
 <p>hello {name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-contenteditable-text/main.svelte b/test/runtime/samples/binding-contenteditable-text/main.svelte
index c47f5ee477..70f65e8824 100644
--- a/test/runtime/samples/binding-contenteditable-text/main.svelte
+++ b/test/runtime/samples/binding-contenteditable-text/main.svelte
@@ -2,5 +2,5 @@
 	export let name;
 </script>
 
-<editor contenteditable="true" bind:text={name}></editor>
+<editor contenteditable="true" bind:textContent={name}></editor>
 <p>hello {name}</p>
\ No newline at end of file
diff --git a/test/validator/samples/contenteditable-dynamic/input.svelte b/test/validator/samples/contenteditable-dynamic/input.svelte
index 97d2c9228c..8dfa91a354 100644
--- a/test/validator/samples/contenteditable-dynamic/input.svelte
+++ b/test/validator/samples/contenteditable-dynamic/input.svelte
@@ -3,4 +3,4 @@
 
     let toggle = false;
 </script>
-<editor contenteditable={toggle} bind:html={name}></editor>
+<editor contenteditable={toggle} bind:innerHTML={name}></editor>
diff --git a/test/validator/samples/contenteditable-missing/errors.json b/test/validator/samples/contenteditable-missing/errors.json
index 9cadb20629..a6452bdac6 100644
--- a/test/validator/samples/contenteditable-missing/errors.json
+++ b/test/validator/samples/contenteditable-missing/errors.json
@@ -1,6 +1,6 @@
 [{
 	"code": "missing-contenteditable-attribute",
-	"message": "'contenteditable' attribute is required for text and html two-way bindings",
+	"message": "'contenteditable' attribute is required for textContent and innerHTML two-way bindings",
 	"start": {
 		"line": 4,
 		"column": 8,
diff --git a/test/validator/samples/contenteditable-missing/input.svelte b/test/validator/samples/contenteditable-missing/input.svelte
index 47f125894a..dae1088994 100644
--- a/test/validator/samples/contenteditable-missing/input.svelte
+++ b/test/validator/samples/contenteditable-missing/input.svelte
@@ -1,4 +1,4 @@
 <script>
     export let name;
 </script>
-<editor bind:text={name}></editor>
+<editor bind:textContent={name}></editor>