fix(cursor-and-input): fixes cursor and input canvas error

[aadamgough]

Summary

Fixes the cursor align issue and the gray canvas error when pasting a long text

Type of Change

• Bug fix

Testing

See video

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

Screen.Recording.2025-08-28.at.3.51.40.PM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
sim	Ready	Preview	Comment	Aug 29, 2025 2:01am

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Aug 29, 2025 2:01am

[greptile-apps]

Greptile Summary

This PR addresses two critical UX issues in the workflow editor: cursor misalignment when editing text in workflow nodes and gray canvas errors when pasting large amounts of text. The fix involves three main architectural changes:

1. Event-Driven Layout Communication: The workflow-block.tsx component now dispatches custom DOM events (workflow-node-resized and workflow-layout-change) when blocks resize or change layout. This creates a communication channel for other components to react to layout changes.

2. Enhanced LongInput Overlay System: The long-input.tsx component underwent a significant refactor of its dual-layer text rendering system. The previous scroll-based synchronization between textarea and overlay was replaced with a transform-based approach using overlayInnerRef and CSS transforms. A ResizeObserver now dynamically matches overlay width to textarea content width, and explicit font styling ensures pixel-perfect alignment between the transparent textarea and the syntax-highlighted overlay.

3. Sophisticated Viewport Management: The main workflow.tsx component implements complex auto-panning logic with dual requestAnimationFrame calls to handle viewport adjustments when content expands. The solution includes epsilon-based viewport stabilization (small intentional viewport adjustments) to force proper canvas repainting, content growth detection to prevent unnecessary viewport changes, and intelligent detection of editable elements to avoid interference during active text editing.

These changes work together to solve the underlying ReactFlow rendering optimization issues that caused visual glitches when dynamic content changed the workflow layout, particularly when pasting large text blocks that cause nodes to expand beyond the visible viewport.

Confidence score: 3/5

• This PR involves complex viewport management and rendering fixes that could introduce subtle edge cases
• Score reflects the sophisticated nature of the changes and multiple interconnected systems being modified
• Pay close attention to the viewport management logic in workflow.tsx and the transform-based overlay system in long-input.tsx

_{3 files reviewed, 3 comments}

_{Edit Code Review Bot Settings | Greptile}