"use client"; import { DashboardLayout } from "@/components/layout/dashboard-layout"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { db } from "@/lib/firebase"; import { doc, getDoc } from "firebase/firestore"; import { useParams } from "next/navigation"; import React, { useEffect, useState, useRef } from "react"; import { Loader2 } from "lucide-react"; import ReactMarkdown from 'react-markdown'; import { Header } from "@/components/layout/header"; import { useAuth } from "@/hooks/use-auth"; import Image from "next/image"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; interface ContentPageSection { id: string; title: string; type: 'markdown' | 'html'; description: string; htmlContent?: string; imageUrl?: string; imagePosition?: 'top' | 'left' | 'right'; imageAlignment?: 'left' | 'center' | 'right'; imageWidth?: number; imageHeight?: number; buttonText?: string; buttonLink?: string; sectionBackgroundColor?: string; sectionBackgroundImageUrl?: string; sectionBackgroundOverlayColor?: string; titleColor?: string; titleSize?: string; contentColor?: string; contentSize?: string; contentAlignment?: 'left' | 'center' | 'right'; buttonBackgroundColor?: string; buttonTextColor?: string; isolated?: boolean; } interface CustomPage { id: string; path: string; title: string; sections: ContentPageSection[]; } interface AllPagesData { customPages: CustomPage[]; } // Component to handle HTML with scripts const HtmlRenderer: React.FC<{ htmlContent: string }> = ({ htmlContent }) => { const ref = useRef(null); useEffect(() => { if (ref.current) { const container = ref.current; container.innerHTML = htmlContent; const scripts = Array.from(container.getElementsByTagName('script')); scripts.forEach(oldScript => { const newScript = document.createElement('script'); Array.from(oldScript.attributes).forEach(attr => { newScript.setAttribute(attr.name, attr.value); }); newScript.appendChild(document.createTextNode(oldScript.innerHTML)); // Use a timeout to ensure the DOM is ready for the script setTimeout(() => { oldScript.parentNode?.replaceChild(newScript, oldScript); }, 0); }); } }, [htmlContent]); return

; }; const IsolatedHtmlSection: React.FC<{ section: ContentPageSection }> = ({ section }) => { const iframeRef = useRef(null); const uniqueId = `iframe-${section.id}`; useEffect(() => { const handleMessage = (event: MessageEvent) => { if (event.source !== iframeRef.current?.contentWindow) return; if (event.data.frameId === uniqueId) { if (iframeRef.current) { iframeRef.current.style.height = `${event.data.frameHeight}px`; } } }; window.addEventListener('message', handleMessage); return () => window.removeEventListener('message', handleMessage); }, [uniqueId]); const iframeContent = ` ${section.htmlContent || ''}