fix: preserve HTML content when replying to HTML emails (#856)

* fix: preserve HTML content when replying to HTML emails (#728) Reply was using curMail.text (plain text) instead of curMail.message (HTML), causing loss of original email formatting. Forward already used HTML correctly. Now reply prefers HTML content with plain text fallback, matching forward behavior. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: add vitest unit tests for reply/forward mail logic Extract buildReplyModel and buildForwardModel into testable utility functions and add 13 unit tests covering HTML content preservation, plain text fallback, sender parsing, and subject formatting. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: remove unnecessary vitest exclude config The e2e files have been deleted, so the test.exclude config in vite.config.js is no longer needed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: revert unnecessary trailing comma in vite.config.js Restore vite.config.js to match main exactly — no changes needed for this PR. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: add e2e screenshots for PR review Screenshots from local Playwright test showing: 1. HTML email rendered correctly in inbox 2. Reply editor preserving HTML content in blockquote Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: remove temporary test screenshots Screenshots have been posted as PR comment, no longer needed in tree. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: use html contentType for HTML email replies instead of rich wangEditor (rich text editor) strips block-level HTML tags inside blockquote, losing all formatting. Use contentType 'html' for HTML email replies (matching forward behavior) so content is edited as raw HTML in a textarea, preserving all formatting. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: update e2e screenshots showing HTML formatting preserved Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: remove temporary screenshots from tree Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: add SMTP send flow E2E screenshots with mailpit Screenshots showing complete SMTP HTML email reply flow: 1. View rich HTML email (gradient headers, tables, badges) 2. Reply compose with HTML mode (textarea, not wangEditor) 3. Sent box showing preserved HTML formatting 4. Mailpit inbox receiving the SMTP email 5. Mailpit email detail with full HTML rendering Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: remove temporary SMTP test screenshots from tree Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-10 17:43:31 +08:00 · 2026-03-04 22:51:27 +08:00
parent abad88b986
commit 372f7b4149
6 changed files with 227 additions and 21 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@
 - fix: |文档| 修复 User Mail API 文档中错误使用 `x-admin-auth` 的问题，改为正确的 `x-user-token`
 - fix: |前端| 修复暗色主题下邮件内容文字看不清的问题，优化纯文本邮件和 Shadow DOM 渲染的暗色模式样式
 - docs: |文档| 新增 Admin 删除邮件、删除邮箱地址、清空收件箱、清空发件箱 API 文档
+- fix: |前端| 修复回复 HTML 格式邮件时丢失原邮件 HTML 内容的问题，优先使用 HTML 原文而非纯文本

 ### Improvements

--- a/CHANGELOG_EN.md
+++ b/CHANGELOG_EN.md
@@ -20,6 +20,7 @@
 - fix: |Docs| Fix User Mail API documentation incorrectly using `x-admin-auth`, changed to correct `x-user-token`
 - fix: |Frontend| Fix email content text being unreadable in dark theme, improve dark mode styles for plain text mail and Shadow DOM rendering
 - docs: |Docs| Add Admin API documentation for delete mail, delete address, clear inbox, and clear sent items
+- fix: |Frontend| Fix reply to HTML email losing original HTML content, prefer HTML message over plain text

 ### Improvements

--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,9 @@
    "deploy:actions:telegram": "npm run build:telegram && wrangler pages deploy ./dist",
    "deploy:preview": "npm run build && wrangler pages deploy ./dist --branch preview",
    "deploy": "npm run build && wrangler pages deploy ./dist --branch production",
-    "deploy:actions": "npm run build && wrangler pages deploy ./dist"
+    "deploy:actions": "npm run build && wrangler pages deploy ./dist",
+    "test": "vitest run",
+    "test:watch": "vitest"
  },
  "dependencies": {
    "@fingerprintjs/fingerprintjs": "^5.0.1",
@@ -49,6 +51,7 @@
    "vite-plugin-wasm": "^3.5.0",
    "workbox-build": "^7.4.0",
    "workbox-window": "^7.4.0",
+    "vitest": "^3.1.0",
    "wrangler": "^4.68.1"
  },
  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
--- a/frontend/src/components/MailBox.vue
+++ b/frontend/src/components/MailBox.vue
@@ -7,6 +7,7 @@ import { CloudDownloadRound, ArrowBackIosNewFilled, ArrowForwardIosFilled, Inbox
 import { useIsMobile } from '../utils/composables'
 import { processItem } from '../utils/email-parser'
 import { utcToLocalDate } from '../utils';
+import { buildReplyModel, buildForwardModel } from '../utils/mail-actions'
 import MailContentRenderer from "./MailContentRenderer.vue";
 import AiExtractInfo from "./AiExtractInfo.vue";

@@ -276,30 +277,12 @@ const deleteMail = async () => {
 };

 const replyMail = async () => {
-  const emailRegex = /(.+?) <(.+?)>/;
-  let toMail = curMail.value.originalSource;
-  let toName = ""
-  const match = emailRegex.exec(curMail.value.source);
-  if (match) {
-    toName = match[1];
-    toMail = match[2];
-  }
-  Object.assign(sendMailModel.value, {
-    toName: toName,
-    toMail: toMail,
-    subject: `${t('reply')}: ${curMail.value.subject}`,
-    contentType: 'rich',
-    content: curMail.value.text ? `<p><br></p><blockquote>${curMail.value.text}</blockquote><p><br></p>` : '',
-  });
+  Object.assign(sendMailModel.value, buildReplyModel(curMail.value, t('reply')));
  indexTab.value = 'sendmail';
 };

 const forwardMail = async () => {
-  Object.assign(sendMailModel.value, {
-    subject: `${t('forwardMail')}: ${curMail.value.subject}`,
-    contentType: curMail.value.message ? 'html' : 'text',
-    content: curMail.value.message || curMail.value.text,
-  });
+  Object.assign(sendMailModel.value, buildForwardModel(curMail.value, t('forwardMail')));
  indexTab.value = 'sendmail';
 };

--- a/frontend/src/utils/tests/mail-actions.test.js
+++ b/frontend/src/utils/tests/mail-actions.test.js
@@ -0,0 +1,178 @@
+import { describe, it, expect } from 'vitest'
+import { buildReplyModel, buildForwardModel } from '../mail-actions'
+
+describe('buildReplyModel', () => {
+  it('uses HTML content in blockquote when message is present', () => {
+    const mail = {
+      source: 'Alice <alice@example.com>',
+      originalSource: 'alice@example.com',
+      subject: 'Hello',
+      message: '<p>HTML body</p>',
+      text: 'Plain body',
+    }
+    const result = buildReplyModel(mail, 'Reply')
+    expect(result.content).toBe(
+      '<p><br></p><blockquote><p>HTML body</p></blockquote><p><br></p>'
+    )
+    expect(result.contentType).toBe('html')
+  })
+
+  it('falls back to plain text when message is empty string', () => {
+    const mail = {
+      source: 'bob@example.com',
+      originalSource: 'bob@example.com',
+      subject: 'Hi',
+      message: '',
+      text: 'Plain text fallback',
+    }
+    const result = buildReplyModel(mail, 'Reply')
+    expect(result.content).toBe(
+      '<p><br></p><blockquote>Plain text fallback</blockquote><p><br></p>'
+    )
+  })
+
+  it('falls back to plain text when message is null', () => {
+    const mail = {
+      source: 'carol@example.com',
+      originalSource: 'carol@example.com',
+      subject: 'Test',
+      message: null,
+      text: 'Fallback text',
+    }
+    const result = buildReplyModel(mail, 'Reply')
+    expect(result.content).toBe(
+      '<p><br></p><blockquote>Fallback text</blockquote><p><br></p>'
+    )
+  })
+
+  it('returns empty content when both message and text are empty', () => {
+    const mail = {
+      source: 'dave@example.com',
+      originalSource: 'dave@example.com',
+      subject: 'Empty',
+      message: '',
+      text: '',
+    }
+    const result = buildReplyModel(mail, 'Reply')
+    expect(result.content).toBe('')
+  })
+
+  it('returns empty content when both message and text are null', () => {
+    const mail = {
+      source: 'eve@example.com',
+      originalSource: 'eve@example.com',
+      subject: 'Null',
+      message: null,
+      text: null,
+    }
+    const result = buildReplyModel(mail, 'Reply')
+    expect(result.content).toBe('')
+  })
+
+  it('parses "Name <email>" format for sender', () => {
+    const mail = {
+      source: 'Alice Smith <alice@example.com>',
+      originalSource: 'alice@example.com',
+      subject: 'Test',
+      message: '<p>body</p>',
+      text: '',
+    }
+    const result = buildReplyModel(mail, 'Reply')
+    expect(result.toName).toBe('Alice Smith')
+    expect(result.toMail).toBe('alice@example.com')
+  })
+
+  it('uses originalSource as toMail when source is plain email', () => {
+    const mail = {
+      source: 'plain@example.com',
+      originalSource: 'plain@example.com',
+      subject: 'Test',
+      message: '',
+      text: 'body',
+    }
+    const result = buildReplyModel(mail, 'Reply')
+    expect(result.toName).toBe('')
+    expect(result.toMail).toBe('plain@example.com')
+  })
+
+  it('formats subject with reply label', () => {
+    const mail = {
+      source: 'test@example.com',
+      originalSource: 'test@example.com',
+      subject: 'Original Subject',
+      message: '',
+      text: '',
+    }
+    const result = buildReplyModel(mail, 'Reply')
+    expect(result.subject).toBe('Reply: Original Subject')
+  })
+
+  it('uses html contentType for HTML email reply', () => {
+    const mail = {
+      source: 'test@example.com',
+      originalSource: 'test@example.com',
+      subject: 'Test',
+      message: '<p>html</p>',
+      text: 'plain',
+    }
+    const result = buildReplyModel(mail, 'Reply')
+    expect(result.contentType).toBe('html')
+  })
+
+  it('uses rich contentType for plain text email reply', () => {
+    const mail = {
+      source: 'test@example.com',
+      originalSource: 'test@example.com',
+      subject: 'Test',
+      message: '',
+      text: 'plain',
+    }
+    const result = buildReplyModel(mail, 'Reply')
+    expect(result.contentType).toBe('rich')
+  })
+})
+
+describe('buildForwardModel', () => {
+  it('uses html contentType when message is present', () => {
+    const mail = {
+      subject: 'FW Test',
+      message: '<p>HTML content</p>',
+      text: 'Plain content',
+    }
+    const result = buildForwardModel(mail, 'Forward')
+    expect(result.contentType).toBe('html')
+    expect(result.content).toBe('<p>HTML content</p>')
+  })
+
+  it('uses text contentType when message is empty', () => {
+    const mail = {
+      subject: 'FW Test',
+      message: '',
+      text: 'Plain text only',
+    }
+    const result = buildForwardModel(mail, 'Forward')
+    expect(result.contentType).toBe('text')
+    expect(result.content).toBe('Plain text only')
+  })
+
+  it('uses text contentType when message is null', () => {
+    const mail = {
+      subject: 'FW Test',
+      message: null,
+      text: 'Fallback text',
+    }
+    const result = buildForwardModel(mail, 'Forward')
+    expect(result.contentType).toBe('text')
+    expect(result.content).toBe('Fallback text')
+  })
+
+  it('formats subject with forward label', () => {
+    const mail = {
+      subject: 'Original',
+      message: '',
+      text: '',
+    }
+    const result = buildForwardModel(mail, 'Forward')
+    expect(result.subject).toBe('Forward: Original')
+  })
+})
--- a/frontend/src/utils/mail-actions.js
+++ b/frontend/src/utils/mail-actions.js
@@ -0,0 +1,40 @@
+/**
+ * Build the send-mail model for replying to an email.
+ * @param {Object} mail - The mail object (curMail)
+ * @param {string} replyLabel - Translated "Reply" label
+ * @returns {Object} Fields to assign onto sendMailModel
+ */
+export function buildReplyModel(mail, replyLabel) {
+  const emailRegex = /(.+?) <(.+?)>/;
+  let toMail = mail.originalSource;
+  let toName = "";
+  const match = emailRegex.exec(mail.source);
+  if (match) {
+    toName = match[1];
+    toMail = match[2];
+  }
+  const bodyContent = mail.message || mail.text;
+  return {
+    toName,
+    toMail,
+    subject: `${replyLabel}: ${mail.subject}`,
+    contentType: mail.message ? 'html' : 'rich',
+    content: bodyContent
+      ? `<p><br></p><blockquote>${bodyContent}</blockquote><p><br></p>`
+      : '',
+  };
+}
+
+/**
+ * Build the send-mail model for forwarding an email.
+ * @param {Object} mail - The mail object (curMail)
+ * @param {string} forwardLabel - Translated "Forward" label
+ * @returns {Object} Fields to assign onto sendMailModel
+ */
+export function buildForwardModel(mail, forwardLabel) {
+  return {
+    subject: `${forwardLabel}: ${mail.subject}`,
+    contentType: mail.message ? 'html' : 'text',
+    content: mail.message || mail.text,
+  };
+}