sanity-plugin-iframe-pane

sanity-plugin-iframe-pane

This is a Sanity Studio v3 plugin. For the v2 version, please refer to the v2-branch.

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 deskTool() plugin.

// ./sanity.config.ts

export default defineConfig({
  // ...other config settings
  plugins: [
    deskTool({
      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 {DefaultDocumentNodeResolver} from 'sanity/desk'
import {Iframe} from 'sanity-plugin-iframe-pane'
import {SanityDocument} from 'sanity'

// Customise this function to show the correct URL based on the current document
function getPreviewUrl(doc: SanityDocument) {
  return doc?.slug?.current
    ? `${window.location.host}/${doc.slug.current}`
    : `${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: (doc: SanityDocument) => getPreviewUrl(doc),
          })
          .title('Preview'),
      ])
    default:
      return S.document().views([S.view.form()])
  }
}

Options

// Required: Accepts an async function
url: (doc) => resolveProductionUrl(doc),

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

// 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, or reload on new document revisions
reload: {
  button: true, // default `undefined`
  revision: true, // boolean | number. default `undefined`. If a number is provided, add a delay (in ms) before the automatic reload on document revision. If `true` then a curated delay is used. Use `0` to have zero delay.`
},

// Optional: Display a spinner while the iframe is loading
loader: true // boolean | string. default `'Loading…'`. If a string is provided, it will be display below the spinner (e.g. Loading…)

// 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.

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.

Release new version

Run "CI & Release" workflow. Make sure to select the main branch and check "Release new version".

Semantic release will only release on configured branches, so it is safe to run release on any branch.

Changelog

2.6.0 (2023-10-18)

Features

• send id on url resolver (d03546f)
• use the new RefreshIcon (4fd266c)