Temp/change preview dimension

packages/field-plugin/src/createFieldPlugin/createPluginActions/callbackQueue.ts

@@ -6,7 +6,7 @@ import type {
   LoadedMessage,
   OnMessage,
   StateChangedMessage,
-  PreviewDimensionChangeMessage,
+  PreviewDimensionResponseMessage,
 } from '../../messaging'
 import { getRandomUid } from '../../utils'
 
@@ -19,7 +19,10 @@ type CallbackMap = {
   stateChanged: Record<CallbackId, OnMessage<StateChangedMessage>>
   loaded: Record<CallbackId, OnMessage<LoadedMessage>>
   promptAI: Record<CallbackId, OnMessage<PromptAIResponseMessage>>
-  previewDimension: Record<CallbackId, OnMessage<PreviewDimensionChangeMessage>>
+  previewDimension: Record<
+    CallbackId,
+    OnMessage<PreviewDimensionResponseMessage>
+  >
 }
 type CallbackType = keyof CallbackMap
 

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.ts

@@ -20,6 +20,7 @@ import {
   type OnUnknownPluginMessage,
   type OnPromptAIMessage,
   type PromptAIPayload,
+  type OnPreviewDimensionMessage,
 } from '../../messaging'
 import { FieldPluginActions, Initialize } from '../FieldPluginActions'
 import { pluginStateFromStateChangeMessage } from './partialPluginStateFromStateChangeMessage'
@@ -82,6 +83,10 @@ export const createPluginActions: CreatePluginActions = ({
     popCallback('promptAI', data.callbackId)?.(data)
   }
 
+  const onPreviewDimension: OnPreviewDimensionMessage = (data) => {
+    popCallback('previewDimension', data.callbackId)
+  }
+
   const onUnknownMessage: OnUnknownPluginMessage = (data) => {
     // TODO remove side-effect, making functions in this file pure.
     //  perhaps only show this message in development mode?
@@ -101,6 +106,7 @@ export const createPluginActions: CreatePluginActions = ({
     onUserContextRequest,
     onAssetSelect,
     onPromptAI,
+    onPreviewDimension,
     onUnknownMessage,
   }
 

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts

@@ -6,6 +6,7 @@ import type {
   OnPromptAIMessage,
   OnStateChangeMessage,
   OnUnknownPluginMessage,
+  OnPreviewDimensionMessage,
 } from '../../../messaging'
 import { handlePluginMessage } from './handlePluginMessage'
 
@@ -16,6 +17,7 @@ export type PluginMessageCallbacks = {
   onUserContextRequest: OnUserContextRequestMessage
   onAssetSelect: OnAssetSelectMessage
   onPromptAI: OnPromptAIMessage
+  onPreviewDimension: OnPreviewDimensionMessage
   onUnknownMessage: OnUnknownPluginMessage
 }
 

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.test.ts

@@ -18,6 +18,7 @@ const mockCallbacks = (): PluginMessageCallbacks => ({
   onAssetSelect: vi.fn(),
   onUnknownMessage: vi.fn(),
   onLoaded: vi.fn(),
+  onPreviewDimension: vi.fn(),
   onPromptAI: vi.fn(),
 })
 

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.ts

@@ -8,6 +8,7 @@ import {
 } from '../../../messaging'
 import { PluginMessageCallbacks } from './createPluginMessageListener'
 import { isStateMessage } from '../../../messaging/pluginMessage/containerToPluginMessage/StateChangedMessage'
+import { isPreviewDimensionResponse } from '../../../messaging/pluginMessage/containerToPluginMessage//PreviewDimensionResponseMessage'
 
 export const handlePluginMessage = (
   data: unknown,
@@ -38,6 +39,8 @@ export const handlePluginMessage = (
     callbacks.onAssetSelect(data)
   } else if (isPromptAIMessage(data)) {
     callbacks.onPromptAI(data)
+  } else if (isPreviewDimensionResponse(data)) {
+    callbacks.onPreviewDimension(data)
   } else {
     callbacks.onUnknownMessage(data)
   }

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/ContainerToPlugin.ts

@@ -5,6 +5,7 @@ import { UserContextRequestMessage } from './UserContextRequestMessage'
 import { MessageToPlugin } from './MessageToPlugin'
 import { StateChangedMessage } from './StateChangedMessage'
 import { PromptAIResponseMessage } from './PromptAIResponseMessage'
+import { PreviewDimensionResponseMessage } from './PreviewDimensionResponseMessage'
 
 /**
  * The plugin container's sends it's state to the plugin
@@ -14,6 +15,9 @@ export type OnStateChangeMessage = (message: StateChangedMessage) => void
 export type OnLoadedMessage = (message: LoadedMessage) => void
 export type OnAssetSelectMessage = (message: AssetSelectedMessage) => void
 export type OnPromptAIMessage = (message: PromptAIResponseMessage) => void
+export type OnPreviewDimensionMessage = (
+  message: PreviewDimensionResponseMessage,
+) => void
 export type OnContextRequestMessage = (message: ContextRequestMessage) => void
 export type OnUserContextRequestMessage = (
   message: UserContextRequestMessage,

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/PreviewDimensionResponseMessage.test.ts

@@ -0,0 +1,32 @@
+import {
+  type PreviewDimensionResponseMessage,
+  isPreviewDimensionResponse,
+} from './PreviewDimensionResponseMessage'
+
+const stub: PreviewDimensionResponseMessage = {
+  action: 'preview-dimension',
+  uid: '-preview',
+  callbackId: 'test-callback-id',
+}
+
+describe('PreviewDimensionResponseMessage', function () {
+  it('is a message to plugin', () => {
+    expect(isPreviewDimensionResponse(stub)).toEqual(true)
+  })
+  describe('the action property', () => {
+    it('equals "preview-dimension"', () => {
+      expect(
+        isPreviewDimensionResponse({
+          ...stub,
+          action: 'preview-dimension',
+        }),
+      ).toEqual(true)
+      expect(
+        isPreviewDimensionResponse({
+          ...stub,
+          action: 'something-else',
+        }),
+      ).toEqual(false)
+    })
+  })
+})

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/PreviewDimensionResponseMessage.ts

@@ -0,0 +1,9 @@
+import { isMessageToPlugin, type MessageToPlugin } from './MessageToPlugin'
+
+export type PreviewDimensionResponseMessage =
+  MessageToPlugin<'preview-dimension'>
+
+export const isPreviewDimensionResponse = (
+  data: unknown,
+): data is PreviewDimensionResponseMessage =>
+  isMessageToPlugin(data) && data.action === 'preview-dimension'

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/index.ts

@@ -9,5 +9,6 @@ export * from './UserContextRequestMessage'
 export * from './MessageToPlugin'
 export * from './StoryData'
 export * from './Asset'
+export * from './PreviewDimensionResponseMessage'
 export * from './PromptAIResponseMessage'
 export * from './UserData'

packages/sandbox/src/components/FieldPluginSandbox.tsx

@@ -331,6 +331,14 @@ const useSandbox = (
   const onSetPreviewDimension = useCallback(
     (message: PreviewDimensionChangeMessage) => {
       setPreviewDimension(message.data)
+
+      //This would make the field plugin to clean its queue
+      //It would also be needed to be changed in the Storyfront side.
+      postToPlugin({
+        uid,
+        action: 'preview-dimension',
+        callbackId: message.callbackId,
+      })
     },
     [],
   )