@sanity/overlays
Advanced tools
Comparing version 2.3.10 to 2.3.11
@@ -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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 5 instances in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
1
16
1
0
45414
11
106
31
+ Added@sanity/visual-editing@1.0.1
+ Added@sanity/visual-editing@1.0.1(transitive)
- Removed@vercel/stega@0.1.0
- Removedreact@^18.2.0
- Removedreact-dom@^18.2.0
- Removedreact-is@18.2.0
- Removedscroll-into-view-if-needed@^3.1.0