Repository navigation
⚡ Bolt: Optimize cursor decoration DOM recycling - #379
Conversation
- Replaced global `decorationGeneration` with stable widget keys - Switched to using factory functions `() => HTMLElement` for `Decoration.widget` - Integrated dynamic states (`opacity`, `color`, `connectionState`) into widget keys to ensure ProseMirror correctly triggers updates instead of constant DOM recreation This optimization reduces significant garbage collection overhead and layout thrashing. Co-authored-by: dezren39 <11225574+dezren39@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Caution Review failedThe pull request is closed. Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Formatted the bolt.md file with Prettier to resolve the treefmt check failure in CI. Co-authored-by: dezren39 <11225574+dezren39@users.noreply.github.com>
Resolved formatting errors caught by the biome-check CI. Co-authored-by: dezren39 <11225574+dezren39@users.noreply.github.com>
💡 What: Refactored cursor decorations in
pkgs/id/web/src/cursors.tsto utilize ProseMirror's native DOM recycling instead of brute-forcing widget recreations with a global generation counter. ChangedDecoration.widgetto use factory functions (() => HTMLElement) and computed stable keys based on dynamic data likeopacityandconnectionState.🎯 Why: Generating unique keys for widgets on every editor update bypasses ProseMirror's optimization to recycle DOM elements, triggering significant layout thrashing and garbage collection when cursors move or fade.
📊 Impact: Prevents costly O(N) widget recreation on every local/remote editor state change. Cursors are now properly recycled.
🔬 Measurement: Verify by inspecting the DOM during remote cursor updates — the
<span>elements will now update and move gracefully rather than being completely destroyed and re-attached to the tree on every transaction.PR created automatically by Jules for task 15044504201595192371 started by @dezren39
Need help on this PR? Tag
@codesmith-botwith what you need.