Preview Dimension possible solution

Author: demetriusfeijoo

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

@@ -6,8 +6,8 @@ import type {
   LoadedMessage,
   OnMessage,
   StateChangedMessage,
-  PreviewDimensionChangeMessage,
 } from '../../messaging'
+import { PreviewDimensionResponse } from '../../messaging/pluginMessage/containerToPluginMessage/PreviewDimensionResponseMessage'
 import { getRandomUid } from '../../utils'
 
 export type CallbackId = string
@@ -19,7 +19,7 @@ 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<PreviewDimensionResponse>>
 }
 type CallbackType = keyof CallbackMap
 

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

@@ -20,10 +20,12 @@ import {
   type OnUnknownPluginMessage,
   type OnPromptAIMessage,
   type PromptAIPayload,
+  OnPreviewDimensionMessage,
 } from '../../messaging'
 import { FieldPluginActions, Initialize } from '../FieldPluginActions'
 import { pluginStateFromStateChangeMessage } from './partialPluginStateFromStateChangeMessage'
 import { callbackQueue } from './callbackQueue'
+import { PreviewDimensionResponse } from '../../messaging/pluginMessage/containerToPluginMessage/PreviewDimensionResponseMessage'
 
 export type ValidateContent<Content> = (content: unknown) => {
   content: Content
@@ -82,6 +84,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 +107,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.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 { PreviewDimensionResponse } 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: PreviewDimensionResponse,
+) => void
 export type OnContextRequestMessage = (message: ContextRequestMessage) => void
 export type OnUserContextRequestMessage = (
   message: UserContextRequestMessage,

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

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

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,
+      })
     },
     [],
   )