refactor(editor): unify BubbleMenu API by joaopcm · Pull Request #3129 · resend/react-email

joaopcm · 2026-03-27T18:18:30Z

Summary

Unified 4 separate bubble menu components (BubbleMenu, ButtonBubbleMenu, LinkBubbleMenu, ImageBubbleMenu) into a single BubbleMenu component with configurable shouldShow triggers
Renamed excludeNodes/excludeMarks to hideWhenActiveNodes/hideWhenActiveMarks for clarity
Added bubbleMenuTriggers helper with textSelection, node, nodeWithoutSelection factory functions
Deleted old variant directories; all sub-components now live under bubble-menu/ with prefixed names

Addresses API/component improvements from PRODUCT-1689.

Test plan

All 243 existing tests pass
Editor package builds successfully
No stale references to old component names
Verify bubble menus render correctly in editor examples app

Summary by cubic

Unifies all editor bubble menus into a single BubbleMenu with shouldShow triggers and a shared context. Consolidates styles, updates EmailEditor, examples, and exports to address PRODUCT-1689.

Refactors
- Added bubbleMenuTriggers (textSelection, node, nodeWithoutSelection; param name) with dragging guard.
- BubbleMenuRoot now takes shouldShow, pluginKey, hideWhenActiveNodes, hideWhenActiveMarks; resets editing on hide.
- Unified context (isEditing, setIsEditing) and moved variants to ui/bubble-menu/*; new BubbleMenu.* namespace (LinkDefault, ButtonDefault, ImageDefault) and prefixed exports.
- Consolidated styles into bubble-menu.css; removed variant CSS and updated ui/themes/default.css.
- Updated examples and EmailEditor to the unified API; bumped @react-email/editor to 0.0.0-experimental.38.
Migration
- Rename props: excludeNodes → hideWhenActiveNodes, excludeMarks → hideWhenActiveMarks (in BubbleMenu.Default and EmailEditor’s bubbleMenu config).
- Update imports: LinkBubbleMenu*/ButtonBubbleMenu*/ImageBubbleMenu* → BubbleMenuLink*, BubbleMenuButton*, BubbleMenuImage* (or use BubbleMenu.*).
- Replace old CSS imports with bubble-menu.css or rely on ui/themes/default.css.

^{Written for commit 1f4b2c4. Summary will update on new commits.}

changeset-bot · 2026-03-27T18:18:36Z

⚠️ No Changeset found

Latest commit: 1f4b2c4

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

vercel · 2026-03-27T18:18:36Z

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

Project	Deployment	Actions	Updated (UTC)
react-email	Ready	Preview, Comment	Mar 27, 2026 7:13pm
react-email-demo	Ready	Preview, Comment	Mar 27, 2026 7:13pm
react-email-examples	Ready	Preview, Comment	Mar 27, 2026 7:13pm

cubic-dev-ai

cubic analysis

No issues found across 57 files

Confidence score: 5/5

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

Linked issue analysis

Linked issue: PRODUCT-1689: Address remaining editor docs review feedback

Status	Acceptance criteria	Notes
❌	Use "ProseMirror document" instead of current wording when describing the tree walk (compose-react-email.mdx)	No docs changes to compose-react-email.mdx
❌	Unknown nodes should be described as rendered as `null`, not "skipped" (compose-react-email.mdx)	No docs change to describe unknown nodes as null
❌	Fix wording: "rendered in parallel from the final React" (compose-react-email.mdx)	No wording change found in compose-react-email.mdx
✅	`BubbleMenu`: rename `excludeNodes`/`excludeMarks` to clarify API intent	Renamed to hideWhenActiveNodes/hideWhenActiveMarks
✅	Unify ButtonBubbleMenu, LinkBubbleMenu, ImageBubbleMenu into a single BubbleMenu with configurable trigger/shouldShow	Unified variants under ui/bubble-menu and added triggers
❌	`EmailMark` example should import an actual TipTap mark (email-mark.mdx)	No changes to email-mark.mdx found in diffs
❌	`EmailNode` example should use an actual existing TipTap node (email-node.mdx)	No changes to email-node.mdx found in diffs

pkg-pr-new · 2026-03-27T18:25:55Z

Open in StackBlitz

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

commit: a7f26dd

packages/editor/src/ui/bubble-menu/triggers.ts

…nKey

…test name

…inKey

gabrielmfern · 2026-03-30T20:31:35Z

packages/editor/examples/src/examples/full-email-builder.tsx

-        <BubbleMenu.Default excludeNodes={['button']} excludeMarks={['link']} />
-        <LinkBubbleMenu.Default />
-        <ButtonBubbleMenu.Default />
+        <BubbleMenu.Default


gabrielmfern

left some comments, but I don't think any of them would be blockers, just worried about the e.getAttribute parts

gabrielmfern · 2026-03-30T21:00:44Z

packages/editor/package.json

 {
  "name": "@react-email/editor",
-  "version": "0.0.0-experimental.37",
+  "version": "0.0.0-experimental.38",


might need a new version bump now

gabrielmfern · 2026-03-30T21:00:45Z

packages/editor/src/ui/bubble-menu/triggers.ts

+
+export type ShouldShowFn = (params: ShouldShowParams) => boolean;
+
+export const bubbleMenuTriggers = {


this API is delicious, great work here!

gabrielmfern · 2026-03-30T21:00:46Z

packages/editor/src/ui/bubble-menu/triggers.ts

+          return false;
+        }
+      }
+      if (view.dom.classList.contains('dragging')) {


is this dragging thing from tiptap or from us?

gabrielmfern · 2026-03-30T21:00:46Z

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

-  excludeNodes = [],
-  excludeMarks = [],
+  shouldShow,
+  pluginKey = 'bubbleMenu',


this should be a new PluginKey, no?

gabrielmfern · 2026-03-30T21:00:46Z

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

+  const linkHref = useEditorState({
+    editor,
+    selector: ({ editor: e }) =>
+      (e?.getAttributes('link').href as string) ?? '',


does this only run for the link selected? did we test it on the examples?

gabrielmfern · 2026-03-30T21:00:47Z

packages/editor/src/ui/bubble-menu/context.tsx

 export interface BubbleMenuContextValue {
  editor: Editor;
+  isEditing: boolean;
+  setIsEditing: (value: boolean) => void;


is this ever called with true? I couldn't find in the PR

gabrielmfern · 2026-03-30T21:00:47Z

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

      return;
    }
-    setInputValue(displayHref);
+    const currentHref = (editor.getAttributes('button').href as string) ?? '';


same as what I said for the link

vercel bot deployed to Preview – react-email March 27, 2026 18:18 View deployment

vercel bot deployed to Preview – react-email-demo March 27, 2026 18:19 View deployment

cubic-dev-ai bot reviewed Mar 27, 2026

View reviewed changes

joaopcm requested review from a-carciu, danilowoz and gabrielmfern and removed request for a-carciu March 27, 2026 18:22

vercel bot deployed to Preview – react-email March 27, 2026 18:25 View deployment

vercel bot deployed to Preview – react-email-demo March 27, 2026 18:25 View deployment

vercel bot deployed to Preview – react-email March 27, 2026 18:27 View deployment

vercel bot deployed to Preview – react-email-demo March 27, 2026 18:27 View deployment

vercel bot deployed to Preview – react-email March 27, 2026 18:28 View deployment

vercel bot deployed to Preview – react-email-demo March 27, 2026 18:28 View deployment

joaopcm self-assigned this Mar 27, 2026

gabrielmfern reviewed Mar 27, 2026

View reviewed changes

packages/editor/src/ui/bubble-menu/triggers.ts Outdated Show resolved Hide resolved

vercel bot deployed to Preview – react-email March 27, 2026 18:42 View deployment

vercel bot deployed to Preview – react-email-demo March 27, 2026 18:42 View deployment

Base automatically changed from feat/ai-oss-editor to canary March 27, 2026 19:02

joaopcm added 9 commits March 27, 2026 16:12

feat(editor): add bubbleMenuTriggers helper functions

5628ee5

feat(editor): unify BubbleMenu context and Root with shouldShow/plugi…

ee1415a

…nKey

refactor(editor): move button bubble menu into unified bubble-menu/

97b83d3

refactor(editor): move link bubble menu into unified bubble-menu/

0666a69

refactor(editor): move image bubble menu into unified bubble-menu/

2fcb450

refactor(editor): unified BubbleMenu namespace with all sub-components

fc2de9e

refactor(editor): update EmailEditor to use unified BubbleMenu

bc97400

fix(editor): consolidate variant CSS into bubble-menu.css, fix stale …

44919b1

…test name

fix(editor): address review feedback — dead CSS, dragging guard, plug…

84ce6ea

…inKey

joaopcm added 5 commits March 27, 2026 16:12

fix(editor): update examples to use unified BubbleMenu API, fix lint

50a2cb9

chore(editor): bump to 0.0.0-experimental.38

dc4d455

style(editor): auto-fix lint formatting

7ed222c

chore: remove superpowers docs

f48201c

refactor(editor): rename nodeName param to name in triggers

1f4b2c4

joaopcm force-pushed the feature/product-1689-address-remaining-editor-docs-review-feedback branch from b862c88 to 1f4b2c4 Compare March 27, 2026 19:12

vercel bot deployed to Preview – react-email March 27, 2026 19:12 View deployment

vercel bot deployed to Preview – react-email-examples March 27, 2026 19:12 View deployment

vercel bot deployed to Preview – react-email-demo March 27, 2026 19:13 View deployment

gabrielmfern reviewed Mar 30, 2026

View reviewed changes

gabrielmfern approved these changes Mar 30, 2026

View reviewed changes


		export type ShouldShowFn = (params: ShouldShowParams) => boolean;

		export const bubbleMenuTriggers = {

Conversation

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

Uh oh!

Summary

Test plan

Summary by cubic

Uh oh!

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

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Mar 27, 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

cubic analysis

Linked issue analysis

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gabrielmfern left a comment

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 27, 2026 •

edited by cubic-dev-ai bot

Loading

changeset-bot bot commented Mar 27, 2026 •

edited

Loading

vercel bot commented Mar 27, 2026 •

edited

Loading

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

edited

Loading