![Introducing Dashboard Analytics](https://cdn.sanity.io/images/cgdhsj6q/production/af327c5bd94708db501516a75da6870aef894c64-2286x1522.png?w=400&fit=max&auto=format)
Product
Introducing Dashboard Analytics
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
sanity-plugin-iframe-pane
Advanced tools
Display any URL in a View Pane, along with helpful buttons to Copy the URL or open in a new tab
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.
npm install --save sanity-plugin-iframe-pane
or
yarn add sanity-plugin-iframe-pane
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()])
}
}
// 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
}
MIT-licensed. See LICENSE.
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.
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.
FAQs
Display any URL in a View Pane, along with helpful buttons to Copy the URL or open in a new tab
The npm package sanity-plugin-iframe-pane receives a total of 15,078 weekly downloads. As such, sanity-plugin-iframe-pane popularity was classified as popular.
We found that sanity-plugin-iframe-pane demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 47 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
Security News
A new OpenSSF report uncovers critical gaps in secure software training, with 75% of new developers unfamiliar with secure practices, highlighting urgent educational needs.
Security News
The 2023 Python Developers Survey reveals key trends in packaging, web frameworks, and developer demographics, highlighting a shift toward innovative tools as the Python community diversifies and grows among less experienced developers.