From deee7786a03e1db9d2881b3259a7dcb3e0e9605d Mon Sep 17 00:00:00 2001 From: oiov Date: Fri, 16 May 2025 17:18:24 +0800 Subject: [PATCH] fixup email content rende error --- components/email/EmailDetail.tsx | 20 ++++----- components/email/EmailList.tsx | 2 +- components/email/EmailSidebar.tsx | 4 +- components/email/EmailViewer.tsx | 70 +++++++++++++++++++++++++++++++ lib/dto/email.ts | 16 ++++--- pnpm-lock.yaml | 30 +++++-------- public/sw.js.map | 2 +- 7 files changed, 103 insertions(+), 41 deletions(-) create mode 100644 components/email/EmailViewer.tsx diff --git a/components/email/EmailDetail.tsx b/components/email/EmailDetail.tsx index 6756d50..1f4b467 100644 --- a/components/email/EmailDetail.tsx +++ b/components/email/EmailDetail.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { ForwardEmail } from "@prisma/client"; import { File, @@ -13,13 +13,7 @@ import { } from "lucide-react"; import { siteConfig } from "@/config/site"; -import { - cn, - downloadFile, - downloadFileFromUrl, - formatDate, - formatFileSize, -} from "@/lib/utils"; +import { cn, downloadFile, formatDate, formatFileSize } from "@/lib/utils"; import { Icons } from "@/components/shared/icons"; import { BlurImg } from "../shared/blur-image"; @@ -31,6 +25,7 @@ import { TooltipProvider, TooltipTrigger, } from "../ui/tooltip"; +import EmailViewer from "./EmailViewer"; interface EmailDetailProps { email: ForwardEmail | undefined; @@ -218,16 +213,17 @@ export default function EmailDetail({ -
-
+ {/*
+ /> */} + {attachments.length > 0 && ( -
+

Attachments ({attachments.length})

diff --git a/components/email/EmailList.tsx b/components/email/EmailList.tsx index a92abd9..206266e 100644 --- a/components/email/EmailList.tsx +++ b/components/email/EmailList.tsx @@ -220,7 +220,7 @@ export default function EmailList({ - + diff --git a/components/email/EmailSidebar.tsx b/components/email/EmailSidebar.tsx index d8beb4f..97f9855 100644 --- a/components/email/EmailSidebar.tsx +++ b/components/email/EmailSidebar.tsx @@ -522,13 +522,13 @@ export default function EmailSidebar({
{!isCollapsed && (
-
+
{email.unreadCount > 0 && ( {email.unreadCount} )} {email.count} recived
- + {isAdminModel ? `Created by ${email.user || email.email.slice(0, 5)} at` : ""}{" "} diff --git a/components/email/EmailViewer.tsx b/components/email/EmailViewer.tsx new file mode 100644 index 0000000..32fb689 --- /dev/null +++ b/components/email/EmailViewer.tsx @@ -0,0 +1,70 @@ +import { useCallback, useEffect, useRef } from "react"; + +const EmailViewer = ({ email }: { email: string }) => { + const iframeRef = useRef(null); + + const updateIframe = useCallback(() => { + const iframe = iframeRef.current; + if (!iframe) return () => {}; + + const doc = iframe.contentDocument || iframe.contentWindow?.document; + if (!doc) { + console.warn("Cannot access iframe document"); + return () => {}; + } + + doc.open(); + doc.write(` + + + + + + ${email} + + `); + doc.close(); + + const adjustHeight = () => { + if (iframe.contentDocument?.body) { + const height = iframe.contentDocument.body.scrollHeight; + iframe.style.height = `${height + 20}px`; // Add padding + } + }; + + iframe.addEventListener("load", adjustHeight); + // Handle dynamic content (e.g., images) + const observer = new MutationObserver(adjustHeight); + observer.observe(doc.body, { childList: true, subtree: true }); + + return () => { + iframe.removeEventListener("load", adjustHeight); + observer.disconnect(); + }; + }, [email]); + + useEffect(() => { + const cleanup = updateIframe(); + return cleanup; + }, [updateIframe]); + + return ( +