sanity-io / sanity-plugin-iframe-pane

Display any URL in a View Pane, along with helpful buttons to copy the URL, display a mobile size, reload the iframe or open in a new tab
MIT License
47 stars 13 forks source link

Ability to set attributes based on the sanity document #113

Open movahedan opened 7 months ago

movahedan commented 7 months ago

I want to set the attributes of the iframe based on the document.

We can follow the same practice as URL:

attributes?: (document: SanityDocument) => Partial<{
    allow: string
    referrerPolicy: HTMLAttributeReferrerPolicy | undefined
    sandbox: string
    onLoad: () => void
}>

here's the example I wanted to implement in the structure tool

S.document().views([
  S.view.form(),
  S.view
    .component(Iframe)
    .title('Preview')
    .options({
      url: (doc: SanityDocument) => doc.iframeUrl,
      showDisplayUrl: true,
      reload: {
        button: true,
      },
      attributes: (doc: SanityDocument) => ({
        referrerPolicy: 'no-referrer',
        allow: Object.entries({
          autoplay: doc['allowAutoplay'],
          geolocation: doc['allowGeolocation'],
        })
          .map(([key, value]) => (value ? key : false))
          .filter(Boolean)
          .join('; '),
        sandbox: Object.entries({
          'allow-forms': doc['sandboxForms'],
          'allow-modals': doc['sandboxModals'],
          'allow-popups': doc['sandboxPopups'],
          'allow-top-navigation': doc['sandboxTopNavigation'],
        })
          .map(([key, value]) => (value ? key : false))
          .filter(Boolean)
          .join('; '),
      }),
    }),
])