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