-
Notifications
You must be signed in to change notification settings - Fork 16
Description
Describe the bug
When enabling the Presentation Tool with Astro, the blue overlays for visual editing appear over text but not over images. I checked my implementation and didn't find any mistakes in my code.
To verify, I also cloned the official Sanity Astro Movies example (repo link), which includes visual editing, and noticed that overlays over images don’t appear there either.
Is there an issue with how the Presentation Tool works with Astro? Or is there any additional configuration required to make overlays work for images?
Additional Context
- I followed the Sanity Astro Blog Tutorial to integrate the Presentation Tool.
- The same issue appears in the official movies example project.
- The browser console does not show any relevant errors.
I have also created a repository where this issue can be reproduced:
To Reproduce
- Clone my project: astro-template (blog-tutorial branch).
- Create a
.envfile in the project root with the following values:PUBLIC_SANITY_PROJECT_ID="" PUBLIC_SANITY_DATASET="production" PUBLIC_SANITY_VISUAL_EDITING_ENABLED="true" SANITY_API_READ_TOKEN=""
- Start Sanity Studio and create the first post.
- Run the Astro project and navigate to
http://localhost:4321/post/slug-name. - Try to use the Presentation Tool. The overlays appear over text but not over images.
Expected behavior
The Presentation Tool should show overlays over images, similar to how it does over text.
Actual behavior
The blue overlays do not appear over images, making visual editing of images difficult.
Screenshots
Which versions of Sanity are you using?
@sanity/cli (global) 3.68.3 (latest: 3.80.1)
@sanity/astro 3.2.6 (up to date)
@sanity/image-url 1.1.0 (up to date)
sanity 3.80.1 (up to date)What operating system are you using?
Windows 11
Which versions of Node.js / npm are you running?
$ npm -v && node -v
10.8.2
v20.16.0Would appreciate any insights into whether this is a bug or a misconfiguration! 🙏
