Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@sanity/overlays
Advanced tools
[![npm stat](https://img.shields.io/npm/dm/@sanity/overlays.svg?style=flat-square)](https://npm-stat.com/charts.html?package=@sanity/overlays) [![npm version](https://img.shields.io/npm/v/@sanity/overlays.svg?style=flat-square)](https://www.npmjs.com/pack
This package is used with the Presentation tool in the Sanity Studio to create clickable elements to take editors right from previews to the document and field they want to edit.
Install the package along with either @sanity/react-loader
, @sanity/nuxt-loader
, @sanity/svelte-loader
or @sanity/core-loader
depending on your project.
The other peer dependencies are required and will be loaded asynchronously when Visual Editing is enabled.
# For React.js applications
npm install @sanity/overlays @sanity/react-loader
# Framework agnostic JavaScript libraries
npm install @sanity/overlays @sanity/core-loader
TODO, link to the docs for each loader
TODO, how to set the data-sanity
attributes
Ensure the overlay is only enabled in non-production environments.
import { enableOverlays } from '@sanity/overlays'
const disable = enableOverlays() // Enables Visual Editing overlay
disable() // Disables Visual Editing overlay
In React you could enable the feature in a useEffect()
hook, where disable()
will run on unmount:
import { enableOverlays } from '@sanity/overlays'
useEffect(enableOverlays, [])
When enabled, you should see clickable "Edit in Sanity Studio" buttons for every element which contains encoded metadata from Content Source Maps.
data-sanity-edit-target
You can choose which element to render the "Edit in Sanity Studio" buttons on by adding a data-sanity-edit-target
attribute to the element you want to be clickable. This allows you to move the edit container to a parent wrapper element.
In this example, by default the edit button would be placed on the <h1>
tag
<section>
<h1>{dynamicTitle}</h1>
<div>Hardcoded Tagline</div>
</section>
But by adding the data-sanity-edit-target
attribute to the <section>
tag, the edit button will be placed on it instead.
<section data-sanity-edit-target>
<h1>{dynamicTitle}</h1>
<div>Hardcoded Tagline</div>
</section>
Manually setting the edit target will use the first element it finds with encoded metadata and remove clickable buttons from all other child elements.
Docs on how to use the new stega enhanced client in @sanity/client/stega
which replaces @sanity/preview-kit/client
.
A note on usage that's compatible with Vercel.
FAQs
[![npm stat](https://img.shields.io/npm/dm/@sanity/overlays.svg?style=flat-square)](https://npm-stat.com/charts.html?package=@sanity/overlays) [![npm version](https://img.shields.io/npm/v/@sanity/overlays.svg?style=flat-square)](https://www.npmjs.com/pack
The npm package @sanity/overlays receives a total of 5,022 weekly downloads. As such, @sanity/overlays popularity was classified as popular.
We found that @sanity/overlays demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.