chore: add PTE in Presentation race condition reproduction (#5961)

Author: stipsan

dev/test-studio/package.json

@@ -35,6 +35,7 @@
     "@sanity/logos": "^2.1.2",
     "@sanity/migrate": "workspace:*",
     "@sanity/portable-text-editor": "workspace:*",
+    "@sanity/presentation": "1.11.4",
     "@sanity/preview-url-secret": "^1.6.1",
     "@sanity/react-loader": "^1.8.3",
     "@sanity/tsdoc": "1.0.0-alpha.44",

dev/test-studio/preview/SimpleBlockPortableText.tsx

@@ -0,0 +1,68 @@
+import {PortableText, type PortableTextComponents} from '@portabletext/react'
+import {type PortableTextBlock} from 'sanity'
+
+import {imageBuilder, useQuery} from './loader'
+
+const components: PortableTextComponents = {
+  types: {
+    image: ({value}) => {
+      if (!value?.asset?._ref) {
+        return null
+      }
+      return (
+        <img
+          alt={value.alt || ''}
+          src={imageBuilder.image(value).width(150).height(150).fit('crop').url()}
+        />
+      )
+    },
+  },
+}
+
+export function SimpleBlockPortableText(): JSX.Element {
+  const {data, loading, error} = useQuery<
+    {
+      _id: string
+      title: string | null
+      body: PortableTextBlock[]
+      notes: {_key: string; title?: string; minutes?: number; notes?: PortableTextBlock[]}[]
+    }[]
+  >(/* groq */ `*[_type == "simpleBlock"]{_id,title,body,notes}`)
+
+  if (error) {
+    throw error
+  }
+
+  if (loading) {
+    return <p>Loading...</p>
+  }
+
+  return (
+    <>
+      {data?.map((item) => {
+        return (
+          <article
+            key={item._id}
+            style={{
+              margin: '10px 20px',
+              background: 'ghostwhite',
+              borderRadius: '8px',
+              border: '1px solid lightgray',
+              padding: '10px 20px',
+            }}
+          >
+            <h1>{item.title || 'Untitled'}</h1>
+            <PortableText components={components} value={item.body} />
+            {item.notes?.map((note) => (
+              <div key={note._key}>
+                <h2>{note.title}</h2>
+                <p>{note.minutes} minutes</p>
+                <PortableText components={components} value={note.notes || []} />
+              </div>
+            ))}
+          </article>
+        )
+      })}
+    </>
+  )
+}

dev/test-studio/preview/loader.tsx

@@ -0,0 +1,21 @@
+import {createClient} from '@sanity/client'
+import imageUrlBuilder from '@sanity/image-url'
+import {createQueryStore} from '@sanity/react-loader'
+
+const client = createClient({
+  projectId: 'ppsg7ml5',
+  dataset: 'playground',
+  useCdn: true,
+  apiVersion: '2023-02-06',
+  stega: {
+    enabled: true,
+    studioUrl: '/presentation',
+    // logger: console,
+    filter: (props) => {
+      return props.filterDefault(props)
+    },
+  },
+})
+
+export const {useQuery, useLiveMode} = createQueryStore({client})
+export const imageBuilder: ReturnType<typeof imageUrlBuilder> = imageUrlBuilder(client)

dev/test-studio/preview/main.tsx

@@ -1,80 +1,24 @@
-import {PortableText} from '@portabletext/react'
-import {createClient} from '@sanity/client'
-import {createQueryStore} from '@sanity/react-loader'
 import {enableVisualEditing} from '@sanity/visual-editing'
 import {Suspense, useEffect} from 'react'
 import {createRoot} from 'react-dom/client'
 
-const client = createClient({
-  projectId: 'ppsg7ml5',
-  dataset: 'playground',
-  useCdn: true,
-  apiVersion: '2023-02-06',
-  stega: {
-    enabled: true,
-    studioUrl: '/',
-    filter: (props) => {
-      if (props.sourcePath[0] == 'type') {
-        return true
-      }
-      return props.filterDefault(props)
-    },
-  },
-})
-
-const {useQuery, useLiveMode} = createQueryStore({client})
+import {useLiveMode} from './loader'
+import {SimpleBlockPortableText} from './SimpleBlockPortableText'
 
 function Main() {
   return (
     <>
-      <AllSchemaTypes />
+      <SimpleBlockPortableText />
       <Suspense fallback={null}>
         <VisualEditing />
       </Suspense>
     </>
   )
 }
 
-function AllSchemaTypes() {
-  const {data, loading, error} = useQuery<any[]>(/* groq */ `*[_type == "allTypes"]`)
-
-  if (error) {
-    throw error
-  }
-
-  if (loading) {
-    return <p>Loading...</p>
-  }
-
-  return (
-    <ol>
-      {data?.map((item) => {
-        return (
-          <li key={item._id}>
-            <dl>
-              <dt>string</dt>
-              <dd>{item.string}</dd>
-              <dt>type</dt>
-              <dd>{item.type}</dd>
-              <dt>text</dt>
-              <dd>{item.text}</dd>
-              <dt>array</dt>
-              <dd>{item.array?.map?.((word: any, i: number) => <span key={i}>{word}</span>)}</dd>
-              <dt>blocks</dt>
-              <dd>
-                <PortableText value={item.blocks} />
-              </dd>
-            </dl>
-          </li>
-        )
-      })}
-    </ol>
-  )
-}
-
 function VisualEditing() {
   useEffect(() => enableVisualEditing(), [])
-  useLiveMode({client})
+  useLiveMode({})
 
   return null
 }

dev/test-studio/sanity.config.ts

@@ -7,6 +7,7 @@ import {nnNOLocale} from '@sanity/locale-nn-no'
 import {ptPTLocale} from '@sanity/locale-pt-pt'
 import {svSELocale} from '@sanity/locale-sv-se'
 import {SanityMonogram} from '@sanity/logos'
+import {presentationTool as pinnedPresentationTool} from '@sanity/presentation'
 import {debugSecrets} from '@sanity/preview-url-secret/sanity-plugin-debug-secrets'
 import {tsdoc} from '@sanity/tsdoc/studio'
 import {visionTool} from '@sanity/vision'
@@ -293,8 +294,16 @@ export default defineConfig([
     plugins: [
       debugSecrets(),
       presentationTool({
+        name: 'presentation',
+        title: 'Presentation (stable)',
         previewUrl: '/preview/index.html',
       }),
+      pinnedPresentationTool({
+        name: 'reproduction-presentation',
+        title: 'Presentation (reproduction)',
+        previewUrl: '/preview/index.html',
+      }),
+      assist(),
       sharedSettings(),
     ],
     basePath: '/presentation',

dev/test-studio/schema/standard/portableText/simpleBlock.tsx

@@ -118,6 +118,10 @@ export default defineType({
         {
           type: 'image',
           name: 'image',
+          options: {
+            hotspot: true,
+          },
+          fields: [{type: 'string', name: 'alt'}],
         },
         {
           type: 'object',

pnpm-lock.yaml

@@ -8,6 +8,12 @@
       "matchFileNames": ["package.json", "dev/**/package.json", "examples/**/package.json"],
       "extends": [":semanticCommitTypeAll(chore)"]
     },
+    {
+      "description": "Pin Presentation in Test Studio to the version that has the agressive focus path behavior that makes race conditions easier to debug",
+      "matchFileNames": ["dev/test-studio/package.json"],
+      "matchDepNames": ["@sanity/presentation"],
+      "allowedVersions": "<=1.11.4"
+    },
     {
       "matchDepTypes": ["dependencies"],
       "matchPackageNames": ["get-it", "@sanity/client", "@sanity/presentation"],