mirror of https://github.com/sveltejs/svelte
parent
77bb111770
commit
450464f014
@ -0,0 +1,43 @@
|
||||
export default {
|
||||
props: {
|
||||
name: '<b>world</b>',
|
||||
},
|
||||
|
||||
html: `
|
||||
<editor><b>world</b></editor>
|
||||
<p>hello <b>world</b></p>
|
||||
`,
|
||||
|
||||
ssrHtml: `
|
||||
<editor contenteditable="true"><b>world</b></editor>
|
||||
<p>hello <b>world</b></p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const el = target.querySelector('editor');
|
||||
assert.equal(el.innerHTML, '<b>world</b>');
|
||||
|
||||
el.innerHTML = 'every<span>body</span>';
|
||||
|
||||
// No updates to data yet
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<editor>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>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>good<span>bye</span></editor>
|
||||
<p>hello good<span>bye</span></p>
|
||||
`);
|
||||
},
|
||||
};
|
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<editor contenteditable="true" bind:html={name}></editor>
|
||||
<p>hello {@html name}</p>
|
@ -0,0 +1,37 @@
|
||||
export default {
|
||||
props: {
|
||||
name: 'world',
|
||||
},
|
||||
|
||||
html: `
|
||||
<editor>world</editor>
|
||||
<p>hello world</p>
|
||||
`,
|
||||
|
||||
ssrHtml: `
|
||||
<editor contenteditable="true">world</editor>
|
||||
<p>hello world</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const el = target.querySelector('editor');
|
||||
assert.equal(el.textContent, 'world');
|
||||
|
||||
const event = new window.Event('input');
|
||||
|
||||
el.textContent = 'everybody';
|
||||
await el.dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<editor>everybody</editor>
|
||||
<p>hello everybody</p>
|
||||
`);
|
||||
|
||||
component.name = 'goodbye';
|
||||
assert.equal(el.textContent, 'goodbye');
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<editor>goodbye</editor>
|
||||
<p>hello goodbye</p>
|
||||
`);
|
||||
},
|
||||
};
|
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<editor contenteditable="true" bind:text={name}></editor>
|
||||
<p>hello {name}</p>
|
@ -0,0 +1,15 @@
|
||||
[{
|
||||
"code": "dynamic-contenteditable-attribute",
|
||||
"message": "'contenteditable' attribute cannot be dynamic if element uses two-way binding",
|
||||
"start": {
|
||||
"line": 6,
|
||||
"column": 8,
|
||||
"character": 73
|
||||
},
|
||||
"end": {
|
||||
"line": 6,
|
||||
"column": 32,
|
||||
"character": 97
|
||||
},
|
||||
"pos": 73
|
||||
}]
|
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
export let name;
|
||||
|
||||
let toggle = false;
|
||||
</script>
|
||||
<editor contenteditable={toggle} bind:html={name}></editor>
|
@ -0,0 +1,15 @@
|
||||
[{
|
||||
"code": "missing-contenteditable-attribute",
|
||||
"message": "'contenteditable' attribute is required for text and html two-way bindings",
|
||||
"start": {
|
||||
"line": 4,
|
||||
"column": 8,
|
||||
"character": 48
|
||||
},
|
||||
"end": {
|
||||
"line": 4,
|
||||
"column": 24,
|
||||
"character": 64
|
||||
},
|
||||
"pos": 48
|
||||
}]
|
@ -0,0 +1,4 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
<editor bind:text={name}></editor>
|
Loading…
Reference in new issue