fix: Complete Korean IME support with proper focus handling

- Remove contenteditable from container (causes IME to insert text as DOM nodes)
- Set container tabindex="-1" so it's not focusable
- Add focus redirection from container to textarea
- Queue composition-ending key (space, period) to process after compositionend
- This ensures correct character order: "세요 " instead of "세 요"

Key changes:
1. input-handler.ts: Add pendingKeyAfterComposition to queue the terminating key
2. terminal.ts: Remove contenteditable, set tabindex="-1", add focus redirection

Fixes Korean, Chinese, and Japanese IME input.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: aibaryonai-ctrl

lib/input-handler.ts

@@ -196,6 +196,7 @@ export class InputHandler {
   private wheelListener: ((e: WheelEvent) => void) | null = null;
   private isComposing = false;
   private compositionJustEnded = false; // Block keydown briefly after composition ends
+  private pendingKeyAfterComposition: string | null = null; // Key to output after composition
   private isDisposed = false;
   private mouseButtonsPressed = 0; // Track which buttons are pressed for motion reporting
   private lastKeyDownData: string | null = null;
@@ -371,12 +372,21 @@ export class InputHandler {
 
     // Ignore keydown events during composition
     // Note: Some browsers send keyCode 229 for all keys during composition
-    if (this.isComposing || event.isComposing || event.keyCode === 229) {
+    if (event.isComposing || event.keyCode === 229) {
       return;
     }
 
-    // Block the key that triggered composition end (e.g., space, period)
-    // This fixes the "세요" -> "세 요" bug where keydown fires before compositionend
+    // If we're still in composition (our flag) but browser says composition ended,
+    // this is the key that ended the composition (space, period, etc.).
+    // Queue it to be processed after compositionend to maintain correct order.
+    if (this.isComposing) {
+      // Store the key to be processed after composition ends
+      this.pendingKeyAfterComposition = event.key;
+      event.preventDefault();
+      return;
+    }
+
+    // Block the key that triggered composition end if we just processed a pending key
     if (this.compositionJustEnded) {
       this.compositionJustEnded = false;
       return;
@@ -698,25 +708,35 @@ export class InputHandler {
     if (this.isDisposed) return;
     this.isComposing = false;
 
-    // Set flag to block the next keydown event (the key that triggered composition end)
-    // This prevents "세요" becoming "세 요" when space/period is pressed
-    this.compositionJustEnded = true;
-    // Clear flag after a short delay to allow normal keydown processing
-    setTimeout(() => {
-      this.compositionJustEnded = false;
-    }, 10);
-
     const data = event.data;
     if (data && data.length > 0) {
       if (this.shouldIgnoreCompositionEnd(data)) {
         this.cleanupCompositionTextNodes();
+        // Still process pending key even if composition data is ignored
+        this.processPendingKeyAfterComposition();
         return;
       }
       this.onDataCallback(data);
       this.recordCompositionData(data);
     }
 
     this.cleanupCompositionTextNodes();
+
+    // Process the key that ended composition (space, period, etc.)
+    // This ensures correct order: composed text first, then the terminating key
+    this.processPendingKeyAfterComposition();
+  }
+
+  /**
+   * Process the pending key that was queued during composition
+   */
+  private processPendingKeyAfterComposition(): void {
+    if (this.pendingKeyAfterComposition) {
+      const key = this.pendingKeyAfterComposition;
+      this.pendingKeyAfterComposition = null;
+      // Output the key that ended composition
+      this.onDataCallback(key);
+    }
   }
 
   /**

lib/terminal.ts

@@ -349,20 +349,15 @@ export class Terminal implements ITerminalCore {
     this.isOpen = true;
 
     try {
-      // Make parent focusable if it isn't already
-      if (!parent.hasAttribute('tabindex')) {
-        parent.setAttribute('tabindex', '0');
-      }
+      // Set tabindex="-1" on parent so it's not focusable via click/tab.
+      // We want all focus to go to the hidden textarea for proper IME handling.
+      // The textarea will handle keyboard input and composition events.
+      parent.setAttribute('tabindex', '-1');
 
-      // Mark as contenteditable so browser extensions (Vimium, etc.) recognize
-      // this as an input element and don't intercept keyboard events.
-      parent.setAttribute('contenteditable', 'true');
-      // Prevent actual content editing - we handle input ourselves
-      parent.addEventListener('beforeinput', (e) => {
-        if (e.target === parent) {
-          e.preventDefault();
-        }
-      });
+      // Note: We intentionally do NOT set contenteditable on the parent container.
+      // Setting contenteditable causes IME (Korean, Chinese, Japanese) input to be
+      // inserted directly into the container as text nodes, bypassing our textarea.
+      // Instead, we use the hidden textarea for all keyboard/IME input.
 
       // Add accessibility attributes for screen readers and extensions
       parent.setAttribute('role', 'textbox');
@@ -429,7 +424,7 @@ export class Terminal implements ITerminalCore {
 
       // Focus textarea on interaction - preventDefault before focus
       const textarea = this.textarea;
-      // Desktop: mousedown
+      // Desktop: mousedown on canvas
       this.canvas.addEventListener('mousedown', (ev) => {
         ev.preventDefault();
         textarea.focus();
@@ -439,6 +434,17 @@ export class Terminal implements ITerminalCore {
         ev.preventDefault();
         textarea.focus();
       });
+      // Redirect focus from parent container to textarea
+      // This ensures IME composition events always go to the textarea
+      parent.addEventListener('mousedown', (ev) => {
+        if (ev.target === parent) {
+          ev.preventDefault();
+          textarea.focus();
+        }
+      });
+      parent.addEventListener('focus', () => {
+        textarea.focus();
+      });
 
       // Create renderer
       this.renderer = new CanvasRenderer(this.canvas, {
@@ -1242,8 +1248,7 @@ export class Terminal implements ITerminalCore {
       this.element.removeEventListener('mouseleave', this.handleMouseLeave);
       this.element.removeEventListener('click', this.handleClick);
 
-      // Remove contenteditable and accessibility attributes added in open()
-      this.element.removeAttribute('contenteditable');
+      // Remove accessibility attributes added in open()
       this.element.removeAttribute('role');
       this.element.removeAttribute('aria-label');
       this.element.removeAttribute('aria-multiline');