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
/** @jsxImportSource https://esm.sh/preact */
import tiptapStyle from "https://esm.town/v/nbbaier/tiptapStyle";
import { render } from "npm:preact-render-to-string";
export default async function(req: Request) {
return new Response(
render(
<html>
<head>
<title>Title</title>
<style>{`${tiptapStyle}`}</style>
</head>
<body>
<div class="editor">
<div class="editor-header">
<button id="bold-button" class="menu-item" title="Bold" onClick={() => alert("bold")}>
<strong>bold</strong>
</button>
<button id="italic-button" class="menu-item" title="Italic" onClick={() => alert("italic")}>
<span class="text-italic">italic</span>
</button>
<button id="underline-button" class="menu-item" title="Underline">
<span class="text-strike">strike</span>
</button>
</div>
<div id="element" class="editor-content"></div>
</div>
<script type="module" src="https://esm.town/v/nbbaier/untitled_crimsonAnteater" />
</body>
</html>,
),
{
headers: {
"Content-Type": "text/html; charset=utf-8",
},
},
);
}
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.