1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<script>
import { DateTime } from 'luxon';
import { render } from '$lib/markdown.js';
import MessageRun from '$lib/components/MessageRun.svelte';
import Message from '$lib/components/Message.svelte';
let sender = $state('wlonk');
let cssClass = $state('own-message');
/*
* Even though `MessageRun` is notionally a generic container for markup, we restrict the swatch
* to precomosed test messages. Swatches are available to all users, including
* technically-unsophisticated ones, and anything rendered in a swatch runs in the same origin
* context and the same cookie context as the rest of the client.
*
* This makes it possible that a user would be persuaded to enter something into a swatch that
* then runs _as them_, interacting with Pilcrow via its API or accessing client-stored data.
*
* As a proof of concept, `<img src="x" onerror="console.log('oh no')">` should not run the log
* statement. With generic HTML entry, it would do so.
*
* Users who want to experiment with free HTML are encouraged to edit the swatch for themselves.
*/
let messages = [
`Lorem ipsum \`dolor\` sit amet, consectetur adipiscing elit. Nunc quis ante ac leo tristique
iaculis vel in tortor. Praesent sed interdum ipsum. Pellentesque blandit, sapien at mattis
facilisis, leo mi gravida erat, in euismod mi lectus non dui. Praesent at justo vel mauris pulvinar
sodales ut sed nisl. Aliquam aliquet justo vel cursus imperdiet. Suspendisse potenti. Duis varius
tortor finibus, rutrum justo ac, tincidunt enim.`,
`Donec velit dui, bibendum a augue sit amet, tempus condimentum neque. Integer nibh tortor,
imperdiet at aliquet eu, rutrum eget ligula. Donec porttitor nisi lacus, eu bibendum augue maximus
eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Maecenas in est eget lectus dapibus tincidunt. Ut ut nisi egestas, posuere libero laoreet, venenatis
erat. Nulla maximus, nisl eget interdum ornare, enim turpis semper ligula, sed ultricies sem sem
quis arcu. Ut a dapibus augue. Pellentesque nec tincidunt sem.`,
];
</script>
<h1><code>MessageRun</code></h1>
<nav><p><a href=".">Back to swatches</a></p></nav>
<h2>properties</h2>
<div class="component-properties">
<label>sender <input type="text" bind:value={sender} /></label>
<label>css class <input type="text" bind:value={cssClass} /></label>
<div class="suggestion">
interesting values:
<button onclick={() => (cssClass = 'own-message')}>own-message</button>
<button onclick={() => (cssClass = 'other-message')}>other-message</button>
</div>
</div>
<h2>rendered</h2>
<div class="component-preview">
<MessageRun {sender} class={cssClass}>
{#each messages.entries() as [index, message]}
<Message id="Mplaceholder-{index}" at={DateTime.now()} renderedBody={render(message)} />
{/each}
</MessageRun>
</div>
|
