Layout Preview

onClick

When a CMS component is clicked its position in the JSON array is posted to the preview in order to scroll to the correct content

iframe.contentWindow.postMessage({ event: 'click', data: focused }, '*');

onMouseOver

When a CMS component is mouse overed its position in the JSON array is posted to the preview in order to highlight the correct content

iframe.contentWindow.postMessage({ event: 'hover', data: highlighted }, '*');

onReload

When the CMS serverState is update from the server, and we potentially have a large data change, the data state is posted to the preview to refresh the previewed content.

iframe.contentWindow.postMessage({ event: 'reload', data: processPreviewData(preview) }, '*');

onUpdate

When a CMS component settings field is updated the data is posted to the preview to reflect realtime changes.

iframe.contentWindow.postMessage({ event: 'updateProp', data: previewProp }, '*');

onUpdateOverride

When an article has data overridden the data is posted to the preview to reflect realtime changes.

iframe.contentWindow.postMessage({ event: 'updateOverride', data: previewOverride }, '*');

onHydrationReceived

When the preview frontend has hydrated and the notice has been posted to the CMS we post the dataState and any potential changes to the preview.

if (typeof preview.components !== 'undefined') {
iframe.contentWindow.postMessage({ event: 'reload', data: processPreviewData(preview) }, '*');
}
iframe.contentWindow.postMessage({ event: 'updateProp', data: previewProp }, '*');
iframe.contentWindow.postMessage({ event: 'updateOverride', data: previewOverride }, '*');
}

Listener

Events from the preview:

  • hydrated informs the CMS the preview is ready for data.
  • hover allows highlight of CMS component when onMouseOver within preview.
  • click allows scroll to CMS component when onClick within preview.

Are setup in two different locations, this is due to how the popout window is constructed using React.portal.
Events from the nested preview are handled in /src/layouts/LayouCreate.js
Events from the popout preview are handled in
/src/components/layout/preview/LayoutPreviewWindow.js