fix: improve perspectives handling

sanity-io · Dec 4, 2024 · cc4e393 · cc4e393
1 parent 729c535
commit cc4e393
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/packages/presentation/src/preview/PreviewHeader.tsx b/packages/presentation/src/preview/PreviewHeader.tsx
@@ -233,7 +233,6 @@ const PreviewHeaderDefault: FunctionComponent<Omit<PreviewHeaderProps, 'renderDe
             canUseSharedPreviewAccess={canUseSharedPreviewAccess}
             previewLocationRoute={previewLocationRoute}
             initialUrl={initialUrl}
-            // @ts-expect-error - this is fine
             perspective={perspective}
           />
         </Flex>

diff --git a/packages/presentation/src/preview/SharePreviewMenu.tsx b/packages/presentation/src/preview/SharePreviewMenu.tsx
@@ -1,4 +1,4 @@
-import type {SyncTag} from '@sanity/client'
+import type {ClientPerspective, SyncTag} from '@sanity/client'
 import {CopyIcon, ShareIcon} from '@sanity/icons'
 import {SanityMonogram} from '@sanity/logos'
 import {fetchSharedAccessQuery} from '@sanity/preview-url-secret/constants'
@@ -38,7 +38,7 @@ export interface SharePreviewMenuProps {
   canUseSharedPreviewAccess: boolean
   previewLocationRoute: string
   initialUrl: PreviewProps['initialUrl']
-  perspective: string
+  perspective: ClientPerspective
 }
 
 const QrCodeLogoSize = 24
@@ -79,7 +79,14 @@ export const SharePreviewMenu = memo(function SharePreviewMenuComponent(
   const busy = enabling || disabling || loading
   const url = useMemo(
     () =>
-      secret ? setSecretSearchParams(initialUrl, secret, previewLocationRoute, perspective) : null,
+      secret
+        ? setSecretSearchParams(
+            initialUrl,
+            secret,
+            previewLocationRoute,
+            Array.isArray(perspective) ? perspective.join(',') : perspective,
+          )
+        : null,
     [initialUrl, perspective, previewLocationRoute, secret],
   )
 

diff --git a/packages/visual-editing/src/ui/ElementOverlay.tsx b/packages/visual-editing/src/ui/ElementOverlay.tsx
@@ -15,7 +15,7 @@ import {
   type ReactElement,
 } from 'react'
 import scrollIntoView from 'scroll-into-view-if-needed'
-import {styled} from 'styled-components'
+import {keyframes, styled} from 'styled-components'
 import {PointerEvents} from '../overlay-components/components/PointerEvents'
 import type {
   ElementFocusedState,
@@ -147,21 +147,21 @@ const Labels = styled(Flex)`
   }
 `
 
-const Releases = styled.div`
-  opacity: 0;
-  animation: o 300ms 500ms ease forwards;
-
-  @keyframes o {
-    from {
-      opacity: 0%;
-    }
+const ReleasesKeyframes = keyframes`
+  from {
+    opacity: 0%;
+  }
 
-    to {
-      opacity: 100%;
-    }
+  to {
+    opacity: 100%;
   }
 `
 
+const Releases = styled.div`
+  opacity: 0;
+  animation: ${ReleasesKeyframes} 300ms 500ms ease forwards;
+`
+
 function createIntentLink(node: SanityNode) {
   const {id, type, path, baseUrl, tool, workspace} = node