fix: revert "fix(editor): preserve button href through HTML round-trip" (#3376)

Author: joaopcm

.changeset/little-vans-switch.md

@@ -0,0 +1,5 @@
+---
+"@react-email/editor": patch
+---
+
+Do not preserve button href through HTML round-trip

packages/editor/src/extensions/button.spec.tsx

@@ -1,20 +1,10 @@
-import { Editor } from '@tiptap/core';
 import { render } from 'react-email';
-import { afterEach, describe, expect, it } from 'vitest';
 import { DEFAULT_STYLES } from '../utils/default-styles';
 import { Button } from './button';
-import { StarterKit } from './index';
 
 const buttonStyle = { ...DEFAULT_STYLES.reset, ...DEFAULT_STYLES.button };
 
 describe('EditorButton Node', () => {
-  let editor: Editor | null = null;
-
-  afterEach(() => {
-    editor?.destroy();
-    editor = null;
-  });
-
   it('renders React Email properly', async () => {
     const Component = Button.config.renderToReactEmail;
     expect(Component).toBeDefined();
@@ -38,60 +28,4 @@ describe('EditorButton Node', () => {
       ),
     ).toMatchSnapshot();
   });
-
-  it('preserves href through HTML round-trip', () => {
-    editor = new Editor({
-      extensions: [StarterKit],
-      content: {
-        type: 'doc',
-        content: [
-          {
-            type: 'container',
-            content: [
-              {
-                type: 'button',
-                attrs: { href: 'https://example.com' },
-                content: [{ type: 'text', text: 'Click me' }],
-              },
-            ],
-          },
-        ],
-      },
-    });
-
-    const html = editor.getHTML();
-    expect(html).toContain('data-href="https://example.com"');
-    expect(html).toContain('href="https://example.com"');
-
-    editor.commands.setContent(html);
-
-    const json = editor.getJSON();
-    const findButton = (nodes: typeof json.content): typeof json | undefined =>
-      nodes?.reduce<typeof json | undefined>(
-        (found, n) =>
-          found ?? (n.type === 'button' ? n : findButton(n.content ?? [])),
-        undefined,
-      );
-    const buttonNode = findButton(json.content ?? []);
-    expect(buttonNode?.attrs?.href).toBe('https://example.com');
-  });
-
-  it('parses data-href back to href when href attribute is missing', () => {
-    editor = new Editor({ extensions: [StarterKit] });
-
-    const htmlWithOnlyDataHref =
-      '<div class="align-left"><a class="node-button button" data-id="react-email-button" data-href="https://restored.example.com">Restore me</a></div>';
-
-    editor.commands.setContent(htmlWithOnlyDataHref);
-
-    const json = editor.getJSON();
-    const findButton = (nodes: typeof json.content): typeof json | undefined =>
-      nodes?.reduce<typeof json | undefined>(
-        (found, n) =>
-          found ?? (n.type === 'button' ? n : findButton(n.content ?? [])),
-        undefined,
-      );
-    const buttonNode = findButton(json.content ?? []);
-    expect(buttonNode?.attrs?.href).toBe('https://restored.example.com');
-  });
 });

packages/editor/src/extensions/button.tsx

@@ -49,14 +49,13 @@ export const Button = EmailNode.create<EditorButtonOptions>({
           }
           const element = node as HTMLElement;
           const attrs: Record<string, string> = {};
+
+          // Preserve all attributes
           Array.from(element.attributes).forEach((attr) => {
             attrs[attr.name] = attr.value;
           });
 
-          return {
-            ...attrs,
-            href: attrs['data-href'] ?? attrs.href,
-          };
+          return attrs;
         },
       },
     ];
@@ -74,7 +73,6 @@ export const Button = EmailNode.create<EditorButtonOptions>({
           class: `node-button ${HTMLAttributes?.class}`,
           style: HTMLAttributes?.style,
           'data-id': 'react-email-button',
-          href: HTMLAttributes?.href,
           'data-href': HTMLAttributes?.href,
         }),
         0,