46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
/* eslint-disable @woocommerce/dependency-group */
|
|
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
// @ts-ignore No types for this exist yet.
|
|
import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
|
|
import { useCallback, useEffect } from '@wordpress/element';
|
|
|
|
export const useEditorScroll = ( {
|
|
editorSelector,
|
|
scrollDirection = 'bottom',
|
|
}: {
|
|
editorSelector: string;
|
|
scrollDirection: 'top' | 'bottom';
|
|
} ) => {
|
|
const isEditorLoading = useIsSiteEditorLoading();
|
|
|
|
const scroll = useCallback( () => {
|
|
const previewContainer =
|
|
document.querySelector< HTMLIFrameElement >( editorSelector );
|
|
if ( previewContainer ) {
|
|
previewContainer.contentWindow?.scrollTo( {
|
|
left: 0,
|
|
top:
|
|
scrollDirection === 'bottom'
|
|
? previewContainer.contentDocument?.body.scrollHeight ||
|
|
0
|
|
: 0,
|
|
} );
|
|
}
|
|
}, [ scrollDirection, editorSelector ] );
|
|
|
|
useEffect( () => {
|
|
// Scroll to the bottom of the preview when the editor is done loading.
|
|
if ( ! isEditorLoading ) {
|
|
scroll();
|
|
}
|
|
}, [ isEditorLoading, scroll ] );
|
|
|
|
return {
|
|
scroll,
|
|
};
|
|
};
|