fix(live-preview): sends raw js objects through window.postMessage instead of json (#4354)

packages/live-preview/src/handleMessage.ts

@@ -19,37 +19,40 @@ export const handleMessage = async <T>(args: {
 }): Promise<T> => {
   const { apiRoute, depth, event, initialData, serverURL } = args
 
-  if (event.origin === serverURL && event.data) {
-    const eventData = JSON.parse(event?.data)
+  if (
+    event.origin === serverURL &&
+    event.data &&
+    typeof event.data === 'object' &&
+    event.data.type === 'payload-live-preview'
+  ) {
+    const { data, externallyUpdatedRelationship, fieldSchemaJSON } = event.data
 
-    if (eventData.type === 'payload-live-preview') {
-      if (!payloadLivePreviewFieldSchema && eventData.fieldSchemaJSON) {
-        payloadLivePreviewFieldSchema = eventData.fieldSchemaJSON
-      }
-
-      if (!payloadLivePreviewFieldSchema) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          'Payload Live Preview: No `fieldSchemaJSON` was received from the parent window. Unable to merge data.',
-        )
-
-        return initialData
-      }
-
-      const mergedData = await mergeData<T>({
-        apiRoute,
-        depth,
-        externallyUpdatedRelationship: eventData.externallyUpdatedRelationship,
-        fieldSchema: payloadLivePreviewFieldSchema,
-        incomingData: eventData.data,
-        initialData: payloadLivePreviewPreviousData || initialData,
-        serverURL,
-      })
-
-      payloadLivePreviewPreviousData = mergedData
-
-      return mergedData
+    if (!payloadLivePreviewFieldSchema && fieldSchemaJSON) {
+      payloadLivePreviewFieldSchema = fieldSchemaJSON
     }
+
+    if (!payloadLivePreviewFieldSchema) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Payload Live Preview: No `fieldSchemaJSON` was received from the parent window. Unable to merge data.',
+      )
+
+      return initialData
+    }
+
+    const mergedData = await mergeData<T>({
+      apiRoute,
+      depth,
+      externallyUpdatedRelationship,
+      fieldSchema: payloadLivePreviewFieldSchema,
+      incomingData: data,
+      initialData: payloadLivePreviewPreviousData || initialData,
+      serverURL,
+    })
+
+    payloadLivePreviewPreviousData = mergedData
+
+    return mergedData
   }
 
   return initialData

packages/live-preview/src/ready.ts

@@ -8,10 +8,10 @@ export const ready = (args: { serverURL: string }): void => {
     const windowToPostTo: Window = window?.opener || window?.parent
 
     windowToPostTo?.postMessage(
-      JSON.stringify({
+      {
         ready: true,
         type: 'payload-live-preview',
-      }),
+      },
       serverURL,
     )
   }

packages/payload/src/admin/components/views/LivePreview/Context/index.tsx

@@ -125,10 +125,13 @@ export const LivePreviewProvider: React.FC<LivePreviewProviderProps> = (props) =
   // Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
-      if (url?.startsWith(event.origin)) {
-        const data = JSON.parse(event.data)
-
-        if (data.type === 'payload-live-preview' && data.ready) {
+      if (
+        url?.startsWith(event.origin) &&
+        event.data &&
+        typeof event.data === 'object' &&
+        event.data.type === 'payload-live-preview'
+      ) {
+        if (event.data.ready) {
           setAppIsReady(true)
         }
       }

packages/payload/src/admin/components/views/LivePreview/Preview/index.tsx

@@ -51,12 +51,12 @@ export const LivePreview: React.FC<EditViewProps> = (props) => {
 
       prevWindowType.current = previewWindowType
 
-      const message = JSON.stringify({
+      const message = {
         data: values,
         externallyUpdatedRelationship: mostRecentUpdate,
         fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined,
         type: 'payload-live-preview',
-      })
+      }
 
       // Post message to external popup window
       if (previewWindowType === 'popup' && popupRef.current) {

test/live-preview/int.spec.ts

@@ -73,13 +73,13 @@ describe('Collections - Live Preview', () => {
     const handledMessage = await handleMessage({
       depth: 1,
       event: {
-        data: JSON.stringify({
+        data: {
           data: {
             title: 'Test Page (Changed)',
           },
           fieldSchemaJSON: schemaJSON,
           type: 'payload-live-preview',
-        }),
+        },
         origin: serverURL,
       } as MessageEvent,
       initialData: {
@@ -95,12 +95,12 @@ describe('Collections - Live Preview', () => {
     const handledMessage = await handleMessage({
       depth: 1,
       event: {
-        data: JSON.stringify({
+        data: {
           data: {
             title: 'Test Page (Changed)',
           },
           type: 'payload-live-preview',
-        }),
+        },
         origin: serverURL,
       } as MessageEvent,
       initialData: {