From 4790d4e30f48d573ed4fba1d401e4b5a66fc63ed Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 3 Oct 2022 18:21:09 +1300 Subject: [PATCH 1/3] use the document load event listener to set the initial iFrame height --- .../block-editor/resizable-editor.js | 44 +++++-------------- 1 file changed, 11 insertions(+), 33 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/edit-site/src/components/block-editor/resizable-editor.js index c309e65a49d20..c956a2bb8a344 100644 --- a/packages/edit-site/src/components/block-editor/resizable-editor.js +++ b/packages/edit-site/src/components/block-editor/resizable-editor.js @@ -57,54 +57,32 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) { useEffect( function autoResizeIframeHeight() { - const iframe = iframeRef.current; - - if ( ! iframe || ! enableResizing ) { + if ( ! iframeRef.current || ! enableResizing ) { return; } - let timeoutId = null; - - function resizeHeight() { - if ( ! timeoutId ) { - // Throttle the updates on timeout. This code previously - // used `requestAnimationFrame`, but that seems to not - // always work before an iframe is ready. - timeoutId = iframe.contentWindow.setTimeout( () => { - const { readyState } = iframe.contentDocument; - - // Continue deferring the timeout until the document is ready. - // Only then will it have a height. - if ( - readyState !== 'interactive' && - readyState !== 'complete' - ) { - resizeHeight(); - return; - } - - setHeight( iframe.contentDocument.body.scrollHeight ); - timeoutId = null; - - // 30 frames per second. - }, 1000 / 30 ); - } + const iframe = iframeRef.current; + + function setFrameHeight() { + setHeight( iframe.contentDocument.body.scrollHeight ); } + iframe.addEventListener( 'load', setFrameHeight ); + let resizeObserver; function registerObserver() { resizeObserver?.disconnect(); resizeObserver = new iframe.contentWindow.ResizeObserver( - resizeHeight + setFrameHeight ); // Observe the body, since the `html` element seems to always // have a height of `100%`. resizeObserver.observe( iframe.contentDocument.body ); - resizeHeight(); + setFrameHeight(); } // This is only required in Firefox for some unknown reasons. @@ -113,12 +91,12 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) { registerObserver(); return () => { - iframe.contentWindow?.clearTimeout( timeoutId ); resizeObserver?.disconnect(); iframe.removeEventListener( 'load', registerObserver ); + iframe.removeEventListener( 'load', setFrameHeight ); }; }, - [ enableResizing ] + [ enableResizing, iframeRef.current ] ); const resizeWidthBy = useCallback( ( deltaPixels ) => { From b5defbde7ab6f5478fceee04a641c13e32202926 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 4 Oct 2022 10:35:31 +1300 Subject: [PATCH 2/3] Remove the duplicate call to setFrameHeight --- .../edit-site/src/components/block-editor/resizable-editor.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/edit-site/src/components/block-editor/resizable-editor.js index c956a2bb8a344..d2fe698d75988 100644 --- a/packages/edit-site/src/components/block-editor/resizable-editor.js +++ b/packages/edit-site/src/components/block-editor/resizable-editor.js @@ -67,8 +67,6 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) { setHeight( iframe.contentDocument.body.scrollHeight ); } - iframe.addEventListener( 'load', setFrameHeight ); - let resizeObserver; function registerObserver() { @@ -93,7 +91,6 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) { return () => { resizeObserver?.disconnect(); iframe.removeEventListener( 'load', registerObserver ); - iframe.removeEventListener( 'load', setFrameHeight ); }; }, [ enableResizing, iframeRef.current ] From d021d2ba8a64839157d6494196214348009a24e4 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 4 Oct 2022 11:18:05 +1300 Subject: [PATCH 3/3] Remove additional call to registerObserver --- .../edit-site/src/components/block-editor/resizable-editor.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/edit-site/src/components/block-editor/resizable-editor.js index d2fe698d75988..2e76b5a2a1e98 100644 --- a/packages/edit-site/src/components/block-editor/resizable-editor.js +++ b/packages/edit-site/src/components/block-editor/resizable-editor.js @@ -79,14 +79,10 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) { // Observe the body, since the `html` element seems to always // have a height of `100%`. resizeObserver.observe( iframe.contentDocument.body ); - setFrameHeight(); } - // This is only required in Firefox for some unknown reasons. iframe.addEventListener( 'load', registerObserver ); - // This is required in Chrome and Safari. - registerObserver(); return () => { resizeObserver?.disconnect();