monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-02 13:35:02 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(input): broken accents in safari

Browse source 
turns out safari uses a completely different event for composition ending
This commit is contained in:
Miodec 2025-11-23 18:54:06 +01:00
parent f86f253561
commit 4e7bda0238
2 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/ts/input/helpers/input-type.ts
View file

@ -1,15 +1,15 @@
export type InsertInputType =
| "insertText"
| "insertCompositionText"
| "insertFromComposition"
| "insertLineBreak";
export type DeleteInputType = "deleteWordBackward" | "deleteContentBackward";
export type SupportedInputType = InsertInputType | DeleteInputType;
type SupportedInputType = InsertInputType | DeleteInputType;
const SUPPORTED_INPUT_TYPES: Set<SupportedInputType> = new Set([
"insertText",
"insertCompositionText",
"insertFromComposition",
"insertLineBreak",
"deleteWordBackward",
"deleteContentBackward",

26
frontend/src/ts/input/listeners/input.ts
View file

@ -1,9 +1,6 @@
import { onDelete } from "../handlers/delete";
import { onInsertText } from "../handlers/insert-text";
import {
isSupportedInputType,
SupportedInputType,
} from "../helpers/input-type";
import { isSupportedInputType } from "../helpers/input-type";
import { getInputElement } from "../input-element";
import {
getLastInsertCompositionTextData,
@ -56,7 +53,10 @@ inputEl.addEventListener("beforeinput", async (event) => {
inputType === "deleteContentBackward"
) {
onBeforeDelete(event);
} else if (inputType === "insertCompositionText") {
} else if (
inputType === "insertCompositionText" ||
inputType === "insertFromComposition"
) {
// firefox fires this extra event which we dont want to handle
if (!event.isComposing) {
event.preventDefault();
@ -80,11 +80,16 @@ inputEl.addEventListener("input", async (event) => {
value: (event.target as HTMLInputElement).value,
});
// this shouldnt be neccesary because beforeinput already prevents default
// but some browsers (LIKE SAFARI) seem to ignore that, so just double checking here
if (!isSupportedInputType(event.inputType)) {
event.preventDefault();
return;
}
const now = performance.now();
// this is ok to cast because we are preventing default
// in the input listener for unsupported input types
const inputType = event.inputType as SupportedInputType;
const inputType = event.inputType;
if (
(inputType === "insertText" && event.data !== null) ||
@ -105,7 +110,10 @@ inputEl.addEventListener("input", async (event) => {
inputType === "deleteContentBackward"
) {
onDelete(inputType);
} else if (inputType === "insertCompositionText") {
} else if (
inputType === "insertCompositionText" ||
inputType === "insertFromComposition"
) {
// in case the data is the same as the last one, just ignore it
if (getLastInsertCompositionTextData() !== event.data) {
setLastInsertCompositionTextData(event.data ?? "");