feat(SHAPE-7911): add modalSize object to the toggleModal message

Author: Dawntraoz

packages/cli/templates/react/src/components/FieldPluginExample/ModalToggle.tsx

@@ -2,7 +2,10 @@ import { FunctionComponent } from 'react'
 
 const ModalToggle: FunctionComponent<{
   isModalOpen: boolean
-  setModalOpen: (isModalOpen: boolean) => void
+  setModalOpen: (
+    isModalOpen: boolean,
+    modalSize?: { width: string; height: string },
+  ) => void
 }> = ({ isModalOpen, setModalOpen }) => {
   return (
     <div>

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

@@ -69,8 +69,7 @@ export const createPluginActions: CreatePluginActions = ({
     // TODO remove side-effect, making functions in this file pure.
     //  perhaps only show this message in development mode?
     console.debug(
-      `Plugin received a message from container of an unknown action type "${
-        data.action
+      `Plugin received a message from container of an unknown action type "${data.action
       }". You may need to upgrade the version of the @storyblok/field-plugin library. Full message: ${JSON.stringify(
         data,
       )}`,
@@ -107,15 +106,15 @@ export const createPluginActions: CreatePluginActions = ({
           )
         })
       },
-      setModalOpen: (isModalOpen) => {
+      setModalOpen: (isModalOpen: boolean, modalSize?: { width: string, height: string }) => {
         return new Promise((resolve) => {
           const callbackId = pushCallback('stateChanged', (message) =>
             resolve(
               pluginStateFromStateChangeMessage(message, validateContent),
             ),
           )
           postToContainer(
-            modalChangeMessage({ uid, callbackId, status: isModalOpen }),
+            modalChangeMessage({ uid, callbackId, status: isModalOpen, modalSize }),
           )
         })
       },

packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/ModalChangeMessage.ts

@@ -3,6 +3,7 @@ import { isMessageToContainer, MessageToContainer } from './MessageToContainer'
 
 export type ModalChangeMessage = MessageToContainer<'toggleModal'> & {
   status: boolean
+  modalSize?: { width: string; height: string }
 }
 export const isModalChangeMessage = (obj: unknown): obj is ModalChangeMessage =>
   isMessageToContainer(obj) &&
@@ -11,7 +12,7 @@ export const isModalChangeMessage = (obj: unknown): obj is ModalChangeMessage =>
   typeof obj.status === 'boolean'
 
 export const modalChangeMessage = (
-  options: Pick<ModalChangeMessage, 'uid' | 'callbackId' | 'status'>,
+  options: Pick<ModalChangeMessage, 'uid' | 'callbackId' | 'status' | 'modalSize'>,
 ): ModalChangeMessage => ({
   action: 'plugin-changed',
   event: 'toggleModal',