fix: allow encoding draft ids

sanity-io · Feb 22, 2024 · 9a877c1 · 9a877c1
1 parent e3dac94
commit 9a877c1
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/packages/presentation/src/loader/LoaderQueries.tsx b/packages/presentation/src/loader/LoaderQueries.tsx
@@ -430,10 +430,7 @@ export function turboChargeResultIfSourceMap<T = unknown>(
         return undefined
       }
       // If there's a displayed document, always prefer it
-      if (
-        liveDocument?._id &&
-        getPublishedId(liveDocument._id) === getPublishedId(sourceDocument._id)
-      ) {
+      if (liveDocument?._id === sourceDocument._id) {
         return liveDocument
       }
       // Fallback to general documents cache

diff --git a/packages/presentation/src/useParams.ts b/packages/presentation/src/useParams.ts
@@ -11,6 +11,7 @@ import {
   PresentationSearchParams,
   PresentationStateParams,
 } from './types'
+import { getPublishedId } from 'sanity'
 
 function pruneObject<T extends RouterState | PresentationParams>(obj: T): T {
   return Object.fromEntries(
@@ -104,6 +105,9 @@ export function useParams({
     () =>
       debounce<PresentationNavigate>(
         (nextState, nextSearchState = {}, forceReplace) => {
+          // Force navigation to use published IDs only
+          if (nextState.id) nextState.id = getPublishedId(nextState.id)
+
           // Extract type, id and path as 'routerState'
           const { _searchParams: routerSearchParams, ...routerState } =
             routerStateRef.current

diff --git a/packages/visual-editing-helpers/src/csm/transformSanityNodeData.ts b/packages/visual-editing-helpers/src/csm/transformSanityNodeData.ts
@@ -1,4 +1,4 @@
-import { getPublishedId, studioPath } from '@sanity/client/csm'
+import { studioPath } from '@sanity/client/csm'
 import {
   is,
   minLength,
@@ -65,7 +65,7 @@ export function encodeSanityNodeData(node: SanityNode): string | undefined {
   }
 
   const parts = [
-    ['id', getPublishedId(_id)],
+    ['id', _id],
     ['type', type],
     ['path', pathToUrlString(studioPath.fromString(path))],
     ['base', encodeURIComponent(baseUrl)],

diff --git a/packages/visual-editing/src/ui/Overlays.tsx b/packages/visual-editing/src/ui/Overlays.tsx
@@ -30,6 +30,7 @@ import type {
 import { ElementOverlay } from './ElementOverlay'
 import { overlayStateReducer } from './overlayStateReducer'
 import { useController } from './useController'
+import { getPublishedId } from '@sanity/client/csm'
 
 const Root = styled.div<{
   $zIndex?: string | number
@@ -151,7 +152,13 @@ export const Overlays: FunctionComponent<{
   const overlayEventHandler: OverlayEventHandler = useCallback(
     (message) => {
       if (message.type === 'element/click') {
-        channel.send('overlay/focus', message.sanity)
+        const { sanity } = message
+        if ('id' in sanity) {
+          channel.send('overlay/focus', {
+            ...sanity,
+            id: getPublishedId(sanity.id),
+          })
+        }
       } else if (message.type === 'overlay/activate') {
         channel.send('overlay/toggle', { enabled: true })
       } else if (message.type === 'overlay/deactivate') {

diff --git a/packages/visual-editing/src/ui/elementsReducer.ts b/packages/visual-editing/src/ui/elementsReducer.ts
@@ -1,4 +1,5 @@
 import { PresentationMsg } from '@sanity/visual-editing-helpers'
+import { getPublishedId } from '@sanity/client/csm'
 
 import { ElementState, OverlayMsg } from '../types'
 
@@ -86,7 +87,8 @@ export const elementsReducer = (
         // We want to focus any element which matches the id and path...
         const focused =
           'path' in e.sanity &&
-          e.sanity.id === message.data.id &&
+          // The encoded ID might relate to a draft, but Presentation tool will send the published ID
+          getPublishedId(e.sanity.id) === message.data.id &&
           e.sanity.path === message.data.path
         return {
           ...e,