sanity-plugin-iframe-pane

Display any URL in a View Pane, along with helpful buttons to Copy the URL or open it in a new tab.

Accepts either a string or an async function to resolve a URL based on the current document.

Installation

npm install --save sanity-plugin-iframe-pane

or

yarn add sanity-plugin-iframe-pane

Usage

This is designed to be used as a Component inside of a View.

The simplest way to configure views is by customizing the defaultDocumentNode setting in the structureTool() plugin.

// ./sanity.config.ts

export default defineConfig({
  // ...other config settings
  plugins: [
    structureTool({
      defaultDocumentNode,
      structure, // not required
    }),
    // ...other plugins
  ],
})

A basic example of a custom defaultDocumentNode function, to only show the Iframe Pane on movie type documents.

// ./src/defaultDocumentNode.ts

import {type DefaultDocumentNodeResolver} from 'sanity/structure'
import {urlSearchParamPreviewPerspective} from '@sanity/preview-url-secret/constants'
import {Iframe, UrlResolver} from 'sanity-plugin-iframe-pane'
import {type SanityDocument} from 'sanity'

// Customise this function to show the correct URL based on the current document and the current studio perspective
const getPreviewUrl: UrlResolver = (doc, perspective) => {
  return doc?.slug?.current
    ? `${window.location.host}/${doc.slug.current}?${urlSearchParamPreviewPerspective}=${perspective.perspectiveStack}`
    : `${window.location.host}`
}

// Import this into the deskTool() plugin
export const defaultDocumentNode: DefaultDocumentNodeResolver = (S, {schemaType}) => {
  // Only show preview pane on `movie` schema type documents
  switch (schemaType) {
    case `movie`:
      return S.document().views([
        S.view.form(),
        S.view
          .component(Iframe)
          .options({
            url: getPreviewUrl,
          })
          .title('Preview'),
      ])
    default:
      return S.document().views([S.view.form()])
  }
}

Options

// Required: Accepts an async function
url: (doc, {perspectiveStack, selectedPerspectiveName}) => resolveProductionUrl(doc),

// OR a string
url: `https://sanity.io`,

// OR a configuration for usage with `@sanity/preview-url-secret` and Next.js Draft Mode
url: {
  origin: 'https://sanity.io' // or 'same-origin' if the app and studio are on the same origin
  preview: (document, {perspectiveStack, selectedPerspective}) => document?.slug?.current ? `/posts/${document.slug.current}` : new Error('Missing slug'),
  draftMode: '/api/draft' // the route you enable draft mode, see: https://github.com/sanity-io/visual-editing/tree/main/packages/preview-url-secret#sanitypreview-url-secret
},

// Optional: Display the Url in the pane
showDisplayUrl: true // boolean. default `true`.

// Optional: Set the default size
defaultSize: `mobile`, // default `desktop`

// Optional: Add a reload button
reload: {
  button: true, // default `undefined`
},

// Optional: Pass attributes to the underlying `iframe` element:
// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
attributes: {
  allow: 'fullscreen', // string, optional
  referrerPolicy: 'strict-origin-when-cross-origin', // string, optional
  sandbox: 'allow-same-origin', // string, optional
}

License

MIT-licensed. See LICENSE.