feat: modal in portal

Author: johannes-lindgren

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
+//   TODO add enablePortalModal
 }
 
 export type CreateFieldPlugin = <Content = unknown>(

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

@@ -120,7 +120,7 @@ describe('PluginLoadedMessage', () => {
         ).toEqual(false)
       })
     })
-    describe('usePortalModal', () => {
+    describe('enablePortalModal', () => {
       it('is optional', () => {
         expect(
           isPluginLoadedMessage({
@@ -184,9 +184,9 @@ describe('PluginLoadedMessage', () => {
         true,
       )
     })
-    it('sets usePortalModal to true', () => {
+    it('sets enablePortalModal to true', () => {
       expect(pluginLoadedMessage({ uid, callbackId })).toHaveProperty(
-        'usePortalModal',
+        'enablePortalModal',
         true,
       )
     })

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

@@ -5,7 +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
-  usePortalModal?: boolean
+  enablePortalModal?: boolean
 }
 export const isPluginLoadedMessage = (
   obj: unknown,
@@ -18,9 +18,9 @@ export const isPluginLoadedMessage = (
   (!hasKey(obj, 'subscribeState') ||
     typeof obj.subscribeState === 'undefined' ||
     typeof obj.subscribeState === 'boolean') &&
-  (!hasKey(obj, 'usePortalModal') ||
-    typeof obj.usePortalModal === 'undefined' ||
-    typeof obj.usePortalModal === 'boolean')
+  (!hasKey(obj, 'enablePortalModal') ||
+    typeof obj.enablePortalModal === 'undefined' ||
+    typeof obj.enablePortalModal === 'boolean')
 
 export const pluginLoadedMessage = (
   options: Pick<PluginLoadedMessage, 'uid' | 'callbackId'>,
@@ -29,6 +29,6 @@ export const pluginLoadedMessage = (
   event: 'loaded',
   fullHeight: true,
   subscribeState: true,
-  usePortalModal: true,
+  enablePortalModal: true,
   ...options,
 })

packages/sandbox/src/components/FieldPluginSandbox.tsx

@@ -108,6 +108,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 +219,7 @@ const useSandbox = (
     (message: PluginLoadedMessage) => {
       setSubscribeState(Boolean(message.subscribeState))
       setFullHeight(Boolean(message.fullHeight))
+      setEnablePortalModal(Boolean(message.enablePortalModal))
       dispatchLoadedChanged({
         ...stateChangedData,
         action: 'loaded',
@@ -309,6 +311,7 @@ const useSandbox = (
       isModalOpen,
       height,
       fullHeight,
+      enablePortalModal,
       schema,
       url,
       fieldTypeIframe,
@@ -332,6 +335,7 @@ export const FieldPluginSandbox: FunctionComponent = () => {
       language,
       isModalOpen,
       fullHeight,
+      enablePortalModal,
       height,
       schema,
       url,
@@ -371,6 +375,7 @@ export const FieldPluginSandbox: FunctionComponent = () => {
               src={iframeSrc}
               height={height}
               isModal={isModalOpen}
+              enablePortalModal={enablePortalModal}
               fullHeight={fullHeight}
               ref={fieldTypeIframe}
             />

packages/sandbox/src/components/FieldTypePreview.tsx

@@ -9,14 +9,14 @@ import {
 } from '@mui/material'
 import { DisableShieldsNotification } from './DisableShieldsNotification'
 
-const FieldTypeModal: FunctionComponent<
+const NonPortalModal: FunctionComponent<
   PropsWithChildren<{
-    isModal: boolean
+    isNonPortalModalOpen: boolean
   }>
 > = (props) => (
   <Box
     sx={
-      props.isModal
+      props.isNonPortalModalOpen
         ? {
             position: 'fixed',
             left: 0,
@@ -38,12 +38,12 @@ const FieldTypeModal: FunctionComponent<
 
 const FieldTypeSandbox: FunctionComponent<
   PropsWithChildren<{
-    isModal: boolean
+    isNonPortalModalOpen: boolean
   }>
 > = (props) => (
   <Box
     sx={
-      props.isModal
+      props.isNonPortalModalOpen
         ? {
             bgcolor: 'background.paper',
             p: 6,
@@ -61,7 +61,7 @@ const FieldTypeSandbox: FunctionComponent<
     style={{
       display: 'flex',
       margin: 'auto',
-      width: props.isModal ? '90%' : '100%',
+      width: props.isNonPortalModalOpen ? '90%' : '100%',
     }}
   >
     {props.children}
@@ -74,22 +74,27 @@ export const FieldTypePreview = forwardRef<
     src: string | undefined
     height: number
     isModal: boolean
+    enablePortalModal: boolean
     fullHeight: boolean
     // Allows the iframe to be refreshed
     iframeKey?: number
     sx?: SxProps
   }
 >(function FieldTypePreview(props, ref) {
-  const { height, isModal, fullHeight } = props
+  const { height, isModal, fullHeight, enablePortalModal } = props
+
+  const isNonPortalModalOpen = !enablePortalModal && isModal
+  const isPortalModalOpen = enablePortalModal && isModal
+
   return (
     <Box sx={props.sx}>
       <DisableShieldsNotification />
       <Backdrop
         open={props.isModal}
         sx={{ zIndex: ({ zIndex }) => zIndex.drawer }}
       />
-      <FieldTypeModal isModal={props.isModal}>
-        <FieldTypeSandbox isModal={props.isModal}>
+      <NonPortalModal isNonPortalModalOpen={isNonPortalModalOpen}>
+        <FieldTypeSandbox isNonPortalModalOpen={isNonPortalModalOpen}>
           {typeof props.src !== 'undefined' ? (
             <Box
               ref={ref}
@@ -116,7 +121,7 @@ export const FieldTypePreview = forwardRef<
             </Alert>
           )}
         </FieldTypeSandbox>
-      </FieldTypeModal>
+      </NonPortalModal>
     </Box>
   )
 })