src-advisory/SRCmail
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(email): show quote bar in email replies

Browse Source 
Without the inline style in the serialized wrapper, the email reply quote bar gets lost (becomes invisible). Pull the style out into a const, and then use it in both the editor (NodeView) and the content wrapper for the email content that is sent.
This commit is contained in:
Joe Polastre
2026-07-16 17:56:38 +02:00
committed by Linus Rath
parent cb5d754113
commit 7da3d4ae80
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/email/quoted-html.ts
+6 -3
View File
@@ -10,6 +10,10 @@ import { buildSignatureBlock } from "@/components/email/signature-block";
// HTML, so parseHTML can recognise it on the way back in. // HTML, so parseHTML can recognise it on the way back in.
export const QUOTED_HTML_MARKER = "data-quoted-html"; export const QUOTED_HTML_MARKER = "data-quoted-html";
// Reusable style for the quote bar when quoting email text (like in a reply).
const QUOTE_BAR_STYLE =
"border-left:2px solid #c5c5c5;padding-left:12px;margin-top:8px;";
/** /**
* QuotedHtml — an atomic block node that carries the *verbatim* HTML of a * QuotedHtml — an atomic block node that carries the *verbatim* HTML of a
* quoted/forwarded original email. The HTML is stored in the `html` attribute * quoted/forwarded original email. The HTML is stored in the `html` attribute
@@ -68,8 +72,7 @@ export const QuotedHtml = TiptapNode.create({
const dom = document.createElement("div"); const dom = document.createElement("div");
dom.setAttribute(QUOTED_HTML_MARKER, ""); dom.setAttribute(QUOTED_HTML_MARKER, "");
dom.className = "quoted-html-island"; dom.className = "quoted-html-island";
dom.style.cssText = dom.style.cssText = QUOTE_BAR_STYLE;
"border-left:2px solid #c5c5c5;padding-left:12px;margin-top:8px;";
// CRITICAL: render the quoted email inside a Shadow Root. The app's // CRITICAL: render the quoted email inside a Shadow Root. The app's
// global CSS (Tailwind preflight, .tiptap table/td rules, box-sizing // global CSS (Tailwind preflight, .tiptap table/td rules, box-sizing
@@ -192,5 +195,5 @@ export function serializeEditorContent(editor: Editor): string {
* must be what serializeEditorContent emits too (round-trip consistency). * must be what serializeEditorContent emits too (round-trip consistency).
*/ */
export function buildQuotedHtmlBlock(sanitizedInnerHtml: string): string { export function buildQuotedHtmlBlock(sanitizedInnerHtml: string): string {
return `<div ${QUOTED_HTML_MARKER}>${sanitizedInnerHtml}</div>`; return `<div ${QUOTED_HTML_MARKER} style="${QUOTE_BAR_STYLE}">${sanitizedInnerHtml}</div>`;
} }