@sanity/visual-editing/dist/overlay-components/index.cjs.map

[](https://npm-stat.com/charts.html?package=@sanity/visual-editing) [](https://

{"version":3,"file":"index.cjs","sources":["../../src/overlay-components/components/UnionInsertMenuOverlay.tsx","../../src/overlay-components/defineOverlayComponent.ts","../../src/overlay-components/defineOverlayComponents.ts"],"sourcesContent":["import {AddIcon} from '@sanity/icons'\nimport type {SchemaNode, SchemaUnionNode} from '@sanity/presentation-comlink'\nimport type {SchemaType} from '@sanity/types'\nimport {Button, Flex} from '@sanity/ui/_visual-editing'\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type FunctionComponent,\n  type HTMLProps,\n  type MouseEvent,\n} from 'react'\nimport {styled} from 'styled-components'\nimport {useDocuments} from '../../react/useDocuments'\nimport type {ElementNode, OverlayComponent} from '../../types'\nimport {useTelemetry} from '../../ui/telemetry/useTelemetry'\nimport {getArrayInsertPatches} from '../../util/mutations'\nimport {InsertMenuPopover} from './InsertMenu'\n\nconst AddButton = styled(Button)`\n  position: relative;\n  transform: var(--add-button-position);\n\n  --add-button-position: translateY(0);\n  [data-position='top'] & {\n    --add-button-position: translateY(-50%);\n  }\n  [data-position='right'] & {\n    --add-button-position: translateX(50%);\n  }\n  [data-position='bottom'] & {\n    --add-button-position: translateY(50%);\n  }\n  [data-position='left'] & {\n    --add-button-position: translateX(-50%);\n  }\n`\nconst HoverAreaRoot = styled(Flex)`\n  pointer-events: all;\n  height: var(--hover-area-height);\n  width: var(--hover-area-width);\n\n  --hover-area-height: 100%;\n  --hover-area-width: 100%;\n  &[data-position='top'],\n  &[data-position='bottom'] {\n    --hover-area-height: 48px;\n  }\n  &[data-position='right'],\n  &[data-position='left'] {\n    --hover-area-width: 48px;\n  }\n`\n\nconst HoverArea: FunctionComponent<{\n  element: ElementNode\n  hoverAreaExtent: HTMLProps<HTMLDivElement>['height' | 'width']\n  node: SchemaUnionNode\n  onAddUnion: (insertPosition: 'before' | 'after', name: string) => void\n  position: 'top' | 'right' | 'bottom' | 'left'\n}> = (props) => {\n  const {element, hoverAreaExtent, node, onAddUnion, position} = props\n  const [showButton, setShowButton] = useState(false)\n  const onEnter = useCallback(() => {\n    setShowButton(true)\n  }, [])\n  const onLeave = useCallback(() => {\n    setShowButton(false)\n  }, [])\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  const sendTelemetry = useTelemetry()\n\n  // This function clones and dispatches MouseEvents so that they can be handled\n  // by the underlying element. This is useful because we want to handle hover\n  // events on the overlay element to display the add button, but let the\n  // underlying element handle click events, drag and drop, etc.\n  const relayEventToElement = useCallback(\n    (event: MouseEvent<HTMLDivElement>) => {\n      if (event.target === ref.current) {\n        const newEvent = new MouseEvent(event.type, {\n          ...event.nativeEvent,\n          bubbles: true,\n          cancelable: true,\n        })\n        element.dispatchEvent(newEvent)\n      }\n    },\n    [element],\n  )\n\n  // The element that the popover containing the InsertMenu will be positioned\n  // relative to (in this case, the AddButton).\n  const [popoverReferenceElement, setPopoverReferenceElement] = useState<HTMLElement | null>(null)\n\n  const [menuVisible, setMenuVisible] = useState(false)\n\n  const dismissPortal = useCallback(() => {\n    setMenuVisible(false)\n    setShowButton(false)\n  }, [])\n\n  const onSelect = useCallback(\n    (schemaType: SchemaType) => {\n      setMenuVisible(false)\n      const insertPosition = position === 'top' || position === 'left' ? 'before' : 'after'\n      onAddUnion(insertPosition, schemaType.name)\n\n      sendTelemetry('Visual Editing Insert Menu Item Inserted', null)\n    },\n    [onAddUnion, position, sendTelemetry],\n  )\n\n  const align = position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'\n  const justify = position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center'\n  const blockDirection = position === 'top' || position === 'bottom' ? 'height' : 'width'\n\n  return (\n    <HoverAreaRoot\n      align={align}\n      data-position={position}\n      data-sanity-overlay-element\n      justify={justify}\n      onClick={relayEventToElement}\n      onContextMenu={relayEventToElement}\n      onMouseDown={relayEventToElement}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n      onMouseUp={relayEventToElement}\n      ref={ref}\n      style={{\n        [blockDirection]: hoverAreaExtent,\n      }}\n    >\n      {(showButton || menuVisible) && (\n        <AddButton\n          ref={setPopoverReferenceElement}\n          icon={AddIcon}\n          mode={'ghost'}\n          onClick={() => setMenuVisible((visible) => !visible)}\n          radius={'full'}\n          selected={menuVisible}\n        />\n      )}\n      {menuVisible && popoverReferenceElement && (\n        <InsertMenuPopover\n          node={node}\n          onDismiss={dismissPortal}\n          referenceElement={popoverReferenceElement}\n          onSelect={onSelect}\n        />\n      )}\n    </HoverAreaRoot>\n  )\n}\n\nexport const UnionInsertMenuOverlay: OverlayComponent<\n  {\n    direction?: 'horizontal' | 'vertical'\n    hoverAreaExtent?: HTMLProps<HTMLDivElement>['height' | 'width']\n  },\n  SchemaUnionNode<SchemaNode>\n> = (props) => {\n  const {direction = 'vertical', element, hoverAreaExtent, node, parent} = props\n\n  const {getDocument} = useDocuments()\n\n  const onAddUnion = useCallback(\n    (insertPosition: 'before' | 'after', name: string) => {\n      const doc = getDocument(node.id)\n      const patches = getArrayInsertPatches(node, name, insertPosition)\n      doc.patch(patches)\n    },\n    [getDocument, node],\n  )\n\n  if (!parent) return null\n\n  return (\n    <Flex\n      height=\"fill\"\n      width=\"fill\"\n      direction={direction === 'horizontal' ? 'row' : 'column'}\n      justify=\"space-between\"\n    >\n      <HoverArea\n        element={element}\n        hoverAreaExtent={hoverAreaExtent}\n        node={parent}\n        onAddUnion={onAddUnion}\n        position={direction === 'horizontal' ? 'left' : 'top'}\n      />\n      <HoverArea\n        element={element}\n        hoverAreaExtent={hoverAreaExtent}\n        node={parent}\n        onAddUnion={onAddUnion}\n        position={direction === 'horizontal' ? 'right' : 'bottom'}\n      />\n    </Flex>\n  )\n}\n\nexport default UnionInsertMenuOverlay\n","import type {ComponentProps} from 'react'\nimport type {OverlayComponent, OverlayComponentProps} from '../types'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function defineOverlayComponent<T extends OverlayComponent<Record<string, unknown>, any>>(\n  component: T,\n  props?: Omit<ComponentProps<T>, keyof OverlayComponentProps>,\n): {component: T; props: typeof props} {\n  return {\n    component: component,\n    props: props,\n  }\n}\n","import type {OverlayComponent, OverlayComponentResolver} from '../types'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function defineOverlayComponents<T extends OverlayComponent>(\n  resolver: OverlayComponentResolver<T>,\n): typeof resolver {\n  return resolver\n}\n"],"names":["AddButton","styled","Button","HoverAreaRoot","Flex","HoverArea","props","$","_c","element","hoverAreaExtent","node","onAddUnion","position","showButton","setShowButton","useState","t0","Symbol","for","onEnter","t1","onLeave","ref","useRef","sendTelemetry","useTelemetry","t2","event","target","current","newEvent","MouseEvent","type","nativeEvent","bubbles","cancelable","dispatchEvent","relayEventToElement","popoverReferenceElement","setPopoverReferenceElement","menuVisible","setMenuVisible","t3","dismissPortal","t4","schemaType","name","onSelect","align","justify","blockDirection","t5","t6","jsx","AddIcon","_temp","t7","InsertMenuPopover","t8","jsxs","UnionInsertMenuOverlay","direction","parent","undefined","getDocument","useDocuments","insertPosition","doc","id","patches","getArrayInsertPatches","patch","visible","defineOverlayComponent","component","defineOverlayComponents","resolver"],"mappings":"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"}