[v4] Hide the Prismic Toolbar

[cometkim]

I saw this from v4 docs,

Note: The toolbar is required for previews to function and cannot be disabled.

But I don't understand why this became necessary. This is a major blocker to me as I don't want the Toolbar to appear on my site.

[angeloashmore]

Hi @cometkim,

The toolbar is necessary to set a preview-specific cookie in the browser. Without this, previews would not be registered as being "active."

It also enables a few features:

• Automatic refreshing when content is saved in Prismic (i.e. "live" preview sessions)
• Share links
• Links to edit documents used on the page

If you want to hide the toolbar from editors, you could use CSS to ensure it is invisible:

iframe[src*=".prismic.io/prismic-toolbar/"] {
  visibility: hidden;
}

This will allow the toolbar to be present to manage the preview cookie and automatically refresh the page while having no visible UI.

[cometkim]

I see. I added a global style to my website

#prismic-toolbar-v2 {
  visibility: hidden;
}

It would be nice to add docs for this. or we can add an options to supports it behind of a scene

[cometkim]

And since the toolbar is required, it's better to provide a preconnect directive for the prismic toolbar location.

-> PR #399