Images not displaying in Portable Text Editor, showing inline elements instead

I understand the frustration! The way images appear in the Portable Text editor can definitely vary, and it sounds like you're not seeing the actual image previews you'd expect.

This Is Not a GraphQL Issue

First, let me address the GraphQL question: hoisting the GraphQL schema is completely unrelated to how content displays in the Studio editor. That's purely about API functionality, not the editing interface.

What You're Likely Experiencing

When custom block types (like your figure image type) are added to Portable Text arrays, how they display in the editor depends on your schema configuration. Your schema looks correct - you have a proper preview configuration which is the right approach for controlling how these blocks appear in Studio.

Your Schema Configuration

Your current preview setup should work to display images:

preview: {
  select: {
    imageUrl: "asset.url",
    title: "alt",
  },
}

This tells Sanity to show the image and use the alt text as the title. According to Sanity's documentation on Block Content, the preview configuration controls how blocks appear in various Studio contexts.

Things to Check

1. Verify your blockContent type includes the figure:

Make sure your Portable Text field properly references your figure type:

{
  name: 'body', // or whatever you call it
  type: 'array',
  of: [
    {type: 'block'},
    {type: 'figure'}, // your custom image type
  ]
}

2. Try these troubleshooting steps:

• Restart your Studio dev server - Schema changes sometimes need a fresh start to take effect
• Clear browser cache - Studio can cache schema information
• Check the browser console - Look for any errors related to image loading or schema validation
• Verify the image assets exist - Make sure the images have fully uploaded and processed in Sanity's asset pipeline

3. Consider enhancing your preview:

You might want to add a prepare function to your preview for more control:

preview: {
  select: {
    imageUrl: "asset.url",
    title: "alt",
  },
  prepare(selection) {
    const { imageUrl, title } = selection;
    return {
      title: title,
      subtitle: 'Image',
      media: /* your image component */
    };
  },
}

What Should Happen

With your schema configuration, Sanity Studio should be displaying a preview of your images within the Portable Text editor. The Portable Text specification supports custom blocks with rich previews, and your setup follows the correct pattern.

If you're seeing very minimal representations (like just text tokens or generic placeholders), it suggests either a caching issue that needs a Studio restart, or the images haven't fully processed in the asset pipeline.

If you're still experiencing issues after trying these steps, checking the browser console for errors would be the next step - there might be specific error messages that point to what's happening with your image display.