import { useState, useEffect } from "react"; import DOMPurify from "dompurify"; import juice from "juice"; import { Trans, useTranslation } from "react-i18next"; const EmailBodyEditor = ({ value, onChange, smallscreen = false, bodyName, isReset = false, isTemplateLoaded }) => { const { t } = useTranslation(); const [inputHtml, setInputHtml] = useState(""); const [cleanPreview, setCleanPreview] = useState(""); useEffect(() => { initProcessContent(); }, [isTemplateLoaded]); useEffect(() => { if (isReset) { initProcessContent(value); } }, [isReset]); const initProcessContent = () => { // 1. Sanitize immediately to strip scripts/malicious tags const sanitized = DOMPurify.sanitize(value, { USE_PROFILES: { html: true }, // Ensures basic HTML structure ADD_ATTR: ["target"] // Allow links to open in new tabs }); // 2. Inline CSS for email compatibility // Note: Juice is fast, but for huge files, you might debounce this try { const inlined = juice(sanitized); setInputHtml(inlined); onChange?.(inlined); setCleanPreview(inlined); } catch (err) { onChange?.(sanitized); setInputHtml(sanitized); // Fallback if juice fails setCleanPreview(sanitized); } }; const processContent = (value) => { // 1. Sanitize immediately to strip scripts/malicious tags const sanitized = DOMPurify.sanitize(value, { USE_PROFILES: { html: true }, // Ensures basic HTML structure ADD_ATTR: ["target"] // Allow links to open in new tabs }); // 2. Inline CSS for email compatibility // Note: Juice is fast, but for huge files, you might debounce this try { const inlined = juice(sanitized); setCleanPreview(inlined); onChange?.(inlined); } catch (err) { setCleanPreview(sanitized); // Fallback if juice fails onChange?.(sanitized); } }; const handleChange = (e) => { const value = e.target.value; setInputHtml(value); processContent(value); }; const screen = smallscreen ? "flex-col" : "flex-col md:flex-row "; const template = bodyName === "request" ? "#sample/requestemail" : bodyName === "completion" ? "#sample/completionemail" : "#"; return ( <>

{"You can create email template using "} email builder {" platform and copy html code."}

{/* Editor Pane */}