From 99717e15e7c3630804d301fcb9bb65af3333c0c2 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Mon, 13 Jul 2026 10:54:11 +0100
Subject: [PATCH] fix(editor): use mark inline styles on the code block

---
 .changeset/code-mark-inline-styles.md   |  7 +++++++
 packages/editor/src/extensions/code.tsx | 19 ++++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/code-mark-inline-styles.md

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 `<code>` 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 }) => (
-  <code style={{ ...style, ...inlineCssToJs(node.attrs?.style) }}>
-    {children}
-  </code>
-));
+export const Code = EmailMark.from(
+  CodeBase,
+  ({ children, node, style, mark }) => (
+    <code
+      style={{
+        ...style,
+        ...inlineCssToJs(node.attrs?.style),
+        ...inlineCssToJs(mark?.attrs?.style),
+      }}
+    >
+      {children}
+    </code>
+  ),
+);