feat: add ButtonBubbleMenu compound component primitives by joaopcm · Pull Request #3016 · resend/react-email

joaopcm · 2026-03-05T20:01:40Z

Summary

New ButtonBubbleMenu compound primitives: Root, Toolbar, EditLink
Context: useButtonBubbleMenuContext hook for consumer state sync
Minimal layout CSS with data-re-btn-bm-* attribute selectors
Fix LinkBubbleMenu.Root default placement from bottom to top
Bump to 0.0.0-experimental.11

Components

Component	Purpose
`Root`	Wraps tiptap BubbleMenu, shouldShow on `button` node, manages isEditing state
`Toolbar`	Conditional wrapper, hides when isEditing
`EditLink`	Button to enter edit mode, default LinkIcon, composed onClick

Linear

PRODUCT-1508

Summary by cubic

Adds ButtonBubbleMenu primitives (Root, Toolbar, EditLink) with shared context and minimal CSS to support a simple, composable button editing menu with link edit mode (PRODUCT-1508). Also updates LinkBubbleMenu defaults and event handling for consistency.

New Features
- ButtonBubbleMenu: Root shows when a button node is active and manages isEditing; Toolbar hides while editing; EditLink enters edit mode and composes onClick.
- Shared hook (useButtonBubbleMenuContext) for editor and isEditing state.
- Minimal layout CSS via data-re-btn-bm* attributes; exports added to UI index.
Bug Fixes
- LinkBubbleMenu.Root default placement changed to top.
- LinkBubbleMenu EditLink and Unlink now compose onMouseDown, preventing blur while preserving consumer handlers.

^{Written for commit 3e6baa9. Summary will update on new commits.}

vercel · 2026-03-05T20:01:45Z

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

Project	Deployment	Actions	Updated (UTC)
react-email	Ready	Preview, Comment	Mar 5, 2026 8:14pm
react-email-demo	Ready	Preview, Comment	Mar 5, 2026 8:14pm

changeset-bot · 2026-03-05T20:01:46Z

⚠️ No Changeset found

Latest commit: 3e6baa9

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 · 2026-03-05T20:02:29Z

Open in StackBlitz

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

commit: 3e6baa9

cubic-dev-ai

1 issue found across 14 files

Confidence score: 4/5

This PR is likely safe to merge with minimal risk; the reported issue is moderate (5/10) and focused on event-handler composition rather than core functionality.
In packages/editor/src/ui/button-bubble-menu/edit-link.tsx, consumer-provided onMouseDown is currently overridden, which can break custom integrations that rely on that handler.
Composing onMouseDown the same way onClick is composed should preserve existing custom behavior and reduce regression risk for downstream consumers.
Pay close attention to packages/editor/src/ui/button-bubble-menu/edit-link.tsx - ensure onMouseDown is composed instead of replaced so consumer behavior is retained.

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/ui/button-bubble-menu/edit-link.tsx">

<violation number="1" location="packages/editor/src/ui/button-bubble-menu/edit-link.tsx:24">
P2: This overrides and drops any consumer-provided `onMouseDown` handler. Compose the handler (as done for `onClick`) so custom behavior is preserved.</violation>
</file>

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

packages/editor/src/ui/button-bubble-menu/edit-link.tsx

…onsumer handler

gabrielmfern · 2026-03-05T20:46:43Z

packages/editor/src/ui/button-bubble-menu/edit-link.tsx

+        setIsEditing(true);
+      }}
+    >
+      {children ?? <LinkIcon />}


should we provide lucide as a default like this? I think we should assume no icon, and let the user pass in children and style to make the icon they want to use work

This is the default we've been doing for the other bubble menus, but we can totally change it. I'd do it in a follow-up PR and cover all of the existing components in a single PR

gabrielmfern · 2026-03-05T20:47:49Z

packages/editor/src/ui/link-bubble-menu/unlink.tsx

      data-item="unlink"
      className={className}
-      onMouseDown={(e) => e.preventDefault()}
+      onMouseDown={(e) => {


should we maybe inlcude these in a separate pr? not trying to be nitpicky here tho

Ideally, yes, but since this is an experimental version, I don't think it's a big deal. I'll make sure to isolate unrelated changes better next time. Just wanted to move fast while we can :)

gabrielmfern · 2026-03-05T20:52:28Z

packages/editor/src/ui/button-bubble-menu/root.tsx

+import * as React from 'react';
+import { ButtonBubbleMenuContext } from './context';
+
+export interface ButtonBubbleMenuRootProps {


should this also extend React.ComponentProps of something?

Yes! Good call

gabrielmfern · 2026-03-05T20:53:27Z

packages/editor/src/ui/button-bubble-menu/toolbar.spec.tsx

+    expect(container.querySelector('[data-re-btn-bm-toolbar]')).toBeNull();
+  });
+
+  it('applies className', () => {


I wonder how useful this test is, and if it might be increasing the test count and giving us a kind of fake confidence that things are stable without much meaning since it asserts behavior that's not really very fragile

wdyt?

I mean, this component stopping applying className would indeed be a problem. I think it's fair to keep this test and make sure built-in components are customizable via the standard className prop

gabrielmfern · 2026-03-05T20:54:06Z

packages/editor/src/ui/button-bubble-menu/root.spec.tsx

+  ),
+}));
+
+describe('ButtonBubbleMenuRoot', () => {


is this maybe already ensured for us by typescript?

gabrielmfern · 2026-03-05T20:55:23Z

packages/editor/src/ui/button-bubble-menu/button-bubble-menu.css

+ * Import optionally: import '@react-email/editor/styles/button-bubble-menu.css';
+ */
+
+[data-re-btn-bm] {


I'm wondering how necessary this css is. Is this kind of thing a common pattern for other composable/unstyled popular libraries out there?

joaopcm added 7 commits March 5, 2026 16:55

chore: add .worktrees to gitignore

7de7d24

feat: add ButtonBubbleMenu context and hook

15b7e71

feat: add ButtonBubbleMenu.Root compound component

25ce90b

feat: add ButtonBubbleMenu.Toolbar compound component

471f14c

feat: add ButtonBubbleMenu.EditLink compound component

71afdba

feat: add ButtonBubbleMenu barrel exports, CSS, bump to experimental.11

f5eeb49

fix: default LinkBubbleMenu placement to top, matching tiptap convention

6d4d463

vercel bot deployed to Preview – react-email March 5, 2026 20:01 View deployment

vercel bot deployed to Preview – react-email-demo March 5, 2026 20:02 View deployment

cubic-dev-ai bot reviewed Mar 5, 2026

View reviewed changes

packages/editor/src/ui/button-bubble-menu/edit-link.tsx Outdated Show resolved Hide resolved

joaopcm changed the title ~~feat: ButtonBubbleMenu compound component primitives~~ feat: add ButtonBubbleMenu compound component primitives Mar 5, 2026

joaopcm self-assigned this Mar 5, 2026

fix: compose onMouseDown in EditLink and Unlink instead of dropping c…

3e6baa9

…onsumer handler

vercel bot deployed to Preview – react-email March 5, 2026 20:13 View deployment

vercel bot deployed to Preview – react-email-demo March 5, 2026 20:14 View deployment

joaopcm requested a review from gabrielmfern March 5, 2026 20:16

gabrielmfern reviewed Mar 5, 2026

View reviewed changes

gabrielmfern approved these changes Mar 5, 2026

View reviewed changes

Conversation

joaopcm commented Mar 5, 2026 • edited by cubic-dev-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Components

Linear

Summary by cubic

Uh oh!

vercel bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

pkg-pr-new bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

joaopcm commented Mar 5, 2026 •

edited by cubic-dev-ai bot

Loading

vercel bot commented Mar 5, 2026 •

edited

Loading

changeset-bot bot commented Mar 5, 2026 •

edited

Loading

pkg-pr-new bot commented Mar 5, 2026 •

edited

Loading