Paste a full HTML document here.
\",minHeight=400,radius=0,contentSizing=false}=props;const isStaticRenderer=useIsStaticRenderer();const iframeRef=useRef(null);const[height,setHeight]=useState(minHeight);const heightRef=useRef(minHeight);const previousHtmlRef=useRef(html);const safeMinHeight=useMemo(()=>Math.max(0,minHeight||0),[minHeight]);const setHeightIfNeeded=useCallback(nextHeight=>{if(!Number.isFinite(nextHeight))return;const normalizedHeight=Math.max(0,nextHeight);if(Math.abs(normalizedHeight-heightRef.current)<=1)return;heightRef.current=normalizedHeight;startTransition(()=>setHeight(normalizedHeight));},[]);const updateHeight=useCallback(()=>{const iframe=iframeRef.current;if(!iframe)return;try{const doc=iframe.contentDocument;if(!doc){setHeightIfNeeded(safeMinHeight);return;}let measuredHeight=0;if(!contentSizing){measuredHeight=Math.max(doc.documentElement?.scrollHeight??0,doc.documentElement?.offsetHeight??0,doc.body?.scrollHeight??0,doc.body?.offsetHeight??0);}else{const body=doc.body;const root=doc.documentElement;const bodyRectHeight=body?.getBoundingClientRect().height??0;const bodyComputedStyle=body?doc.defaultView?.getComputedStyle(body):null;const marginTop=Number.parseFloat(bodyComputedStyle?.marginTop??\"0\")||0;const marginBottom=Number.parseFloat(bodyComputedStyle?.marginBottom??\"0\")||0;const bodyWithMargins=bodyRectHeight+marginTop+marginBottom;let maxChildrenBottom=0;if(body){const bodyTop=body.getBoundingClientRect().top;const children=Array.from(body.children);for(const child of children){if([\"SCRIPT\",\"STYLE\",\"LINK\",\"META\",\"NOSCRIPT\",\"TEMPLATE\"].includes(child.tagName)){continue;}const childStyle=doc.defaultView?.getComputedStyle(child);if(childStyle?.display===\"none\")continue;const rect=child.getBoundingClientRect();const childMarginBottom=Number.parseFloat(childStyle?.marginBottom??\"0\")||0;const bottom=rect.bottom-bodyTop+childMarginBottom;if(Number.isFinite(bottom)){maxChildrenBottom=Math.max(maxChildrenBottom,bottom);}}}const intrinsicMeasuredHeight=Math.max(bodyWithMargins,maxChildrenBottom,body?.scrollHeight??0,body?.offsetHeight??0);measuredHeight=intrinsicMeasuredHeight>0?intrinsicMeasuredHeight:Math.max(root?.scrollHeight??0,root?.offsetHeight??0,body?.scrollHeight??0,body?.offsetHeight??0);}if(measuredHeight>0){setHeightIfNeeded(Math.max(measuredHeight,safeMinHeight));return;}setHeightIfNeeded(safeMinHeight);}catch(error){setHeightIfNeeded(safeMinHeight);}},[contentSizing,safeMinHeight,setHeightIfNeeded]);useEffect(()=>{heightRef.current=height;},[height]);useEffect(()=>{if(previousHtmlRef.current===html)return;previousHtmlRef.current=html;setHeightIfNeeded(safeMinHeight);},[html,safeMinHeight,setHeightIfNeeded]);useEffect(()=>{if(isStaticRenderer)return;if(typeof window===\"undefined\")return;const iframe=iframeRef.current;if(!iframe)return;let resizeObserver=null;let mutationObserver=null;let pollingInterval=null;let pollingTimeout=null;let frameId=null;let imageCleanupFns=[];const requestHeightUpdate=()=>{if(!contentSizing){updateHeight();return;}if(frameId!==null)return;frameId=window.requestAnimationFrame(()=>{frameId=null;updateHeight();});};const cleanupEmbeddedListeners=()=>{try{if(resizeObserver)resizeObserver.disconnect();resizeObserver=null;}catch(error){}try{if(mutationObserver)mutationObserver.disconnect();mutationObserver=null;}catch(error){}try{if(pollingInterval!==null){window.clearInterval(pollingInterval);pollingInterval=null;}}catch(error){}try{if(pollingTimeout!==null){window.clearTimeout(pollingTimeout);pollingTimeout=null;}}catch(error){}try{if(frameId!==null){window.cancelAnimationFrame(frameId);frameId=null;}}catch(error){}imageCleanupFns.forEach(cleanup=>{try{cleanup();}catch(error){}});imageCleanupFns=[];};const setupAutoHeight=()=>{cleanupEmbeddedListeners();requestHeightUpdate();try{const doc=iframe.contentDocument;if(!doc?.documentElement||!doc?.body)return;if(typeof ResizeObserver!==\"undefined\"){resizeObserver=new ResizeObserver(()=>{requestHeightUpdate();});resizeObserver.observe(doc.body);if(contentSizing){const children=Array.from(doc.body.children);for(const child of children){if([\"SCRIPT\",\"STYLE\",\"LINK\",\"META\",\"NOSCRIPT\",\"TEMPLATE\"].includes(child.tagName))continue;const childStyle=doc.defaultView?.getComputedStyle(child);if(childStyle?.display===\"none\")continue;resizeObserver.observe(child);}}else{resizeObserver.observe(doc.documentElement);}}if(typeof MutationObserver!==\"undefined\"){mutationObserver=new MutationObserver(()=>{requestHeightUpdate();});mutationObserver.observe(doc.body,{subtree:true,childList:true,attributes:true});}const allImages=Array.from(doc.images||[]);imageCleanupFns=allImages.map(img=>{const handleImageEvent=()=>{requestHeightUpdate();};img.addEventListener(\"load\",handleImageEvent);img.addEventListener(\"error\",handleImageEvent);return()=>{img.removeEventListener(\"load\",handleImageEvent);img.removeEventListener(\"error\",handleImageEvent);};});const fontReadyPromise=doc.fonts?.ready;if(fontReadyPromise&&typeof fontReadyPromise.then===\"function\"){fontReadyPromise.then(()=>{requestHeightUpdate();}).catch(()=>{});}pollingInterval=window.setInterval(()=>{requestHeightUpdate();},200);pollingTimeout=window.setTimeout(()=>{if(pollingInterval!==null){window.clearInterval(pollingInterval);pollingInterval=null;}},5e3);}catch(error){requestHeightUpdate();}};const onWindowResize=()=>{requestHeightUpdate();};iframe.addEventListener(\"load\",setupAutoHeight);window.addEventListener(\"resize\",onWindowResize);setupAutoHeight();return()=>{iframe.removeEventListener(\"load\",setupAutoHeight);window.removeEventListener(\"resize\",onWindowResize);cleanupEmbeddedListeners();};},[contentSizing,isStaticRenderer,updateHeight,html]);return /*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",width:\"100%\"},children:/*#__PURE__*/_jsx(\"iframe\",{ref:iframeRef,srcDoc:html,title:\"HTML Frame\",scrolling:\"none\",allow:\"clipboard-write\",style:{width:\"100%\",height:`${height}px`,minHeight:`${safeMinHeight}px`,border:0,display:\"block\",overflow:\"hidden\",borderRadius:radius}})});}addPropertyControls(HTMLFrame,{html:{type:ControlType.String,title:\"HTML\",defaultValue:\"Paste a full HTML document here.
\",displayTextArea:true},minHeight:{type:ControlType.Number,title:\"Min Height\",defaultValue:400,min:0,step:10,description:\"Fallback height before the document reports its size.\"},radius:{type:ControlType.BorderRadius,title:\"Radius\",defaultValue:\"0px\"},contentSizing:{type:ControlType.Boolean,title:\"Content Sizing\",defaultValue:false}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HTMLFrame\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicWidth\":\"720\",\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"400\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HTML_Frame.map"],"mappings":"kOAKG,SAAwB,EAAU,EAAM,CAAC,GAAK,CAAC,OAAK,iJAAiJ,YAAU,IAAI,SAAO,EAAE,gBAAc,IAAO,EAAY,EAAiB,EAAoB,EAAQ,EAAUA,EAAO,IAAI,EAAO,CAAC,EAAO,GAAWC,EAAS,CAAS,EAAQ,EAAUD,EAAO,CAAS,EAAQ,EAAgBA,EAAO,CAAI,EAAQ,EAAcE,MAAY,KAAK,IAAI,EAAE,GAAW,CAAC,EAAE,CAAC,CAAS,CAAC,EAAQ,EAAkBC,EAAY,GAAY,CAAC,GAAG,CAAC,OAAO,SAAS,CAAU,EAAE,OAAO,IAAM,EAAiB,KAAK,IAAI,EAAE,CAAU,EAAK,KAAK,IAAI,EAAiB,EAAU,OAAO,GAAG,IAAS,EAAU,QAAQ,EAAiB,MAAoB,EAAU,CAAgB,CAAC,EAAE,EAAE,CAAC,CAAC,EAAQ,EAAaA,MAAgB,CAAC,IAAM,EAAO,EAAU,QAAY,KAAc,GAAG,CAAC,IAAM,EAAI,EAAO,gBAAgB,GAAG,CAAC,EAAI,CAAC,EAAkB,CAAa,EAAE,MAAO,CAAC,IAAI,EAAe,EAAE,GAAG,CAAC,EAAe,EAAe,KAAK,IAAI,EAAI,iBAAiB,cAAc,EAAE,EAAI,iBAAiB,cAAc,EAAE,EAAI,MAAM,cAAc,EAAE,EAAI,MAAM,cAAc,CAAC,MAAO,CAAC,IAAM,EAAK,EAAI,KAAW,EAAK,EAAI,gBAAsB,EAAe,GAAM,sBAAsB,CAAC,CAAC,QAAQ,EAAQ,EAAkB,EAAK,EAAI,aAAa,iBAAiB,CAAI,EAAE,KAAW,EAAU,OAAO,WAAW,GAAmB,WAAW,GAAG,GAAG,EAAQ,EAAa,OAAO,WAAW,GAAmB,cAAc,GAAG,GAAG,EAAQ,EAAgB,EAAe,EAAU,EAAiB,EAAkB,EAAE,GAAG,EAAK,CAAC,IAAM,EAAQ,EAAK,sBAAsB,CAAC,CAAC,IAAU,EAAS,MAAM,KAAK,EAAK,QAAQ,EAAE,IAAI,IAAM,KAAS,EAAS,CAAC,GAAG,CAAC,SAAS,QAAQ,OAAO,OAAO,WAAW,UAAU,CAAC,CAAC,SAAS,EAAM,OAAO,EAAG,SAAU,IAAM,EAAW,EAAI,aAAa,iBAAiB,CAAK,EAAE,GAAG,GAAY,UAAU,OAAO,SAAS,IAAM,EAAK,EAAM,sBAAsB,EAAQ,EAAkB,OAAO,WAAW,GAAY,cAAc,GAAG,GAAG,EAAQ,EAAO,EAAK,OAAO,EAAQ,EAAqB,OAAO,SAAS,CAAM,IAAG,EAAkB,KAAK,IAAI,EAAkB,CAAM,EAAG,CAAC,CAAC,IAAM,EAAwB,KAAK,IAAI,EAAgB,EAAkB,GAAM,cAAc,EAAE,GAAM,cAAc,CAAC,EAAE,EAAe,EAAwB,EAAE,EAAwB,KAAK,IAAI,GAAM,cAAc,EAAE,GAAM,cAAc,EAAE,GAAM,cAAc,EAAE,GAAM,cAAc,CAAC,CAAE,CAAC,GAAG,EAAe,EAAE,CAAC,EAAkB,KAAK,IAAI,EAAe,CAAa,CAAC,EAAE,MAAO,CAAC,EAAkB,CAAa,CAAE,MAAa,CAAC,EAAkB,CAAa,CAAE,CAAC,EAAE,CAAC,EAAc,EAAc,CAAiB,CAAC,EAA8oG,OAA5oG,MAAc,CAAC,EAAU,QAAQ,CAAO,EAAE,CAAC,CAAM,CAAC,EAAE,MAAc,CAAI,EAAgB,UAAU,IAAY,EAAgB,QAAQ,EAAK,EAAkB,CAAa,EAAE,EAAE,CAAC,EAAK,EAAc,CAAiB,CAAC,EAAE,MAAc,CAA4B,GAAxB,GAAkC,IAAS,OAAY,OAAO,IAAM,EAAO,EAAU,QAAQ,GAAG,CAAC,EAAO,OAAO,IAAI,EAAe,KAAS,EAAiB,KAAS,EAAgB,KAAS,EAAe,KAAS,EAAQ,KAAS,EAAgB,CAAC,EAAQ,MAAwB,CAAC,GAAG,CAAC,EAAc,CAAC,EAAa,EAAE,MAAO,CAAI,IAAU,OAAY,EAAQ,EAAO,0BAA0B,CAAC,EAAQ,KAAK,EAAa,CAAE,CAAC,EAAE,EAAQ,MAA6B,CAAC,GAAG,CAAI,GAAe,EAAe,WAAW,EAAE,EAAe,IAAK,MAAa,CAAC,CAAC,GAAG,CAAI,GAAiB,EAAiB,WAAW,EAAE,EAAiB,IAAK,MAAa,CAAC,CAAC,GAAG,CAAI,IAAkB,OAAM,EAAO,cAAc,CAAe,EAAE,EAAgB,KAAM,MAAa,CAAC,CAAC,GAAG,CAAI,IAAiB,OAAM,EAAO,aAAa,CAAc,EAAE,EAAe,KAAM,MAAa,CAAC,CAAC,GAAG,CAAI,IAAU,OAAM,EAAO,qBAAqB,CAAO,EAAE,EAAQ,KAAM,MAAa,CAAC,CAAC,EAAgB,QAAQ,GAAS,CAAC,GAAG,CAAC,EAAQ,CAAE,MAAa,CAAC,CAAC,CAAC,EAAE,EAAgB,CAAC,CAAE,EAAQ,MAAoB,CAAC,EAAyB,EAAE,EAAoB,EAAE,GAAG,CAAC,IAAM,EAAI,EAAO,gBAAgB,GAAG,CAAC,GAAK,iBAAiB,CAAC,GAAK,KAAK,OAAO,GAAG,OAAO,eAAiB,IAA8G,GAAjG,EAAe,IAAI,mBAAmB,CAAC,EAAoB,CAAE,CAAC,EAAE,EAAe,QAAQ,EAAI,IAAI,EAAK,EAAc,CAAC,IAAM,EAAS,MAAM,KAAK,EAAI,KAAK,QAAQ,EAAE,IAAI,IAAM,KAAS,EAAa,CAAC,SAAS,QAAQ,OAAO,OAAO,WAAW,UAAU,CAAC,CAAC,SAAS,EAAM,OAAO,GAA4B,EAAI,aAAa,iBAAiB,CAAK,CAAA,EAAiB,UAAU,QAAgB,EAAe,QAAQ,CAAK,CAAG,MAAM,EAAe,QAAQ,EAAI,eAAe,EAAO,OAAO,iBAAmB,MAAa,EAAiB,IAAI,qBAAqB,CAAC,EAAoB,CAAE,CAAC,EAAE,EAAiB,QAAQ,EAAI,KAAK,CAAC,QAAQ,GAAK,UAAU,GAAK,WAAW,EAAI,CAAC,GAA8C,EAA3B,MAAM,KAAK,EAAI,QAAQ,CAAC,CAA2B,CAAC,CAAC,IAAI,GAAK,CAAC,IAAM,MAAqB,CAAC,EAAoB,CAAE,EAA+F,OAA7F,EAAI,iBAAiB,OAAO,CAAgB,EAAE,EAAI,iBAAiB,QAAQ,CAAgB,MAAY,CAAC,EAAI,oBAAoB,OAAO,CAAgB,EAAE,EAAI,oBAAoB,QAAQ,CAAgB,CAAE,CAAE,CAAC,EAAE,IAAM,EAAiB,EAAI,OAAO,MAAS,GAAkB,OAAO,EAAiB,MAAO,YAAY,EAAiB,SAAS,CAAC,EAAoB,CAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,EAAG,EAAgB,EAAO,gBAAgB,CAAC,EAAoB,CAAE,EAAE,GAAG,EAAE,EAAe,EAAO,eAAe,CAAI,IAAkB,OAAM,EAAO,cAAc,CAAe,EAAE,EAAgB,KAAM,EAAE,GAAG,CAAE,MAAa,CAAC,EAAoB,CAAE,CAAC,EAAQ,MAAmB,CAAC,EAAoB,CAAE,EAAqH,OAAnH,EAAO,iBAAiB,OAAO,CAAe,EAAE,EAAO,iBAAiB,SAAS,CAAc,EAAE,EAAgB,MAAY,CAAC,EAAO,oBAAoB,OAAO,CAAe,EAAE,EAAO,oBAAoB,SAAS,CAAc,EAAE,EAAyB,CAAE,CAAE,EAAE,CAAC,EAAc,EAAiB,EAAa,CAAI,CAAC,EAAsB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,MAAM,EAAE,SAAsB,EAAK,SAAS,CAAC,IAAI,EAAU,OAAO,EAAK,MAAM,aAAa,UAAU,OAAO,MAAM,kBAAkB,MAAM,CAAC,MAAM,OAAO,OAAO,GAAG,EAAO,IAAI,UAAU,GAAG,EAAc,IAAI,OAAO,EAAE,QAAQ,QAAQ,SAAS,SAAS,aAAa,CAAM,CAAC,CAAC,CAAC,CAAC,CAAE,qBAL3gM,IAAiF,IAAwE,EAKm3L,EAAoB,EAAU,CAAC,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,aAAa,iJAAiJ,gBAAgB,EAAI,EAAE,UAAU,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,aAAa,IAAI,IAAI,EAAE,KAAK,GAAG,YAAY,uDAAuD,EAAE,OAAO,CAAC,KAAK,EAAY,aAAa,MAAM,SAAS,aAAa,KAAK,EAAE,cAAc,CAAC,KAAK,EAAY,QAAQ,MAAM,iBAAiB,aAAa,EAAK,CAAC,CAAC"}