Set focus field groups (WIP)

.gitignore

@@ -1,3 +1,6 @@
+
+.DS_Store
+
 # Logs
 logs
 *.log
@@ -7,6 +10,8 @@ yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
 
+
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 

apps/common/src/queries.ts

@@ -2,13 +2,15 @@ import type {ImageAsset, ImageCrop, ImageHotspot, PortableTextTextBlock} from 's
 
 export const shoesList = /* groq */ `*[_type == "shoe" && defined(slug.current)]{
   title,
+  subtitle,
   slug,
   "price": string(price),
   "media": media[0]{ alt, asset, crop, hotspot },
   "brand": brandReference->{name, slug, logo{ alt, asset, crop, hotspot }},
 } | order(_updatedAt desc) `
 export type ShoesListResult = {
   title?: string | null
+  subtitle?: string | null
   slug: {current: string}
   price?: string | null
   media?: {
@@ -32,6 +34,7 @@ export type ShoesListResult = {
 
 export const shoe = /* groq */ `*[_type == "shoe" && slug.current == $slug]{
   title,
+  subtitle,
   slug,
   "price": string(price),
   "media": media[]{ alt, asset, crop, hotspot },

apps/common/src/schema/shoe/shoe.ts

@@ -3,6 +3,13 @@ import {defineArrayMember, defineField, defineType} from 'sanity'
 export const shoeType = defineType({
   type: 'document',
   name: 'shoe',
+  groups: [
+    {
+      default: true,
+      name: 'details',
+      title: 'Details',
+    },
+  ],
   fields: [
     defineField({
       type: 'string',
@@ -11,6 +18,13 @@ export const shoeType = defineType({
       validation: (rule) => rule.required(),
     }),
     defineField({
+      group: 'details',
+      type: 'string',
+      name: 'subtitle',
+      title: 'Subtitle',
+    }),
+    defineField({
+      group: 'details',
       type: 'slug',
       name: 'slug',
       title: 'Slug',

packages/presentation/src/plugin.tsx

@@ -1,14 +1,22 @@
 import type {SanityDocument} from '@sanity/client'
-import {lazy, Suspense} from 'react'
-import {definePlugin, type InputProps, isDocumentSchemaType} from 'sanity'
+import {lazy, Suspense, useEffect, useMemo} from 'react'
+import {
+  definePlugin,
+  type InputProps,
+  isDocumentSchemaType,
+  type BaseFormNode,
+  type ObjectSchemaType,
+  type ObjectInputProps,
+  pathToString,
+} from 'sanity'
 
 import {DEFAULT_TOOL_ICON, DEFAULT_TOOL_NAME, EDIT_INTENT_MODE} from './constants'
 import {PresentationDocumentHeader} from './document/PresentationDocumentHeader'
 import {PresentationDocumentProvider} from './document/PresentationDocumentProvider'
 import {openInStructure} from './fieldActions/openInStructure'
 import {getIntentState} from './getIntentState'
 import {presentationUsEnglishLocaleBundle} from './i18n'
-import {getPublishedId} from './internals'
+import {getPublishedId, useDocumentPane} from './internals'
 import {router} from './router'
 import type {
   DocumentLocationResolverObject,
@@ -52,29 +60,51 @@ export const presentationTool = definePlugin<PresentationPluginOptions>((options
 
   const hasLocationsResolver = !!(options.resolve?.locations || options.locate)
 
-  function PresentationDocumentInput(props: InputProps) {
-    const value = props.value as SanityDocument
+  function PresentationDocumentInput(input: InputProps) {
+    const value = input.value as SanityDocument
     const documentId = value?._id ? getPublishedId(value?._id) : undefined
+    const {focusPath} = useDocumentPane()
+
+    if (isDocumentSchemaType(input.schemaType)) {
+      const props = input as ObjectInputProps<ObjectSchemaType>
+
+      // Create a fast index of the groups for all fields in the schema
+      const fieldGroupIndex = useMemo(() => {
+        const index = new Map<string, string>()
+        props.schemaType.fields.forEach((field) => {
+          index.set(field.name, field?.group?.[0] ?? 'all-fields')
+        })
+        return index
+      }, [props.schemaType.fields])
+
+      // Watch value of props.focusPath
+      useEffect(() => {
+        if (!focusPath || focusPath.length === 0) return
+        const focusFieldPath = focusPath[0]
+        const group = fieldGroupIndex.get(focusFieldPath?.toString()) ?? 'all-fields'
+        if (group) {
+          props.onFieldGroupSelect(group)
+        }
+      }, [focusPath])
 
-    if (isDocumentSchemaType(props.schemaType)) {
       return (
         <PresentationDocumentProvider options={options}>
           {hasLocationsResolver && documentId && (
             <PresentationDocumentHeader
               documentId={documentId}
               options={options}
-              schemaType={props.schemaType}
+              schemaType={input.schemaType}
             />
           )}
-          {props.renderDefault(props)}
+          {input.renderDefault(props)}
           <Suspense key="broadcast-displayed-document">
             <BroadcastDisplayedDocument key={documentId} value={value} />
           </Suspense>
         </PresentationDocumentProvider>
       )
     }
 
-    return props.renderDefault(props)
+    return input.renderDefault(input)
   }
 
   function canHandleCreateIntent(params: Record<string, unknown>) {