diff --git a/.changeset/code-mark-inline-styles.md b/.changeset/code-mark-inline-styles.md new file mode 100644 index 0000000000..92d06e225d --- /dev/null +++ b/.changeset/code-mark-inline-styles.md @@ -0,0 +1,7 @@ +--- +"@react-email/editor": patch +--- + +fix: apply inline styles stored on the `code` mark when composing the email + +The `code` mark's serializer only read styles from the text node's attrs, so inline CSS captured on the mark itself (e.g. background, padding, or font styles imported from existing HTML) was dropped from the composed email. The mark's `style` attr is now merged into the rendered `` element. diff --git a/packages/editor/src/extensions/code.tsx b/packages/editor/src/extensions/code.tsx index 6d2f3118c4..8465a031d0 100644 --- a/packages/editor/src/extensions/code.tsx +++ b/packages/editor/src/extensions/code.tsx @@ -2,8 +2,17 @@ import CodeBase from '@tiptap/extension-code'; import { EmailMark } from '../core/serializer/email-mark'; import { inlineCssToJs } from '../utils/styles'; -export const Code = EmailMark.from(CodeBase, ({ children, node, style }) => ( - - {children} - -)); +export const Code = EmailMark.from( + CodeBase, + ({ children, node, style, mark }) => ( + + {children} + + ), +);