\n \n

\n ${html}\n

\n \n \n \n \n `;\n }, [html]);\n\n // Handle iframe load\n const handleIframeLoad = useCallback(() => {\n setIsLoading(false);\n \n // Listen for iframe ready message\n const handleIframeReady = (event: MessageEvent) => {\n if (event.data.type === 'iframe-ready' && event.source === iframeRef.current?.contentWindow) {\n // Iframe is ready, send initial fullscreen state\n iframeRef.current?.contentWindow?.postMessage({\n type: 'fullscreen-changed',\n isFullscreen\n }, '*');\n }\n };\n\n window.addEventListener('message', handleIframeReady);\n return () => window.removeEventListener('message', handleIframeReady);\n }, [isFullscreen]);\n\n // Notify iframe of fullscreen changes\n useEffect(() => {\n if (iframeRef.current?.contentWindow) {\n iframeRef.current.contentWindow.postMessage({\n type: 'fullscreen-changed',\n isFullscreen\n }, '*');\n }\n }, [isFullscreen]);\n\n return (\n

\n {/* External fullscreen controls */}\n {!isFullscreen && (\n

\n e.currentTarget.style.background = 'rgba(0, 0, 0, 0.9)'}\n onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(0, 0, 0, 0.7)'}\n title=\"Enter fullscreen\"\n >\n ⛶\n \n

\n )}\n\n {/* Loading indicator */}\n {isLoading && (\n

\n Loading HTML content...\n

\n )}\n\n {/* Iframe */}\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/AIWB/Chat/code/frontend/components/HTMLRenderer.tsx","extension","actionData","errors"]