mirror of https://github.com/sveltejs/svelte
Merge pull request #2996 from sveltejs/init-contenteditable
Initialise html/text bindings from DOMpull/3094/head
commit
aa80da7ef6
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
let html = '<p>Write some text!</p>';
|
||||
</script>
|
||||
|
||||
<div contenteditable="true"></div>
|
||||
|
||||
<pre>{html}</pre>
|
||||
|
||||
<style>
|
||||
[contenteditable] {
|
||||
padding: 0.5em;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
let html = '<p>Write some text!</p>';
|
||||
</script>
|
||||
|
||||
<div
|
||||
contenteditable="true"
|
||||
bind:innerHTML={html}
|
||||
></div>
|
||||
|
||||
<pre>{html}</pre>
|
||||
|
||||
<style>
|
||||
[contenteditable] {
|
||||
padding: 0.5em;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Contenteditable bindings
|
||||
---
|
||||
|
||||
Elements with a `contenteditable="true"` attribute support `textContent` and `innerHTML` bindings:
|
||||
|
||||
```html
|
||||
<div
|
||||
contenteditable="true"
|
||||
bind:innerHTML={html}
|
||||
></div>
|
||||
```
|
@ -0,0 +1,40 @@
|
||||
export default {
|
||||
html: `
|
||||
<editor contenteditable="true"><b>world</b></editor>
|
||||
<p>hello <b>world</b></p>
|
||||
`,
|
||||
|
||||
ssrHtml: `
|
||||
<editor contenteditable="true"><b>world</b></editor>
|
||||
<p>hello undefined</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
assert.equal(component.name, '<b>world</b>');
|
||||
|
||||
const el = target.querySelector('editor');
|
||||
|
||||
el.innerHTML = 'every<span>body</span>';
|
||||
|
||||
// No updates to data yet
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<editor contenteditable="true">every<span>body</span></editor>
|
||||
<p>hello <b>world</b></p>
|
||||
`);
|
||||
|
||||
// Handle user input
|
||||
const event = new window.Event('input');
|
||||
await el.dispatchEvent(event);
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<editor contenteditable="true">every<span>body</span></editor>
|
||||
<p>hello every<span>body</span></p>
|
||||
`);
|
||||
|
||||
component.name = 'good<span>bye</span>';
|
||||
assert.equal(el.innerHTML, 'good<span>bye</span>');
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<editor contenteditable="true">good<span>bye</span></editor>
|
||||
<p>hello good<span>bye</span></p>
|
||||
`);
|
||||
},
|
||||
};
|
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<editor contenteditable="true" bind:innerHTML={name}>
|
||||
<b>world</b>
|
||||
</editor>
|
||||
<p>hello {@html name}</p>
|
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<editor contenteditable="true" bind:innerHTML={name}></editor>
|
||||
<p>hello {@html name}</p>
|
@ -0,0 +1,34 @@
|
||||
export default {
|
||||
html: `
|
||||
<editor contenteditable="true"><b>world</b></editor>
|
||||
<p>hello world</p>
|
||||
`,
|
||||
|
||||
ssrHtml: `
|
||||
<editor contenteditable="true"><b>world</b></editor>
|
||||
<p>hello undefined</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
assert.equal(component.name, 'world');
|
||||
|
||||
const el = target.querySelector('editor');
|
||||
|
||||
const event = new window.Event('input');
|
||||
|
||||
el.textContent = 'everybody';
|
||||
await el.dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<editor contenteditable="true">everybody</editor>
|
||||
<p>hello everybody</p>
|
||||
`);
|
||||
|
||||
component.name = 'goodbye';
|
||||
assert.equal(el.textContent, 'goodbye');
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<editor contenteditable="true">goodbye</editor>
|
||||
<p>hello goodbye</p>
|
||||
`);
|
||||
},
|
||||
};
|
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<editor contenteditable="true" bind:textContent={name}>
|
||||
<b>world</b>
|
||||
</editor>
|
||||
<p>hello {name}</p>
|
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<editor contenteditable="true" bind:textContent={name}></editor>
|
||||
<p>hello {name}</p>
|
@ -1,6 +0,0 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<editor contenteditable="true" bind:html={name}></editor>
|
||||
<p>hello {@html name}</p>
|
@ -1,6 +0,0 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<editor contenteditable="true" bind:text={name}></editor>
|
||||
<p>hello {name}</p>
|
@ -1,4 +1,4 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
<editor bind:text={name}></editor>
|
||||
<editor bind:textContent={name}></editor>
|
||||
|
Loading…
Reference in new issue