Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@sanity/overlays

Package Overview
Dependencies
Maintainers
44
Versions
111
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sanity/overlays - npm Package Compare versions

Comparing version 2.3.9 to 2.3.10

dist/_chunks/index-A7IHbPJt.js

14

CHANGELOG.md

@@ -33,2 +33,16 @@ <!-- markdownlint-disable --><!-- textlint-disable -->

## [2.3.10](https://github.com/sanity-io/visual-editing/compare/overlays-v2.3.9...overlays-v2.3.10) (2024-02-05)
### Bug Fixes
* add keywords ([490c423](https://github.com/sanity-io/visual-editing/commit/490c4230ac9152fc6f797250ecfd1aea1616d1e9))
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @sanity/visual-editing bumped to 1.0.0
## [2.3.9](https://github.com/sanity-io/visual-editing/compare/overlays-v2.3.8...overlays-v2.3.9) (2024-01-29)

@@ -35,0 +49,0 @@

1

dist/index.cjs.js

@@ -5,2 +5,3 @@ import cjs from './index.cjs';

export const enableOverlays = cjs.enableOverlays;
export const enableVisualEditing = cjs.enableVisualEditing;

18

dist/index.d.ts

@@ -18,3 +18,5 @@ /**

*/
export declare type DisableOverlays = () => void
declare type DisableVisualEditing = () => void
export { DisableVisualEditing as DisableOverlays }
export { DisableVisualEditing }

@@ -46,14 +48,8 @@ /**

*/
export declare function enableOverlays(options?: {
/**
* @deprecated -- no longer needed
*/
allowStudioOrigin?:
| 'same-origin'
| `https://${string}`
| `http://${string}`
| string
declare function enableVisualEditing(options?: {
history?: HistoryAdapter
zIndex?: string | number
}): DisableOverlays
}): DisableVisualEditing
export { enableVisualEditing as enableOverlays }
export { enableVisualEditing }

@@ -60,0 +56,0 @@ /**

@@ -1,1 +0,1 @@

export{a as createOverlayController,e as enableOverlays}from"./_chunks/index-U7zAgUAz.js";//# sourceMappingURL=index.js.map
export{e as createOverlayController,o as enableOverlays,o as enableVisualEditing}from"./_chunks/index-A7IHbPJt.js";//# sourceMappingURL=index.js.map
{
"name": "@sanity/overlays",
"version": "2.3.9",
"version": "2.3.10",
"keywords": [
"sanity.io",
"visual-editing",
"presentation",
"preview"
],
"homepage": "https://github.com/sanity-io/visual-editing/tree/main/packages/overlays#readme",

@@ -113,16 +119,17 @@ "bugs": {

"@sanity/client": "6.12.3",
"@sanity/pkg-utils": "^4.1.1",
"@sanity/pkg-utils": "^4.1.2",
"@sanity/ui": "2.0.1",
"@sanity/visual-editing": "1.0.0",
"@sanity/visual-editing-helpers": "0.2.6",
"@types/react": "^18.2.53",
"@types/react-dom": "^18.2.18",
"@types/react": "^18.2.48",
"@typescript-eslint/eslint-plugin": "^6.20.0",
"@typescript-eslint/parser": "^6.20.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint": "^8.56.0",
"happy-dom": "^13.3.5",
"happy-dom": "^13.3.8",
"ls-engines": "^0.9.1",

@@ -129,0 +136,0 @@ "rimraf": "^5.0.5",

@@ -10,49 +10,20 @@ # @sanity/overlays — Visual Editing

## Getting started
## Usage
### 1. Install @sanity/overlays
### In React.js
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.
```sh
# For React.js applications
npm install @sanity/overlays @sanity/react-loader
```
```sh
# Framework agnostic JavaScript libraries
npm install @sanity/overlays @sanity/core-loader
```
### 2. Fetch data with a Sanity loader
TODO, link to the docs for each loader
### 3. Set data attributes
TODO, how to set the `data-sanity` attributes
### 4. Dynamically enable Visual Editing
Ensure the overlay is only enabled in non-production environments.
```ts
```tsx
import { enableOverlays } from '@sanity/overlays'
import { useEffect } from 'react'
const disable = enableOverlays() // Enables Visual Editing overlay
disable() // Disables Visual Editing overlay
```
export default function VisualEditing() {
useEffect(() => {
const disable = enableOverlays()
return () => disable()
}, [])
In React you could enable the feature in a `useEffect()` hook, where `disable()` will run on unmount:
```ts
import { enableOverlays } from '@sanity/overlays'
useEffect(enableOverlays, [])
return null
}
```
When enabled, you should see clickable "Edit in Sanity Studio" buttons for every element which contains encoded metadata from Content Source Maps.
## Manually configuring "Edit in Sanity Studio" elements

@@ -84,12 +55,4 @@

## Using stega
Docs on how to use the new stega enhanced client in `@sanity/client/stega` which replaces `@sanity/preview-kit/client`.
## Vercel Visual Editing compatibility
A note on usage that's compatible with Vercel.
[gzip-badge]: https://img.shields.io/bundlephobia/minzip/@sanity/overlays?label=gzip%20size&style=flat-square
[size-badge]: https://img.shields.io/bundlephobia/min/@sanity/overlays?label=size&style=flat-square
[bundlephobia]: https://bundlephobia.com/package/@sanity/overlays

@@ -1,3 +0,8 @@

export { createOverlayController } from './controller'
export type * from './types'
export { type DisableOverlays, enableOverlays } from './ui/enableOverlays'
export type * from '@sanity/visual-editing'
export {
createOverlayController,
type DisableVisualEditing as DisableOverlays,
type DisableVisualEditing,
enableVisualEditing as enableOverlays,
enableVisualEditing,
} from '@sanity/visual-editing'

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc