fix(presentation): support pt::text in live queries (#8380)

Author: stipsan

dev/test-studio/preview/SimpleBlockPortableText.tsx

@@ -24,10 +24,11 @@ export function SimpleBlockPortableText(): React.JSX.Element {
     {
       _id: string
       title: string | null
+      bodyString: string
       body: PortableTextBlock[]
       notes: {_key: string; title?: string; minutes?: number; notes?: PortableTextBlock[]}[]
     }[]
-  >(/* groq */ `*[_type == "simpleBlock"]{_id,title,body,notes}`)
+  >(/* groq */ `*[_type == "simpleBlock"]{_id,title,"bodyString":pt::text(body),body,notes}`)
 
   if (error) {
     throw error
@@ -52,6 +53,7 @@ export function SimpleBlockPortableText(): React.JSX.Element {
             }}
           >
             <h1>{item.title || 'Untitled'}</h1>
+            <p>{item.bodyString}</p>
             <PortableText components={components} value={item.body} />
             {item.notes?.map((note) => (
               <div key={note._key}>

packages/sanity/package.json

@@ -156,6 +156,7 @@
     "@portabletext/block-tools": "^1.1.2",
     "@portabletext/editor": "^1.25.0",
     "@portabletext/react": "^3.0.0",
+    "@portabletext/toolkit": "^2.0.16",
     "@rexxars/react-json-inspector": "^9.0.1",
     "@sanity/asset-utils": "^2.0.6",
     "@sanity/bifur-client": "^0.4.1",

packages/sanity/src/presentation/loader/LiveQueries.tsx

@@ -41,7 +41,7 @@ import {
   type PresentationPerspective,
 } from '../types'
 import {type DocumentOnPage} from '../useDocumentsOnPage'
-import {useQueryParams, useRevalidate} from './utils'
+import {mapChangedValue, useQueryParams, useRevalidate} from './utils'
 
 export interface LoaderQueriesProps {
   liveDocument: Partial<SanityDocument> | null | undefined
@@ -197,8 +197,6 @@ export default function LoaderQueries(props: LoaderQueriesProps): React.JSX.Elem
     if (comlink) {
       // eslint-disable-next-line @typescript-eslint/no-shadow
       const {projectId, dataset} = clientConfig
-      // @todo - Can this be migrated/deprecated in favour of emitting
-      // `presentation/perspective` at a higher level?
       comlink.post('loader/perspective', {
         projectId: projectId!,
         dataset: dataset!,
@@ -482,14 +480,7 @@ export function turboChargeResultIfSourceMap<T = unknown>(
       }
       return null
     },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (changedValue: any, {previousValue}) => {
-      if (typeof changedValue === 'number' && typeof previousValue === 'string') {
-        // If the string() function was used in the query, we need to convert the source value to a string as well
-        return `${changedValue}`
-      }
-      return changedValue
-    },
+    mapChangedValue,
     perspective,
   )
 }

packages/sanity/src/presentation/loader/LoaderQueries.tsx

@@ -41,7 +41,7 @@ import {
   type PresentationPerspective,
 } from '../types'
 import {type DocumentOnPage} from '../useDocumentsOnPage'
-import {useQueryParams, useRevalidate} from './utils'
+import {mapChangedValue, useQueryParams, useRevalidate} from './utils'
 
 export interface LoaderQueriesProps {
   liveDocument: Partial<SanityDocument> | null | undefined
@@ -174,8 +174,6 @@ export default function LoaderQueries(props: LoaderQueriesProps): React.JSX.Elem
     if (comlink) {
       // eslint-disable-next-line @typescript-eslint/no-shadow
       const {projectId, dataset} = clientConfig
-      // @todo - Can this be migrated/deprecated in favour of emitting
-      // `presentation/perspective` at a higher level?
       comlink.post('loader/perspective', {
         projectId: projectId!,
         dataset: dataset!,
@@ -556,14 +554,7 @@ export function turboChargeResultIfSourceMap<T = unknown>(
       // Fallback to general documents cache
       return cache.get(sourceDocument._id)
     },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (changedValue: any, {previousValue}) => {
-      if (typeof changedValue === 'number' && typeof previousValue === 'string') {
-        // If the string() function was used in the query, we need to convert the source value to a string as well
-        return `${changedValue}`
-      }
-      return changedValue
-    },
+    mapChangedValue,
     perspective,
   )
 }

packages/sanity/src/presentation/loader/utils.ts

@@ -1,5 +1,38 @@
+import {toPlainText} from '@portabletext/react'
+import {isPortableTextBlock} from '@portabletext/toolkit'
 import {type ClientPerspective, type QueryParams} from '@sanity/client'
+import {type ApplySourceDocumentsUpdateFunction} from '@sanity/client/csm'
 import {useCallback, useEffect, useMemo, useState, useSyncExternalStore} from 'react'
+import {type FIXME} from 'sanity'
+
+/**
+ * Used by `applySourceDocuments`
+ * @internal
+ */
+export const mapChangedValue: ApplySourceDocumentsUpdateFunction = (
+  changedValue: FIXME,
+  {previousValue},
+) => {
+  if (typeof previousValue === 'string') {
+    if (typeof changedValue === 'number') {
+      // If the string() function was used in the query, we need to convert the source value to a string as well
+      return `${changedValue}`
+    }
+    // If it's an array in the source, but a string in the query response, it could be pt::text
+    if (Array.isArray(changedValue)) {
+      if (changedValue.length === 0) {
+        // If it's empty assume it's PT and return an empty string
+        return ''
+      }
+      // If the array contains any valid block type, assume the GROQ initially used pt::text on it and do the same conversion
+      if (changedValue.some((node) => typeof node === 'object' && isPortableTextBlock(node))) {
+        return toPlainText(changedValue)
+      }
+    }
+  }
+
+  return changedValue
+}
 
 /**
  * @internal