sanity-plugin-hotspot-array 1.0.1 → 2.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Sanity.io
+Copyright (c) 2024 Sanity.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -27,12 +27,12 @@ yarn add sanity-plugin-hotspot-array
 Add it as a plugin in sanity.config.ts (or .js):
 
 ```js
-import { imageHotspotArray } from "sanity-plugin-hotspot-array";
+import { imageHotspotArrayPlugin } from "sanity-plugin-hotspot-array";
 
 export default defineConfig({
   // ...
   plugins: [
-    imageHotspotArray(),
+    imageHotspotArrayPlugin(),
   ] 
 })
 ```

package/dist/index.d.mts

@@ -0,0 +1,54 @@
+import {ArrayOfObjectsInputProps} from 'sanity'
+import {ComponentType} from 'react'
+import {ObjectSchemaType} from 'sanity'
+import {Plugin as Plugin_2} from 'sanity'
+import {ReactNode} from 'react'
+import {RenderPreviewCallback} from 'sanity'
+
+export declare type HotspotItem<
+  HotspotFields = {
+    [key: string]: unknown
+  },
+> = {
+  _key: string
+  _type: string
+  x: number
+  y: number
+} & HotspotFields
+
+export declare interface HotspotTooltipProps<
+  HotspotFields = {
+    [key: string]: unknown
+  },
+> {
+  value: HotspotItem<HotspotFields>
+  schemaType: ObjectSchemaType
+  renderPreview: RenderPreviewCallback
+}
+
+export declare function ImageHotspotArray(
+  props: ArrayOfObjectsInputProps<HotspotItem> & {
+    imageHotspotOptions: ImageHotspotOptions
+  },
+): ReactNode
+
+export declare const imageHotspotArrayPlugin: Plugin_2<void>
+
+export declare interface ImageHotspotOptions<
+  HotspotFields = {
+    [key: string]: unknown
+  },
+> {
+  pathRoot?: 'document' | 'parent'
+  imagePath: string
+  descriptionPath?: string
+  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>
+}
+
+export {}
+
+declare module '@sanity/types' {
+  interface ArrayOptions {
+    imageHotspot?: ImageHotspotOptions
+  }
+}

package/{lib/src → dist}/index.d.ts

@@ -1,15 +1,14 @@
-/// <reference types="react" />
-
 import {ArrayOfObjectsInputProps} from 'sanity'
 import {ComponentType} from 'react'
 import {ObjectSchemaType} from 'sanity'
 import {Plugin as Plugin_2} from 'sanity'
+import {ReactNode} from 'react'
 import {RenderPreviewCallback} from 'sanity'
 
 export declare type HotspotItem<
   HotspotFields = {
     [key: string]: unknown
-  }
+  },
 > = {
   _key: string
   _type: string
@@ -20,7 +19,7 @@ export declare type HotspotItem<
 export declare interface HotspotTooltipProps<
   HotspotFields = {
     [key: string]: unknown
-  }
+  },
 > {
   value: HotspotItem<HotspotFields>
   schemaType: ObjectSchemaType
@@ -30,15 +29,15 @@ export declare interface HotspotTooltipProps<
 export declare function ImageHotspotArray(
   props: ArrayOfObjectsInputProps<HotspotItem> & {
     imageHotspotOptions: ImageHotspotOptions
-  }
-): JSX.Element
+  },
+): ReactNode
 
 export declare const imageHotspotArrayPlugin: Plugin_2<void>
 
 export declare interface ImageHotspotOptions<
   HotspotFields = {
     [key: string]: unknown
-  }
+  },
 > {
   pathRoot?: 'document' | 'parent'
   imagePath: string
@@ -49,7 +48,7 @@ export declare interface ImageHotspotOptions<
 export {}
 
 declare module '@sanity/types' {
-    interface ArrayOptions {
-        imageHotspot?: ImageHotspotOptions;
-    }
-}
+  interface ArrayOptions {
+    imageHotspot?: ImageHotspotOptions
+  }
+}

package/dist/index.js

@@ -0,0 +1,310 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var jsxRuntime = require("react/jsx-runtime"), assetUtils = require("@sanity/asset-utils"), imageUrlBuilder = require("@sanity/image-url"), ui = require("@sanity/ui"), content = require("@sanity/util/content"), lodashEs = require("lodash-es"), react = require("react"), sanity = require("sanity"), framerMotion = require("framer-motion");
+function _interopDefaultCompat(e) {
+  return e && typeof e == "object" && "default" in e ? e : { default: e };
+}
+var imageUrlBuilder__default = /* @__PURE__ */ _interopDefaultCompat(imageUrlBuilder);
+function Feedback({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 4, radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children }) });
+}
+const dragStyle = {
+  width: "1.4rem",
+  height: "1.4rem",
+  position: "absolute",
+  boxSizing: "border-box",
+  top: 0,
+  left: 0,
+  margin: "-0.7rem 0 0 -0.7rem",
+  cursor: "pointer",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "50%",
+  background: "#000",
+  color: "white"
+}, dragStyleWhileDrag = {
+  background: "rgba(0, 0, 0, 0.1)",
+  border: "1px solid #fff",
+  cursor: "none"
+}, dragStyleWhileHover = {
+  background: "rgba(0, 0, 0, 0.1)",
+  border: "1px solid #fff"
+}, dotStyle = {
+  position: "absolute",
+  left: "50%",
+  top: "50%",
+  height: "0.2rem",
+  width: "0.2rem",
+  margin: "-0.1rem 0 0 -0.1rem",
+  background: "#fff",
+  visibility: "hidden",
+  borderRadius: "50%",
+  // make sure pointer events only run on the parent
+  pointerEvents: "none"
+}, dotStyleWhileActive = {
+  visibility: "visible"
+}, labelStyle = {
+  color: "white",
+  fontSize: "0.7rem",
+  fontWeight: 600,
+  lineHeight: "1"
+}, labelStyleWhileActive = {
+  visibility: "hidden"
+}, round = (num) => Math.round(num * 100) / 100;
+function Spot({
+  value,
+  bounds,
+  update,
+  hotspotDescriptionPath,
+  tooltip,
+  index,
+  schemaType,
+  renderPreview
+}) {
+  const [isDragging, setIsDragging] = react.useState(!1), [isHovering, setIsHovering] = react.useState(!1), x = framerMotion.useMotionValue(round(bounds.width * (value.x / 100))), y = framerMotion.useMotionValue(round(bounds.height * (value.y / 100)));
+  react.useEffect(() => {
+    x.set(round(bounds.width * (value.x / 100))), y.set(round(bounds.height * (value.y / 100)));
+  }, [x, y, value, bounds]);
+  const handleDragEnd = react.useCallback(() => {
+    setIsDragging(!1);
+    const currentX = x.get(), currentY = y.get(), newX = round(currentX * 100 / bounds.width), newY = round(currentY * 100 / bounds.height), safeX = Math.max(0, Math.min(100, newX)), safeY = Math.max(0, Math.min(100, newY));
+    update(value._key, safeX, safeY);
+  }, [x, y, value, update, bounds]), handleDragStart = react.useCallback(() => setIsDragging(!0), []), handleHoverStart = react.useCallback(() => setIsHovering(!0), []), handleHoverEnd = react.useCallback(() => setIsHovering(!1), []);
+  return !x || !y ? null : /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Tooltip,
+    {
+      disabled: isDragging,
+      portal: !0,
+      content: tooltip && typeof tooltip == "function" ? react.createElement(tooltip, { value, renderPreview, schemaType }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, style: { maxWidth: 200, pointerEvents: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { textOverflow: "ellipsis", children: hotspotDescriptionPath ? lodashEs.get(value, hotspotDescriptionPath) : `${value.x}% x ${value.y}%` }) }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.div,
+        {
+          drag: !0,
+          dragConstraints: bounds,
+          dragElastic: 0,
+          dragMomentum: !1,
+          onDragEnd: handleDragEnd,
+          onDragStart: handleDragStart,
+          onHoverStart: handleHoverStart,
+          onHoverEnd: handleHoverEnd,
+          style: {
+            ...dragStyle,
+            x,
+            y,
+            ...isDragging && { ...dragStyleWhileDrag },
+            ...isHovering && { ...dragStyleWhileHover }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Box,
+              {
+                style: {
+                  ...dotStyle,
+                  ...(isDragging || isHovering) && { ...dotStyleWhileActive }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  ...labelStyle,
+                  ...(isDragging || isHovering) && { ...labelStyleWhileActive }
+                },
+                children: index + 1
+              }
+            )
+          ]
+        }
+      )
+    },
+    value._key
+  );
+}
+function useUnmountEffect(effect) {
+  const effectRef = react.useRef(effect);
+  effectRef.current = effect, react.useEffect(() => () => effectRef.current(), []);
+}
+function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
+  const timeout = react.useRef(), waitTimeout = react.useRef(), cb = react.useRef(callback), lastCall = react.useRef(), clear = () => {
+    timeout.current && (clearTimeout(timeout.current), timeout.current = void 0), waitTimeout.current && (clearTimeout(waitTimeout.current), waitTimeout.current = void 0);
+  };
+  return useUnmountEffect(clear), react.useEffect(() => {
+    cb.current = callback;
+  }, deps), react.useMemo(() => {
+    const execute = () => {
+      if (clear(), !lastCall.current)
+        return;
+      const context = lastCall.current;
+      lastCall.current = void 0, cb.current.apply(context.this, context.args);
+    }, wrapped = function(...args) {
+      timeout.current && clearTimeout(timeout.current), lastCall.current = { args, this: this }, timeout.current = setTimeout(execute, delay), maxWait > 0 && !waitTimeout.current && (waitTimeout.current = setTimeout(execute, maxWait));
+    };
+    return Object.defineProperties(wrapped, {
+      length: { value: callback.length },
+      name: { value: `${callback.name || "anonymous"}__debounced__${delay}` }
+    }), wrapped;
+  }, [delay, maxWait, ...deps]);
+}
+const isBrowser = typeof window < "u" && typeof navigator < "u" && typeof document < "u";
+let observerSingleton;
+function getResizeObserver() {
+  if (!isBrowser)
+    return;
+  if (observerSingleton)
+    return observerSingleton;
+  const callbacks = /* @__PURE__ */ new Map(), observer = new ResizeObserver((entries) => {
+    var _a;
+    for (const entry of entries)
+      (_a = callbacks.get(entry.target)) == null || _a.forEach(
+        (cb) => setTimeout(() => {
+          cb(entry);
+        }, 0)
+      );
+  });
+  return observerSingleton = {
+    observer,
+    subscribe(target, callback) {
+      let cbs = callbacks.get(target);
+      cbs || (cbs = /* @__PURE__ */ new Set(), callbacks.set(target, cbs), observer.observe(target)), cbs.add(callback);
+    },
+    unsubscribe(target, callback) {
+      const cbs = callbacks.get(target);
+      cbs && (cbs.delete(callback), cbs.size === 0 && (callbacks.delete(target), observer.unobserve(target)));
+    }
+  }, observerSingleton;
+}
+function useResizeObserver(target, callback, enabled = !0) {
+  const ro = enabled && getResizeObserver(), cb = react.useRef(callback);
+  cb.current = callback;
+  const tgt = target && "current" in target ? target.current : target;
+  react.useEffect(() => {
+    const _tgt = target && "current" in target ? target.current : target;
+    if (!ro || !_tgt)
+      return;
+    let subscribed = !0;
+    const handler = (...args) => {
+      subscribed && cb.current(...args);
+    };
+    return ro.subscribe(_tgt, handler), () => {
+      subscribed = !1, ro.unsubscribe(_tgt, handler);
+    };
+  }, [tgt, ro]);
+}
+const imageStyle = { width: "100%", height: "auto" }, VALID_ROOT_PATHS = ["document", "parent"];
+function ImageHotspotArray(props) {
+  var _a;
+  const { value, onChange, imageHotspotOptions, schemaType, renderPreview } = props, sanityClient = sanity.useClient({ apiVersion: "2022-01-01" }), imageHotspotPathRoot = react.useMemo(() => {
+    var _a2;
+    return (VALID_ROOT_PATHS.includes((_a2 = imageHotspotOptions.pathRoot) != null ? _a2 : "") ? imageHotspotOptions.pathRoot : "document") === "document" ? [] : props.path.slice(0, -1);
+  }, [imageHotspotOptions.pathRoot, props.path]), rootObject = sanity.useFormValue(imageHotspotPathRoot), hotspotImage = react.useMemo(() => lodashEs.get(rootObject, imageHotspotOptions.imagePath), [rootObject, imageHotspotOptions.imagePath]), displayImage = react.useMemo(() => {
+    var _a2, _b;
+    const builder = imageUrlBuilder__default.default(sanityClient).dataset((_a2 = sanityClient.config().dataset) != null ? _a2 : ""), urlFor = (source) => builder.image(source);
+    if ((_b = hotspotImage == null ? void 0 : hotspotImage.asset) != null && _b._ref) {
+      const { aspectRatio } = assetUtils.getImageDimensions(hotspotImage.asset._ref), width = 1200, height = Math.round(width / aspectRatio), url = urlFor(hotspotImage).width(width).url();
+      return { width, height, url };
+    }
+    return null;
+  }, [hotspotImage, sanityClient]), handleHotspotImageClick = react.useCallback(
+    (event) => {
+      const { nativeEvent, currentTarget } = event, x = Number((nativeEvent.offsetX * 100 / currentTarget.width).toFixed(2)), y = Number((nativeEvent.offsetY * 100 / currentTarget.height).toFixed(2)), description = `New Hotspot at ${x}% x ${y}%`, newRow = {
+        _key: content.randomKey(12),
+        _type: schemaType.of[0].name,
+        x,
+        y
+      };
+      imageHotspotOptions != null && imageHotspotOptions.descriptionPath && (newRow[imageHotspotOptions.descriptionPath] = description), onChange(sanity.PatchEvent.from([sanity.setIfMissing([]), sanity.insert([newRow], "after", [-1])]));
+    },
+    [imageHotspotOptions, onChange, schemaType]
+  ), handleHotspotMove = react.useCallback(
+    (key, x, y) => {
+      onChange(
+        sanity.PatchEvent.from([
+          // Set the `x` value of this array key item
+          sanity.set(x, [{ _key: key }, "x"]),
+          // Set the `y` value of this array key item
+          sanity.set(y, [{ _key: key }, "y"])
+        ])
+      );
+    },
+    [onChange]
+  ), hotspotImageRef = react.useRef(null), [imageRect, setImageRect] = react.useState();
+  return useResizeObserver(
+    hotspotImageRef,
+    useDebouncedCallback(
+      (e) => setImageRect(e.contentRect),
+      [setImageRect],
+      200
+    )
+  ), /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: [2, 2, 3], children: [
+    displayImage != null && displayImage.url ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+      imageRect && ((_a = value == null ? void 0 : value.length) != null ? _a : 0) > 0 && (value == null ? void 0 : value.map((spot, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        Spot,
+        {
+          index,
+          value: spot,
+          bounds: imageRect,
+          update: handleHotspotMove,
+          hotspotDescriptionPath: imageHotspotOptions == null ? void 0 : imageHotspotOptions.descriptionPath,
+          tooltip: imageHotspotOptions == null ? void 0 : imageHotspotOptions.tooltip,
+          renderPreview,
+          schemaType: schemaType.of[0]
+        },
+        spot._key
+      ))),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { __unstable_checkered: !0, shadow: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          ref: hotspotImageRef,
+          src: displayImage.url,
+          width: displayImage.width,
+          height: displayImage.height,
+          alt: "",
+          style: imageStyle,
+          onClick: handleHotspotImageClick
+        }
+      ) }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(Feedback, { children: imageHotspotOptions.imagePath ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "No Hotspot image found at path ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", { children: imageHotspotOptions.imagePath })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "Define a path in this field using to the image field in this document at",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", { children: "options.hotspotImagePath" })
+    ] }) }),
+    imageHotspotOptions.pathRoot && !VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && /* @__PURE__ */ jsxRuntime.jsxs(Feedback, { children: [
+      'The supplied imageHotspotPathRoot "',
+      imageHotspotOptions.pathRoot,
+      '" is not valid, falling back to "document". Available values are "',
+      VALID_ROOT_PATHS.join(", "),
+      '".'
+    ] }),
+    props.renderDefault(props)
+  ] });
+}
+const imageHotspotArrayPlugin = sanity.definePlugin({
+  name: "image-hotspot-array",
+  form: {
+    components: {
+      input: (props) => {
+        var _a, _b;
+        if (props.schemaType.jsonType === "array" && (_a = props.schemaType.options) != null && _a.imageHotspot) {
+          const imageHotspotOptions = (_b = props.schemaType.options) == null ? void 0 : _b.imageHotspot;
+          if (imageHotspotOptions)
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              ImageHotspotArray,
+              {
+                ...props,
+                imageHotspotOptions
+              }
+            );
+        }
+        return props.renderDefault(props);
+      }
+    }
+  }
+});
+exports.ImageHotspotArray = ImageHotspotArray;
+exports.imageHotspotArrayPlugin = imageHotspotArrayPlugin;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/Feedback.tsx","../src/Spot.tsx","../src/useDebouncedCallback.ts","../src/useResizeObserver.ts","../src/ImageHotspotArray.tsx","../src/plugin.tsx"],"sourcesContent":["import {Card, Text} from '@sanity/ui'\nimport {type ReactNode} from 'react'\n\nexport default function Feedback({children}: {children: ReactNode}): ReactNode {\n  return (\n    <Card padding={4} radius={2} shadow={1} tone=\"caution\">\n      <Text>{children}</Text>\n    </Card>\n  )\n}\n","import {Box, Text, Tooltip} from '@sanity/ui'\nimport {motion, useMotionValue} from 'framer-motion'\nimport {get} from 'lodash-es'\nimport {\n  ComponentType,\n  createElement,\n  CSSProperties,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react'\nimport {type ObjectSchemaType, type RenderPreviewCallback} from 'sanity'\n\nimport {FnHotspotMove, HotspotItem} from './ImageHotspotArray'\n\nconst dragStyle: CSSProperties = {\n  width: '1.4rem',\n  height: '1.4rem',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  top: 0,\n  left: 0,\n  margin: '-0.7rem 0 0 -0.7rem',\n  cursor: 'pointer',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '50%',\n  background: '#000',\n  color: 'white',\n}\n\nconst dragStyleWhileDrag: CSSProperties = {\n  background: 'rgba(0, 0, 0, 0.1)',\n  border: '1px solid #fff',\n  cursor: 'none',\n}\n\nconst dragStyleWhileHover: CSSProperties = {\n  background: 'rgba(0, 0, 0, 0.1)',\n  border: '1px solid #fff',\n}\n\nconst dotStyle: CSSProperties = {\n  position: 'absolute',\n  left: '50%',\n  top: '50%',\n  height: '0.2rem',\n  width: '0.2rem',\n  margin: '-0.1rem 0 0 -0.1rem',\n  background: '#fff',\n  visibility: 'hidden',\n  borderRadius: '50%',\n  // make sure pointer events only run on the parent\n  pointerEvents: 'none',\n}\n\nconst dotStyleWhileActive: CSSProperties = {\n  visibility: 'visible',\n}\n\nconst labelStyle: CSSProperties = {\n  color: 'white',\n  fontSize: '0.7rem',\n  fontWeight: 600,\n  lineHeight: '1',\n}\n\nconst labelStyleWhileActive: CSSProperties = {\n  visibility: 'hidden',\n}\n\nconst round = (num: number) => Math.round(num * 100) / 100\n\nexport interface HotspotTooltipProps<HotspotFields = {[key: string]: unknown}> {\n  value: HotspotItem<HotspotFields>\n  schemaType: ObjectSchemaType\n  renderPreview: RenderPreviewCallback\n}\n\ninterface HotspotProps<HotspotFields = {[key: string]: unknown}> {\n  value: HotspotItem\n  bounds: DOMRectReadOnly\n  update: FnHotspotMove\n  hotspotDescriptionPath?: string\n  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n  index: number\n  schemaType: ObjectSchemaType\n  renderPreview: RenderPreviewCallback\n}\n\nexport default function Spot({\n  value,\n  bounds,\n  update,\n  hotspotDescriptionPath,\n  tooltip,\n  index,\n  schemaType,\n  renderPreview,\n}: HotspotProps): ReactNode {\n  const [isDragging, setIsDragging] = useState(false)\n  const [isHovering, setIsHovering] = useState(false)\n\n  // x/y are stored as % but need to be converted to px\n  const x = useMotionValue(round(bounds.width * (value.x / 100)))\n  const y = useMotionValue(round(bounds.height * (value.y / 100)))\n\n  /**\n   * update x/y if the bounds change when resizing the window\n   */\n  useEffect(() => {\n    x.set(round(bounds.width * (value.x / 100)))\n    y.set(round(bounds.height * (value.y / 100)))\n  }, [x, y, value, bounds])\n\n  const handleDragEnd = useCallback(() => {\n    setIsDragging(false)\n\n    // get current values for x/y in px\n    const currentX = x.get()\n    const currentY = y.get()\n\n    // Which we need to convert back to `%` to patch the document\n    const newX = round((currentX * 100) / bounds.width)\n    const newY = round((currentY * 100) / bounds.height)\n\n    // Don't go below 0 or above 100\n    const safeX = Math.max(0, Math.min(100, newX))\n    const safeY = Math.max(0, Math.min(100, newY))\n\n    update(value._key, safeX, safeY)\n  }, [x, y, value, update, bounds])\n  const handleDragStart = useCallback(() => setIsDragging(true), [])\n\n  const handleHoverStart = useCallback(() => setIsHovering(true), [])\n  const handleHoverEnd = useCallback(() => setIsHovering(false), [])\n\n  if (!x || !y) {\n    return null\n  }\n\n  return (\n    <Tooltip\n      key={value._key}\n      disabled={isDragging}\n      portal\n      content={\n        tooltip && typeof tooltip === 'function' ? (\n          createElement(tooltip, {value, renderPreview, schemaType})\n        ) : (\n          <Box padding={2} style={{maxWidth: 200, pointerEvents: `none`}}>\n            <Text textOverflow=\"ellipsis\">\n              {hotspotDescriptionPath\n                ? (get(value, hotspotDescriptionPath) as string)\n                : `${value.x}% x ${value.y}%`}\n            </Text>\n          </Box>\n        )\n      }\n    >\n      <motion.div\n        drag\n        dragConstraints={bounds}\n        dragElastic={0}\n        dragMomentum={false}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n        onHoverStart={handleHoverStart}\n        onHoverEnd={handleHoverEnd}\n        style={{\n          ...dragStyle,\n          x,\n          y,\n          ...(isDragging && {...dragStyleWhileDrag}),\n          ...(isHovering && {...dragStyleWhileHover}),\n        }}\n      >\n        {/* Dot */}\n        <Box\n          style={{\n            ...dotStyle,\n            ...((isDragging || isHovering) && {...dotStyleWhileActive}),\n          }}\n        />\n        {/* Label */}\n        <div\n          style={{\n            ...labelStyle,\n            ...((isDragging || isHovering) && {...labelStyleWhileActive}),\n          }}\n        >\n          {index + 1}\n        </div>\n      </motion.div>\n    </Tooltip>\n  )\n}\n","// copied from react-hookz/web\n// https://github.com/react-hookz/web/blob/579a445fcc9f4f4bb5b9d5e670b2e57448b4ee50/src/useDebouncedCallback/index.ts\nimport {type DependencyList, useEffect, useMemo, useRef} from 'react'\n\n/**\n * Run effect only when component is unmounted.\n *\n * @param effect Effector to run on unmount\n */\nexport function useUnmountEffect(effect: CallableFunction): void {\n  const effectRef = useRef(effect)\n  effectRef.current = effect\n  useEffect(() => () => effectRef.current(), [])\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DebouncedFunction<Fn extends (...args: any[]) => any> = (\n  this: ThisParameterType<Fn>,\n  ...args: Parameters<Fn>\n) => void\n\n/**\n * Makes passed function debounced, otherwise acts like `useCallback`.\n *\n * @param callback Function that will be debounced.\n * @param deps Dependencies list when to update callback. It also replaces invoked\n * \tcallback for scheduled debounced invocations.\n * @param delay Debounce delay.\n * @param maxWait The maximum time `callback` is allowed to be delayed before\n * it's invoked. 0 means no max wait.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useDebouncedCallback<Fn extends (...args: any[]) => any>(\n  callback: Fn,\n  deps: DependencyList,\n  delay: number,\n  maxWait = 0,\n): DebouncedFunction<Fn> {\n  const timeout = useRef<ReturnType<typeof setTimeout>>()\n  const waitTimeout = useRef<ReturnType<typeof setTimeout>>()\n  const cb = useRef(callback)\n  const lastCall = useRef<{args: Parameters<Fn>; this: ThisParameterType<Fn>}>()\n\n  const clear = () => {\n    if (timeout.current) {\n      clearTimeout(timeout.current)\n      timeout.current = undefined\n    }\n\n    if (waitTimeout.current) {\n      clearTimeout(waitTimeout.current)\n      waitTimeout.current = undefined\n    }\n  }\n\n  // Cancel scheduled execution on unmount\n  useUnmountEffect(clear)\n\n  useEffect(() => {\n    cb.current = callback\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps)\n\n  return useMemo(() => {\n    const execute = () => {\n      clear()\n\n      // Barely possible to test this line\n      /* istanbul ignore next */\n      if (!lastCall.current) return\n\n      const context = lastCall.current\n      lastCall.current = undefined\n\n      cb.current.apply(context.this, context.args)\n    }\n\n    const wrapped = function (this, ...args) {\n      if (timeout.current) {\n        clearTimeout(timeout.current)\n      }\n\n      lastCall.current = {args, this: this}\n\n      // Plan regular execution\n      timeout.current = setTimeout(execute, delay)\n\n      // Plan maxWait execution if required\n      if (maxWait > 0 && !waitTimeout.current) {\n        waitTimeout.current = setTimeout(execute, maxWait)\n      }\n    } as DebouncedFunction<Fn>\n\n    Object.defineProperties(wrapped, {\n      length: {value: callback.length},\n      name: {value: `${callback.name || 'anonymous'}__debounced__${delay}`},\n    })\n\n    return wrapped\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [delay, maxWait, ...deps])\n}\n","// copied from react-hookz/web\n// https://github.com/react-hookz/web/blob/579a445fcc9f4f4bb5b9d5e670b2e57448b4ee50/src/useResizeObserver/index.ts\nimport {type RefObject, useEffect, useRef} from 'react'\n\nconst isBrowser =\n  typeof window !== 'undefined' &&\n  typeof navigator !== 'undefined' &&\n  typeof document !== 'undefined'\n\nexport type UseResizeObserverCallback = (entry: ResizeObserverEntry) => void\n\ntype ResizeObserverSingleton = {\n  observer: ResizeObserver\n  subscribe: (target: Element, callback: UseResizeObserverCallback) => void\n  unsubscribe: (target: Element, callback: UseResizeObserverCallback) => void\n}\n\nlet observerSingleton: ResizeObserverSingleton\n\nfunction getResizeObserver(): ResizeObserverSingleton | undefined {\n  if (!isBrowser) return undefined\n\n  if (observerSingleton) return observerSingleton\n\n  const callbacks = new Map<Element, Set<UseResizeObserverCallback>>()\n\n  const observer = new ResizeObserver((entries) => {\n    for (const entry of entries)\n      callbacks.get(entry.target)?.forEach((cb) =>\n        setTimeout(() => {\n          cb(entry)\n        }, 0),\n      )\n  })\n\n  observerSingleton = {\n    observer,\n    subscribe(target, callback) {\n      let cbs = callbacks.get(target)\n\n      if (!cbs) {\n        // If target has no observers yet - register it\n        cbs = new Set<UseResizeObserverCallback>()\n        callbacks.set(target, cbs)\n        observer.observe(target)\n      }\n\n      // As Set is duplicate-safe - simply add callback on each call\n      cbs.add(callback)\n    },\n    unsubscribe(target, callback) {\n      const cbs = callbacks.get(target)\n\n      // Else branch should never occur in case of normal execution\n      // because callbacks map is hidden in closure - it is impossible to\n      // simulate situation with non-existent `cbs` Set\n      /* istanbul ignore else */\n      if (cbs) {\n        // Remove current observer\n        cbs.delete(callback)\n\n        if (cbs.size === 0) {\n          // If no observers left unregister target completely\n          callbacks.delete(target)\n          observer.unobserve(target)\n        }\n      }\n    },\n  }\n\n  return observerSingleton\n}\n\n/**\n * Invokes a callback whenever ResizeObserver detects a change to target's size.\n *\n * @param target React reference or Element to track.\n * @param callback Callback that will be invoked on resize.\n * @param enabled Whether resize observer is enabled or not.\n */\nexport function useResizeObserver<T extends Element>(\n  target: RefObject<T> | T | null,\n  callback: UseResizeObserverCallback,\n  enabled = true,\n): void {\n  const ro = enabled && getResizeObserver()\n  const cb = useRef(callback)\n  cb.current = callback\n\n  const tgt = target && 'current' in target ? target.current : target\n\n  useEffect(() => {\n    // This secondary target resolve required for case when we receive ref object, which, most\n    // likely, contains null during render stage, but already populated with element during\n    // effect stage.\n\n    const _tgt = target && 'current' in target ? target.current : target\n\n    if (!ro || !_tgt) return undefined\n\n    // As unsubscription in internals of our ResizeObserver abstraction can\n    // happen a bit later than effect cleanup invocation - we need a marker,\n    // that this handler should not be invoked anymore\n    let subscribed = true\n\n    const handler: UseResizeObserverCallback = (...args) => {\n      // It is reinsurance for the highly asynchronous invocations, almost\n      // impossible to achieve in tests, thus excluding from LOC\n      /* istanbul ignore else */\n      if (subscribed) {\n        cb.current(...args)\n      }\n    }\n\n    ro.subscribe(_tgt, handler)\n\n    return () => {\n      subscribed = false\n      ro.unsubscribe(_tgt, handler)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tgt, ro])\n}\n","import {getImageDimensions} from '@sanity/asset-utils'\nimport imageUrlBuilder from '@sanity/image-url'\nimport {Card, Flex, Stack} from '@sanity/ui'\nimport {randomKey} from '@sanity/util/content'\nimport {get} from 'lodash-es'\nimport {type MouseEvent, type ReactNode, useCallback, useMemo, useRef, useState} from 'react'\nimport {\n  ArrayOfObjectsInputProps,\n  ImageValue,\n  insert,\n  ObjectSchemaType,\n  PatchEvent,\n  set,\n  setIfMissing,\n  useClient,\n  useFormValue,\n} from 'sanity'\n\nimport Feedback from './Feedback'\nimport {ImageHotspotOptions} from './plugin'\nimport Spot from './Spot'\nimport {useDebouncedCallback} from './useDebouncedCallback'\nimport {useResizeObserver} from './useResizeObserver'\n\nconst imageStyle = {width: `100%`, height: `auto`}\n\nconst VALID_ROOT_PATHS = ['document', 'parent']\n\nexport type FnHotspotMove = (key: string, x: number, y: number) => void\n\nexport type HotspotItem<HotspotFields = {[key: string]: unknown}> = {\n  _key: string\n  _type: string\n  x: number\n  y: number\n} & HotspotFields\n\nexport function ImageHotspotArray(\n  props: ArrayOfObjectsInputProps<HotspotItem> & {imageHotspotOptions: ImageHotspotOptions},\n): ReactNode {\n  const {value, onChange, imageHotspotOptions, schemaType, renderPreview} = props\n\n  const sanityClient = useClient({apiVersion: '2022-01-01'})\n\n  const imageHotspotPathRoot = useMemo(() => {\n    const pathRoot = VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? '')\n      ? imageHotspotOptions.pathRoot\n      : 'document'\n    return pathRoot === 'document' ? [] : props.path.slice(0, -1)\n  }, [imageHotspotOptions.pathRoot, props.path])\n\n  const rootObject = useFormValue(imageHotspotPathRoot)\n\n  /**\n   * Finding the image from the imageHotspotPathRoot (defaults to document),\n   * using the path from the hotspot's `options` field\n   *\n   * when changes in imageHotspotPathRoot (e.g. document) occur,\n   * check if there are any changes to the hotspotImage and update the reference\n   */\n  const hotspotImage = useMemo(() => {\n    return get(rootObject, imageHotspotOptions.imagePath) as ImageValue | undefined\n  }, [rootObject, imageHotspotOptions.imagePath])\n\n  const displayImage = useMemo(() => {\n    const builder = imageUrlBuilder(sanityClient).dataset(sanityClient.config().dataset ?? '')\n    const urlFor = (source: ImageValue) => builder.image(source)\n\n    if (hotspotImage?.asset?._ref) {\n      const {aspectRatio} = getImageDimensions(hotspotImage.asset._ref)\n      const width = 1200\n      const height = Math.round(width / aspectRatio)\n      const url = urlFor(hotspotImage).width(width).url()\n\n      return {width, height, url}\n    }\n\n    return null\n  }, [hotspotImage, sanityClient])\n\n  const handleHotspotImageClick = useCallback(\n    (event: MouseEvent<HTMLImageElement>) => {\n      const {nativeEvent, currentTarget} = event\n\n      // Calculate the x/y percentage of the click position\n      const x = Number(((nativeEvent.offsetX * 100) / currentTarget.width).toFixed(2))\n      const y = Number(((nativeEvent.offsetY * 100) / currentTarget.height).toFixed(2))\n      const description = `New Hotspot at ${x}% x ${y}%`\n\n      const newRow: HotspotItem = {\n        _key: randomKey(12),\n        _type: schemaType.of[0].name,\n        x,\n        y,\n      }\n\n      if (imageHotspotOptions?.descriptionPath) {\n        newRow[imageHotspotOptions.descriptionPath] = description\n      }\n\n      onChange(PatchEvent.from([setIfMissing([]), insert([newRow], 'after', [-1])]))\n    },\n    [imageHotspotOptions, onChange, schemaType],\n  )\n\n  const handleHotspotMove: FnHotspotMove = useCallback(\n    (key, x, y) => {\n      onChange(\n        PatchEvent.from([\n          // Set the `x` value of this array key item\n          set(x, [{_key: key}, 'x']),\n          // Set the `y` value of this array key item\n          set(y, [{_key: key}, 'y']),\n        ]),\n      )\n    },\n    [onChange],\n  )\n\n  const hotspotImageRef = useRef<HTMLImageElement | null>(null)\n\n  const [imageRect, setImageRect] = useState<DOMRectReadOnly>()\n\n  useResizeObserver(\n    hotspotImageRef,\n    useDebouncedCallback(\n      (e: ResizeObserverEntry) => setImageRect(e.contentRect),\n      [setImageRect],\n      200,\n    ),\n  )\n\n  return (\n    <Stack space={[2, 2, 3]}>\n      {displayImage?.url ? (\n        <div style={{position: `relative`}}>\n          {imageRect &&\n            (value?.length ?? 0) > 0 &&\n            value?.map((spot, index) => (\n              <Spot\n                index={index}\n                key={spot._key}\n                value={spot}\n                bounds={imageRect}\n                update={handleHotspotMove}\n                hotspotDescriptionPath={imageHotspotOptions?.descriptionPath}\n                tooltip={imageHotspotOptions?.tooltip}\n                renderPreview={renderPreview}\n                schemaType={schemaType.of[0] as ObjectSchemaType}\n              />\n            ))}\n\n          <Card __unstable_checkered shadow={1}>\n            <Flex align=\"center\" justify=\"center\">\n              <img\n                ref={hotspotImageRef}\n                src={displayImage.url}\n                width={displayImage.width}\n                height={displayImage.height}\n                alt=\"\"\n                style={imageStyle}\n                onClick={handleHotspotImageClick}\n              />\n            </Flex>\n          </Card>\n        </div>\n      ) : (\n        <Feedback>\n          {imageHotspotOptions.imagePath ? (\n            <>\n              No Hotspot image found at path <code>{imageHotspotOptions.imagePath}</code>\n            </>\n          ) : (\n            <>\n              Define a path in this field using to the image field in this document at{' '}\n              <code>options.hotspotImagePath</code>\n            </>\n          )}\n        </Feedback>\n      )}\n      {imageHotspotOptions.pathRoot && !VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && (\n        <Feedback>\n          The supplied imageHotspotPathRoot &quot;{imageHotspotOptions.pathRoot}&quot; is not valid,\n          falling back to &quot;document&quot;. Available values are &quot;\n          {VALID_ROOT_PATHS.join(', ')}&quot;.\n        </Feedback>\n      )}\n      {props.renderDefault(props as unknown as ArrayOfObjectsInputProps)}\n    </Stack>\n  )\n}\n","import {ComponentType} from 'react'\nimport {type ArrayOfObjectsInputProps, definePlugin} from 'sanity'\n\nimport {type HotspotItem, ImageHotspotArray} from './ImageHotspotArray'\nimport {type HotspotTooltipProps} from './Spot'\n\nexport interface ImageHotspotOptions<HotspotFields = {[key: string]: unknown}> {\n  pathRoot?: 'document' | 'parent'\n  imagePath: string\n  descriptionPath?: string\n  tooltip?: ComponentType<HotspotTooltipProps<HotspotFields>>\n}\n\ndeclare module '@sanity/types' {\n  export interface ArrayOptions {\n    imageHotspot?: ImageHotspotOptions\n  }\n}\n\nexport const imageHotspotArrayPlugin = definePlugin({\n  name: 'image-hotspot-array',\n  form: {\n    components: {\n      input: (props) => {\n        if (props.schemaType.jsonType === 'array' && props.schemaType.options?.imageHotspot) {\n          const imageHotspotOptions = props.schemaType.options?.imageHotspot\n          if (imageHotspotOptions) {\n            return (\n              <ImageHotspotArray\n                {...(props as unknown as ArrayOfObjectsInputProps<HotspotItem>)}\n                imageHotspotOptions={imageHotspotOptions}\n              />\n            )\n          }\n        }\n        return props.renderDefault(props)\n      },\n    },\n  },\n})\n"],"names":["jsx","Card","Text","useState","useMotionValue","useEffect","useCallback","Tooltip","createElement","Box","get","jsxs","motion","useRef","useMemo","useClient","_a","useFormValue","imageUrlBuilder","getImageDimensions","randomKey","PatchEvent","setIfMissing","insert","set","Stack","Flex","Fragment","definePlugin"],"mappings":"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"}