feat(editor): redesign examples app and fix bubble menu bugs

[joaopcm]

Summary

Redesigns the editor examples app from 4 flat tabs to 11 curated examples organized by difficulty (Getting Started → Intermediate → Advanced) with a fixed sidebar and hash-based routing (useHashRoute hook, zero dependencies).

Demo

https://www.loom.com/share/c414c564696a4318b0aa9decfb25b035

Examples app changes:

• Sidebar navigation with 3 difficulty tiers replacing tab-based nav
• 11 examples: Basic Editor, Bubble Menu, Slash Commands, Custom Bubble Menu, Link Editing, Column Layouts, Buttons, Email Theming, Email Export, Custom Extensions, Full Email Builder
• Each example wrapped in ExampleShell for consistent layout
• Registry-driven architecture (sections[] array drives sidebar + routing)

Editor bug fixes and improvements:

• Fix bubble menu collision bug: all bubble menus shared default pluginKey = 'bubbleMenu', causing shouldShow functions to cross-contaminate via tiptap's updateOptions mechanism. Each menu now has a unique key (textBubbleMenu, linkBubbleMenu, buttonBubbleMenu, imageBubbleMenu)
• Add excludeMarks to BubbleMenuRoot: allows hiding text bubble menu when a mark (like link) is active, complementing existing excludeNodes
• Add ButtonBubbleMenuForm + ButtonBubbleMenuUnlink: button bubble menu can now edit/remove button links (pencil + unlink icons)
• Fix LinkBubbleMenuForm stale input: inputValue now syncs with displayHref when editing starts
• Align bubble menu sizing: link and button bubble menus now match text bubble menu (padding 0.375rem, icons 0.875rem)
• Add link + button styles to default theme: links render blue/underlined, buttons render with black background
• Remove double border on link bubble menu form

Testing steps

• Run pnpm dev in packages/editor/examples and verify sidebar renders all 11 examples
• Click each example in the sidebar — editor renders correctly
• Verify hash changes in URL when switching examples and browser back/forward works
• In Link Editing: click a link → link bubble menu appears with correct URL in edit form
• In Buttons: click button → button bubble menu shows pencil + unlink icons, edit link works
• In Full Email Builder: focus link, blur, refocus → only link bubble menu shows (no collision)
• In Full Email Builder: focus button, blur, refocus → only button bubble menu shows
• In Full Email Builder: select non-link text → only text bubble menu shows
• In Full Email Builder: export HTML works correctly
• Verify links appear blue/underlined and buttons appear with black background in the editor
• Switch themes in Email Theming example — styles update correctly

---

Summary by cubic

Redesigned the @react-email/editor examples app into 11 curated demos with a fixed sidebar and hash-based routing. Fixed bubble menu collisions and improved link/button menus and default theming.

• New Features

  • Rebuilt examples app with a fixed sidebar, hash routing via useHashRoute, ExampleShell, and a registry-driven sections[] (Getting Started → Intermediate → Advanced) covering: Basic Editor, Bubble Menu, Slash Commands, Custom Bubble Menu, Link Editing, Column Layouts, Buttons, Email Theming, Email Export, Custom Extensions, Full Email Builder.
  • Bubble menus: added excludeMarks to BubbleMenu.Root/BubbleMenu.Default, excludeNodes now checks ancestors; unified menu padding (0.375rem) and icon size (0.875rem); added default link and button theme styles.
  • Button bubble menu: new inline form with validateUrl, onLinkApply, onLinkRemove, plus unlink action; edit icon switched to pencil and unlink shows only when a link exists.

• Bug Fixes

  • Resolved bubble menu collisions by assigning unique pluginKeys: textBubbleMenu, linkBubbleMenu, buttonBubbleMenu, imageBubbleMenu.
  • Link bubble menu form now syncs with displayHref when editing starts and removes the double border.
  • Updated tests for the new shouldShow signature and button menu behavior.

^{Written for commit 26657e2. Summary will update on new commits.}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
react-email	Ready	Preview, Comment	Mar 20, 2026 3:36pm
react-email-demo	Ready	Preview, Comment	Mar 20, 2026 3:36pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: 26657e2

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]

Open in StackBlitz

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

commit: fe1677d

[cubic-dev-ai]

No issues found across 33 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

[joaopcm]

Auto-merge enabled (squash) via PR Sentinel.

[joaopcm]

Auto-merge disabled via PR Sentinel.