Skip to content

Commit

Permalink
add some docs, rename to textContent and innerHTML
Browse files Browse the repository at this point in the history
  • Loading branch information
Rich-Harris committed Jun 24, 2019
1 parent dddc69e commit 86c5086
Show file tree
Hide file tree
Showing 12 changed files with 26 additions and 34 deletions.
8 changes: 8 additions & 0 deletions site/content/docs/02-template-syntax.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

---
Expand Down
6 changes: 3 additions & 3 deletions src/compiler/compile/nodes/Element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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, {
Expand Down
22 changes: 3 additions & 19 deletions src/compiler/compile/render-dom/wrappers/Element/Binding.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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};`;
}

Expand Down Expand Up @@ -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}`;
}
6 changes: 3 additions & 3 deletions src/compiler/compile/render-dom/wrappers/Element/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
},
{
Expand Down Expand Up @@ -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()
);
})
Expand Down
4 changes: 2 additions & 2 deletions src/compiler/compile/render-ssr/handlers/Element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 + ') || ""}';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
let toggle = false;
</script>
<editor contenteditable={toggle} bind:html={name}></editor>
<editor contenteditable={toggle} bind:innerHTML={name}></editor>
2 changes: 1 addition & 1 deletion test/validator/samples/contenteditable-missing/errors.json
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script>
export let name;
</script>
<editor bind:text={name}></editor>
<editor bind:textContent={name}></editor>

0 comments on commit 86c5086

Please sign in to comment.