Link Editing

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>
  );
}

import { BubbleMenu } from '@react-email/editor/ui';

<EditorProvider extensions={extensions} content={content}>
  <BubbleMenu hideWhenActiveMarks={['link']} />
  <BubbleMenu.LinkDefault />
</EditorProvider>

const content = `
  <p>Visit <a href="https://react.email" target="_blank">React Email</a> for more info.</p>
`;