Automatically resizing form previews

src/components/preview-form.tsx

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import * as React from 'react';
+import * as _ from 'lodash';
+
+import { baseUrl } from '@/globals';
+
+type PreviewProps = {
+	formId: string;
+	embedCode: string;
+};
+
+type PreviewState = {
+	uniqueId: string;
+};
+
+class PreviewForm extends React.Component<PreviewProps, PreviewState> {
+	constructor( props: any ) {
+		super( props );
+
+		// Generate a unique identifier, so that the embed script can be identified
+		// and removed from the page once it is no longer needed.
+		this.state = {
+			uniqueId: _.uniqueId(),
+		};
+	}
+
+	componentDidMount() {
+		this.loadEmbedScript();
+	}
+
+	componentWillUnmount() {
+		this.removeEmbedScript();
+	}
+
+	// Force the embed script to load, which makes Iframes in the editor resize properly.
+	loadEmbedScript( callback?: Function ) {
+		const existingScript = document.getElementById( `cog-embed-script-${ this.state.uniqueId }` );
+
+		if ( ! existingScript ) {
+			const script = document.createElement( 'script' );
+			script.src = `${ baseUrl }/f/iframe.js`;
+			script.id = `cog-embed-script-${ this.state.uniqueId }`;
+			document.body.appendChild( script );
+
+			script.onload = () => {
+				if ( callback ) callback();
+			};
+		}
+
+		if ( existingScript && callback ) callback();
+	}
+
+	// Clean up before block is removed
+	removeEmbedScript() {
+		const existingScript = document.getElementById( `cog-embed-script-${ this.state.uniqueId }` );
+
+		if ( existingScript ) {
+			existingScript.remove();
+		}
+	}
+
+	render() {
+		return (
+			<div>
+				<div className="focus-grabber"></div>
+				<div
+					className="cog-wp-embed cog-wp-embed__preview"
+					dangerouslySetInnerHTML={ { __html: this.props.embedCode } } // Must be Iframe embed code as others do not work in Gutenberg
+				></div>
+			</div>
+		);
+	}
+}
+
+export default PreviewForm;

src/edit.tsx

@@ -6,17 +6,16 @@ import { Placeholder, ExternalLink } from '@wordpress/components';
 
 import CogIcon from '@/assets/cogicon';
 import SelectDialog from '@/components/select-dialog';
+import PreviewForm from '@/components/preview-form';
 import { BlockAttributes, EmbedMode } from '@/types';
 
 const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
-	const handleForm = ( form: string ) => {
+	const handleForm = ( form: { [key: string]: any } ) => {
-		const formObj = JSON.parse( form );
-
 		setAttributes( {
-			formId: formObj.formId,
+			formId: form.formId,
-			seamlessEmbedCode: formObj.embedCodes.Seamless,
+			seamlessEmbedCode: form.embedCodes.Seamless,
-			iframeEmbedCode: formObj.embedCodes.IFrame,
+			iframeEmbedCode: form.embedCodes.IFrame,
-			ampEmbedCode: formObj.embedCodes.Amp,
+			ampEmbedCode: form.embedCodes.Amp,
 			embedMode: EmbedMode.Seamless,
 		} );
 	};
@@ -47,11 +46,11 @@ const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttri
 	}
 
 	return (
-		<div
+		<PreviewForm
-			className="cog-wp-embed cog-wp-embed__preview"
+			formId={ attributes.formId } // TODO: this should actually be the form GUID
-			dangerouslySetInnerHTML={ { __html: attributes.iframeEmbedCode } } // Must be Iframe embed code as others do not work in Gutenberg
+			embedCode={ attributes.iframeEmbedCode }
-		></div>
+		/>
 	);
-}
+};
 
 export default Edit;

src/styles/editor.scss

@@ -15,6 +15,13 @@
   margin: initial;
 }
 
-.cog-wp-embed__preview > iframe {
+// .cog-wp-embed__preview > iframe {
-	height: 500px;
+// 	height: 500px;
+// }
+
+.focus-grabber {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
 }