resend · gabrielmfern · Apr 1, 2026 · Mar 31, 2026 · Mar 31, 2026 · Mar 31, 2026
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -15,7 +15,7 @@ jobs:
   tests:
     runs-on: blacksmith-2vcpu-ubuntu-2204
     container:
-      image: node:22
+      image: mcr.microsoft.com/playwright:v1.58.2-noble
     steps:
       - name: Checkout Repo
         uses: actions/checkout@0c366fd6a839edf440554fa01a7085ccba70ac98
@@ -36,6 +36,7 @@ jobs:
       - name: Run Tests
         run: pnpm test
         env:
+          PLAYWRIGHT_BROWSERS_PATH: /ms-playwright
           SPAM_ASSASSIN_HOST: ${{ secrets.SPAM_ASSASSIN_HOST }}
           SPAM_ASSASSIN_PORT: ${{ secrets.SPAM_ASSASSIN_PORT }}
           TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -84,6 +84,8 @@
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
+    "test:unit": "vitest run --project unit",
+    "test:browser": "vitest run --project browser",
     "test:watch": "vitest"
   },
   "repository": {
@@ -117,14 +119,14 @@
     "@tiptap/extension-horizontal-rule": "^3.17.1",
     "@tiptap/extension-italic": "^3.17.1",
     "@tiptap/extension-link": "^3.17.1",
-    "@tiptap/extension-text": "^3.17.1",
     "@tiptap/extension-list-item": "^3.17.1",
     "@tiptap/extension-mention": "^3.17.1",
     "@tiptap/extension-ordered-list": "^3.17.1",
     "@tiptap/extension-paragraph": "^3.17.1",
     "@tiptap/extension-placeholder": "^3.17.1",
     "@tiptap/extension-strike": "^3.17.1",
     "@tiptap/extension-superscript": "^3.17.1",
+    "@tiptap/extension-text": "^3.17.1",
     "@tiptap/extension-underline": "^3.17.1",
     "@tiptap/extensions": "^3.17.1",
     "@tiptap/html": "^3.17.1",
@@ -139,11 +141,15 @@
     "@testing-library/react": "16.0.0",
     "@types/node": "catalog:",
     "@types/prismjs": "1.26.5",
+    "@vitejs/plugin-react": "catalog:",
+    "@vitest/browser-playwright": "4.0.17",
+    "playwright": "1.58.2",
     "postcss": "8.5.6",
     "postcss-import": "16.1.1",
     "tsconfig": "workspace:*",
     "tsx": "catalog:",
-    "typescript": "5.8.3"
+    "typescript": "5.8.3",
+    "vitest-browser-react": "2.1.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/editor/src/__tests__/browser-test-helpers.ts b/packages/editor/src/__tests__/browser-test-helpers.ts
@@ -0,0 +1,38 @@
+/**
+ * Shared helpers for browser-level component tests.
+ *
+ * These utilities simulate clipboard and drag-drop interactions that require
+ * a real browser environment (DataTransfer, ClipboardEvent, etc.).
+ */
+
+/**
+ * Simulates pasting plain text into an element by dispatching a ClipboardEvent
+ * with the given text set as `text/plain` in the DataTransfer.
+ */
+export function pasteText(element: Element, text: string): void {
+  const dataTransfer = new DataTransfer();
+  dataTransfer.setData('text/plain', text);
+  element.dispatchEvent(
+    new ClipboardEvent('paste', {
+      clipboardData: dataTransfer,
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+}
+
+/**
+ * Simulates pasting HTML content into an element by dispatching a ClipboardEvent
+ * with the given markup set as `text/html` in the DataTransfer.
+ */
+export function pasteHtml(element: Element, html: string): void {
+  const dataTransfer = new DataTransfer();
+  dataTransfer.setData('text/html', html);
+  element.dispatchEvent(
+    new ClipboardEvent('paste', {
+      clipboardData: dataTransfer,
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+}
diff --git a/packages/editor/src/__tests__/editor-integration.browser.spec.tsx b/packages/editor/src/__tests__/editor-integration.browser.spec.tsx
@@ -0,0 +1,194 @@
+import { page, userEvent } from 'vitest/browser';
+import { render } from 'vitest-browser-react';
+import { EmailEditor } from '../email-editor/email-editor';
+import { pasteHtml, pasteText } from './browser-test-helpers';
+
+const htmlTemplate = `
+<!doctype html>
+<html>
+  <body>
+    <h1>Pasted heading</h1>
+    <p>Pasted body content</p>
+  </body>
+</html>
+`;
+
+function getEditor() {
+  return page.getByRole('textbox');
+}
+
+describe('editor integration (browser)', () => {
+  it('loads and content is editable', async () => {
+    render(<EmailEditor />);
+
+    const editor = getEditor();
+    await expect.element(editor).toBeVisible();
+    await expect.element(editor).toHaveAttribute('contenteditable', 'true');
+
+    // Type content into the editor
+    await editor.click();
+    await userEvent.keyboard('Hello world');
+
+    // Content should be visible
+    await expect.element(editor).toHaveTextContent('Hello world');
+  });
+
+  it('slash command opens and inserts a heading', async () => {
+    render(<EmailEditor />);
+
+    const editor = getEditor();
+    await editor.click();
+
+    // Type "/" to trigger slash command menu
+    await userEvent.keyboard('/');
+
+    // The slash command menu should be visible (rendered via portal to body)
+    const titleButton = page.getByRole('button', {
+      name: 'Title',
+      exact: true,
+    });
+    await expect.element(titleButton).toBeVisible();
+
+    // Click "Title" (H1) from the command menu
+    await titleButton.click();
+
+    // Menu should close
+    await expect.element(titleButton).not.toBeInTheDocument();
+
+    // A heading element should now exist in the editor
+    const editorEl = editor.element() as HTMLElement;
+    expect(editorEl.innerHTML).toMatch(/<h1/i);
+
+    // Type content into the heading
+    await userEvent.keyboard('E2E Heading Content');
+
+    expect(editorEl.textContent).toContain('E2E Heading Content');
+  });
+
+  it('slash command inserts a bullet list', async () => {
+    render(<EmailEditor />);
+
+    const editor = getEditor();
+    await editor.click();
+
+    await userEvent.keyboard('/');
+
+    const bulletListButton = page.getByRole('button', { name: 'Bullet list' });
+    await expect.element(bulletListButton).toBeVisible();
+
+    await bulletListButton.click();
+
+    await expect.element(bulletListButton).not.toBeInTheDocument();
+
+    const editorEl = editor.element() as HTMLElement;
+    expect(editorEl.innerHTML).toMatch(/<ul/i);
+
+    // Type list items
+    await userEvent.keyboard('First item');
+    await userEvent.keyboard('{Enter}');
+    await userEvent.keyboard('Second item');
+
+    expect(editorEl.textContent).toContain('First item');
+    expect(editorEl.textContent).toContain('Second item');
+  });
+
+  it('applies text formatting via keyboard shortcuts', async () => {
+    // Use Control on Linux (CI), Meta (Cmd) on macOS
+    const mod = navigator.platform.includes('Mac') ? 'Meta' : 'Control';
+
+    render(<EmailEditor />);
+
+    const editor = getEditor();
+    await editor.click();
+
+    // Type and apply bold
+    await userEvent.keyboard('Bold text');
+    await userEvent.keyboard(`{${mod}>}a{/${mod}}`);
+    await userEvent.keyboard(`{${mod}>}b{/${mod}}`);
+
+    const editorEl = editor.element() as HTMLElement;
+    expect(editorEl.innerHTML).toMatch(/<strong/i);
+
+    // Move to end, new line, type and apply italic
+    await userEvent.keyboard('{End}');
+    await userEvent.keyboard('{Enter}');
+    await userEvent.keyboard('Italic text');
+    await userEvent.keyboard(`{${mod}>}a{/${mod}}`);
+    await userEvent.keyboard(`{${mod}>}i{/${mod}}`);
+
+    expect(editorEl.innerHTML).toMatch(/<em/i);
+
+    // Move to end, new line, type and apply underline
+    await userEvent.keyboard('{End}');
+    await userEvent.keyboard('{Enter}');
+    await userEvent.keyboard('Underlined text');
+    await userEvent.keyboard(`{${mod}>}a{/${mod}}`);
+    await userEvent.keyboard(`{${mod}>}u{/${mod}}`);
+
+    expect(editorEl.innerHTML).toMatch(/<u[ >]/i);
+  });
+
+  it('pasting plain text into an empty editor inserts text', async () => {
+    render(<EmailEditor />);
+
+    const editor = getEditor();
+    await editor.click();
+
+    const editorEl = editor.element() as HTMLElement;
+    pasteText(editorEl, 'hello world');
+
+    await expect.element(editor).toHaveTextContent('hello world');
+  });
+
+  it('pasting plain text into a non-empty editor appends text', async () => {
+    render(<EmailEditor />);
+
+    const editor = getEditor();
+    await editor.click();
+    await userEvent.keyboard('existing');
+
+    const editorEl = editor.element() as HTMLElement;
+    pasteText(editorEl, ' plus pasted');
+
+    await expect.element(editor).toHaveTextContent('existing plus pasted');
+  });
+
+  it('pasting HTML into a non-empty document preserves existing content', async () => {
+    render(
+      <EmailEditor
+        content={{
+          type: 'doc',
+          content: [
+            {
+              type: 'heading',
+              attrs: { level: 1 },
+              content: [{ type: 'text', text: 'Existing heading' }],
+            },
+            {
+              type: 'paragraph',
+              content: [{ type: 'text', text: 'Existing paragraph' }],
+            },
+          ],
+        }}
+      />,
+    );
+
+    const editor = getEditor();
+
+    // Click on the paragraph text to place cursor there, then move to end
+    const para = page.getByText('Existing paragraph');
+    await para.click();
+    await userEvent.keyboard('{End}');
+
+    const editorEl = editor.element() as HTMLElement;
+    pasteHtml(editorEl, htmlTemplate);
+
+    // The original content should still be present
+    expect(editorEl.textContent).toContain('Existing heading');
+    expect(editorEl.textContent).toContain('Existing paragraph');
+
+    // The pasted content should also appear
+    expect(editorEl.textContent).toContain('Pasted heading');
+    expect(editorEl.textContent).toContain('Pasted body content');
+  });
+});
diff --git a/packages/editor/src/__tests__/stub-module.ts b/packages/editor/src/__tests__/stub-module.ts
@@ -0,0 +1,19 @@
+/**
+ * Stub for `@react-email/render` and `@react-email/markdown` in the Vite
+ * browser test environment. These packages depend on Node-only modules
+ * (`prettier`, `md-to-react-email`) that Vite cannot resolve in the browser.
+ *
+ * The stubs satisfy the named exports that `@react-email/components`
+ * barrel-re-exports, so that extensions importing individual components
+ * (e.g. `{ Heading }`) from the components package can resolve correctly.
+ */
+
+// @react-email/render exports
+export const plainTextSelectors = {};
+export const pretty = async (html: string) => html;
+export const render = async () => '';
+export const renderAsync = async () => '';
+export const toPlainText = () => '';
+
+// @react-email/markdown exports
+export const Markdown = () => null;
diff --git a/packages/editor/src/ui/bubble-menu/item.browser.spec.tsx b/packages/editor/src/ui/bubble-menu/item.browser.spec.tsx
@@ -0,0 +1,42 @@
+import { page } from 'vitest/browser';
+import { render } from 'vitest-browser-react';
+import { BubbleMenuItem } from './item';
+
+describe('BubbleMenuItem (browser)', () => {
+  it('renders with correct aria attributes when inactive', async () => {
+    render(
+      <BubbleMenuItem name="bold" isActive={false} onCommand={() => {}}>
+        <span>B</span>
+      </BubbleMenuItem>,
+    );
+
+    const button = page.getByRole('button', { name: 'bold' });
+    await expect.element(button).toBeVisible();
+    await expect.element(button).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('sets aria-pressed when active', async () => {
+    render(
+      <BubbleMenuItem name="bold" isActive={true} onCommand={() => {}}>
+        <span>B</span>
+      </BubbleMenuItem>,
+    );
+
+    const button = page.getByRole('button', { name: 'bold' });
+    await expect.element(button).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('calls onCommand on click', async () => {
+    const onCommand = vi.fn();
+    render(
+      <BubbleMenuItem name="bold" isActive={false} onCommand={onCommand}>
+        <span>B</span>
+      </BubbleMenuItem>,
+    );
+
+    const button = page.getByRole('button', { name: 'bold' });
+    await expect.element(button).toBeVisible();
+    await button.click();
+    expect(onCommand).toHaveBeenCalledOnce();
+  });
+});