apps/wpcom-block-editor/src/calypso/iframe-bridge-server.js
function handlePreview( calypsoPort ) {
	$( '#editor' ).on( 'click', '.editor-post-preview', e => {
		e.preventDefault();
		e.stopPropagation();

		const postUrl = select( 'core/editor' ).getCurrentPostAttribute( 'link' );
		const previewChannel = new MessageChannel();

		calypsoPort.postMessage(
			{
				action: 'previewPost',
				payload: {
					postUrl: postUrl,
				},
			},
			[ previewChannel.port2 ]
		);

		const isAutosaveable = select( 'core/editor' ).isEditedPostAutosaveable();

		// If we don't need to autosave the post before previewing, then we simply
		// generate the preview.
		if ( ! isAutosaveable ) {
			sendPreviewData();
			return;
		}

		// Request an autosave before generating the preview.
		const postStatus = select( 'core/editor' ).getEditedPostAttribute( 'status' );
		const isDraft = [ 'draft', 'auto-draft' ].indexOf( postStatus ) !== -1;
		if ( isDraft ) {
			dispatch( 'core/editor' ).savePost( { isPreview: true } );
		} else {
			dispatch( 'core/editor' ).autosave( { isPreview: true } );
		}
		const unsubscribe = subscribe( () => {
			const isSavingPost = select( 'core/editor' ).isSavingPost();
			if ( ! isSavingPost ) {
				unsubscribe();
				sendPreviewData();
			}
		} );

		function sendPreviewData() {
			const previewUrl = select( 'core/editor' ).getEditedPostPreviewLink();

			const featuredImageId = select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
			const featuredImage = featuredImageId
				? get( select( 'core' ).getMedia( featuredImageId ), 'source_url' )
				: null;

			const authorId = select( 'core/editor' ).getCurrentPostAttribute( 'author' );
			const author = find( select( 'core' ).getAuthors(), { id: authorId } );
			const editedPost = {
				title: select( 'core/editor' ).getEditedPostAttribute( 'title' ),
				URL: select( 'core/editor' ).getEditedPostAttribute( 'link' ),
				excerpt: select( 'core/editor' ).getEditedPostAttribute( 'excerpt' ),
				content: select( 'core/editor' ).getEditedPostAttribute( 'content' ),
				featured_image: featuredImage,
				author: author,
			};

			previewChannel.port1.postMessage( {
				previewUrl: previewUrl,
				editedPost: editedPost,
			} );
			previewChannel.port1.close();
		}
	} );
}
function handlePreview( calypsoPort ) {
	$( '#editor' ).on( 'click', '.editor-post-preview', e => {
		e.preventDefault();
		e.stopPropagation();

		const postUrl = select( 'core/editor' ).getCurrentPostAttribute( 'link' );
		const previewChannel = new MessageChannel();

		calypsoPort.postMessage(
			{
				action: 'previewPost',
				payload: {
					postUrl: postUrl,
				},
			},
			[ previewChannel.port2 ]
		);

		const isAutosaveable = select( 'core/editor' ).isEditedPostAutosaveable();

		// If we don't need to autosave the post before previewing, then we simply
		// generate the preview.
		if ( ! isAutosaveable ) {
			sendPreviewData();
			return;
		}

		// Request an autosave before generating the preview.
		const postStatus = select( 'core/editor' ).getEditedPostAttribute( 'status' );
		const isDraft = [ 'draft', 'auto-draft' ].indexOf( postStatus ) !== -1;
		if ( isDraft ) {
			dispatch( 'core/editor' ).savePost( { isPreview: true } );
		} else {
			dispatch( 'core/editor' ).autosave( { isPreview: true } );
		}
		const unsubscribe = subscribe( () => {
			const isSavingPost = select( 'core/editor' ).isSavingPost();
			if ( ! isSavingPost ) {
				unsubscribe();
				sendPreviewData();
			}
		} );

		function sendPreviewData() {
			const previewUrl = select( 'core/editor' ).getEditedPostPreviewLink();

			const featuredImageId = select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
			const featuredImage = featuredImageId
				? get( select( 'core' ).getMedia( featuredImageId ), 'source_url' )
				: null;

			const authorId = select( 'core/editor' ).getCurrentPostAttribute( 'author' );
			const author = find( select( 'core' ).getAuthors(), { id: authorId } );
			const editedPost = {
				title: select( 'core/editor' ).getEditedPostAttribute( 'title' ),
				URL: select( 'core/editor' ).getEditedPostAttribute( 'link' ),
				excerpt: select( 'core/editor' ).getEditedPostAttribute( 'excerpt' ),
				content: select( 'core/editor' ).getEditedPostAttribute( 'content' ),
				featured_image: featuredImage,
				author: author,
			};

			previewChannel.port1.postMessage( {
				previewUrl: previewUrl,
				editedPost: editedPost,
			} );
			previewChannel.port1.close();
		}
	} );
}
Prevents the default preview flow and sends a message to the parent frame
so we preview a post from there.

@param {MessagePort} calypsoPort Port used for communication with parent frame.