Email Rendering Playground

// Paradigm 2: React Shadow DOM Renderer (Encapsulated)

export function ShadowDOMRenderer({ emailHtml }: { emailHtml: string }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    
    // Attaching or recycling open shadow root
    let shadow = containerRef.current.shadowRoot;
    if (!shadow) {
      shadow = containerRef.current.attachShadow({ mode: 'open' });
    }
    shadow.innerHTML = `
      <style>
        :host { display: block; width: 100%; min-height: 500px; }
      </style>
      ${emailHtml}
    `;
  }, [emailHtml]);

  return <div ref={containerRef} className="w-full" />;
}

// Chrome Extension Shadow Root Scanner
function deepSearchShadowRoots(root: ParentNode | ShadowRoot): string[] {
  const results: string[] = [];
  const elements = root.querySelectorAll("*");
  
  for (const el of Array.from(elements)) {
    if (el.shadowRoot) {
      results.push(el.shadowRoot.innerHTML);
      results.push(...deepSearchShadowRoots(el.shadowRoot));
    }
  }
  return results;
}

// Paradigm 4: React Dynamic Stream Iframe Writer

export function DynamicIframeRenderer({ emailHtml }: { emailHtml: string }) {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    const doc = iframe.contentDocument || iframe.contentWindow?.document;
    if (!doc) return;

    // Direct synchronous document stream injection
    doc.open();
    doc.write(emailHtml);
    doc.close();
  }, [emailHtml]);

  return (
    <iframe
      ref={iframeRef}
      width="100%"
      height="600px"
      className="border-none"
      title="Dynamic Preview"
    />
  );
}

// Chrome Extension Same-Origin Iframe Scanner
const doc = iframe.contentDocument || iframe.contentWindow?.document;
if (doc && doc.documentElement) {
  const emailHtml = doc.documentElement.outerHTML;
  const score = calculateScore(emailHtml, iframe);
}

<!-- Paradigm 5: The Secure Offline srcdoc Iframe -->
<iframe 
  srcdoc="<!DOCTYPE html><html><body><h1>Safe Preview</h1></body></html>" 
  width="100%" 
  height="600px" 
  sandbox="allow-popups allow-same-origin"
  className="border-none rounded-xl"
></iframe>

// Chrome Extension direct srcdoc extractor
const srcdoc = iframe.getAttribute("srcdoc");
if (srcdoc && srcdoc.trim() !== "") {
  // Instantly read raw escaped HTML without waiting for iframe DOM rendering threads
  const emailHtml = srcdoc; 
}