Visual editing should be enabled and controlled only from the Presentation tool #329
Description
Is your feature request related to a problem? Please describe.
When trying to implement visual editing in Presentation, it would always include the overlays on any page even when not connected, because of the preview mode environment variable. I feel that it should be managed by this official implementation, behind the hood.
To make this work nicely, I had to follow a video tutorial to limit the access of editing using ?preview=true in the URL in my Layout.astro:
---
// Detect if live editing is enabled
let previewEnabled = false
if (Astro.url.href.includes('?preview=true')) {
previewEnabled = true
}
---
<body>
{previewEnabled && <VisualEditing enabled={import.meta.env.PUBLIC_SANITY_VISUAL_EDITING_ENABLED == 'true'} />}
</body>then in the Sanity config:
const SANITY_STUDIO_PREVIEW_URL = process.env.SANITY_STUDIO_PREVIEW_URL || 'http://localhost:4321'
presentationTool({
previewUrl: `${SANITY_STUDIO_PREVIEW_URL}/?preview=true`,
}),Describe the solution you'd like
Seeing the visual editing should limited to the Presentation mode out of the box from this implementation. Enabling it only by a env variable seems quite light IMO and would require a preview subdomain or something.
Something svelte-loader does, is using the /preview/enable and /preview/disable routes without any config and this works very nicely. Something similar should be considered to make it happen in Astro.
Of course this would not work with static only sites, but for SSR this would be good.
Describe alternatives you've considered
- Using a cookie set in the Presentation tool?
- Using a special url like
?preview=trueor something more secure and private
(sorry for the double issue, wrong account 🤓)