fix(tui): emoji width edge case in cursorLayout - #22242
Closed
wesleysimplicio wants to merge 1 commit into
Closed
wesleysimplicio wants to merge 1 commit into
wesleysimplicio wants to merge 1 commit into
Conversation
When the cursor index lands inside a multi-UTF16-unit grapheme (surrogate pair, regional-indicator flag, ZWJ family), `cursorLayout` previously sliced the string at the raw cursor offset and asked `Intl.Segmenter` to measure the half-grapheme. The clamp `Math.max(1, stringWidth(segment))` then reported width 1 instead of 0, leaving the visual cursor one cell ahead of the actual grapheme it belonged to. Snap the cursor back to the nearest grapheme stop ≤ pos before computing the column. ASCII paths are unchanged (`pos <= 0 || pos >= length` early exits keep the existing behavior). Adds 11 regression tests in cursorLayoutEmoji.test.ts covering single emoji, regional flags, ZWJ family, embedded ascii, and clamping bounds.
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes a cursor positioning bug in the TUI’s cursorLayout() when the cursor index falls inside a multi–UTF-16-unit grapheme (e.g., emoji / ZWJ sequences), preventing incorrect column calculation caused by slicing mid-grapheme.
Changes:
- Add internal grapheme-boundary snapping (
snapToGrapheme) before measuring cursor width. - Update
cursorLayout()to use the snapped cursor position for width measurement. - Add a dedicated vitest suite covering emoji / grapheme edge cases and clamping behavior.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| ui-tui/src/lib/inputMetrics.ts | Adds grapheme snapping and applies it in cursorLayout() to avoid mid-grapheme width mismeasurement. |
| ui-tui/src/tests/cursorLayoutEmoji.test.ts | Adds regression tests for surrogate pairs, flags, ZWJ sequences, and boundary clamping. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+108
to
+121
| function snapToGrapheme(value: string, pos: number): number { | ||
| if (pos <= 0 || pos >= value.length) { | ||
| return pos | ||
| } | ||
|
|
||
| let snapped = 0 | ||
|
|
||
| for (const { index, segment } of seg().segment(value)) { | ||
| const end = index + segment.length | ||
|
|
||
| if (end > pos) { | ||
| return snapped | ||
| } | ||
|
|
alt-glitch
added
type/bug
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
cursorLayoutinui-tui/src/lib/inputMetrics.tsreports the wrong column when the cursor index lands inside a multi-UTF16-unit grapheme.Root cause
cursorLayoutinui-tui/src/lib/inputMetrics.tsreports the wrong column when the cursor index lands inside a multi-UTF16-unit grapheme.Reproduced with:
'👍'1{column: 1, line: 0}{column: 0, line: 0}'🇧🇷'2{column: 1, line: 0}{column: 0, line: 0}'a👍b'2{column: 2, line: 0}{column: 1, line: 0}Root cause:
widthBetween(value, line.start, Math.min(pos, line.end))slices the string at the raw cursor offset. Whenposis mid-surrogate,Intl.Segmentertreats the surviving half-surrogate as one segment, andMath.max(1, stringWidth(segment))clamps its width to1,…Fix
Add an internal
snapToGrapheme(value, pos)step that walksIntl.Segmenterboundaries and snapsposback to the nearest grapheme stop≤ posbefore measuring. ASCII paths are unaffected (pos <= 0 || pos >= lengthearly exits).Why this shape
This shape mirrors #29640 so reviewers can quickly compare scope, root cause, fix, tests, and related context without having to decode a custom PR description.
Tests
Original body
Related PRs / issues
Original body
Summary
cursorLayoutinui-tui/src/lib/inputMetrics.tsreports the wrong column when the cursor index lands inside a multi-UTF16-unit grapheme.What Changed
Fluxo
A mudança continua seguindo o fluxo original descrito na seção preservada abaixo, sem ampliar o escopo funcional deste PR.
Visão
A padronização melhora a revisão, reduz ruído e evita deriva de formatação entre PRs abertos.
Test Plan
Original body
Problem
cursorLayoutinui-tui/src/lib/inputMetrics.tsreports the wrong column when the cursor index lands inside a multi-UTF16-unit grapheme.Reproduced with:
'👍'1{column: 1, line: 0}{column: 0, line: 0}'🇧🇷'2{column: 1, line: 0}{column: 0, line: 0}'a👍b'2{column: 2, line: 0}{column: 1, line: 0}Root cause:
widthBetween(value, line.start, Math.min(pos, line.end))slices the string at the raw cursor offset. Whenposis mid-surrogate,Intl.Segmentertreats the surviving half-surrogate as one segment, andMath.max(1, stringWidth(segment))clamps its width to1, pushing the visual cursor one cell past the grapheme it actually sits inside.Fix
Add an internal
snapToGrapheme(value, pos)step that walksIntl.Segmenterboundaries and snapsposback to the nearest grapheme stop≤ posbefore measuring. ASCII paths are unaffected (pos <= 0 || pos >= lengthearly exits).Tests
ui-tui/src/__tests__/cursorLayoutEmoji.test.ts— 11 cases covering:👍)🇧🇷)👨👩👧)a👍b)Verification
vitest run— 659/659 pass (all 62 files)🤖 Generated with Claude Code
Generated by Hermes Turbo
Generated by Hermes Turbo