spaceduck/site
Watch
1
0
Fork
You've already forked site
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: make the input cursor follow the caret without clipping text #6

Merged
bnied merged 0 commits from refs/pull/6/head into main 2026-06-08 03:39:40 +00:00
Conversation 0 Commits - Files changed -
bnied commented 2026-06-08 03:39:08 +00:00 (Migrated from codeberg.org)
Copy link

The block cursor was pinned to the end of the line: moving the caret
(arrow keys, Home/End, click-to-position) changed the insertion point
but not the visible cursor, since syncCursor() placed it at the full
input width and only ran on value-changing events.

The fix is subtle because #input-sizer is dual-purpose — it both
measures the cursor position and sizes #input-wrap (and thus the
100%-width #cmd-input). Shrinking the sizer to the caret prefix moved
the cursor correctly but clipped every character after the caret.

Instead:

  • #input-sizer keeps the full value so the input never clips.
  • A separate, out-of-flow mirror measures the caret's x-offset.
  • selectionchange re-syncs the cursor on caret moves.
  • The block becomes a thin bar mid-text so it never hides the glyph
    it overlaps; the block is kept at end-of-line over empty space.
  • The tab-ghost only renders when the caret is at the line end.

Adds js/cursor.js (pure caret-prefix helper) with unit tests.

The block cursor was pinned to the end of the line: moving the caret (arrow keys, Home/End, click-to-position) changed the insertion point but not the visible cursor, since syncCursor() placed it at the full input width and only ran on value-changing events. The fix is subtle because #input-sizer is dual-purpose — it both measures the cursor position and sizes #input-wrap (and thus the 100%-width #cmd-input). Shrinking the sizer to the caret prefix moved the cursor correctly but clipped every character after the caret. Instead: - #input-sizer keeps the full value so the input never clips. - A separate, out-of-flow mirror measures the caret's x-offset. - selectionchange re-syncs the cursor on caret moves. - The block becomes a thin bar mid-text so it never hides the glyph it overlaps; the block is kept at end-of-line over empty space. - The tab-ghost only renders when the caret is at the line end. Adds js/cursor.js (pure caret-prefix helper) with unit tests.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
spaceduck/site!6
No description provided.