search

sanity-io / visual-editing

https://visual-editing-studio.sanity.build
MIT License
37 stars 20 forks source link

feat: add shared state #2120

Closed rdunk closed 2 weeks ago

rdunk commented 2 weeks ago

This one relies on #2117 (will fix the visual-editing-page-builder-demo deployment), and #2118 to allow mounting a component which can demonstrate how shared state is used.

I'll write more comprehensive documentation, but the TL;DR of it is:

In Presentation, you can share state by passing a key and value using the useSharedState hook:

import {useShatedState} from '@sanity/presentation'
const [enabled, setEnabled] = useState(false)
useSharedState('overlay-enabled', enabled)

Then, in your app, you can define a custom overlay component which uses an identically named hook (is this sensible?) which accepts just a single param—the key—and returns the shared value:

import {useShatedState} from '@sanity/visual-editing'
const enabled = useSharedState('overlay-enabled')

Video below showing how this state might be used, to optionally render more "visible" overlays:

https://github.com/user-attachments/assets/2939a4f5-9098-4040-9b60-1ee35d108d3f

Please feel free to weigh in on the API design, this isn't urgent so we might want to hold off merging until we've discussed this and #2118 a bit more.

vercel[bot] commented 2 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
live-visual-editing-next ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 11, 2024 3:30pm
visual-editing-astro ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 11, 2024 3:30pm
visual-editing-next ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 11, 2024 3:30pm
visual-editing-next-with-i18n ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 11, 2024 3:30pm
visual-editing-nuxt ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 11, 2024 3:30pm
visual-editing-page-builder-demo ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 11, 2024 3:30pm
visual-editing-remix ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 11, 2024 3:30pm
visual-editing-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 11, 2024 3:30pm
visual-editing-studio ✅ Ready (Inspect) Visit Preview Nov 11, 2024 3:30pm
visual-editing-svelte ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 11, 2024 3:30pm