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.10 to 2.3.11

20

CHANGELOG.md

@@ -8,20 +8,10 @@ <!-- markdownlint-disable --><!-- textlint-disable -->

### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @sanity/channels bumped to 0.1.0
* @sanity/visual-editing-helpers bumped to 0.1.0
## [2.3.11](https://github.com/sanity-io/visual-editing/compare/overlays-v2.3.10...overlays-v2.3.11) (2024-02-05)
### Dependencies
* The following workspace dependencies were updated
* devDependencies
* @sanity/visual-editing-helpers bumped from 0.1.0 to 0.1.1
### Bug Fixes
### Dependencies
* rename `@sanity/overlays` to `@sanity/visual-editing` ([#834](https://github.com/sanity-io/visual-editing/issues/834)) ([1d28908](https://github.com/sanity-io/visual-editing/commit/1d289084dd2d631230141fbdc5043c709ecebdea))
* The following workspace dependencies were updated
* devDependencies
* @sanity/visual-editing-helpers bumped from 0.1.2 to 0.1.3

@@ -31,4 +21,4 @@ ### Dependencies

* The following workspace dependencies were updated
* devDependencies
* @sanity/channels bumped from 0.2.0 to 0.3.0
* dependencies
* @sanity/visual-editing bumped to 1.0.1

@@ -35,0 +25,0 @@ ## [2.3.10](https://github.com/sanity-io/visual-editing/compare/overlays-v2.3.9...overlays-v2.3.10) (2024-02-05)

@@ -1,265 +0,60 @@

/**
* Creates a controller which dispatches overlay related events
*
* @param handler - Dispatched event handler
* @param overlayElement - Parent element containing rendered overlay elements
* @public
*/
export declare function createOverlayController({
handler,
overlayElement,
preventDefault,
}: OverlayOptions): OverlayController
import { createOverlayController as createOverlayController_2 } from '@sanity/visual-editing'
import { DisableVisualEditing as DisableVisualEditing_2 } from '@sanity/visual-editing'
import { ElementState as ElementState_2 } from '@sanity/visual-editing'
import { enableVisualEditing as enableVisualEditing_2 } from '@sanity/visual-editing'
import { HistoryAdapter as HistoryAdapter_2 } from '@sanity/visual-editing'
import { HistoryAdapterNavigate as HistoryAdapterNavigate_2 } from '@sanity/visual-editing'
import { HistoryUpdate as HistoryUpdate_2 } from '@sanity/visual-editing'
import { OverlayEventHandler as OverlayEventHandler_2 } from '@sanity/visual-editing'
/**
* Cleanup function used when e.g. unmounting
* @public
* @deprecated use `import {createOverlayController} from '@sanity/visual-editing'` instead
*/
declare type DisableVisualEditing = () => void
export { DisableVisualEditing as DisableOverlays }
export { DisableVisualEditing }
export declare const createOverlayController: typeof createOverlayController_2
/**
* Element focus state
* @public
* @deprecated use `import type {DisableVisualEditing} from '@sanity/visual-editing'` instead
*/
export declare type ElementFocusedState = 'clicked' | 'duplicate' | boolean
export declare type DisableOverlays = DisableVisualEditing_2
/**
* Element state for consuming applications
* @public
* @deprecated use `import type {DisableVisualEditing} from '@sanity/visual-editing'` instead
*/
export declare interface ElementState {
id: string
activated: boolean
focused: ElementFocusedState
hovered: boolean
rect: OverlayRect
sanity: SanityNode | SanityNodeLegacy
}
export declare type DisableVisualEditing = DisableVisualEditing_2
/**
* Enables Visual Editing overlay in a page with sourcemap encoding.
*
* This will overlay UI on hovered elements that deep-links to Sanity Studio.
* @public
* @deprecated use `import type {ElementState} from '@sanity/visual-editing'` instead
*/
declare function enableVisualEditing(options?: {
history?: HistoryAdapter
zIndex?: string | number
}): DisableVisualEditing
export { enableVisualEditing as enableOverlays }
export { enableVisualEditing }
export declare type ElementState = ElementState_2
/**
* Event handlers attached to each element
* @internal
* @deprecated use `import {enableVisualEditing} from '@sanity/visual-editing'` instead
*/
export declare interface _EventHandlers {
click: (event: MouseEvent) => void
mousedown: (event: MouseEvent) => void
mouseenter: (event: MouseEvent) => void
mouseleave: (event: MouseEvent) => void
mousemove: (event: MouseEvent) => void
}
export declare const enableOverlays: typeof enableVisualEditing_2
/**
*
* @public
* @deprecated use `import {enableVisualEditing} from '@sanity/visual-editing'` instead
*/
export declare interface HistoryAdapter {
subscribe: (navigate: HistoryAdapterNavigate) => () => void
update: (update: HistoryUpdate) => void
}
export declare const enableVisualEditing: typeof enableVisualEditing_2
/**
*
* @public
* @deprecated use `import type {HistoryAdapter} from '@sanity/visual-editing'` instead
*/
export declare type HistoryAdapterNavigate = (update: HistoryUpdate) => void
export declare type HistoryAdapter = HistoryAdapter_2
/**
* Preview frame history update
* @public
* @deprecated use `import type {HistoryAdapterNavigate} from '@sanity/visual-editing'` instead
*/
export declare type HistoryUpdate = {
type: 'push' | 'pop' | 'replace'
url: string
}
export declare type HistoryAdapterNavigate = HistoryAdapterNavigate_2
/**
* Base controller dispatched message
* @typeParam T - Type of message
* @public
* @deprecated use `import type {HistoryUpdate} from '@sanity/visual-editing'` instead
*/
export declare interface Msg<T extends string> {
type: T
}
export declare type HistoryUpdate = HistoryUpdate_2
/**
* Object returned by a controller instantiation
* @public
* @deprecated use `import type {OverlayEventHandler} from '@sanity/visual-editing'` instead
*/
export declare interface OverlayController {
activate: () => void
deactivate: () => void
}
export declare type OverlayEventHandler = OverlayEventHandler_2
/**
* Element data stored in controller state
* @internal
*/
export declare interface _OverlayElement {
id: string
elements: _SanityNodeElements
handlers: _EventHandlers
sanity: SanityNode | SanityNodeLegacy
}
/**
* Callback function used for handling dispatched controller messages
* @public
*/
export declare type OverlayEventHandler = (message: OverlayMsg) => void
/**
* Controller dispatched messages
* @public
*/
export declare type OverlayMsg =
| OverlayMsgBlur
| OverlayMsgActivate
| OverlayMsgDeactivate
| OverlayMsgElementActivate
| OverlayMsgElementClick
| OverlayMsgElementDeactivate
| OverlayMsgElementMouseEnter
| OverlayMsgElementMouseLeave
| OverlayMsgElementRegister
| OverlayMsgElementUnregister
| OverlayMsgElementUpdateRect
/** @public */
export declare type OverlayMsgActivate = Msg<'overlay/activate'>
/** @public */
export declare type OverlayMsgBlur = Msg<'overlay/blur'>
/** @public */
export declare type OverlayMsgDeactivate = Msg<'overlay/deactivate'>
/** @public */
export declare interface OverlayMsgElement<T extends string>
extends Msg<`element/${T}`> {
id: string
}
/** @public */
export declare type OverlayMsgElementActivate =
OverlayMsgElement<'activate'> & {
sanity: SanityNode | SanityNodeLegacy
rect: OverlayRect
}
/** @public */
export declare type OverlayMsgElementClick = OverlayMsgElement<'click'> & {
sanity: SanityNode | SanityNodeLegacy
}
/** @public */
export declare type OverlayMsgElementDeactivate =
OverlayMsgElement<'deactivate'>
/** @public */
export declare type OverlayMsgElementMouseEnter =
OverlayMsgElement<'mouseenter'> & {
rect: OverlayRect
}
/** @public */
export declare type OverlayMsgElementMouseLeave =
OverlayMsgElement<'mouseleave'>
/** @public */
export declare type OverlayMsgElementRegister =
OverlayMsgElement<'register'> & {
sanity: SanityNode | SanityNodeLegacy
rect: OverlayRect
}
/** @public */
export declare type OverlayMsgElementUnregister =
OverlayMsgElement<'unregister'>
/** @public */
export declare type OverlayMsgElementUpdateRect =
OverlayMsgElement<'updateRect'> & {
rect: OverlayRect
}
/**
* Options passed when instantiating an overlay controller
* @public
*/
export declare interface OverlayOptions {
handler: OverlayEventHandler
overlayElement: HTMLElement
preventDefault: boolean
}
/**
* @public
*/
export declare interface OverlayRect {
x: number
y: number
w: number
h: number
}
/**
* Object returned by node traversal
* @internal
*/
export declare interface _ResolvedElement {
elements: _SanityNodeElements
sanity: SanityNode | SanityNodeLegacy
}
/**
* Data resolved from a Sanity node
* @public
*/
export declare type SanityNode = {
/** @deprecated */
projectId?: string
/** @deprecated */
dataset?: string
id: string
path: string
type?: string
baseUrl: string
tool?: string
workspace?: string
}
/**
* Object returned by node traversal
* @internal
*/
export declare interface _SanityNodeElements {
element: HTMLElement
measureElement: HTMLElement
}
/**
* Data resolved from a (legacy) Sanity node
* @public
*/
export declare type SanityNodeLegacy = {
origin: string
href: string
data?: string
}
export {}

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

export{e as createOverlayController,o as enableOverlays,o as enableVisualEditing}from"./_chunks/index-A7IHbPJt.js";//# sourceMappingURL=index.js.map
import{createOverlayController as a,enableVisualEditing as e}from"@sanity/visual-editing";const i=a,t=e,r=e;export{i as createOverlayController,r as enableOverlays,t as enableVisualEditing};//# sourceMappingURL=index.js.map
{
"name": "@sanity/overlays",
"version": "2.3.10",
"version": "2.3.11",
"keywords": [

@@ -110,15 +110,6 @@ "sanity.io",

"dependencies": {
"@vercel/stega": "0.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "18.2.0",
"scroll-into-view-if-needed": "^3.1.0"
"@sanity/visual-editing": "1.0.1"
},
"devDependencies": {
"@sanity/channels": "0.4.0",
"@sanity/client": "6.12.3",
"@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",

@@ -137,5 +128,3 @@ "@types/react-dom": "^18.2.18",

"rimraf": "^5.0.5",
"styled-components": "6.1.8",
"typescript": "^5.3.3",
"uuid": "9.0.1",
"vitest": "^1.2.2"

@@ -142,0 +131,0 @@ },

@@ -8,50 +8,24 @@ # @sanity/overlays — Visual Editing

This package is used with the [Presentation](https://www.sanity.io/docs/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.
> [!WARNING]
> This package is replaced by [`@sanity/visual-editing`].
## Usage
## Migrate to [`@sanity/visual-editing`]
### In React.js
Replace the dependency:
```tsx
import { enableOverlays } from '@sanity/overlays'
import { useEffect } from 'react'
export default function VisualEditing() {
useEffect(() => {
const disable = enableOverlays()
return () => disable()
}, [])
return null
}
```sh
npm uninstall @sanity/overlays
npm install @sanity/visual-editing
```
## Manually configuring "Edit in Sanity Studio" elements
Replace import statements:
### `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
```html
<section>
<h1>{dynamicTitle}</h1>
<div>Hardcoded Tagline</div>
</section>
```diff
-import { enableOverlays, type DisableOverlays } from '@sanity/overlays'
+import { enableVisualEditing, type DisableVisualEditing } from '@sanity/vision-editing'
```
But by adding the `data-sanity-edit-target` attribute to the `<section>` tag, the edit button will be placed on it instead.
```html
<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.
[`@sanity/visual-editing`]: https://github.com/sanity-io/visual-editing/tree/main/packages/visual-editing#readme
[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,8 +0,56 @@

export type * from '@sanity/visual-editing'
export {
createOverlayController,
type DisableVisualEditing as DisableOverlays,
type DisableVisualEditing,
enableVisualEditing as enableOverlays,
enableVisualEditing,
import {
createOverlayController as _createOverlayController,
type DisableVisualEditing as _DisableVisualEditing,
type ElementState as _ElementState,
enableVisualEditing as _enableVisualEditing,
type HistoryAdapter as _HistoryAdapter,
type HistoryAdapterNavigate as _HistoryAdapterNavigate,
type HistoryUpdate as _HistoryUpdate,
type OverlayEventHandler as _OverlayEventHandler,
} from '@sanity/visual-editing'
/**
* @deprecated use `import {createOverlayController} from '@sanity/visual-editing'` instead
*/
export const createOverlayController = _createOverlayController
/**
* @deprecated use `import {enableVisualEditing} from '@sanity/visual-editing'` instead
*/
export const enableVisualEditing = _enableVisualEditing
/**
* @deprecated use `import type {DisableVisualEditing} from '@sanity/visual-editing'` instead
*/
export type DisableVisualEditing = _DisableVisualEditing
/**
* @deprecated use `import {enableVisualEditing} from '@sanity/visual-editing'` instead
*/
export const enableOverlays = _enableVisualEditing
/**
* @deprecated use `import type {DisableVisualEditing} from '@sanity/visual-editing'` instead
*/
export type DisableOverlays = _DisableVisualEditing
/**
* @deprecated use `import type {HistoryAdapter} from '@sanity/visual-editing'` instead
*/
export type HistoryAdapter = _HistoryAdapter
/**
* @deprecated use `import type {HistoryAdapterNavigate} from '@sanity/visual-editing'` instead
*/
export type HistoryAdapterNavigate = _HistoryAdapterNavigate
/**
* @deprecated use `import type {HistoryUpdate} from '@sanity/visual-editing'` instead
*/
export type HistoryUpdate = _HistoryUpdate
/**
* @deprecated use `import type {OverlayEventHandler} from '@sanity/visual-editing'` instead
*/
export type OverlayEventHandler = _OverlayEventHandler
/**
* @deprecated use `import type {ElementState} from '@sanity/visual-editing'` instead
*/
export type ElementState = _ElementState

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

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