diff --git a/src/components/preview-form.tsx b/src/components/preview-form.tsx new file mode 100644 index 0000000..7df0cd9 --- /dev/null +++ b/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 { + 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 ( +
+
+
+
+ ); + } +} + +export default PreviewForm; diff --git a/src/edit.tsx b/src/edit.tsx index e654d00..f00e35c 100644 --- a/src/edit.tsx +++ b/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> = ( { attributes, setAttributes, className } ) => { - const handleForm = ( form: string ) => { - const formObj = JSON.parse( form ); - + const handleForm = ( form: { [key: string]: any } ) => { setAttributes( { - formId: formObj.formId, - seamlessEmbedCode: formObj.embedCodes.Seamless, - iframeEmbedCode: formObj.embedCodes.IFrame, - ampEmbedCode: formObj.embedCodes.Amp, + formId: form.formId, + seamlessEmbedCode: form.embedCodes.Seamless, + iframeEmbedCode: form.embedCodes.IFrame, + ampEmbedCode: form.embedCodes.Amp, embedMode: EmbedMode.Seamless, } ); }; @@ -47,11 +46,11 @@ const Edit: React.FC> = ( { attributes, setAttri } return ( -
+ ); -} +}; export default Edit; diff --git a/src/styles/editor.scss b/src/styles/editor.scss index ed5fa55..112089d 100644 --- a/src/styles/editor.scss +++ b/src/styles/editor.scss @@ -15,6 +15,13 @@ margin: initial; } -.cog-wp-embed__preview > iframe { - height: 500px; +// .cog-wp-embed__preview > iframe { +// height: 500px; +// } + +.focus-grabber { + position: absolute; + width: 100%; + height: 100%; + z-index: 1; }