web: Ignore IME composing events when inputting text

Basically, if we ignore composing input events, we can just accept the
final composed text as key presses (not as text composition).

This is the first step towards implementing IME on web.

IME mechanics are not being used, no preview is available, but inserting
text with IME should work.

Author: kjarosh

web/packages/core/src/internal/player/inner.tsx

@@ -229,6 +229,10 @@ export class InnerPlayer {
             "input",
             this.virtualKeyboardInput.bind(this),
         );
+        this.virtualKeyboard.addEventListener(
+            "compositionend",
+            this.virtualKeyboardCompositionEnd.bind(this),
+        );
         this.saveManager = this.shadow.getElementById(
             "save-manager",
         )! as HTMLDivElement;
@@ -1256,10 +1260,23 @@ export class InnerPlayer {
         }
     }
 
-    private virtualKeyboardInput() {
-        const input = this.virtualKeyboard;
-        const string = input.value;
-        for (const char of string) {
+    private virtualKeyboardInput(e: Event) {
+        const event = e as InputEvent;
+        if (!event || event.isComposing || event.inputType === 'insertCompositionText') {
+            // Ignore composing events, we'll get the composed text at the end
+            return;
+        }
+
+        this.virtualKeyboardInputText(event.data || "");
+    }
+
+    private virtualKeyboardCompositionEnd(e: Event) {
+        const event = e as CompositionEvent;
+        this.virtualKeyboardInputText(event.data || "");
+    }
+
+    private virtualKeyboardInputText(text: string) {
+        for (const char of text) {
             for (const eventType of ["keydown", "keyup"]) {
                 this.element.dispatchEvent(
                     new KeyboardEvent(eventType, {
@@ -1269,7 +1286,7 @@ export class InnerPlayer {
                 );
             }
         }
-        input.value = "";
+        this.virtualKeyboard.value = "";
     }
 
     protected openVirtualKeyboard(): void {