feat(editor): core

[gabrielmfern]

Summary by cubic

Builds the core of @react-email/editor: a TipTap-based editor with a React Email serializer, safe paste/drop (optional image upload), and email-aware nodes/marks to compose and export production-ready emails with a customizable base template.

• New Features

  • New @react-email/editor package: ESM/CJS builds with corrected CJS entries (.cjs, .d.cts), style exports (./styles/*.css, ./themes/default.css), and root exports for composeReactEmail, EmailNode, EmailMark, and useEditor.
  • useEditor hook: optional paste/drop handlers that sanitize external HTML (strip styles/classes, keep functional attrs) and pass through editor HTML; auto-parse to TipTap JSON using active extensions; intercept plain text/files; optional image upload at cursor/coords; view-only link interception; collaboration-aware UndoRedo; content error handling; “visually empty” checks (ignore globalContent); exposes all @tiptap/react options plus onReady.
  • React Email serializer: composeReactEmail, EmailNode, EmailMark, and a plugin API (getNodeStyles, BaseTemplate) to override per-node styles and the base template; includes DefaultBaseTemplate. Preserves mark order (e.g., bold+italic+link), applies inline text styles only where allowed (e.g., code), and returns pretty HTML and plain text.
  • Core extensions and UI: replaces StarterKit nodes/marks with email-aware versions (paragraph, bulletList/orderedList/listItem, blockquote, hardBreak, bold, italic, strike, code, sup, uppercase), plus layout, tables, columns, code block with Prism, placeholder, and preview text; Bubble Menu CSS.
  • Dependencies: add individual TipTap extensions (@tiptap/extension-blockquote, -bullet-list, -ordered-list, -list-item, -paragraph, -code, -italic, -strike, -hard-break), @tiptap/extensions, @tiptap/extension-mention, @tiptap/suggestion, tippy.js; dev @types/node.

• Migration

  • Initialize: useEditor({ content, extensions: coreExtensions, onPaste?, onUploadImage?, onReady?, ... }).
  • Optional CSS: import '@react-email/editor/styles/bubble-menu.css' and import '@react-email/editor/themes/default.css'.
  • Serialize: composeReactEmail({ editor, preview }); customize via the serializer plugin to change the base template or styles.

^{Written for commit a6e28af. 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 12, 2026 2:40pm
react-email-demo	Ready	Preview, Comment	Mar 12, 2026 2:40pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: a6e28af

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

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​tiptap/​extension-mention@​3.20.1

View full report

[socket-security]

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report

[pkg-pr-new]

Open in StackBlitz

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

commit: c601209

[cubic-dev-ai]

5 issues found across 4 files (changes from recent commits).

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/core/create-drop-handler.ts">

<violation number="1" location="packages/editor/src/core/create-drop-handler.ts:26">
P2: When onPaste is undefined, this condition still returns true, so the drop is swallowed and the image upload logic never runs. Guard the call so it only returns true when a handler exists.</violation>

<violation number="2" location="packages/editor/src/core/create-drop-handler.ts:37">
P2: If onUploadImage is undefined, this still returns true, so image drops are swallowed without any upload. Only return true when an upload handler exists.</violation>
</file>

<file name="packages/editor/src/core/create-paste-handler.ts">

<violation number="1" location="packages/editor/src/core/create-paste-handler.ts:36">
P2: This condition now blocks text pasting when `onPaste` is undefined because `onPaste?.(...) !== false` evaluates to true. Guard onPaste explicitly before preventing default.</violation>

<violation number="2" location="packages/editor/src/core/create-paste-handler.ts:44">
P2: This blocks file pasting when `onPaste` is not provided. Only treat the paste as handled when onPaste is defined and returns non-false.</violation>

<violation number="3" location="packages/editor/src/core/create-paste-handler.ts:52">
P2: Only return true for image pastes when `onUploadImage` exists; otherwise fall through so the default paste behavior can run.</violation>
</file>

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