Skip to content

fix: restore CJK wide character support in ZerolagInput overlay#30

Closed
TeigenZhang wants to merge 1 commit intoArk0N:masterfrom
TeigenZhang:fix/cjk-zerolag-overlay
Closed

fix: restore CJK wide character support in ZerolagInput overlay#30
TeigenZhang wants to merge 1 commit intoArk0N:masterfrom
TeigenZhang:fix/cjk-zerolag-overlay

Conversation

@TeigenZhang
Copy link
Contributor

Summary

  • Add charCellWidth / stringCellWidth helpers to overlay-renderer.ts — prefers xterm Unicode11 addon's getStringCellWidth, falls back to Unicode range detection for CJK/fullwidth characters
  • Fix makeLine — use for...of iterator (proper Unicode code point iteration) with visual column offset positioning; wide characters get 2 * cellW span width
  • Fix renderOverlay cursor — use stringCellWidth instead of string.length for cursor column calculation
  • Fix _render line splitting — replace String.slice with visual-column-width-aware splitting to prevent CJK characters overflowing line boundaries
  • Extend XtermTerminal type with unicode property; add terminal to RenderParams for width detection passthrough
  • Bump asset version query strings (?v=0.3.0?v=0.3.1a) for cache invalidation

Context

The xterm-zerolag-input package refactor (extracting LocalEchoOverlay into ZerolagInputAddon) lost the CJK wide character handling from PR #13. All characters were assumed to be 1 cell wide, causing Chinese/Japanese/Korean text to overlap during input.

Files Changed

File Change
packages/xterm-zerolag-input/src/types.ts Add unicode to XtermTerminal, terminal to RenderParams
packages/xterm-zerolag-input/src/overlay-renderer.ts Add width helpers; fix makeLine and renderOverlay for CJK
packages/xterm-zerolag-input/src/zerolag-input-addon.ts Fix _render line splitting; pass terminal to renderer
src/web/public/index.html Bump ?v= for cache invalidation

Test plan

  • Type Chinese text (e.g., via pinyin IME) — characters should not overlap during input
  • Verify CJK text renders with correct double-width spacing in the overlay
  • Test Japanese (こんにちは) and Korean (안녕하세요) input
  • Verify cursor positions correctly after CJK characters
  • Verify long CJK input wraps to next line at correct column boundary
  • Verify existing ASCII input is unaffected
  • Test teammate terminal panels also render CJK correctly

The xterm-zerolag-input refactor lost the CJK wide character handling
that was previously in LocalEchoOverlay. This caused Chinese/Japanese/
Korean text to overlap during input because all characters were assumed
to be 1 cell wide.

- Add charCellWidth/stringCellWidth helpers to overlay-renderer.ts
  (prefers Unicode11 addon, falls back to Unicode range detection)
- Fix makeLine to position chars by visual column offset (wide = 2 cols)
- Fix renderOverlay cursor to use visual width instead of string length
- Fix _render line splitting to wrap by visual column width
- Add unicode property to XtermTerminal type, terminal to RenderParams
- Bump asset version query strings for cache invalidation
@Ark0N
Copy link
Owner

Ark0N commented Mar 4, 2026

Sorry about this — the CJK wide character support was lost during the refactor. I'll implement a clean fix directly on master that preserves the existing 4-space indentation style and only touches the lines that need to change.

Ark0N added a commit that referenced this pull request Mar 4, 2026
Add charCellWidth/stringCellWidth helpers for Unicode-aware width detection,
fix makeLine to use for...of iteration with visual column positioning, and
fix line splitting in _render to use visual column widths instead of string
length. CJK/fullwidth characters now correctly occupy 2 cell widths.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@Ark0N
Copy link
Owner

Ark0N commented Mar 4, 2026

Merged via direct commit to master. All 124 tests pass, typecheck clean, lint/format clean.

@Ark0N Ark0N closed this Mar 4, 2026
Ark0N added a commit that referenced this pull request Mar 4, 2026
Covers all 7 test plan items: Chinese overlap prevention, double-width
spacing, Japanese/Korean input, cursor positioning, line wrapping at
column boundaries, ASCII regression, and teammate terminal panels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@Ark0N
Copy link
Owner

Ark0N commented Mar 4, 2026

Test plan executed ✅

Added comprehensive CJK test suite in d79e25d covering all 7 test plan items (51 tests, all passing):

# Item Tests
1 Chinese text — no character overlap 4
2 CJK double-width spacing 8
3 Japanese (こんにちは) + Korean (안녕하세요) input 14
4 Cursor positioning after CJK characters 6
5 Line wrapping at correct column boundary 6
6 ASCII input unaffected (regression) 7
7 Teammate terminal panels render CJK correctly 6

File: packages/xterm-zerolag-input/test/cjk-testplan.test.ts

Note on Test 7: Teammate panels share the same global xterm-zerolag-input.js vendor bundle — no separate copy. Tests verify the addon works identically across separate terminal instances.

@TeigenZhang TeigenZhang deleted the fix/cjk-zerolag-overlay branch March 4, 2026 13:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants