48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { cn } from "@repo/ui"
|
|
import { useEffect, useRef } from "react"
|
|
|
|
interface EmailPreviewProps {
|
|
content: string
|
|
className?: string
|
|
}
|
|
|
|
export function EmailPreview({ content, className = "" }: EmailPreviewProps) {
|
|
const iframeRef = useRef<HTMLIFrameElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!iframeRef.current) return
|
|
|
|
const doc = iframeRef.current.contentDocument
|
|
if (!doc) return
|
|
|
|
// Modify the tracking pixel URL for preview
|
|
// Regex to match /img/any-id/img.png
|
|
const trackingPixelRegex = /\/img\/[^/]+\/img\.png/g
|
|
const modifiedContent = content.replace(
|
|
trackingPixelRegex,
|
|
"#invalid-tracking-pixel-for-preview"
|
|
)
|
|
|
|
// Write the content to the iframe
|
|
doc.open()
|
|
doc.write(modifiedContent)
|
|
doc.close()
|
|
|
|
// Make links open in new tab
|
|
const links = doc.getElementsByTagName("a")
|
|
for (const link of links) {
|
|
link.target = "_blank"
|
|
link.rel = "noopener noreferrer"
|
|
}
|
|
}, [content])
|
|
|
|
return (
|
|
<iframe
|
|
ref={iframeRef}
|
|
className={cn("w-full scroll-hidden rounded-md bg-white", className)}
|
|
sandbox="allow-same-origin"
|
|
title="Email Preview"
|
|
/>
|
|
)
|
|
}
|