Skip to content

feat: delete empty section on backspace#3180

Merged
gabrielmfern merged 2 commits intocanaryfrom
cursor/empty-section-backspace-deletion-d38d
Apr 6, 2026
Merged

feat: delete empty section on backspace#3180
gabrielmfern merged 2 commits intocanaryfrom
cursor/empty-section-backspace-deletion-d38d

Conversation

@gabrielmfern
Copy link
Copy Markdown
Member

@gabrielmfern gabrielmfern commented Apr 4, 2026

Summary

Adds a Backspace keyboard shortcut handler to the Section editor node so that pressing backspace deletes an empty section.

Behavior

  • Cursor inside an empty section (at the start position): The entire section is removed. If the section is the only child of its parent, it's replaced with a plain paragraph to maintain valid document structure.
  • Cursor right after an empty section (previous sibling is an empty section): That empty section is deleted, removing the unwanted whitespace.

How it works

A section is considered "empty" when it has no text content and its content size is only the structural overhead of its child nodes (e.g., a single empty paragraph).

This follows the same pattern established by ColumnsColumn in columns.tsx for handling backspace deletion of structural nodes.

Changes

  • packages/editor/src/extensions/section.tsx — Added addKeyboardShortcuts() with Backspace handler and isSectionEmpty() helper function

Slack Thread

Open in Web Open in Cursor 

Summary by cubic

Adds a Backspace shortcut to delete empty section nodes for cleaner documents. Also fixes the start-position check so deletion works inside nested blocks; if the section is the only child, it’s replaced with a plain paragraph.

  • New Features
    • Backspace at the start of an empty section deletes it; if it’s the only child, insert a paragraph.
    • Backspace when the cursor is right after an empty section deletes the previous empty section.

Written for commit 2a6a6b3. Summary will update on new commits.

Add keyboard shortcut handler to the Section node that deletes
empty sections when pressing Backspace:

- When cursor is inside an empty section at its start position,
  the entire section is removed (replaced with a plain paragraph
  if it's the only child of its parent)
- When cursor is right after an empty section (previous sibling),
  that empty section is deleted

This follows the same pattern used by ColumnsColumn for handling
backspace deletion of structural nodes.

Co-authored-by: Gabriel Miranda <gabrielmfern@outlook.com>
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 4, 2026

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

Project Deployment Actions Updated (UTC)
react-email Ready Ready Preview, Comment Apr 4, 2026 1:54pm
react-email-demo Ready Ready Preview, Comment Apr 4, 2026 1:54pm
react-email-examples Ready Ready Preview, Comment Apr 4, 2026 1:54pm

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 4, 2026

⚠️ No Changeset found

Latest commit: 2a6a6b3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Apr 4, 2026

Open in StackBlitz

npm i https://pkg.pr.new/@react-email/editor@3180

commit: 2a6a6b3

@cursor cursor bot changed the title feat(editor): Delete empty section on backspace feat: delete empty section on backspace Apr 4, 2026
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

1 issue found across 1 file

Confidence score: 3/5

  • User-facing behavior change: in packages/editor/src/extensions/section.tsx Backspace won’t remove an empty section when the caret is in its first child, which could frustrate normal editing flows.
  • Given the medium-high severity and direct UX impact, there’s some regression risk despite being a localized change.
  • Pay close attention to packages/editor/src/extensions/section.tsx - the start-position check blocks Backspace deletion in a common caret position.
Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/editor/src/extensions/section.tsx">

<violation number="1" location="packages/editor/src/extensions/section.tsx:61">
P1: The start-position check is too strict, so Backspace won’t delete an empty section when the caret is in its first child block (the normal cursor position).</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

The previous check compared $from.pos against $from.start(sectionDepth),
but the cursor is typically nested inside a child paragraph within the
section, making the position offset by the nesting depth. Now we check
$from.parentOffset === 0 (cursor at start of innermost block) and
$from.index(d) === 0 for each level from section down (cursor is in the
first child at every nesting level).

Co-authored-by: Gabriel Miranda <gabrielmfern@outlook.com>
@gabrielmfern gabrielmfern merged commit be636d9 into canary Apr 6, 2026
21 checks passed
@gabrielmfern gabrielmfern deleted the cursor/empty-section-backspace-deletion-d38d branch April 6, 2026 14:35
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.

3 participants