Skip to content

Fix text disappearing on canvas click-outside#1

Merged
dreamteam-mobile merged 6 commits intomainfrom
dev/draw-text
Feb 19, 2026
Merged

Fix text disappearing on canvas click-outside#1
dreamteam-mobile merged 6 commits intomainfrom
dev/draw-text

Conversation

@dreamteam-mobile
Copy link
Collaborator

@dreamteam-mobile dreamteam-mobile commented Feb 18, 2026

Summary

  • Fixed bug where text entered in the drawing pane's text input was lost when clicking outside (on the canvas) to dismiss
  • Root cause: handleMouseDown changed the overlay React key, unmounting the old TextInputOverlay before its blur handler could read the input value
  • Fix: parent now reads DOM input value and commits text before remounting the overlay
  • Added committedRef guard in TextInputOverlay to prevent double-commit when Enter/Escape is followed by blur on unmount

Test plan

  • New unit test canvasTextCommit.test.tsx verifies text persists in store when committed via Enter and via click-outside (blur)
  • All 1070 existing unit tests pass
  • TypeScript type check passes
  • Production build succeeds
  • Manual: Select text tool, click canvas, type text, press Enter → text appears on canvas
  • Manual: Select text tool, click canvas, type text, click elsewhere on canvas → text appears at original position

🤖 Generated with Claude Code

When a user typed text in the drawing pane's text input and clicked
elsewhere on the canvas, the text was lost. The root cause: handleMouseDown
changed the overlay key (via forceOverlayUpdate), unmounting the old
TextInputOverlay before its blur handler could read the input value.

Fix:
- In handleMouseDown (text tool), read the DOM input value and commit it
  before creating a new overlay
- Move handleTextCommit/handleTextDismiss before handleMouseDown to avoid
  temporal dead zone issues in the dependency array
- Add committedRef guard in TextInputOverlay to prevent double-commit
  when Enter/Escape is followed by blur on unmount
…tool

- Multi-line text: textarea replaces input, Enter=newline, Ctrl/Cmd+Enter=commit
- Text positioning: overlay offset accounts for padding+border alignment
- Click existing text to edit: findTextAtPosition hit-testing, in-place update
- Double-click shapes: pre-fills overlay with existing shape text, uses shape center
- Selection tool: select/move any element (pen, line, rect, circle, text) with
  visual dashed-border feedback and drag-to-move
- WebRTC sync fix: strokeVersion counter in store triggers full sync on
  in-place updates (updateStrokeAt) that don't change array length
- CLAUDE.md: add commit rules (no co-author lines)
- 6 new test files (50+ tests), updated existing tests for Ctrl+Enter
Intercept Tab keydown in the code textarea, preventDefault to stop
focus change, and insert 4 spaces at cursor position. Integrates with
the existing OT pipeline so tab insertions sync to peers.
Shift+Tab removes up to 4 leading spaces from the current line or all
selected lines. Only removes space characters, stops at non-space.
Pure dedentLines() function extracted to code-editor-logic.ts for
testability. 19 new tests (14 unit + 5 integration).
Rectangle: point-to-segment distance for all 4 edges + interior check
Circle: distance from center vs radius (perimeter + interior)
Line: point-to-segment distance along full length
Text: bounding box with eraseRadius padding
Enter: new line starts at same indentation as current line.
Tab/Shift+Tab: replaced requestAnimationFrame cursor positioning
with useLayoutEffect + pendingCursorRef for reliable first-press
behavior. Extracted shared applyEdit helper to reduce duplication.
@dreamteam-mobile dreamteam-mobile merged commit 5a3105f into main Feb 19, 2026
2 checks passed
@dreamteam-mobile dreamteam-mobile deleted the dev/draw-text branch February 19, 2026 02:46
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.

1 participant