fix(input): route IME composition events to the hidden textarea

[diegosouzapw]

Summary

Ports the IME-routing subset of upstream PR #120 with two deliberate deviations.

Root cause being fixed: composition events fire on the focused element. ghostty-web focuses a hidden textarea for keyboard input, but composition listeners were attached to the container element — every CJK input event was missed.

What changed

• Composition listeners now attach to the textarea (with symmetric detach on dispose)
• New state machine for the "terminating key" of an IME composition (space, period). The key is queued during composition and replayed after compositionend so composed text appears before the terminator
• contenteditable="true" removed from the parent container (was causing IME text to be inserted into the container as text nodes, bypassing the textarea)
• tabindex="-1" on parent; parent mousedown/focus now redirect to textarea
• Terminal.focus() targets textarea instead of container

Deviations from upstream coder#120

• 🚫 Composition-preview overlay NOT ported. Upstream added a div with hardcoded Korean text "조합중:" and inline #ffcc00 styling. Native browsers already render IME feedback, and the overlay was untranslated + theme-hostile.
• 🚫 Selection wide-char fix NOT here. Already shipped separately as PR fix(selection): skip wide-character continuation cells when copying #9 (#120a).

Regression risk (extensions)

Removing contenteditable was originally added by #78 to stop Vimium-style extensions from intercepting keys. The textarea is itself a real input element so most extensions should leave it alone — but this needs verification in a real browser with extensions installed. If the regression appears, the fallback is to keep contenteditable only while no composition is active.

Attribution

Thanks to @hongsw for the original implementation.

Test plan

• bun run fmt && bun run lint && bun run typecheck
• bun test — 331 tests pass (no new tests; existing keyboard suite unchanged), 0 fail
• bun run build:lib
• bun run build:wasm — WASM rebuilt locally with Zig 0.15.2
• Manual smoke test pending in bun run dev:
  • Type Korean / Chinese / Japanese via OS IME, confirm characters appear
  • Confirm the terminating key (space, period) appears AFTER composed text
  • With Vimium installed, confirm key bindings do not hijack the terminal
  • PR fix(selection): skip wide-character continuation cells when copying #9 already covers the copy/paste no-stray-spaces case for wide chars

Risk

Medium. Removes contenteditable (may resurrect coder#78's extension regression — needs browser verification). Big-picture: IME is broken today for CJK users; this is a real functional win at the cost of one regression risk that we can quickly verify.

[gemini-code-assist]

Code Review

This pull request improves IME support for CJK languages by redirecting focus to a hidden textarea and refining composition event handling. Key changes include moving event listeners to the textarea, removing contenteditable from the container to prevent direct text insertion, and implementing a queuing mechanism for keys that terminate composition. Feedback identifies that the compositionJustEnded flag is not correctly updated, special keys are not mapped to terminal escape sequences, and de-duplication logic is missing in the new processPendingKeyAfterComposition method.

[gemini-code-assist]

There are three issues in this method:

1. The compositionJustEnded flag is never set to true, which makes the logic in handleKeyDown (line 390) that blocks duplicate events ineffective.
2. Storing and sending event.key directly is incorrect for special keys like Enter, Tab, or Backspace. In a terminal context, these must be mapped to their respective escape sequences (e.g., \r, \t, \x7F).
3. This method should call recordKeyDownData to ensure proper de-duplication against subsequent beforeinput events, maintaining consistency with the rest of the input handling logic.

  private processPendingKeyAfterComposition(): void {
    if (this.pendingKeyAfterComposition) {
      const key = this.pendingKeyAfterComposition;
      this.pendingKeyAfterComposition = null;
      this.compositionJustEnded = true;

      // Map common terminating keys to their terminal sequences.
      // For printable characters (like Space or Period), the key is the data.
      let data = key;
      if (key === 'Enter') data = '\r';
      else if (key === 'Tab') data = '\t';
      else if (key === 'Backspace') data = '\x7F';
      else if (key === 'Escape') data = '\x1B';

      // Output the key that ended composition
      this.onDataCallback(data);
      this.recordKeyDownData(data);
    }
  }

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud