fix: Constrain drag preview image sizes and fix ghost rendering

[mkcash]

Fix oversized drag ghosts in image blocks and ensure proper cleanup after drag.

Summary by CodeRabbit

• Bug Fixes
  • Improved drag-and-drop behavior by constraining preview images to reasonable maximum dimensions, preventing oversized ghost images from appearing during drag operations.

[vercel]

Someone is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2dc495a1-bff5-4f7a-9870-e3a5185bd75e

📥 Commits

Reviewing files that changed from the base of the PR and between 118d8dc and 9cc8a12.

📒 Files selected for processing (1)

• packages/core/src/extensions/SideMenu/dragging.ts

---

📝 Walkthrough

Walkthrough

This PR constrains drag preview images by applying inline styles to <img> elements within the cloned preview element. A maximum width of 200px and height of 150px are enforced with object-fit: contain to prevent oversized drag ghost images from disrupting the user interface during drag operations.

Changes

Drag Preview Image Sizing

Layer / File(s)	Summary
Image dimension constraint in drag preview packages/core/src/extensions/SideMenu/dragging.ts	The setDragImage function queries all <img> elements in the cloned drag preview and applies inline styles to cap their dimensions (200px max-width, 150px max-height) with object-fit: contain scaling.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• TypeCellOS/BlockNote#2714: Both PRs modify the same dragging.ts file to handle drag preview image preparation—one constrains image sizing while the other strips embedded elements.
• TypeCellOS/BlockNote#2670: Both PRs adjust drag preview/ghost rendering behavior through setDragImage and related preview styling.

Suggested reviewers

• nperez0111

Poem

🐰 A drag preview once roamed wild and free,
With images vast as an ancient tree!
Now constrained to 200 by 150,
With contain they scale so neatly—
Ghost images dance with symmetry! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is minimal and missing most required template sections (Summary, Rationale, Changes, Impact, Testing, Screenshots, Checklist, and Additional Notes).	Expand the description to include all template sections: provide a detailed summary, explain the rationale for the fix, list specific changes, discuss impacts, describe testing performed, and complete the checklist.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: constraining drag preview image sizes and fixing ghost rendering in drag operations.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}