sanity 3.83.1-canary.23 → 3.84.1-next.0

package/src/presentation/document/LocationsBanner.tsx

@@ -110,26 +110,19 @@ export function LocationsBanner(props: {
               </Flex>
             </Card>
             <Stack hidden={!expanded} marginTop={1} space={1}>
-              {locations.map((l) => {
-                let active = false
-                if (
-                  (options.name || DEFAULT_TOOL_NAME) === presentationName &&
-                  presentation?.params.preview
-                ) {
-                  active = areUrlsMatching(presentation.params.preview, l.href)
-                }
-
-                return (
-                  <LocationItem
-                    active={active}
-                    documentId={documentId}
-                    documentType={schemaType.name}
-                    key={l.href}
-                    node={l}
-                    toolName={options.name || DEFAULT_TOOL_NAME}
-                  />
-                )
-              })}
+              {locations.map((l, index) => (
+                <LocationItem
+                  active={
+                    (options.name || DEFAULT_TOOL_NAME) === presentationName &&
+                    l.href === presentation?.params.preview
+                  }
+                  documentId={documentId}
+                  documentType={schemaType.name}
+                  key={index}
+                  node={l}
+                  toolName={options.name || DEFAULT_TOOL_NAME}
+                />
+              ))}
             </Stack>
           </>
         )}
@@ -196,35 +189,3 @@ function LocationItem(props: {
     </Card>
   )
 }
-
-/**
- * Compares two URLs to determine if they match based on origin, pathname, and search parameters
- * The previewUrl should have all the search parameters that are in the locationUrl
- */
-function areUrlsMatching(previewUrlString: string, locationUrlString: string): boolean {
-  try {
-    const previewUrl = new URL(previewUrlString, location.origin)
-    const locationUrl = new URL(locationUrlString, previewUrl.origin)
-
-    // First compare origin and pathname
-    if (previewUrl.origin !== locationUrl.origin || previewUrl.pathname !== locationUrl.pathname) {
-      return false
-    }
-
-    // Then check search params
-    // All search params in locationUrl must exist with the same values in previewUrl
-    const locationParams = new URLSearchParams(locationUrl.search)
-    const previewParams = new URLSearchParams(previewUrl.search)
-
-    for (const [key, value] of locationParams.entries()) {
-      if (previewParams.get(key) !== value) {
-        return false
-      }
-    }
-
-    return true
-  } catch {
-    // If URL parsing fails, URLs don't match
-    return false
-  }
-}

package/src/presentation/i18n/resources.ts

@@ -35,16 +35,6 @@ export default {
   'presentation-error.label': 'Error message',
   /** The text shown when the preview frame cannot connect to Presentation */
   'preview-frame.connection.error.text': 'Could not connect to the preview',
-  /** The title of the error toast that shows when the preview iframe times out while waiting for a connection over comlink to establish, and the root cause is discovered to be that the iframe is loading on an URL origin that's not in the allow list. */
-  'preview-frame.configuration.error.title': 'Preview URL origin mismatch',
-  /** The toast description for the error message explaining that the iframe is blocked from loading due to a security mismatch. */
-  'preview-frame.configuration.error.description':
-    'The preview iframe is configured to load <Code>{{targetOrigin}}</Code>, but the reported origin is <Code>{{reportedOrigin}}</Code>. Presentation Tool is unable to connect to unknown origins for security purposes. Update your <Code>presentationTool.allowOrigins</Code> configuration to allow connecting to Visual Editing and Loaders.',
-  /** The title of the error toast that shows when attempting to navigate to a preview URL origin that's not in the allow list. */
-  'preview-search-param.configuration.error.title': 'Blocked preview URL',
-  /** The toast description for the error message explaining that the iframe won't navigate to the new preview URL due to an URL origin security mismatch. */
-  'preview-search-param.configuration.error.description':
-    'The router wants to navigate to <Code>{{previewSearchParam}}</Code>, but the origin <Code>{{blockedOrigin}}</Code> is not allowed. Update your <Code>presentationTool.allowOrigins</Code> configuration to allow it.',
   /** The text shown on the button for dismissing the error overlay after a timeout */
   'preview-frame.continue-button.text': 'Continue anyway',
   /** The label for the loader's connection status */

package/src/presentation/index.ts

@@ -2,6 +2,19 @@ export {useSharedState} from './overlays/useSharedState'
 export * from './plugin'
 export type {PreviewProps} from './preview/Preview'
 export type {PreviewHeaderProps} from './preview/PreviewHeader'
+export {
+  ACTION_IFRAME_LOADED,
+  ACTION_IFRAME_REFRESH,
+  ACTION_IFRAME_RELOAD,
+  ACTION_VISUAL_EDITING_OVERLAYS_TOGGLE,
+  type DispatchPresentationAction,
+  type IframeLoadedAction,
+  type IframeRefreshAction,
+  type IframeReloadAction,
+  type PresentationAction,
+  type PresentationState,
+  type VisualEditingOverlaysToggleAction,
+} from './reducers/presentationReducer'
 export type {
   CombinedSearchParams,
   ConnectionStatus,

package/src/presentation/{util → lib}/parse.ts

@@ -1,7 +1,6 @@
 import {studioPath} from '@sanity/client/csm'
 import {urlStringToPath} from '@sanity/visual-editing-csm'
-
-import {type PresentationStateParams} from '../types'
+import type {PresentationStateParams} from '../types'
 
 export function parseId(rawId: string | undefined): string | undefined {
   if (rawId === undefined) {

package/src/presentation/overlays/schema/PostMessageSchema.tsx

@@ -75,7 +75,6 @@ function PostMessageSchema(props: PostMessageSchemaProps): React.JSX.Element | n
           const arr = Array.from(paths)
           const projection = arr.map((path, i) => `"${i}": ${path}[0]._type`).join(',')
           const query = `*[_id == $id][0]{${projection}}`
-          // Should implement max 25 concurrent queries here
           const result = await client.fetch(
             query,
             {id: getPublishedId(id)},

package/src/presentation/panels/usePanelsStorage.ts

@@ -1,6 +1,6 @@
 import {useMemo} from 'react'
 
-import {debounce} from '../util/debounce'
+import {debounce} from '../lib/debounce'
 import {type PanelElement} from './types'
 
 const itemKey = 'presentation/panels'

package/src/presentation/preview/IFrame.tsx

@@ -1,75 +1,7 @@
 import {Box} from '@sanity/ui'
 import {motion, type VariantLabels, type Variants} from 'framer-motion'
-import {forwardRef, type ReactEventHandler, useEffect, useImperativeHandle, useRef} from 'react'
-import {createGlobalStyle, styled} from 'styled-components'
-
-import {useId} from '../useId'
-
-interface IFrameProps {
-  animate: VariantLabels
-  initial: VariantLabels
-  onLoad: ReactEventHandler<HTMLIFrameElement>
-  preventClick: boolean
-  src: string
-  variants: Variants
-  style: React.CSSProperties
-}
-
-export const IFrame = forwardRef<HTMLIFrameElement, IFrameProps>(
-  function IFrame(props, forwardedRef) {
-    const {animate, initial, onLoad, preventClick, src, variants, style} = props
-
-    const ref = useRef<HTMLIFrameElement | null>(null)
-    // Forward the iframe ref to the parent component
-    useImperativeHandle<HTMLIFrameElement | null, HTMLIFrameElement | null>(
-      forwardedRef,
-      () => ref.current,
-    )
-
-    /**
-     * Ensure that clicking outside of menus and dialogs will close as focus shifts to the iframe
-     */
-
-    useEffect(() => {
-      if (!ref.current) {
-        return undefined
-      }
-      const instance = ref.current
-      function handleBlur() {
-        if (instance !== document.activeElement) {
-          return
-        }
-
-        instance.dispatchEvent(new MouseEvent('mousedown', {bubbles: true, cancelable: true}))
-      }
-      window.addEventListener('blur', handleBlur)
-      return () => {
-        window.removeEventListener('blur', handleBlur)
-      }
-    }, [])
-
-    const viewTransitionName = useId()
-
-    return (
-      <>
-        <IFrameElement
-          style={{
-            ...style,
-            viewTransitionName,
-          }}
-          animate={animate}
-          initial={initial}
-          onLoad={onLoad}
-          ref={ref}
-          src={src}
-          variants={variants}
-        />
-        {preventClick && <IFrameOverlay />}
-        <GlobalViewTransition />
-      </>
-    )
-  },
-)
+import {forwardRef, type ReactEventHandler, useId} from 'react'
+import {styled} from 'styled-components'
 
 const IFrameElement = motion.create(styled.iframe`
   box-shadow: 0 0 0 1px var(--card-border-color);
@@ -85,17 +17,37 @@ const IFrameOverlay = styled(Box)`
   background: transparent;
 `
 
-const GlobalViewTransition = createGlobalStyle`
-html:active-view-transition-type(sanity-iframe-viewport) {
-  view-transition-name: none;
-  &::view-transition {
-    pointer-events: none;
-  }
-  /* &::view-transition-old(root) {
-    display: none;
-  }
-  &::view-transition-new(root) {
-    animation: none;
-  } */
+interface IFrameProps {
+  animate: VariantLabels
+  initial: VariantLabels
+  onLoad: ReactEventHandler<HTMLIFrameElement>
+  preventClick: boolean
+  src: string
+  variants: Variants
+  style: React.CSSProperties
 }
-`
+
+export const IFrame = forwardRef<HTMLIFrameElement, IFrameProps>(function IFrame(props, ref) {
+  const {animate, initial, onLoad, preventClick, src, variants, style} = props
+  const id = useId()
+
+  return (
+    <>
+      <IFrameElement
+        style={{
+          ...style,
+          // useId() guarantees that the ID will be unique, even if we add support for multiple iframe instances,
+          // while `view-transition-class: presentation-tool-iframe` provides userland a way to customize the transition with CSS if they wish
+          viewTransitionName: `presentation-tool-iframe-${id.replace(/[^a-zA-Z0-9-_]/g, '_')}`,
+        }}
+        animate={animate}
+        initial={initial}
+        onLoad={onLoad}
+        ref={ref}
+        src={src}
+        variants={variants}
+      />
+      {preventClick && <IFrameOverlay />}
+    </>
+  )
+})

package/src/presentation/preview/Preview.tsx

@@ -1,28 +1,11 @@
 /* eslint-disable react/no-unused-prop-types,no-nested-ternary */
-import {createConnectionMachine, createController} from '@sanity/comlink'
-import {
-  createCompatibilityActors,
-  type VisualEditingControllerMsg,
-  type VisualEditingNodeMsg,
-} from '@sanity/presentation-comlink'
 import {
   urlSearchParamPreviewPerspective,
   urlSearchParamVercelProtectionBypass,
   urlSearchParamVercelSetBypassCookie,
   type VercelSetBypassCookieValue,
 } from '@sanity/preview-url-secret/constants'
-import {
-  Card,
-  Code,
-  Flex,
-  Label,
-  Spinner,
-  Stack,
-  Text,
-  usePrefersReducedMotion,
-  useToast,
-} from '@sanity/ui'
-import {useSelector} from '@xstate/react'
+import {Card, Code, Flex, Label, Spinner, Stack, Text, usePrefersReducedMotion} from '@sanity/ui'
 import {AnimatePresence, motion, MotionConfig} from 'framer-motion'
 import {
   forwardRef,
@@ -36,23 +19,24 @@ import {
   useSyncExternalStore,
 } from 'react'
 import {flushSync} from 'react-dom'
-import {Translate, useTranslation} from 'sanity'
-import {useEffectEvent} from 'use-effect-event'
+import {useTranslation} from 'sanity'
 
 import {Button, TooltipDelayGroupProvider} from '../../ui-components'
 import {ErrorCard} from '../components/ErrorCard'
 import {MAX_TIME_TO_OVERLAYS_CONNECTION} from '../constants'
 import {presentationLocaleNamespace} from '../i18n'
-import {type PresentationMachineRef} from '../machines/presentation-machine'
-import {type PreviewUrlRef} from '../machines/preview-url'
+import {
+  ACTION_IFRAME_LOADED,
+  ACTION_IFRAME_RELOAD,
+  type DispatchPresentationAction,
+  type PresentationState,
+} from '../reducers/presentationReducer'
 import {
   type ConnectionStatus,
   type HeaderOptions,
   type PresentationPerspective,
   type PresentationViewport,
 } from '../types'
-import {useAllowPatterns} from '../useAllowPatterns'
-import {usePresentationNavigate} from '../usePresentationNavigate'
 import {usePresentationTool} from '../usePresentationTool'
 import {encodeStudioPerspective} from '../util/encodeStudioPerspective'
 import {IFrame} from './IFrame'
@@ -61,10 +45,11 @@ import {PreviewHeader} from './PreviewHeader'
 const MotionFlex = motion.create(Flex)
 
 /** @public */
-export interface PreviewProps {
+export interface PreviewProps extends Pick<PresentationState, 'iframe' | 'visualEditing'> {
   canSharePreviewAccess: boolean
   canToggleSharePreviewAccess: boolean
   canUseSharedPreviewAccess: boolean
+  dispatch: DispatchPresentationAction
   header?: HeaderOptions
   initialUrl: URL
   loadersConnection: ConnectionStatus
@@ -73,7 +58,6 @@ export interface PreviewProps {
   onRefresh: (fallback: () => void) => void
   openPopup: (url: string) => void
   overlaysConnection: ConnectionStatus
-  presentationRef: PresentationMachineRef
   perspective: PresentationPerspective
   previewUrl?: string
   setViewport: (mode: 'desktop' | 'mobile') => void
@@ -82,12 +66,13 @@ export interface PreviewProps {
   toggleOverlay: () => void
   viewport: PresentationViewport
   vercelProtectionBypass: string | null
-  previewUrlRef: PreviewUrlRef
 }
 
 export const Preview = memo(
   forwardRef<HTMLIFrameElement, PreviewProps>(function PreviewComponent(props, forwardedRef) {
     const {
+      dispatch,
+      iframe,
       header,
       initialUrl,
       loadersConnection,
@@ -95,8 +80,6 @@ export const Preview = memo(
       perspective,
       viewport,
       vercelProtectionBypass,
-      presentationRef,
-      previewUrlRef,
     } = props
 
     const [stablePerspective, setStablePerspective] = useState<typeof perspective | null>(null)
@@ -150,17 +133,11 @@ export const Preview = memo(
       () => ref.current,
     )
 
-    const isLoading = useSelector(
-      presentationRef,
-      (state) => state.matches('loading') || state.matches({loaded: 'reloading'}),
-    )
-
+    const loading = iframe.status === 'loading' || iframe.status === 'reloading'
     const [timedOut, setTimedOut] = useState(false)
-    const isRefreshing = useSelector(presentationRef, (state) =>
-      state.matches({loaded: 'refreshing'}),
-    )
+    const refreshing = iframe.status === 'refreshing'
     const [somethingIsWrong, setSomethingIsWrong] = useState(false)
-    const iframeIsBusy = isLoading || isRefreshing || overlaysConnection === 'connecting'
+    const iframeIsBusy = loading || refreshing || overlaysConnection === 'connecting'
 
     const handleRetry = useCallback(() => {
       if (!ref.current) {
@@ -169,8 +146,8 @@ export const Preview = memo(
 
       ref.current.src = previewUrl.toString()
 
-      presentationRef.send({type: 'iframe reload'})
-    }, [presentationRef, previewUrl])
+      dispatch({type: ACTION_IFRAME_RELOAD})
+    }, [dispatch, previewUrl])
     const handleContinueAnyway = useCallback(() => {
       setContinueAnyway(true)
     }, [])
@@ -178,7 +155,7 @@ export const Preview = memo(
     const [continueAnyway, setContinueAnyway] = useState(false)
     const [showOverlaysConnectionStatus, setShowOverlaysConnectionState] = useState(false)
     useEffect(() => {
-      if (isLoading || isRefreshing) {
+      if (loading || refreshing) {
         return undefined
       }
 
@@ -189,10 +166,10 @@ export const Preview = memo(
         return () => clearTimeout(timeout)
       }
       return undefined
-    }, [overlaysConnection, isLoading, isRefreshing])
+    }, [overlaysConnection, loading, refreshing])
 
     useEffect(() => {
-      if (isLoading || isRefreshing || !showOverlaysConnectionStatus) {
+      if (loading || refreshing || !showOverlaysConnectionStatus) {
         return undefined
       }
       if (overlaysConnection === 'connected') {
@@ -219,17 +196,39 @@ export const Preview = memo(
         return () => clearTimeout(timeout)
       }
       return undefined
-    }, [isLoading, overlaysConnection, isRefreshing, showOverlaysConnectionStatus])
+    }, [loading, overlaysConnection, refreshing, showOverlaysConnectionStatus])
 
     const onIFrameLoad = useCallback(() => {
-      presentationRef.send({type: 'iframe loaded'})
-    }, [presentationRef])
+      dispatch({type: ACTION_IFRAME_LOADED})
+    }, [dispatch])
+
+    /**
+     * Ensure that clicking outside of menus and dialogs will close as focus shifts to the iframe
+     */
+    useEffect(() => {
+      if (!ref.current) {
+        return undefined
+      }
+      const instance = ref.current
+      function handleBlur() {
+        if (instance !== document.activeElement) {
+          return
+        }
+
+        instance.dispatchEvent(new MouseEvent('mousedown', {bubbles: true, cancelable: true}))
+      }
+      window.addEventListener('blur', handleBlur)
+      return () => {
+        window.removeEventListener('blur', handleBlur)
+      }
+    }, [])
 
     const preventIframeInteraction = useMemo(() => {
       return (
-        (isLoading || (overlaysConnection === 'connecting' && !isRefreshing)) && !continueAnyway
+        (loading || (overlaysConnection === 'connecting' && iframe.status !== 'refreshing')) &&
+        !continueAnyway
       )
-    }, [continueAnyway, isLoading, isRefreshing, overlaysConnection])
+    }, [continueAnyway, iframe.status, loading, overlaysConnection])
 
     const canUseViewTransition = useSyncExternalStore(
       // eslint-disable-next-line no-empty-function
@@ -239,7 +238,7 @@ export const Preview = memo(
     const iframeAnimations = useMemo(() => {
       return [
         preventIframeInteraction ? 'background' : 'active',
-        isLoading ? 'reloading' : 'idle',
+        loading ? 'reloading' : 'idle',
         // If CSS View Transitions are supported, then transition iframe viewport dimensions with that instead of Motion
         canUseViewTransition ? '' : viewport,
         showOverlaysConnectionStatus && !continueAnyway ? 'timedOut' : '',
@@ -247,7 +246,7 @@ export const Preview = memo(
     }, [
       canUseViewTransition,
       continueAnyway,
-      isLoading,
+      loading,
       preventIframeInteraction,
       showOverlaysConnectionStatus,
       viewport,
@@ -266,135 +265,19 @@ export const Preview = memo(
           'startViewTransition' in document &&
           typeof document.startViewTransition === 'function'
         ) {
-          document.startViewTransition({
-            // @ts-expect-error - fix typings
-            update: () => flushSync(() => update()),
-            types: ['sanity-iframe-viewport'],
-          })
+          document.startViewTransition(() => flushSync(() => update()))
         } else {
           update()
         }
       }
     }, [canUseViewTransition, prefersReducedMotion, currentViewport, viewport])
 
-    const toast = useToast()
-    const allowOrigins = useAllowPatterns(previewUrlRef)
-    const [checkOrigin, setCheckOrigin] = useState<false | string>(false)
-    const [reportedMismatches] = useState(new Set<string>())
-    const reportMismatchingOrigin = useEffectEvent((reportedOrigin: string) => {
-      if (allowOrigins.some((allow) => allow.test(reportedOrigin))) {
-        setCheckOrigin(reportedOrigin)
-        return
-      }
-      if (reportedMismatches.has(reportedOrigin)) return
-      reportedMismatches.add(reportedOrigin)
-      console.warn('Visual Editing is here but misconfigured', {reportedOrigin})
-      toast.push({
-        closable: true,
-        id: `presentation-iframe-origin-mismatch-${reportedOrigin}`,
-        status: 'error',
-        duration: Infinity,
-        title: t('preview-frame.configuration.error.title'),
-        description: (
-          <Translate
-            t={t}
-            i18nKey="preview-frame.configuration.error.description"
-            components={{Code: 'code'}}
-            values={{
-              targetOrigin: previewUrl.origin,
-              reportedOrigin,
-            }}
-          />
-        ),
-      })
-    })
-    const navigate = usePresentationNavigate()
-    const navigateEvent = useEffectEvent((url: string) => {
-      if (!checkOrigin) return
-      const nextUrl = new URL(url, checkOrigin)
-      navigate(`${checkOrigin}${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`)
-    })
-    useEffect(() => {
-      if (!checkOrigin) {
-        return undefined
-      }
-      const target = ref.current?.contentWindow
-      if (!target) {
-        return undefined
-      }
-      const controller = createController({targetOrigin: checkOrigin})
-      controller.addTarget(target)
-      const comlink = controller.createChannel<VisualEditingControllerMsg, VisualEditingNodeMsg>(
-        {
-          name: 'presentation',
-          heartbeat: true,
-          connectTo: 'visual-editing',
-        },
-        createConnectionMachine<VisualEditingControllerMsg, VisualEditingNodeMsg>().provide({
-          actors: createCompatibilityActors<VisualEditingControllerMsg>(),
-        }),
-      )
-
-      comlink.on('visual-editing/navigate', (data) => {
-        navigateEvent(data.url)
-      })
-      const stop = comlink.start()
-
-      return () => {
-        stop()
-        controller.destroy()
-      }
-    }, [checkOrigin])
-    useEffect(() => {
-      if (overlaysConnection === 'connecting' || overlaysConnection === 'reconnecting') {
-        const interval = setInterval(() => {
-          ref.current?.contentWindow?.postMessage(
-            {domain: 'sanity/channels', from: 'presentation', type: 'presentation/status'},
-            /**
-             * The targetOrigin is set to '*' intentionally here, as we need to find out if the iframe is misconfigured and has the wrong origin
-             */
-            '*',
-          )
-        }, 1_000)
-
-        const controller = new AbortController()
-        window.addEventListener(
-          'message',
-          ({data}: MessageEvent<unknown>) => {
-            /**
-             * Listen for replies to presentation/status
-             */
-            if (
-              data &&
-              typeof data === 'object' &&
-              'domain' in data &&
-              data.domain === 'sanity/channels' &&
-              'type' in data &&
-              data.type === 'visual-editing/status' &&
-              'data' in data &&
-              typeof data.data === 'object' &&
-              data.data &&
-              'origin' in data.data &&
-              typeof data.data.origin === 'string'
-            ) {
-              reportMismatchingOrigin(data.data.origin)
-            }
-          },
-          {signal: controller.signal},
-        )
-
-        return () => {
-          controller.abort()
-          clearInterval(interval)
-        }
-      }
-      return undefined
-    }, [overlaysConnection, timedOut])
-
     return (
       <MotionConfig transition={prefersReducedMotion ? {duration: 0} : undefined}>
         <TooltipDelayGroupProvider>
           {previewHeader}
+
+          {/* @TODO: Move this to <PreviewFrame /> */}
           <Card flex={1} tone="transparent">
             <Flex
               align="center"
@@ -409,8 +292,8 @@ export const Preview = memo(
             >
               <AnimatePresence>
                 {!somethingIsWrong &&
-                !isLoading &&
-                !isRefreshing &&
+                !loading &&
+                !refreshing &&
                 // viewport, // using CSS View Transitions instead of framer motion to drive this
                 showOverlaysConnectionStatus &&
                 !continueAnyway ? (
@@ -476,7 +359,8 @@ export const Preview = memo(
                       )}
                     </Flex>
                   </MotionFlex>
-                ) : (isLoading || (overlaysConnection === 'connecting' && !isRefreshing)) &&
+                ) : (loading ||
+                    (overlaysConnection === 'connecting' && iframe.status !== 'refreshing')) &&
                   !continueAnyway ? (
                   <MotionFlex
                     initial="initial"