moth11.net
frontend for xcvr appview
add tab autocomplete
+24
-5
src/lib/components/AutoGrowTextArea.svelte
+24
-5
src/lib/components/AutoGrowTextArea.svelte
···
24
24
color,
25
25
fs,
26
26
}: Props = $props();
27
+
let curemoji: [string, number, number] | null = $state(null);
27
28
28
29
let inputEl: HTMLTextAreaElement;
29
30
function adjust(event: Event) {
30
31
onInput?.(event as InputEvent);
31
-
console.log(checkAndSearch());
32
+
curemoji = checkAndSearch();
32
33
}
33
34
34
35
function bi(event: InputEvent) {
···
50
51
function checkEmoji(
51
52
selectionStart: number | null,
52
53
selectionEnd: number | null,
53
-
): string | null {
54
+
): [string, number, number] | null {
54
55
if (selectionStart !== selectionEnd || selectionStart === null) {
55
56
return null;
56
57
}
···
75
76
}
76
77
const res = text.slice(colonPos + 1, selectionStart);
77
78
if (res.length < 3) return null;
78
-
return res;
79
+
return [res, colonPos, selectionStart];
79
80
}
80
81
const fuseOptions = {
81
82
keys: ["keywords"],
···
88
89
}
89
90
return results[0].item.emoji;
90
91
}
91
-
function checkAndSearch(): string | null {
92
+
function checkAndSearch(): [string, number, number] | null {
92
93
const query = checkEmoji(inputEl.selectionStart, inputEl.selectionEnd);
93
94
if (query === null) {
94
95
return null;
95
96
}
96
-
return searchEmoji(query);
97
+
const emoji = searchEmoji(query[0]);
98
+
if (emoji === null) return null;
99
+
return [emoji, query[1], query[2]];
100
+
}
101
+
function emojifier(e: KeyboardEvent) {
102
+
if (curemoji === null) {
103
+
return;
104
+
}
105
+
switch (e.key) {
106
+
case "Tab":
107
+
e.preventDefault();
108
+
e.stopPropagation();
109
+
inputEl.value =
110
+
inputEl.value.slice(0, curemoji[1]) +
111
+
curemoji[0] +
112
+
inputEl.value.slice(curemoji[2]);
113
+
return;
114
+
}
97
115
}
98
116
</script>
99
117
···
104
122
bind:this={inputEl}
105
123
{maxlength}
106
124
oninput={adjust}
125
+
onkeydown={emojifier}
107
126
onbeforeinput={bi}
108
127
style:font-weight={bold ? "700" : "inherit"}
109
128
style:--theme={color}