mirror of https://github.com/sveltejs/svelte
Primo Sabatini
6 years ago
commit
375fc0fe15
@ -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 |
@ -1,6 +1,6 @@
|
||||
import { assign, is_promise } from './utils';
|
||||
import { check_outros, group_outros, transition_in, transition_out } from './transitions';
|
||||
import { flush } from '../internal/scheduler';
|
||||
import { flush } from './scheduler';
|
||||
|
||||
export function handle_promise(promise, info) {
|
||||
const token = info.token = {};
|
||||
@ -0,0 +1,3 @@
|
||||
declare const global: any;
|
||||
|
||||
export const globals = (typeof window !== 'undefined' ? window : global) as unknown as typeof globalThis;
|
||||
@ -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>
|
||||
@ -0,0 +1,14 @@
|
||||
export default {
|
||||
preserveIdentifiers: true,
|
||||
compileOptions: {
|
||||
name: 'window'
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>I hereby declare Svelte the bestest framework.</p>
|
||||
<p>nintendo sixty four</p>
|
||||
<p>Woops.</p>
|
||||
<p>42</p>
|
||||
<p>false</p>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
const document = 'I hereby declare Svelte the bestest framework.';
|
||||
const console = 'nintendo sixty four';
|
||||
const Error = 'Woops.';
|
||||
const Object = 42;
|
||||
const Map = false;
|
||||
|
||||
const everyone = [document, console, Error, Object, Map];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Cute test</title>
|
||||
</svelte:head>
|
||||
|
||||
<svelte:window on:click></svelte:window>
|
||||
<svelte:body on:mouseenter></svelte:body>
|
||||
|
||||
{#each everyone as someone (someone)}
|
||||
<p>{someone}</p>
|
||||
{/each}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue