Custom Preview Component

[alexbchr]

From the docs, migrating a custom Preview component from v2 to v3 seems very straightforward (docs link). However, I feel like something is definitely missing from the Docs, as I have my preview defined as such:

components: {
  preview: MyCustomPreview
}

However, the MyCustomPreview component doesn't receive much props, just a value prop containing the document _id and _type, a layout: 'default' prop and a schemaType containing all the schema information. I guess there is a way to parse the preview.select and preview.prepare fields from the schemaType or fetch the correct data to build out the preview, but I'm not finding any way to just get a simple string field from my schema (unless maybe using useClient hook and manually fetching each document individually, but pretty sure there must be a more efficient way to do so)...

[mattjoc-braze]

I'm also running into this issue, struggling to figure out how to pass the preview.select fields into a custom preview component. Did you have any luck figuring this out @alexbchr?

[alexbchr]

@mattjoc-braze Unfortunately no... I didn't test with the latest RCs though. Last time I checked this out was during the 3rd dev preview, so things might have evolved in the meantime.

[mattjoc-braze]

Ok, thanks. No change as of rc3.

[Tobi-mmt]

I have pretty much the same issue with sanity v3.2.0.
This is the typescript migrated schema with component from v2 to v3:

//richTextStory.tsx

import { defineField, defineType } from 'sanity'
import React from 'react'

const RichTextImagePreview = (props:any) => {
  console.log("RichTextImagePreview props:", props)
  return (
    <>
      <button>
        {props.value?.text || 'Read more'}
      </button>
    </>
  )
}

export default defineType({
  title: "'Read More Button",
  name: 'richTextStory',
  type: 'object',
  fields: [
    defineField({
      name: 'testField',
      title: 'A test field',
      type: 'string',
      description:
        "Just for testing.",
    }),
    defineField({
      name: 'text',
      title: 'local string field',
      type: 'localeString',
      description:
        "foo bar",
    })
  ],
  preview: {
    select: { text: 'text.de' }
  },
  components: {
    preview: RichTextImagePreview
  }
})

Turns out the value is missing in the props in v3. Typescript also says this does not exist anymore if I remove the any type of the function.
So I have no idea how to access the 2 fields text and testField in my component.
Can anyone help here and add this to the typescript types and also to the documentation? Would be super awesome :)

[mattjoc-braze]

Hi all, I got this to work with the code below. It looks like the fields given in preview.select are passed to the function you specify in preview.prepare. preview.prepare should return on object with the fields you need, the elements in which are accessible to the component you give to components.preview as direct children of props (not props.value).

// File: schemas/bodyContent/bodyComponents/callout.ts

import { defineType, defineField } from 'sanity'
import { blockPreview } from 'sanity-pills'
import { GoInfo } from 'react-icons/go'
import { Card, Text } from '@sanity/ui'

const CalloutPreview = (props: any) => {
  // Check the console to see!
  console.log(props)
  return (
    <Card padding={[2, 3, 3, 3]} border={true}>
      {props.renderDefault({
        ...props,
        title: `${props.heading} (${props.intent})`,
        subtitle: props.anotherField,
        media: GoInfo,
      })}
      <Card padding={2}>
        <Text>{props.subtitle}</Text>
      </Card>
    </Card>
  )
}

export default defineType({
  title: 'Callout',
  name: 'callout',
  type: 'object',
  icon: GoInfo,
  fields: [
    defineField({
      title: 'Heading',
      name: 'heading',
      type: 'string',
    }),
    defineField({
      title: 'Content',
      name: 'content',
      type: 'array',
      of: [{ type: 'block' }],
    }),
    defineField({
      title: 'AnotherField',
      name: 'anotherField',
      type: 'string',
    }),
    defineField({
      title: 'Intent',
      name: 'intent',
      type: 'string',
      options: {
        list: [
          { title: 'info', value: 'info' },
          { title: 'success', value: 'success' },
          { title: 'warning', value: 'warning' },
          { title: 'danger', value: 'danger' },
        ],
        layout: 'radio',
      },
    }),
  ],
  initialValue: {
    intent: 'info',
  },
  preview: {
    select: {
      heading: 'heading',
      content: 'content',
      intent: 'intent',
      anotherField: 'anotherField',
    },
    prepare: ({ heading, content, intent, anotherField }) => ({
      heading: heading,
      subtitle: blockPreview(content),
      intent: intent,
      anotherField: anotherField,
    }),
  },
  components: {
    preview: CalloutPreview,
  },
})

This gives me: