@sanity/visual-editing
Version:
[](https://npm-stat.com/charts.html?package=@sanity/visual-editing) [](https://
356 lines • 12.2 kB
TypeScript
import { Node } from "@sanity/comlink";
import { DocumentSchema, HistoryRefresh, HistoryRefresh as HistoryRefresh$1, HistoryUpdate, HistoryUpdate as HistoryUpdate$1, SanityNode, SanityNode as SanityNode$1, SanityStegaNode, SanityStegaNode as SanityStegaNode$1, SchemaArrayItem, SchemaNode, SchemaObjectField, SchemaUnionNode, SchemaUnionOption, VisualEditingControllerMsg, VisualEditingNodeMsg } from "@sanity/presentation-comlink";
import { ComponentType, FunctionComponent, HTMLAttributes, PropsWithChildren, ReactElement } from "react";
/**
* @public
*/
interface OverlayRect {
x: number;
y: number;
w: number;
h: number;
}
/** @public */
type DragInsertPosition = {
top?: {
rect: OverlayRect;
sanity: SanityNode;
} | null;
left?: {
rect: OverlayRect;
sanity: SanityNode;
} | null;
bottom?: {
rect: OverlayRect;
sanity: SanityNode;
} | null;
right?: {
rect: OverlayRect;
sanity: SanityNode;
} | null;
} | null;
/** @public */
interface DragEndEvent {
insertPosition: DragInsertPosition;
target: SanityNode;
dragGroup: string | null;
flow: string;
preventInsertDefault: boolean;
}
/** @public */
type DragSkeleton = {
w: number;
h: number;
offsetX: number;
offsetY: number;
childRects: {
x: number;
y: number;
w: number;
h: number;
tagName: string;
}[];
maxWidth: number;
};
/**
* Base controller dispatched message
* @typeParam T - Type of message
* @public
*/
interface Msg<T extends string> {
type: T;
}
/** @public */
interface OverlayMsgElement<T extends string> extends Msg<`element/${T}`> {
id: string;
}
/** @public */
type OverlayMsgElementActivate = OverlayMsgElement<'activate'>;
/** @public */
type OverlayMsgBlur = Msg<'overlay/blur'>;
/** @public */
type OverlayMsgActivate = Msg<'overlay/activate'>;
/** @public */
type OverlayMsgDeactivate = Msg<'overlay/deactivate'>;
/** @public */
type OverlayMsgSetCursor = Msg<'overlay/setCursor'> & {
element: ElementNode;
cursor: string | undefined;
};
/** @public */
type OverlayMsgElementContextMenu = OverlayMsgElement<'contextmenu'> | (OverlayMsgElement<'contextmenu'> & {
position: {
x: number;
y: number;
};
sanity: SanityNode;
});
/** @public */
type OverlayMsgElementDeactivate = OverlayMsgElement<'deactivate'>;
/** @public */
type OverlayMsgElementClick = OverlayMsgElement<'click'> & {
sanity: SanityNode | SanityStegaNode;
};
/** @public */
type OverlayMsgElementMouseEnter = OverlayMsgElement<'mouseenter'> & {
rect: OverlayRect;
};
/** @public */
type OverlayMsgElementMouseLeave = OverlayMsgElement<'mouseleave'>;
/** @public */
type OverlayMsgElementRegister = OverlayMsgElement<'register'> & {
element: ElementNode;
sanity: SanityNode | SanityStegaNode;
rect: OverlayRect;
dragDisabled: boolean;
targets: ElementChildTarget[];
elementType: 'element' | 'group';
};
/** @public */
type OverlayMsgElementUpdate = OverlayMsgElement<'update'> & {
sanity: SanityNode | SanityStegaNode;
rect: OverlayRect;
targets: ElementChildTarget[];
elementType: 'element' | 'group';
};
/** @public */
type OverlayMsgElementUnregister = OverlayMsgElement<'unregister'>;
/** @public */
type OverlayMsgElementUpdateRect = OverlayMsgElement<'updateRect'> & {
rect: OverlayRect;
};
/** @public */
type OverlayMsgDragUpdateInsertPosition = Msg<'overlay/dragUpdateInsertPosition'> & {
insertPosition: DragInsertPosition | null;
};
/** @public */
type OverlayMsgDragUpdateCursorPosition = Msg<'overlay/dragUpdateCursorPosition'> & {
x: number;
y: number;
};
/** @public */
type OverlayMsgDragStart = Msg<'overlay/dragStart'> & {
flow: 'horizontal' | 'vertical';
};
/** @public */
type OverlayMsgDragToggleMinimapPrompt = Msg<'overlay/dragToggleMinimapPrompt'> & {
display: boolean;
};
/** @public */
type OverlayMsgDragToggleMinimap = Msg<'overlay/dragToggleMinimap'> & {
display: boolean;
};
/** @public */
type OverlayMsgDragUpdateSkeleton = Msg<'overlay/dragUpdateSkeleton'> & {
skeleton: DragSkeleton;
};
/** @public */
type OverlayMsgDragEnd = Msg<'overlay/dragEnd'> & DragEndEvent;
/** @public */
type OverlayMsgDragUpdateGroupRect = Msg<'overlay/dragUpdateGroupRect'> & {
groupRect: OverlayRect | null;
};
/** @public */
type OverlayMsgDragStartMinimapTransition = Msg<'overlay/dragStartMinimapTransition'>;
/** @public */
type OverlayMsgDragEndMinimapTransition = Msg<'overlay/dragEndMinimapTransition'>;
/** @public */
type OverlayMsgResetMouseState = Msg<'overlay/reset-mouse-state'>;
/**
* Controller dispatched messages
* @public
*/
type OverlayMsg = OverlayMsgActivate | OverlayMsgBlur | OverlayMsgDeactivate | OverlayMsgDragEnd | OverlayMsgDragEndMinimapTransition | OverlayMsgDragStart | OverlayMsgDragStartMinimapTransition | OverlayMsgDragToggleMinimap | OverlayMsgDragToggleMinimapPrompt | OverlayMsgDragUpdateCursorPosition | OverlayMsgDragUpdateGroupRect | OverlayMsgDragUpdateInsertPosition | OverlayMsgDragUpdateSkeleton | OverlayMsgElementActivate | OverlayMsgElementClick | OverlayMsgElementContextMenu | OverlayMsgElementDeactivate | OverlayMsgElementMouseEnter | OverlayMsgElementMouseLeave | OverlayMsgElementRegister | OverlayMsgElementUnregister | OverlayMsgElementUpdate | OverlayMsgElementUpdateRect | OverlayMsgSetCursor | OverlayMsgResetMouseState;
/**
* Callback function used for handling dispatched controller messages
* @public
*/
type OverlayEventHandler = (message: OverlayMsg) => void;
/**
* Options passed when instantiating an overlay controller
* @public
*/
interface OverlayOptions {
handler: OverlayEventHandler;
overlayElement: HTMLElement;
inFrame: boolean;
inPopUp: boolean;
optimisticActorReady: boolean;
}
/**
* Object returned by a controller instantiation
* @public
*/
interface OverlayController {
activate: () => void;
deactivate: () => void;
destroy: () => void;
}
/**
* Element focus state
* @public
*/
type ElementFocusedState = 'clicked' | 'duplicate' | boolean;
/**
* Element state for consuming applications
* @public
*/
interface ElementState {
id: string;
activated: boolean;
element: ElementNode;
focused: ElementFocusedState;
hovered: boolean;
rect: OverlayRect;
sanity: SanityNode | SanityStegaNode;
dragDisabled: boolean;
targets: ElementChildTarget[];
elementType: 'element' | 'group';
}
/**
* @public
*/
interface ElementChildTarget {
sanity: SanityNode | SanityStegaNode;
element: ElementNode;
}
/**
*
* @public
*/
type HistoryAdapterNavigate = (update: HistoryUpdate) => void;
/**
*
* @public
*/
interface HistoryAdapter {
subscribe: (navigate: HistoryAdapterNavigate) => () => void;
update: (update: HistoryUpdate) => void;
}
/**
* An element that is safe to parse
* @internal
*/
type ElementNode = HTMLElement | SVGElement;
/**
* @internal
*/
type VisualEditingNode = Node<VisualEditingNodeMsg, VisualEditingControllerMsg>;
/**
* Cleanup function used when e.g. unmounting
* @public
*/
type DisableVisualEditing = () => void;
/**
* @public
*/
interface OverlayComponentResolverContext<P extends OverlayElementParent = OverlayElementParent> {
/**
* The resolved field's document schema type
*/
document: DocumentSchema;
/**
* The element node that the overlay is attached to
*/
element: ElementNode;
/**
* The element node that the Sanity node data is detected on
*/
targetElement: ElementNode;
/**
* The resolved field schema type
*/
field: OverlayElementField;
/**
* Whether the overlay is focused or not
*/
focused: boolean;
/**
* The Sanity node data that triggered the overlay
*/
node: SanityNode;
/**
* The resolved field's parent schema type
*/
parent: P;
/**
* A convience property, equal to `field.value.type`
*/
type: string;
}
/**
* @public
*/
type OverlayComponentResolver<T extends OverlayComponent = OverlayComponent<Record<string, unknown>, any>> = (context: OverlayComponentResolverContext) => T | {
component: T;
props?: Record<string, unknown>;
} | Array<T | {
component: T;
props?: Record<string, unknown>;
}> | ReactElement | undefined | void;
/** @public */
interface OverlayPluginDefinitionBase {
name: string;
title?: string;
icon?: ComponentType;
guard?: (context: OverlayComponentResolverContext) => boolean;
}
/** @public */
interface OverlayPluginExclusiveDefinition extends OverlayPluginDefinitionBase {
type: 'exclusive';
component?: OverlayPluginComponent<Record<string, unknown> & {
closeExclusiveView: () => void;
}, any>;
}
/** @public */
interface OverlayPluginHudDefinition extends OverlayPluginDefinitionBase {
type: 'hud';
component?: OverlayPluginComponent<Record<string, unknown>, any>;
}
/** @public */
type OverlayPluginDefinition = OverlayPluginExclusiveDefinition | OverlayPluginHudDefinition;
/**
* @public
*/
interface VisualEditingOptions {
/**
* @alpha
* This API is unstable and could change at any time.
*/
plugins?: OverlayPluginDefinition[];
/**
* @alpha
* This API is unstable and could change at any time.
*/
components?: OverlayComponentResolver;
/**
* The history adapter is used for Sanity Presentation to navigate URLs in the preview frame.
*/
history?: HistoryAdapter;
/**
* The refresh API allows smarter refresh logic than the default `location.reload()` behavior.
*/
refresh?: (payload: HistoryRefresh) => false | Promise<void>;
/**
* The CSS z-index on the root node that renders overlays, tweak it accordingly to what layout you have.
*/
zIndex?: string | number;
}
/**
* @public
*/
interface OverlayComponentProps<P extends OverlayElementParent = OverlayElementParent> extends OverlayComponentResolverContext<P> {
PointerEvents: FunctionComponent<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;
}
/**
* @public
*/
type OverlayComponent<T extends Record<string, unknown> = Record<string, unknown>, P extends OverlayElementParent = OverlayElementParent> = ComponentType<OverlayComponentProps<P | undefined> & T>;
/**
* @public
*/
type OverlayPluginComponent<T extends Record<string, unknown> = Record<string, unknown>, P extends OverlayElementParent = OverlayElementParent> = ComponentType<OverlayComponentResolverContext<P | undefined> & T>;
type OverlayElementField = SchemaArrayItem | SchemaObjectField | SchemaUnionOption | undefined;
type OverlayElementParent = DocumentSchema | SchemaNode | SchemaArrayItem | SchemaUnionOption | SchemaUnionNode | undefined;
export { OverlayPluginExclusiveDefinition as $, OverlayMsgDragToggleMinimap as A, OverlayMsgElementDeactivate as B, OverlayMsgActivate as C, OverlayMsgDragEndMinimapTransition as D, OverlayMsgDragEnd as E, OverlayMsgDragUpdateSkeleton as F, OverlayMsgElementUpdate as G, OverlayMsgElementMouseLeave as H, OverlayMsgElement as I, OverlayMsgSetCursor as J, OverlayMsgElementUpdateRect as K, OverlayMsgElementActivate as L, OverlayMsgDragUpdateCursorPosition as M, OverlayMsgDragUpdateGroupRect as N, OverlayMsgDragStart as O, OverlayMsgDragUpdateInsertPosition as P, OverlayPluginDefinitionBase as Q, OverlayMsgElementClick as R, OverlayMsg as S, OverlayMsgDeactivate as T, OverlayMsgElementRegister as U, OverlayMsgElementMouseEnter as V, OverlayMsgElementUnregister as W, OverlayPluginComponent as X, OverlayOptions as Y, OverlayPluginDefinition as Z, OverlayComponentResolverContext as _, ElementChildTarget as a, VisualEditingOptions as at, OverlayElementParent as b, ElementState as c, HistoryRefresh$1 as d, OverlayPluginHudDefinition as et, HistoryUpdate$1 as f, OverlayComponentResolver as g, OverlayComponentProps as h, DragSkeleton as i, VisualEditingNode as it, OverlayMsgDragToggleMinimapPrompt as j, OverlayMsgDragStartMinimapTransition as k, HistoryAdapter as l, OverlayComponent as m, DragEndEvent as n, SanityNode$1 as nt, ElementFocusedState as o, Msg as p, OverlayMsgResetMouseState as q, DragInsertPosition as r, SanityStegaNode$1 as rt, ElementNode as s, DisableVisualEditing as t, OverlayRect as tt, HistoryAdapterNavigate as u, OverlayController as v, OverlayMsgBlur as w, OverlayEventHandler as x, OverlayElementField as y, OverlayMsgElementContextMenu as z };
//# sourceMappingURL=types.d.ts.map