feat: enablePortalModal option

Author: johannes-lindgren

packages/demo/src/components/FieldPluginDemo.tsx

@@ -19,6 +19,8 @@ export type PluginComponent = FunctionComponent<{
 export const FieldPluginDemo: FunctionComponent = () => {
   const { type, data, actions } = useFieldPlugin({
     validateContent,
+    targetOrigin: 'http://localhost:7070',
+    enablePortalModal: true,
   })
 
   if (type === 'loading') {

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

@@ -12,6 +12,7 @@ export type CreateFieldPluginOptions<Content> = {
   onUpdateState: (state: FieldPluginResponse<Content>) => void
   validateContent?: ValidateContent<Content>
   targetOrigin?: string
+  enablePortalModal?: boolean
 }
 
 export type CreateFieldPlugin = <Content = unknown>(
@@ -25,6 +26,7 @@ export const createFieldPlugin: CreateFieldPlugin = ({
   onUpdateState,
   validateContent,
   targetOrigin,
+  enablePortalModal,
 }) => {
   const isEmbedded = window.parent !== window
 
@@ -107,6 +109,7 @@ export const createFieldPlugin: CreateFieldPlugin = ({
     validateContent:
       validateContent ||
       ((content) => ({ content: content as InferredContent })),
+    enablePortalModal,
   })
 
   const cleanupHeightChangeListener = createHeightChangeListener(onHeightChange)

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

@@ -28,6 +28,7 @@ export type CreatePluginActions = <Content>(options: {
   postToContainer: (message: unknown) => void
   onUpdateState: (state: FieldPluginData<Content>) => void
   validateContent: ValidateContent<Content>
+  enablePortalModal: boolean | undefined
 }) => {
   // These functions are to be called by the field plugin when the user performs actions in the UI
   actions: FieldPluginActions<Content>
@@ -46,6 +47,7 @@ export const createPluginActions: CreatePluginActions = ({
   postToContainer,
   onUpdateState,
   validateContent,
+  enablePortalModal,
 }) => {
   const { pushCallback, popCallback } = callbackQueue()
 
@@ -143,7 +145,9 @@ export const createPluginActions: CreatePluginActions = ({
           resolve(pluginStateFromStateChangeMessage(message, validateContent)),
         )
         // Request the initial state from the Visual Editor.
-        postToContainer(pluginLoadedMessage({ uid, callbackId }))
+        postToContainer(
+          pluginLoadedMessage({ uid, callbackId, enablePortalModal }),
+        )
       })
     },
   }

packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/PluginLoadedMessage.test.ts

@@ -98,7 +98,8 @@ describe('PluginLoadedMessage', () => {
             subscribeState: false,
           }),
         ).toEqual(true)
-        const { subscribeState: _subscribeState, ...subWithoutSubscribeState } = stub
+        const { subscribeState: _subscribeState, ...subWithoutSubscribeState } =
+          stub
         expect(isPluginLoadedMessage(subWithoutSubscribeState)).toEqual(true)
         expect(
           isPluginLoadedMessage({
@@ -142,7 +143,8 @@ describe('PluginLoadedMessage', () => {
             subscribeState: false,
           }),
         ).toEqual(true)
-        const { subscribeState: _subscribeState, ...subWithoutSubscribeState } = stub
+        const { subscribeState: _subscribeState, ...subWithoutSubscribeState } =
+          stub
         expect(isPluginLoadedMessage(subWithoutSubscribeState)).toEqual(true)
         expect(
           isPluginLoadedMessage({
@@ -184,11 +186,21 @@ describe('PluginLoadedMessage', () => {
         true,
       )
     })
-    it('sets enablePortalModal to true', () => {
-      expect(pluginLoadedMessage({ uid, callbackId })).toHaveProperty(
+    it('does not define enablePortalModal by default', () => {
+      expect(pluginLoadedMessage({ uid, callbackId })).not.toHaveProperty(
         'enablePortalModal',
-        true,
       )
     })
+    it('lets you define enablePortalModal', () => {
+      expect(
+        pluginLoadedMessage({ uid, callbackId, enablePortalModal: true }),
+      ).toHaveProperty('enablePortalModal', true)
+      expect(
+        pluginLoadedMessage({ uid, callbackId, enablePortalModal: false }),
+      ).toHaveProperty('enablePortalModal', false)
+      expect(
+        pluginLoadedMessage({ uid, callbackId, enablePortalModal: undefined }),
+      ).toHaveProperty('enablePortalModal', undefined)
+    })
   })
 })

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

@@ -23,12 +23,14 @@ export const isPluginLoadedMessage = (
     typeof obj.enablePortalModal === 'boolean')
 
 export const pluginLoadedMessage = (
-  options: Pick<PluginLoadedMessage, 'uid' | 'callbackId'>,
+  options: Pick<
+    PluginLoadedMessage,
+    'uid' | 'callbackId' | 'enablePortalModal'
+  >,
 ): PluginLoadedMessage => ({
   action: 'plugin-changed',
   event: 'loaded',
   fullHeight: true,
   subscribeState: true,
-  enablePortalModal: true,
   ...options,
 })