diff --git a/attached_assets/image_1772298579641.png b/attached_assets/image_1772298579641.png new file mode 100644 index 0000000..d71d9cb Binary files /dev/null and b/attached_assets/image_1772298579641.png differ diff --git a/client/src/pages/article.tsx b/client/src/pages/article.tsx index 16b1f83..4a028e0 100644 --- a/client/src/pages/article.tsx +++ b/client/src/pages/article.tsx @@ -9,6 +9,7 @@ import { Skeleton } from "@/components/ui/skeleton"; import Header from "@/components/header"; import Footer from "@/components/footer"; import DOMPurify from "dompurify"; +import { useEffect } from "react"; const ALLOWED_IFRAME_DOMAINS = [ "iframe.mediadelivery.net", @@ -23,8 +24,8 @@ const ALLOWED_IFRAME_DOMAINS = [ function sanitizeContent(html: string): string { return DOMPurify.sanitize(html, { - ADD_TAGS: ["iframe"], - ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling", "src", "loading", "style"], + ADD_TAGS: ["iframe", "blockquote"], + ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling", "src", "loading", "style", "class", "data-instgrm-permalink", "data-instgrm-version", "data-instgrm-captioned", "cite"], ALLOW_UNKNOWN_PROTOCOLS: false, }); } @@ -96,6 +97,31 @@ export default function ArticlePage() { queryKey: ["/api/articles", slug], }); + useEffect(() => { + if (!article?.content) return; + if (article.content.includes("instagram.com")) { + const existing = document.querySelector('script[src*="instagram.com/embed.js"]'); + if (existing) existing.remove(); + const script = document.createElement("script"); + script.src = "https://www.instagram.com/embed.js"; + script.async = true; + document.body.appendChild(script); + script.onload = () => { + if ((window as any).instgrm) { + (window as any).instgrm.Embeds.process(); + } + }; + } + if (article.content.includes("tiktok.com")) { + if (!document.querySelector('script[src*="tiktok.com/embed.js"]')) { + const script = document.createElement("script"); + script.src = "https://www.tiktok.com/embed.js"; + script.async = true; + document.body.appendChild(script); + } + } + }, [article?.content]); + if (isLoading) { return (
@@ -178,7 +204,8 @@ export default function ArticlePage() { prose-img:rounded-md prose-img:w-full prose-img:object-cover [&_iframe]:rounded-md [&_iframe]:my-6 [&_iframe]:max-w-full [&_div[style]]:flex [&_div[style]]:justify-center - [&_blockquote]:border-l-primary [&_blockquote]:bg-accent/50 [&_blockquote]:rounded-r-md [&_blockquote]:py-1" + [&_blockquote:not(.instagram-media)]:border-l-primary [&_blockquote:not(.instagram-media)]:bg-accent/50 [&_blockquote:not(.instagram-media)]:rounded-r-md [&_blockquote:not(.instagram-media)]:py-1 + [&_.instagram-media]:!bg-transparent [&_.instagram-media]:!border-0 [&_.instagram-media]:!shadow-none [&_.instagram-media]:!p-0 [&_.instagram-media]:mx-auto" dangerouslySetInnerHTML={{ __html: sanitizeContent(article.content) }} data-testid="article-content" />