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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
const FORM_STATE_KEY = "kj-clipboard-form-state-v1";
function saveFormState() {
const state = {
content: document.getElementById("content").value,
isCode: document.getElementById("is-code").checked,
language: document.getElementById("lang-select").value,
};
sessionStorage.setItem(FORM_STATE_KEY, JSON.stringify(state));
}
function restoreFormState() {
const raw = sessionStorage.getItem(FORM_STATE_KEY);
if (!raw) {
toggleLang();
return;
}
try {
const state = JSON.parse(raw);
document.getElementById("content").value =
typeof state.content === "string" ? state.content : "";
document.getElementById("is-code").checked = !!state.isCode;
const langSelect = document.getElementById("lang-select");
if (typeof state.language === "string") {
const langExists = Array.from(langSelect.options).some(
(opt) => opt.value === state.language
);
langSelect.value = langExists ? state.language : "";
}
} catch (_err) {
sessionStorage.removeItem(FORM_STATE_KEY);
}
toggleLang();
}
function toggleLang() {
const sel = document.getElementById("lang-select");
sel.style.display = document.getElementById("is-code").checked
? "inline-block"
: "none";
saveFormState();
}
async function createPaste() {
const content = document.getElementById("content").value.trim();
if (!content) {
setStatus("nothing to paste.");
return;
}
const btn = document.getElementById("get-link-btn");
btn.disabled = true;
btn.textContent = "generating...";
setStatus("");
const body = {
content: content,
is_code: document.getElementById("is-code").checked,
language: document.getElementById("lang-select").value,
passphrase: document.getElementById("passphrase").value,
};
try {
const resp = await fetch("/api/paste", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
});
const data = await resp.json();
if (data.error) {
setStatus("error: " + data.error);
btn.disabled = false;
btn.textContent = "generate link";
return;
}
const url = window.location.origin + data.url;
const linkEl = document.getElementById("result-link");
linkEl.href = url;
linkEl.textContent = url;
document.getElementById("result").style.display = "block";
setStatus("done.");
} catch (e) {
setStatus("error: " + e.message);
}
btn.disabled = false;
btn.textContent = "generate link";
}
function copyLink() {
const url = document.getElementById("result-link").textContent;
navigator.clipboard.writeText(url);
}
function setStatus(msg) {
document.getElementById("status").textContent = msg;
}
restoreFormState();
document.getElementById("content").addEventListener("input", saveFormState);
document.getElementById("lang-select").addEventListener("change", saveFormState);
// allow tab key in textarea
document.getElementById("content").addEventListener("keydown", function (e) {
if (e.key === "Tab") {
e.preventDefault();
const start = this.selectionStart;
const end = this.selectionEnd;
this.value =
this.value.substring(0, start) + "\t" + this.value.substring(end);
this.selectionStart = this.selectionEnd = start + 1;
saveFormState();
}
});
|
