refactor(sandbox): better state management of modal

Author: johannes-lindgren

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

@@ -12,7 +12,6 @@ export type CreateFieldPluginOptions<Content> = {
   onUpdateState: (state: FieldPluginResponse<Content>) => void
   validateContent?: ValidateContent<Content>
   targetOrigin?: string
-//   TODO add enablePortalModal
 }
 
 export type CreateFieldPlugin = <Content = unknown>(

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,
 ) => {
@@ -304,14 +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,
-      enablePortalModal,
+      modalState,
       schema,
       url,
       fieldTypeIframe,
@@ -334,9 +348,8 @@ export const FieldPluginSandbox: FunctionComponent = () => {
     {
       content,
       language,
-      isModalOpen,
+      modalState,
       fullHeight,
-      enablePortalModal,
       height,
       schema,
       url,
@@ -375,8 +388,7 @@ export const FieldPluginSandbox: FunctionComponent = () => {
             <FieldTypePreview
               src={iframeSrc}
               height={height}
-              isModal={isModalOpen}
-              enablePortalModal={enablePortalModal}
+              modalState={modalState}
               fullHeight={fullHeight}
               ref={fieldTypeIframe}
               onModalChange={setModalOpen}
@@ -451,7 +463,7 @@ export const FieldPluginSandbox: FunctionComponent = () => {
             output={
               {
                 content,
-                isModalOpen,
+                isModalOpen: modalState !== 'non-modal',
                 translatable: schema.translatable,
                 storyLang: language,
                 options: recordFromFieldPluginOptions(schema.options),

packages/sandbox/src/components/FieldTypePreview.tsx

@@ -16,15 +16,16 @@ import {
 } from '@mui/material'
 import { DisableShieldsNotification } from './DisableShieldsNotification'
 import { CloseIcon } from '@storyblok/mui'
+import { ModalState } from './FieldPluginSandbox'
 
 const NonPortalModal: FunctionComponent<
   PropsWithChildren<{
-    isNonPortalModalOpen: boolean
+    isModal: boolean
   }>
 > = (props) => (
   <Box
     sx={
-      props.isNonPortalModalOpen
+      props.isModal
         ? {
             position: 'fixed',
             left: 0,
@@ -46,12 +47,12 @@ const NonPortalModal: FunctionComponent<
 
 const FieldTypeSandbox: FunctionComponent<
   PropsWithChildren<{
-    isNonPortalModalOpen: boolean
+    isModal: boolean
   }>
 > = (props) => (
   <Box
     sx={
-      props.isNonPortalModalOpen
+      props.isModal
         ? {
             bgcolor: 'background.paper',
             p: 6,
@@ -69,7 +70,7 @@ const FieldTypeSandbox: FunctionComponent<
     style={{
       display: 'flex',
       margin: 'auto',
-      width: props.isNonPortalModalOpen ? '90%' : '100%',
+      width: props.isModal ? '90%' : '100%',
     }}
   >
     {props.children}
@@ -132,28 +133,23 @@ export const FieldTypePreview = forwardRef<
   {
     src: string | undefined
     height: number
-    isModal: boolean
-    enablePortalModal: boolean
+    modalState: ModalState
     fullHeight: boolean
     // Allows the iframe to be refreshed
     iframeKey?: number
     sx?: SxProps
     onModalChange: (isModal: boolean) => void
   }
 >(function FieldTypePreview(props, ref) {
-  const { height, isModal, fullHeight, enablePortalModal, onModalChange } =
-    props
-
-  const isNonPortalModalOpen = !enablePortalModal && isModal
-  const isPortalModalOpen = enablePortalModal && isModal
+  const { height, fullHeight, modalState, onModalChange } = props
 
   const setTeleported = (el: HTMLIFrameElement | null) => {
-    if (isPortalModalOpen) {
+    if (modalState === 'modal-with-portal') {
       setRef(ref, el)
     }
   }
   const setNonTeleported = (el: HTMLIFrameElement | null) => {
-    if (!isPortalModalOpen) {
+    if (modalState !== 'modal-with-portal') {
       setRef(ref, el)
     }
   }
@@ -166,7 +162,7 @@ export const FieldTypePreview = forwardRef<
     <Box sx={props.sx}>
       <DisableShieldsNotification />
       <Dialog
-        open={isPortalModalOpen}
+        open={modalState === 'modal-with-portal'}
         fullScreen
         sx={{
           padding: 10,
@@ -197,28 +193,33 @@ export const FieldTypePreview = forwardRef<
           src={props.src}
           ref={setTeleported}
           fullHeight={fullHeight}
-          modal={isModal}
+          modal={modalState === 'modal-with-portal'}
           height={height}
         />
       </Dialog>
-      <Backdrop
-        open={isNonPortalModalOpen}
-        sx={{ zIndex: ({ zIndex }) => zIndex.drawer }}
-      />
-      <NonPortalModal isNonPortalModalOpen={isNonPortalModalOpen}>
-        <FieldTypeSandbox isNonPortalModalOpen={isNonPortalModalOpen}>
-          {!isPortalModalOpen && (
-            <FieldPluginIframe
-              key={props.iframeKey}
-              src={props.src}
-              ref={setNonTeleported}
-              fullHeight={fullHeight}
-              modal={isModal}
-              height={height}
+      {
+        // Always render it unless the modal with portal is open; then we don't want to render thois
+        modalState !== 'modal-with-portal' && (
+          <>
+            <Backdrop
+              open={modalState === 'modal-without-portal'}
+              sx={{ zIndex: ({ zIndex }) => zIndex.drawer }}
             />
-          )}
-        </FieldTypeSandbox>
-      </NonPortalModal>
+            <NonPortalModal isModal={modalState === 'modal-without-portal'}>
+              <FieldTypeSandbox isModal={modalState === 'modal-without-portal'}>
+                <FieldPluginIframe
+                  key={props.iframeKey}
+                  src={props.src}
+                  ref={setNonTeleported}
+                  fullHeight={fullHeight}
+                  modal={modalState === 'modal-without-portal'}
+                  height={height}
+                />
+              </FieldTypeSandbox>
+            </NonPortalModal>
+          </>
+        )
+      }
     </Box>
   )
 })