@mjasano/devtunnel 1.5.1 → 1.5.2

package/CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.2] - 2026-01-02
+
+### Fixed
+- Korean (Hangul) IME input on mobile - use dedicated input field for proper composition handling
+
 ## [1.5.1] - 2026-01-02
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjasano/devtunnel",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Web terminal with code editor and tunnel manager - access your dev environment from anywhere",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -629,16 +629,73 @@ term.loadAddon(webLinksAddon);
 term.open(terminalContainer);
 fitAddon.fit();
 
-// IME 한글 입력 처리
+// 모바일 IME 한글 입력 처리
 let isComposing = false;
-const xtermTextarea = terminalContainer.querySelector('.xterm-helper-textarea');
-if (xtermTextarea) {
-  xtermTextarea.addEventListener('compositionstart', () => {
-    isComposing = true;
-  });
+let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+// 모바일용 숨겨진 입력 필드 생성
+const mobileInput = document.createElement('input');
+mobileInput.type = 'text';
+mobileInput.autocapitalize = 'off';
+mobileInput.autocomplete = 'off';
+mobileInput.autocorrect = 'off';
+mobileInput.spellcheck = false;
+mobileInput.style.cssText = `
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  z-index: -1;
+`;
+terminalContainer.appendChild(mobileInput);
+
+mobileInput.addEventListener('compositionstart', () => {
+  isComposing = true;
+});
+
+mobileInput.addEventListener('compositionend', (e) => {
+  isComposing = false;
+  if (e.data && ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({ type: 'input', data: e.data }));
+  }
+  mobileInput.value = '';
+});
+
+mobileInput.addEventListener('input', (e) => {
+  // 조합 중이 아닐 때만 전송 (영문, 숫자 등)
+  if (!isComposing && e.data && ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({ type: 'input', data: e.data }));
+    mobileInput.value = '';
+  }
+});
+
+mobileInput.addEventListener('keydown', (e) => {
+  // 특수키 처리 (Enter, Backspace, Arrow 등)
+  if (!isComposing) {
+    let data = null;
+    switch (e.key) {
+      case 'Enter': data = '\r'; break;
+      case 'Backspace': data = '\x7f'; break;
+      case 'Tab': data = '\t'; e.preventDefault(); break;
+      case 'Escape': data = '\x1b'; break;
+      case 'ArrowUp': data = '\x1b[A'; break;
+      case 'ArrowDown': data = '\x1b[B'; break;
+      case 'ArrowRight': data = '\x1b[C'; break;
+      case 'ArrowLeft': data = '\x1b[D'; break;
+    }
+    if (data && ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'input', data }));
+      if (e.key !== 'Tab') mobileInput.value = '';
+    }
+  }
+});
 
-  xtermTextarea.addEventListener('compositionend', (e) => {
-    isComposing = false;
+// 모바일에서 터미널 클릭 시 숨겨진 입력 필드에 포커스
+if (isMobile) {
+  terminalContainer.addEventListener('click', () => {
+    mobileInput.focus();
   });
 }
 
@@ -958,8 +1015,8 @@ function connect() {
 }
 
 term.onData((data) => {
-  // IME 조합 중이면 무시 (xterm이 compositionend 후 자동 처리)
-  if (isComposing) return;
+  // 모바일에서는 mobileInput으로 처리
+  if (isMobile) return;
 
   if (ws && ws.readyState === WebSocket.OPEN) {
     ws.send(JSON.stringify({ type: 'input', data }));