web: Implement basic IME

This patch implements IME preediting and committing on web. It does not
implement moving the cursor and proper positioning yet.

Author: kjarosh

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

@@ -229,6 +229,14 @@ export class InnerPlayer {
             "input",
             this.virtualKeyboardInput.bind(this),
         );
+        this.virtualKeyboard.addEventListener(
+            "compositionupdate",
+            this.virtualKeyboardCompositionUpdate.bind(this),
+        );
+        this.virtualKeyboard.addEventListener(
+            "compositionend",
+            this.virtualKeyboardCompositionEnd.bind(this),
+        );
         this.saveManager = this.shadow.getElementById(
             "save-manager",
         )! as HTMLDivElement;
@@ -1252,10 +1260,15 @@ 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;
+        }
+
+        const text = event.data || "";
+        for (const char of text) {
             for (const eventType of ["keydown", "keyup"]) {
                 this.element.dispatchEvent(
                     new KeyboardEvent(eventType, {
@@ -1265,7 +1278,24 @@ export class InnerPlayer {
                 );
             }
         }
-        input.value = "";
+        this.virtualKeyboard.value = "";
+    }
+
+    private virtualKeyboardCompositionUpdate(e: Event) {
+        const event = e as CompositionEvent;
+        // TODO Add support for moving cursor during IME,
+        //   we cannot use selectionStart & selectionEnd here,
+        //   as they lag behind and don't take into account
+        //   moving the caret with arrows.
+        const text = event.data || "";
+        this.instance?.handle_ime_preedit(text, text.length, text.length);
+    }
+
+    private virtualKeyboardCompositionEnd(e: Event) {
+        const event = e as CompositionEvent;
+        this.instance?.handle_ime_preedit("", 0, 0);
+        this.instance?.handle_ime_commit(event.data || "");
+        this.virtualKeyboard.value = "";
     }
 
     protected openVirtualKeyboard(): void {

web/src/lib.rs

@@ -18,7 +18,7 @@ use input::{web_input_to_ruffle_key_descriptor, web_to_ruffle_text_control};
 use js_sys::{Error as JsError, Uint8Array};
 use ruffle_core::context::UpdateContext;
 use ruffle_core::context_menu::ContextMenuCallback;
-use ruffle_core::events::{GamepadButton, MouseButton, MouseWheelDelta, TextControlCode};
+use ruffle_core::events::{GamepadButton, ImeEvent, MouseButton, MouseWheelDelta, TextControlCode};
 use ruffle_core::tag_utils::SwfMovie;
 use ruffle_core::{Player, PlayerEvent, StaticCallstack, ViewportDimensions};
 use ruffle_web_common::JsResult;
@@ -459,6 +459,38 @@ impl RuffleHandle {
     pub fn is_wasm_simd_used() -> bool {
         cfg!(target_feature = "simd128")
     }
+
+    pub fn handle_ime_preedit(
+        &self,
+        text: String,
+        cursor_from: Option<usize>,
+        cursor_to: Option<usize>,
+    ) {
+        fn char_index_to_byte_index(text: &str, index: usize) -> usize {
+            text.char_indices()
+                .nth(index)
+                .map(|(i, _)| i)
+                .unwrap_or_else(|| text.len())
+        }
+
+        let cursor = match (cursor_from, cursor_to) {
+            (Some(from), Some(to)) => Some((
+                char_index_to_byte_index(&text, from),
+                char_index_to_byte_index(&text, to),
+            )),
+            _ => None,
+        };
+
+        let _ = self.with_core_mut(|core| {
+            core.handle_event(PlayerEvent::Ime(ImeEvent::Preedit(text, cursor)));
+        });
+    }
+
+    pub fn handle_ime_commit(&self, text: String) {
+        let _ = self.with_core_mut(|core| {
+            core.handle_event(PlayerEvent::Ime(ImeEvent::Commit(text)));
+        });
+    }
 }
 
 impl RuffleHandle {