fix(editor): emit theme link styles in renderHTML (#3418)

Author: joaopcm

.changeset/theme-aware-link-mark.md

@@ -0,0 +1,5 @@
+---
+"@react-email/editor": patch
+---
+
+Emit active EmailTheming link styles in the Link mark's `renderHTML` so plain links carry inline color + underline in exported HTML. User inline styles still take precedence via the CSS cascade. `RESET_MINIMAL.link` now also ships `#0670DB` + underline.

packages/editor/src/extensions/link.spec.ts

@@ -0,0 +1,130 @@
+import { Editor } from '@tiptap/core';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { EmailTheming } from '../plugins/email-theming/extension';
+import { StarterKit } from './index';
+
+vi.mock('@tiptap/react', () => ({
+  ReactNodeViewRenderer: () => () => null,
+  useEditorState: vi.fn(),
+}));
+
+vi.mock('tippy.js', () => ({
+  default: vi.fn(),
+}));
+
+vi.mock('@/env', () => ({
+  env: new Proxy(
+    {},
+    {
+      get: () => '',
+    },
+  ),
+}));
+
+function docWithLink(style?: string) {
+  const attrs: Record<string, unknown> = { href: 'https://resend.com' };
+  if (style !== undefined) {
+    attrs.style = style;
+  }
+  return {
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            marks: [{ type: 'link', attrs }],
+            text: 'click',
+          },
+        ],
+      },
+    ],
+  };
+}
+
+function createEditor(theme: 'basic' | 'minimal', content = docWithLink()) {
+  return new Editor({
+    extensions: [StarterKit, EmailTheming.configure({ theme })],
+    content,
+  });
+}
+
+function findLinkMark(editor: Editor) {
+  const walk = (nodes: unknown[]): Record<string, unknown> | undefined => {
+    for (const n of nodes) {
+      const node = n as Record<string, unknown>;
+      const marks = node.marks as Array<Record<string, unknown>> | undefined;
+      const linkMark = marks?.find((m) => m.type === 'link');
+      if (linkMark) return linkMark;
+      const children = node.content as unknown[] | undefined;
+      if (children) {
+        const found = walk(children);
+        if (found) return found;
+      }
+    }
+    return undefined;
+  };
+  return walk((editor.getJSON().content ?? []) as unknown[]);
+}
+
+const COLOR_RE = /color:\s*#0670DB/i;
+const UNDERLINE_RE = /text-decoration:\s*underline/i;
+
+describe('Link mark theming', () => {
+  let editor: Editor;
+
+  afterEach(() => {
+    editor?.destroy();
+    document.head
+      .querySelectorAll('style[id^="tiptap-theme-"]')
+      .forEach((node) => {
+        node.remove();
+      });
+  });
+
+  it('emits theme-resolved color and text-decoration on plain links (basic)', () => {
+    editor = createEditor('basic');
+    const html = editor.getHTML();
+    expect(html).toMatch(COLOR_RE);
+    expect(html).toMatch(UNDERLINE_RE);
+  });
+
+  it('emits theme-resolved color and text-decoration on plain links (minimal)', () => {
+    editor = createEditor('minimal');
+    const html = editor.getHTML();
+    expect(html).toMatch(COLOR_RE);
+    expect(html).toMatch(UNDERLINE_RE);
+  });
+
+  it('preserves class="node-link" in the rendered output', () => {
+    editor = createEditor('basic');
+    expect(editor.getHTML()).toContain('class="node-link"');
+  });
+
+  it('lets user-specified color win over the theme color', () => {
+    editor = createEditor('basic', docWithLink('color: red'));
+    const html = editor.getHTML();
+    expect(html).toMatch(/color:\s*red/i);
+    expect(html).not.toMatch(COLOR_RE);
+    expect(html).toMatch(UNDERLINE_RE);
+  });
+
+  it('keeps mark.attrs.style empty for plain links (inspector contract)', () => {
+    editor = createEditor('basic');
+    const mark = findLinkMark(editor);
+    expect(mark?.type).toBe('link');
+    expect((mark?.attrs as Record<string, unknown>).style).toBe('');
+  });
+
+  it('round-trips a plain <a href> through setContent+getHTML with themed style', () => {
+    editor = createEditor('basic');
+    editor.commands.setContent(
+      '<p><a href="https://resend.com">click</a></p>',
+      { emitUpdate: true },
+    );
+    const html = editor.getHTML();
+    expect(html).toMatch(COLOR_RE);
+    expect(html).toMatch(UNDERLINE_RE);
+  });
+});

packages/editor/src/extensions/link.tsx

@@ -1,3 +1,5 @@
+import type { Editor } from '@tiptap/core';
+import { mergeAttributes } from '@tiptap/core';
 import type { LinkOptions as TipTapLinkOptions } from '@tiptap/extension-link';
 import TiptapLink from '@tiptap/extension-link';
 import { Link as ReactEmailLink } from 'react-email';
@@ -6,9 +8,24 @@ export type LinkOptions = TipTapLinkOptions;
 
 import { editorEventBus } from '../core';
 import { EmailMark } from '../core/serializer/email-mark';
-import { inlineCssToJs } from '../utils/styles';
+import {
+  getEmailTheming,
+  getMergedCssJs,
+  getResolvedNodeStyles,
+} from '../plugins/email-theming/extension';
+import { inlineCssToJs, jsToInlineCss } from '../utils/styles';
 import { processStylesForUnlink } from './preserved-style';
 
+function resolveThemedLinkStyle(editor: Editor): string {
+  const theming = getEmailTheming(editor);
+  const resolved = getResolvedNodeStyles(
+    { type: 'link', attrs: {} },
+    0,
+    getMergedCssJs(theming.theme, theming.styles),
+  );
+  return jsToInlineCss(resolved).replace(/;$/, '');
+}
+
 export const Link: EmailMark<TipTapLinkOptions, any> = EmailMark.from(
   TiptapLink,
   ({ children, mark, style }) => {
@@ -84,6 +101,21 @@ export const Link: EmailMark<TipTapLinkOptions, any> = EmailMark.from(
     };
   },
 
+  renderHTML({ HTMLAttributes }) {
+    const userStyle = ((HTMLAttributes.style as string | undefined) ?? '')
+      .trim()
+      .replace(/;$/, '');
+    const themed = this.editor ? resolveThemedLinkStyle(this.editor) : '';
+    const mergedStyle = [themed, userStyle].filter(Boolean).join('; ');
+    return [
+      'a',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        style: mergedStyle || null,
+      }),
+      0,
+    ];
+  },
+
   addCommands() {
     return {
       ...this.parent?.(),

packages/editor/src/plugins/email-theming/extension.tsx

@@ -174,7 +174,7 @@ function resolveThemeConfig(config: EditorThemeInput): {
   return { baseTheme, panels };
 }
 
-function getEmailTheming(editor: Editor) {
+export function getEmailTheming(editor: Editor) {
   const theme = getEmailTheme(editor);
   const normalizedStyles =
     normalizeThemePanelStyles(theme, getEmailStyles(editor)) ??

packages/editor/src/plugins/email-theming/themes.ts

@@ -677,7 +677,7 @@ const RESET_BASIC: ResetTheme = {
     fontFamily:
       "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
   },
-  link: { textDecoration: 'underline' },
+  link: { color: '#0670DB', textDecoration: 'underline' },
   footer: {
     fontSize: '0.8em',
   },
@@ -729,6 +729,7 @@ const RESET_MINIMAL: ResetTheme = {
   nestedList: RESET_BASIC.nestedList,
   listItem: RESET_BASIC.listItem,
   listParagraph: RESET_BASIC.listParagraph,
+  link: RESET_BASIC.link,
 };
 
 export const RESET_THEMES: Record<EditorTheme, ResetTheme> = {