Skip to content

feat: Drag hendle menu delete button removes all other blocks in selection (BLO-1007)#2683

Merged
matthewlipski merged 3 commits intomainfrom
side-menu-multi-block-delete
Apr 28, 2026
Merged

feat: Drag hendle menu delete button removes all other blocks in selection (BLO-1007)#2683
matthewlipski merged 3 commits intomainfrom
side-menu-multi-block-delete

Conversation

@matthewlipski
Copy link
Copy Markdown
Collaborator

@matthewlipski matthewlipski commented Apr 28, 2026

Summary

This PR changes the drag handle menu's delete button to delete not just the block it's attached to, but all blocks spanned by the selection, if the attached block is also spanned by the selection. Otherwise, the same behaviour as before applies.

Closes #2411

Rationale

This is more intuitive for users and makes it easier to delete many blocks at once.

Changes

  • Updated click handler for RemoveBlockItem.

Impact

N/A

Testing

Added e2e tests.

Screenshots/Video

N/A

Checklist

  • Code follows the project's coding standards.
  • Unit tests covering the new feature have been added.
  • All existing tests pass.
  • The documentation has been updated to reflect the new feature

Additional Notes

N/A

Summary by CodeRabbit

  • Bug Fixes

    • Improved block deletion behavior: when multiple blocks are selected, deleting now removes all selected blocks instead of just the hovered one.
  • Tests

    • Added end-to-end tests for draghandle deletion scenarios with multi-block selections and individual block deletion.
    • Updated test configuration and added cross-browser snapshot fixtures.

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 28, 2026

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

Project Deployment Actions Updated (UTC)
blocknote Ready Ready Preview Apr 28, 2026 1:49pm
blocknote-website Ready Ready Preview Apr 28, 2026 1:49pm

Request Review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 28, 2026

📝 Walkthrough

Walkthrough

A functional change to the RemoveBlockItem click handler to support multi-block deletion based on editor selection state, paired with new end-to-end tests and snapshot fixtures validating the behavior across browsers.

Changes

Cohort / File(s) Summary
Core Logic Change
packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/RemoveBlockItem.tsx
Modified click handler to conditionally remove all selected blocks (if current block is selected) or only the current block (if hovering outside selection).
Test Infrastructure
tests/package.json
Updated playwright script to run in UI mode (--ui); updated test:updateSnaps script to target draghandle test subset.
End-to-End Tests
tests/src/end-to-end/draghandle/draghandle.test.ts
Added two new draghandle deletion scenarios: multi-block selection deletion and hover-outside-selection deletion with corresponding assertions and snapshots.
Test Snapshots
tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-*.json, draghandledeletehoveroutsideselection-*.json
Added six snapshot fixture files (three test scenarios × three browser engines: Chromium, Firefox, WebKit) encoding expected document structure after deletion operations.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

  • nperez0111

Poem

🐰 Hops through selections, deletes with care,
One block or many—the logic is fair!
Snapshots in triplicate, browsers aligned,
Drag-handle deletion, a feature refined!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title contains a typo ('hendle' instead of 'handle') and is partially related to the changeset but does not clearly summarize the main technical change. Correct the typo to 'Drag handle menu delete button removes all selected blocks' for clarity and accuracy.
✅ Passed checks (4 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
Description check ✅ Passed PR description covers all required template sections with appropriate detail for the feature scope.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch side-menu-multi-block-delete

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

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

@matthewlipski matthewlipski changed the title feat: Drag hendle menu delete button removes all other blocks in selection feat: Drag hendle menu delete button removes all other blocks in selection (BLO-1007) Apr 28, 2026
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 28, 2026

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2683

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2683

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2683

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2683

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2683

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2683

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2683

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2683

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2683

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2683

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2683

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2683

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2683

commit: 31718b8

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 28, 2026

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2683

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2683

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2683

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2683

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2683

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2683

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2683

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2683

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2683

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2683

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2683

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2683

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2683

commit: 030a50d

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
tests/src/end-to-end/draghandle/draghandle.test.ts (1)

162-179: Consider extracting duplicated setup/selection steps into a helper.

The block creation + multi-selection sequence is duplicated in both tests, which increases maintenance cost.

♻️ Proposed refactor
+async function setupBlocksAndSelectH3AndBullet(page: Page) {
+  await executeSlashCommand(page, "h1");
+  await page.keyboard.type("Heading 1");
+  await page.keyboard.press("Enter", { delay: 10 });
+  await executeSlashCommand(page, "h2");
+  await page.keyboard.type("Heading 2");
+  await page.keyboard.press("Enter", { delay: 10 });
+  await executeSlashCommand(page, "h3");
+  await page.keyboard.type("Heading 3");
+  await page.keyboard.press("Enter", { delay: 10 });
+  await executeSlashCommand(page, "bullet");
+  await page.keyboard.type("Bullet List");
+
+  await page.keyboard.down("Shift");
+  await page.keyboard.press("ArrowUp");
+  await page.keyboard.press("ControlOrMeta+ArrowLeft");
+  await page.keyboard.up("Shift");
+}
-    await executeSlashCommand(page, "h1");
-    await page.keyboard.type("Heading 1");
-    ...
-    await page.keyboard.up("Shift");
+    await setupBlocksAndSelectH3AndBullet(page);

Also applies to: 192-208

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@tests/src/end-to-end/draghandle/draghandle.test.ts` around lines 162 - 179,
Extract the repeated block creation and multi-select steps into a helper
function (e.g., setupThreeHeadingsAndBullet or createMultiBlockSelection) that
calls executeSlashCommand and the keyboard sequence (typing headings/bullet and
performing Shift+ArrowUp + ControlOrMeta+ArrowLeft) so both tests reuse it;
update the tests "Delete button should delete..." and the other at lines 192-208
to call this helper instead of duplicating the sequence, keeping helper name and
the keyboard actions consistent to preserve behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@tests/src/end-to-end/draghandle/draghandle.test.ts`:
- Around line 162-179: Extract the repeated block creation and multi-select
steps into a helper function (e.g., setupThreeHeadingsAndBullet or
createMultiBlockSelection) that calls executeSlashCommand and the keyboard
sequence (typing headings/bullet and performing Shift+ArrowUp +
ControlOrMeta+ArrowLeft) so both tests reuse it; update the tests "Delete button
should delete..." and the other at lines 192-208 to call this helper instead of
duplicating the sequence, keeping helper name and the keyboard actions
consistent to preserve behavior.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: de5cd189-ea45-4983-bc83-d8d133158830

📥 Commits

Reviewing files that changed from the base of the PR and between 210b499 and 030a50d.

📒 Files selected for processing (9)
  • packages/react/src/components/SideMenu/DragHandleMenu/DefaultItems/RemoveBlockItem.tsx
  • tests/package.json
  • tests/src/end-to-end/draghandle/draghandle.test.ts
  • tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-chromium-linux.json
  • tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-firefox-linux.json
  • tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletehoveroutsideselection-webkit-linux.json
  • tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-chromium-linux.json
  • tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-firefox-linux.json
  • tests/src/end-to-end/draghandle/draghandle.test.ts-snapshots/draghandledeletemultiselection-webkit-linux.json

Copy link
Copy Markdown
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good

Comment thread tests/package.json Outdated
@matthewlipski matthewlipski merged commit 15b7dea into main Apr 28, 2026
14 checks passed
@matthewlipski matthewlipski deleted the side-menu-multi-block-delete branch April 28, 2026 14:01
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.

Deleting multiple selected blocks via drag handle menu deletes only one block

2 participants