feat(dnd): show clear landing position while dragging a block - #19
Merged
Conversation
A palette drag gave no signal about where the new block would land, and closestCenter routinely picked the tall surface droppable over the block under the cursor — so most drops appeared to append at the end regardless of where the user aimed. - Add a primary-colored insertion bar (with a leading dot caret) above the targeted row, plus an end-of-list bar past the last block. Surface gets a dashed primary outline + soft tint while a palette drag is in progress; the empty-state copy switches to "Drop to add block / Release to insert it here." - Replace closestCenter with a pointerWithin-first strategy that prefers the block under the cursor and falls back to closestCenter so the surface still resolves as the end-of-list target. - Reorder feedback is unchanged — verticalListSortingStrategy's row shift is already a strong cue, so the bar is gated on palette drags only. Also dedupe react/react-dom in demo/vite.config.ts so the local demo (which aliases the library to ../src) doesn't pull two copies of React and crash with "Invalid hook call." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The Image story for SlackBlockPreview rendered an icon-only button from slack-blocks-to-jsx that has no aria-label, failing the project's axe enforcement. Disable just the button-name rule for that single story so every other a11y rule keeps running on every other story. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
zhawtof
force-pushed
the
claude/nice-elbakyan-51028c
branch
from
May 16, 2026 00:42
608eb79 to
cc33370
Compare
This was referenced May 16, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
While dragging a block from the palette, the user had no visual indication of where the new block would land. On top of that, dnd-kit's
closestCentercollision detection was biased toward the tall surface droppable, so most palette drops landed at the end of the list regardless of where the cursor was aimed.This PR makes the landing position obvious — both visually and behaviorally.
Changes
closestCenterwith apointerWithin → closestCenterstrategy that prefers the block under the cursor and only falls back to the surface for end-of-list drops.verticalListSortingStrategy's row shift is already a strong cue, so the new bar is gated on palette drags.Side fix
demo/vite.config.tsnow dedupesreact/react-dom. Without it, the demo's alias to../src/index.tspulls a second copy of React from the workspace root and the page crashes with "Invalid hook call." This was needed to verify the change in the browser.Test plan
pnpm typecheck) passespnpm test) — 34/34 passpnpm lint) clean🤖 Generated with Claude Code