mirror of https://github.com/sveltejs/svelte
Rich Harris
6 years ago
committed by
GitHub
commit
b801c67403
@ -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>
|
||||
```
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
@ -1 +1 @@
|
||||
<div data-foo='"quoted"'></div>
|
||||
<div data-foo='semi:"space:" letter:"e number:"1 end:"'></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>
|
||||
@ -0,0 +1 @@
|
||||
<div>foo</div>
|
||||
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
skip_if_ssr: true,
|
||||
|
||||
html: `
|
||||
<div>foo</div>
|
||||
<div>has foo: true</div>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
export let foo = {};
|
||||
</script>
|
||||
|
||||
<Foo bind:this={foo['computed']}/>
|
||||
<div>
|
||||
has foo: {!!foo.computed}
|
||||
</div>
|
||||
@ -0,0 +1 @@
|
||||
<div>foo</div>
|
||||
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
skip_if_ssr: true,
|
||||
|
||||
html: `
|
||||
<div>foo</div>
|
||||
<div>first has foo: true</div>
|
||||
<div>foo</div>
|
||||
<div>second has foo: true</div>
|
||||
<div>foo</div>
|
||||
<div>third has foo: true</div>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
export let foo = {};
|
||||
</script>
|
||||
|
||||
{#each ["first", "second", "third"] as value}
|
||||
<Foo bind:this={foo[value]}/>
|
||||
<div>
|
||||
{value} has foo: {!!foo[value]}
|
||||
</div>
|
||||
{/each}
|
||||
@ -0,0 +1 @@
|
||||
<div>foo</div>
|
||||
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
skip_if_ssr: true,
|
||||
|
||||
html: `
|
||||
<div>foo</div>
|
||||
<div>0 has foo: true</div>
|
||||
<div>foo</div>
|
||||
<div>1 has foo: true</div>
|
||||
<div>foo</div>
|
||||
<div>2 has foo: true</div>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import Foo from './Foo.svelte';
|
||||
export let foo = [];
|
||||
</script>
|
||||
|
||||
{#each Array(3) as _, i}
|
||||
<Foo bind:this={foo[i]}/>
|
||||
<div>
|
||||
{i} has foo: {!!foo[i]}
|
||||
</div>
|
||||
{/each}
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
export let actualValue;
|
||||
let x = $$props;
|
||||
</script>
|
||||
|
||||
<input bind:value={actualValue}>
|
||||
@ -0,0 +1,14 @@
|
||||
export default {
|
||||
async test({ assert, target, window }) {
|
||||
const input = target.querySelector('input');
|
||||
|
||||
const event = new window.Event('input');
|
||||
input.value = 'changed';
|
||||
await input.dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<input>
|
||||
<p>changed</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Input from './TextInput.svelte';
|
||||
export let actualValue = '';
|
||||
</script>
|
||||
|
||||
<Input bind:actualValue />
|
||||
<p>{actualValue}</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>
|
||||
@ -0,0 +1,23 @@
|
||||
export default {
|
||||
html: `
|
||||
<ul>
|
||||
<li>Gruyere</li>
|
||||
<li>Compté</li>
|
||||
<li>Beaufort</li>
|
||||
<li>Abondance</li>
|
||||
</ul>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target }) {
|
||||
await component.swap(0, 1);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<ul>
|
||||
<li>Compté</li>
|
||||
<li>Gruyere</li>
|
||||
<li>Beaufort</li>
|
||||
<li>Abondance</li>
|
||||
</ul>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
let cheese = [
|
||||
'Gruyere',
|
||||
'Compté',
|
||||
'Beaufort',
|
||||
'Abondance',
|
||||
];
|
||||
|
||||
export function swap(a, b) {
|
||||
[cheese[a], cheese[b]] = [cheese[b], cheese[a]];
|
||||
}
|
||||
</script>
|
||||
|
||||
<ul>
|
||||
{#each cheese as cheese}
|
||||
<li>{cheese}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
@ -1,4 +1,4 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
<editor bind:text={name}></editor>
|
||||
<editor bind:textContent={name}></editor>
|
||||
|
||||
Loading…
Reference in new issue