feat(sandbox,lib,demo): modal in portal (#416)

johannes-lindgren · gustavomelki · web-flow · commit 1ceeda46babc · 2024-10-16T09:50:07.000-03:00
* feat: introduce usePortalModal to PluginLoadedMessage

* feat: modal in portal

* fix(sandbox): implementation for sandbox

* fix(sandbox): close modal from the parent app

* refactor(sandbox): better state management of modal

* feat: enablePortalModal option

* fix: ts errors

* feat: enable by default in templates

* Update packages/demo/src/components/FieldPluginDemo.tsx

* fix: templates

* fix: tests

---------

Co-authored-by: Gustavo Melki Portaluri &lt;gustavomelki@users.noreply.github.com&gt;
diff --git a/packages/cli/templates/js/src/main.js b/packages/cli/templates/js/src/main.js
@@ -15,6 +15,7 @@ let previousType = 'loading'
 
 // Establish communication with the Visual Editor
 createFieldPlugin({
+  enablePortalModal: true,
   validateContent: (content) => ({
     content: typeof content === 'number' ? content : 0,
   }),
diff --git a/packages/cli/templates/react/src/components/FieldPlugin.tsx b/packages/cli/templates/react/src/components/FieldPlugin.tsx
@@ -3,6 +3,7 @@ import { useFieldPlugin } from '@storyblok/field-plugin/react'
 
 const FieldPlugin: FunctionComponent = () => {
   const plugin = useFieldPlugin({
+    enablePortalModal: true,
     /*
     The `validateContent` parameter is optional. It allows you to
       - validate the content
diff --git a/packages/cli/templates/react/src/components/FieldPluginExample/index.tsx b/packages/cli/templates/react/src/components/FieldPluginExample/index.tsx
@@ -7,6 +7,7 @@ import { useFieldPlugin } from '@storyblok/field-plugin/react'
 
 const FieldPlugin: FunctionComponent = () => {
   const { type, data, actions } = useFieldPlugin({
+    enablePortalModal: true,
     validateContent: (content: unknown) => ({
       content: typeof content === 'number' ? content : 0,
     }),
diff --git a/packages/cli/templates/vue2/src/fieldPlugin.js b/packages/cli/templates/vue2/src/fieldPlugin.js
@@ -4,6 +4,7 @@ import { createFieldPlugin } from '@storyblok/field-plugin'
 export const fieldPluginMixin = {
   created() {
     createFieldPlugin({
+      enablePortalModal: true,
       validateContent: (content) => ({
         content: typeof content === 'number' ? content : 0,
       }),
diff --git a/packages/cli/templates/vue3/src/components/FieldPlugin.vue b/packages/cli/templates/vue3/src/components/FieldPlugin.vue
@@ -2,6 +2,7 @@
 import { useFieldPlugin } from '@storyblok/field-plugin/vue3'
 
 const plugin = useFieldPlugin({
+  enablePortalModal: true,
   /*
     The `validateContent` parameter is optional. It allows you to
       - validate the content
diff --git a/packages/cli/templates/vue3/src/components/FieldPluginExample/index.vue b/packages/cli/templates/vue3/src/components/FieldPluginExample/index.vue
@@ -6,6 +6,7 @@ import AssetSelector from './AssetSelector.vue'
 import { useFieldPlugin } from '@storyblok/field-plugin/vue3'
 
 const plugin = useFieldPlugin({
+  enablePortalModal: true,
   validateContent: (content: unknown) => ({
     content: typeof content === 'number' ? content : 0,
   }),
diff --git a/packages/demo/src/components/FieldPluginDemo.tsx b/packages/demo/src/components/FieldPluginDemo.tsx
@@ -19,6 +19,7 @@ export type PluginComponent = FunctionComponent<{
 export const FieldPluginDemo: FunctionComponent = () => {
   const { type, data, actions } = useFieldPlugin({
     validateContent,
+    enablePortalModal: true,
   })
 
   if (type === 'loading') {
diff --git a/packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts b/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)
diff --git a/packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.ts b/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
 }) => {
   // 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 }),
+        )
       })
     },
   }
diff --git a/packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/PluginLoadedMessage.test.ts b/packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/PluginLoadedMessage.test.ts
@@ -76,6 +76,92 @@ describe('PluginLoadedMessage', () => {
         ).toEqual(false)
       })
     })
+    describe('subscribeState', () => {
+      it('is optional', () => {
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+            subscribeState: undefined,
+          }),
+        ).toEqual(true)
+      })
+      it('is a boolean', () => {
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+            subscribeState: true,
+          }),
+        ).toEqual(true)
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+            subscribeState: false,
+          }),
+        ).toEqual(true)
+        const { subscribeState: _subscribeState, ...subWithoutSubscribeState } =
+          stub
+        expect(isPluginLoadedMessage(subWithoutSubscribeState)).toEqual(true)
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+            subscribeState: 'false',
+          }),
+        ).toEqual(false)
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+            subscribeState: 123,
+          }),
+        ).toEqual(false)
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+            subscribeState: null,
+          }),
+        ).toEqual(false)
+      })
+    })
+    describe('enablePortalModal', () => {
+      it('is optional', () => {
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+          }),
+        ).toEqual(true)
+      })
+      it('is a boolean', () => {
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+            enablePortalModal: true,
+          }),
+        ).toEqual(true)
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+            enablePortalModal: false,
+          }),
+        ).toEqual(true)
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+            enablePortalModal: 'false',
+          }),
+        ).toEqual(false)
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+            enablePortalModal: 123,
+          }),
+        ).toEqual(false)
+        expect(
+          isPluginLoadedMessage({
+            ...stub,
+            enablePortalModal: null,
+          }),
+        ).toEqual(false)
+      })
+    })
   })
   describe('constructor', () => {
     it('includes the uid', () => {
@@ -90,5 +176,27 @@ describe('PluginLoadedMessage', () => {
         true,
       )
     })
+    it('sets subscribeState to true', () => {
+      expect(pluginLoadedMessage({ uid, callbackId })).toHaveProperty(
+        'subscribeState',
+        true,
+      )
+    })
+    it('does not define enablePortalModal by default', () => {
+      expect(pluginLoadedMessage({ uid, callbackId })).not.toHaveProperty(
+        'enablePortalModal',
+      )
+    })
+    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)
+    })
   })
 })
diff --git a/packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/PluginLoadedMessage.ts b/packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/PluginLoadedMessage.ts
@@ -5,6 +5,7 @@ export type PluginLoadedMessage = MessageToContainer<'loaded'> & {
   // signals that the field plugin is responsible for its own scrolling in modal mode
   fullHeight?: boolean
   subscribeState?: boolean
+  enablePortalModal?: boolean
 }
 export const isPluginLoadedMessage = (
   obj: unknown,
@@ -16,10 +17,16 @@ export const isPluginLoadedMessage = (
     typeof obj.fullHeight === 'boolean') &&
   (!hasKey(obj, 'subscribeState') ||
     typeof obj.subscribeState === 'undefined' ||
-    typeof obj.subscribeState === 'boolean')
+    typeof obj.subscribeState === 'boolean') &&
+  (!hasKey(obj, 'enablePortalModal') ||
+    typeof obj.enablePortalModal === 'undefined' ||
+    typeof obj.enablePortalModal === 'boolean')
 
 export const pluginLoadedMessage = (
-  options: Pick<PluginLoadedMessage, 'uid' | 'callbackId'>,
+  options: Pick<
+    PluginLoadedMessage,
+    'uid' | 'callbackId' | 'enablePortalModal'
+  >,
 ): PluginLoadedMessage => ({
   action: 'plugin-changed',
   event: 'loaded',
diff --git a/packages/sandbox/src/components/FieldPluginSandbox.tsx b/packages/sandbox/src/components/FieldPluginSandbox.tsx
@@ -65,6 +65,11 @@ const defaultManifest = { options: [] }
 const urlQueryParam = withDefault(StringParam, defaultUrl)
 const manifestQueryParam = withDefault(JsonParam, defaultManifest)
 
+export type ModalState =
+  | 'non-modal'
+  | 'modal-with-portal'
+  | 'modal-without-portal'
+
 const useSandbox = (
   onError: (message: { title: string; message?: string }) => void,
 ) => {
@@ -108,6 +113,7 @@ const useSandbox = (
   const [isModalOpen, setModalOpen] = useState(false)
   const [height, setHeight] = useState(initialHeight)
   const [fullHeight, setFullHeight] = useState(false)
+  const [enablePortalModal, setEnablePortalModal] = useState(false)
   const [schema, setSchema] = useState<FieldPluginSchema>({
     field_type: 'preview',
     options: manifest.options,
@@ -218,6 +224,7 @@ const useSandbox = (
     (message: PluginLoadedMessage) => {
       setSubscribeState(Boolean(message.subscribeState))
       setFullHeight(Boolean(message.fullHeight))
+      setEnablePortalModal(Boolean(message.enablePortalModal))
       dispatchLoadedChanged({
         ...stateChangedData,
         action: 'loaded',
@@ -302,13 +309,23 @@ const useSandbox = (
     ],
   )
 
+  const modalState = useMemo<ModalState>(() => {
+    if (!isModalOpen) {
+      return 'non-modal'
+    } else if (enablePortalModal) {
+      return 'modal-with-portal'
+    } else {
+      return 'modal-without-portal'
+    }
+  }, [isModalOpen, enablePortalModal])
+
   return [
     {
       content,
       language,
-      isModalOpen,
       height,
       fullHeight,
+      modalState,
       schema,
       url,
       fieldTypeIframe,
@@ -320,6 +337,7 @@ const useSandbox = (
       setSchema,
       setUrl,
       randomizeUid,
+      setModalOpen,
     },
   ] as const
 }
@@ -330,15 +348,15 @@ export const FieldPluginSandbox: FunctionComponent = () => {
     {
       content,
       language,
-      isModalOpen,
+      modalState,
       fullHeight,
       height,
       schema,
       url,
       fieldTypeIframe,
       iframeSrc,
     },
-    { setContent, setLanguage, setSchema, setUrl, randomizeUid },
+    { setModalOpen, setContent, setLanguage, setSchema, setUrl, randomizeUid },
   ] = useSandbox(error)
 
   return (
@@ -370,9 +388,10 @@ export const FieldPluginSandbox: FunctionComponent = () => {
             <FieldTypePreview
               src={iframeSrc}
               height={height}
-              isModal={isModalOpen}
+              modalState={modalState}
               fullHeight={fullHeight}
               ref={fieldTypeIframe}
+              onModalChange={setModalOpen}
             />
           </CenteredContent>
           <Stack alignSelf="flex-start">
@@ -444,7 +463,7 @@ export const FieldPluginSandbox: FunctionComponent = () => {
             output={
               {
                 content,
-                isModalOpen,
+                isModalOpen: modalState !== 'non-modal',
                 translatable: schema.translatable,
                 storyLang: language,
                 options: recordFromFieldPluginOptions(schema.options),
diff --git a/packages/sandbox/src/components/FieldTypePreview.tsx b/packages/sandbox/src/components/FieldTypePreview.tsx
