Skip to main content

​
Quick start

Use BubbleMenu.LinkDefault to add an inline link editing toolbar: 
import { StarterKit } from '@react-email/editor/extensions';
import { BubbleMenu } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit];

const content = `
  <p>Click on <a href="https://react.email" target="_blank">this link</a> to see the link bubble menu.</p>
  <p>Try adding more links by selecting text and pressing Cmd+K.</p>
`;

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu.LinkDefault />
    </EditorProvider>
  );
}

​
How it works

When you click on a link in the editor, the link bubble menu appears with:
  • Edit button — Opens an inline form to change the URL
  • Open button — Opens the link in a new tab
  • Unlink button — Removes the link, keeping the text
To add a new link, select text and press Cmd+K (or Ctrl+K on Windows/Linux).

​
Using with the text bubble menu

When combining the link bubble menu with BubbleMenu.Default, use hideWhenActiveMarks to prevent the text bubble menu from appearing when a link is focused: 
import { BubbleMenu } from '@react-email/editor/ui';

<EditorProvider extensions={extensions} content={content}>
  <BubbleMenu.Default hideWhenActiveMarks={['link']} />
  <BubbleMenu.LinkDefault />
</EditorProvider>
Without hideWhenActiveMarks, both menus would try to show at the same time when a link is selected.

​
HTML content with links

When using HTML strings as content, <a> tags are automatically parsed into the editor’s link model: 
const content = `
  <p>Visit <a href="https://react.email" target="_blank">React Email</a> for more info.</p>
`;
The link extension is included in StarterKit with openOnClick disabled by default, so clicking a link in edit mode focuses it rather than navigating away.