sanity-plugin-hotspot-array 0.0.7 → 0.1.0-v3-studio.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Simeon Griggs
+Copyright (c) 2022 Simeon Griggs
 
 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

@@ -1,5 +1,13 @@
 # sanity-plugin-hotspot-array
 
+> > **NOTE**
+>
+> This is the **Sanity Studio v3 version** of sanity-plugin-hotspot-array.
+>
+> For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity-plugin-hotspot-array).
+
+## What is it?
+
 A configurable Custom Input for Arrays that will add and update items by clicking on an Image
 
 <img src="https://user-images.githubusercontent.com/209129/174171697-57319ebc-03a7-4d82-a73e-b6effcb0b3ba.gif" width="600" />
@@ -7,49 +15,73 @@ A configurable Custom Input for Arrays that will add and update items by clickin
 ## Installation
 
 ```
-sanity install hotspot-array
+npm install --save sanity-plugin-hotspot-array@studio-v3
+```
+
+or
+
+```
+yarn add sanity-plugin-hotspot-array@studio-v3
 ```
 
-## Setup
 
-Import the `HotspotArray` component from this package, into your schema. And insert it as the `inputComponent` of an `array` field.
+## Usage
+
+Add it as a plugin in sanity.config.ts (or .js):
+
+```js
+import { imageHotspotArray } from "sanity-plugin-hotspot-array";
+
+export default createConfig({
+  // ...
+  plugins: [
+    imageHotspotArray(),
+  ] 
+})
+```
+
+Now you will have `imageHotspot` available as an options on `array` fields:
 
 ```js
-import HotspotArray from 'sanity-plugin-hotspot-array'
+import {defineType, defineField} from 'sanity'
 
-export default {
+export const productSchema = defineType({
   name: `product`,
   title: `Product`,
   type: `document`,
   fields: [
-    {
+    defineField({
       name: `hotspots`,
       type: `array`,
-      inputComponent: HotspotArray,
       of: [
         // see `Spot object` setup below
       ],
       options: {
-        // see `Image and description path` setup below
-        hotspotImagePath: `featureImage`,
-        hotspotDescriptionPath: `details`,
-        // see `Custom tooltip` setup below
-        hotspotTooltip: undefined,
+        // plugin adds support for this option
+        imageHotspot: {
+          // see `Image and description path` setup below
+          imagePath: `featureImage`,
+          descriptionPath: `details`,
+          // see `Custom tooltip` setup below
+          tooltip: undefined,
+        }
       },
-    },
+    }),
     // ...all your other fields
+    // ...of which one should be featureImage in this example
   ],
-}
+})
 ```
+There is no need to provide an explicit input component, as that is handled by the plugin.
 
 The plugin makes a number of assumptions to add and update data in the array. Including:
 
-- The `array` field is an array of objects
+- The `array` field is an array of objects, with a single object type
 - The object contains two number fields named `x` and `y`
 - You'll want to save those values as % from the top left of the image
 - The same document contains the image you want to add hotspots to
 
-### Image and description paths
+### Image path
 
 The custom input has the current values of all fields in the document, and so can "pick" the image out of the document by its path.
 
@@ -57,15 +89,31 @@ For example, if you want to add hotspots to an image, and that image is uploaded
 
 ```js
 options: {
-  hotspotImagePath: `featureImage`
+  imageHotspot: {
+    imagePath: `featureImage`
+  }
+}
+```
+
+To pick the image out of the hotspot-array parent object, use
+```js
+options: {
+  imageHotspot: {
+    pathRoot: 'parent'
+  }
 }
 ```
 
-The custom input can also pre-fill a string or text field with a description of the position of the spot to make them easier to identify. Add a path **relative to the spot object** for this field.
+### Description path
+
+The custom input can also pre-fill a string or text field with a description of the position of the spot to make them easier to identify.
+Add a path **relative to the spot object** for this field.
 
 ```js
 options: {
-  hotspotDescriptionPath: `details`
+  imageHotspot: {
+    descriptionPath: `details`
+  }
 }
 ```
 
@@ -74,7 +122,7 @@ options: {
 Here's an example object schema complete with initial values, validation, fieldsets and a styled preview.
 
 ```js
-{
+defineField({
   name: 'spot',
   type: 'object',
   fieldsets: [{name: 'position', options: {columns: 2}}],
@@ -110,28 +158,66 @@ Here's an example object schema complete with initial values, validation, fields
       }
     },
   },
-}
+})
 ```
 
 ## Custom tooltip
 
-You can customise the Tooltip to display any Component, it will accept a single prop `spot` which contains the values of the object.
+You can customise the Tooltip to display any Component, which will receive `value` (the hotspot value with x and y),
+`schemaType` (schemaType of the hotspot value), and `renderPreview` (callback for rendering Studio preview).
 
-In this example our `spot` object has a `reference` field to the `product` schema type, and will show a Document Preview.
+### Example 1 - use default hotspot preview
+
+```tsx
+import { Box } from "@sanity/ui";
+import { HotspotTooltipProps } from "sanity-plugin-hotspot-array";
+
+export function HotspotPreview({
+  value,
+  schemaType,
+  renderPreview,
+}: HotspotTooltipProps) {
+  return (
+    <Box padding={2} style={{ minWidth: 200 }}>
+      {renderPreview({
+        value,
+        schemaType,
+        layout: "default",
+      })}
+    </Box>
+  );
+}
+```
+
+Then back in your schema definition
 
 ```js
-// Setup a custom tooltip component
-import Preview from 'part:@sanity/base/preview'
-import schema from 'part:@sanity/base/schema'
+options: {
+  imageHotspot: {
+    tooltip: HotspotPreview
+  }
+}
+```
+
+### Example 2 - reference value in hotspot
+In this example our `value` object has a `reference` field to the `product` schema type, and will show a document preview.
+
+```jsx
+import {useSchema }from 'sanity'
 import {Box} from '@sanity/ui'
 
-export default function ProductPreview({spot}) {
+export function ProductPreview({value, renderPreview}) {
+  const productSchemaType = useSchema().get('product')
   return (
     <Box padding={2} style={{minWidth: 200}}>
-      {spot?.product?._ref ? (
-        <Preview value={{_id: spot.product._ref}} type={schema.get(`product`)} />
+      {value?.product?._ref ? (
+        renderPreview({
+           value,
+           schemaType: productSchemaType,
+           layout: "default"
+        })
       ) : (
-        `No Reference Selected`
+        `No reference selected`
       )}
     </Box>
   )
@@ -141,16 +227,28 @@ export default function ProductPreview({spot}) {
 Then back in your schema definition
 
 ```js
-import HotspotArray from 'sanity-plugin-hotspot-array'
-import ProductPreview from '../../components/ProductPreview'
-
 options: {
- hotspotImagePath: `hotspotImage`,
- hotspotTooltip: ProductPreview,
-},
+  imageHotspot: {
+    tooltip: ProductPreview
+  }
+}
 ```
 
 ## License
 
-MIT © Simeon Griggs
-See LICENSE
+MIT-licensed. See LICENSE.
+
+## Develop & test
+
+This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
+with default configuration for build & watch scripts.
+
+See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
+on how to run this plugin with hotreload in the studio.
+
+### Release new version
+
+Run ["CI & Release" workflow](https://github.com/sanity-io/sanity-plugin-hotspot-array/actions/workflows/main.yml).
+Make sure to select the main branch and check "Release new version".
+
+Semantic release will only release on configured branches, so it is safe to run release on any branch.

package/lib/cjs/index.js

@@ -0,0 +1,403 @@
+var $dyHF6$reactjsxruntime = require("react/jsx-runtime");
+var $dyHF6$react = require("react");
+var $dyHF6$sanity = require("sanity");
+var $dyHF6$sanityassetutils = require("@sanity/asset-utils");
+var $dyHF6$sanityimageurl = require("@sanity/image-url");
+var $dyHF6$sanityui = require("@sanity/ui");
+var $dyHF6$sanityutilcontent = require("@sanity/util/content");
+var $dyHF6$lodashget = require("lodash/get");
+var $dyHF6$reacthookzweb = require("@react-hookz/web");
+var $dyHF6$framermotion = require("framer-motion");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "imageHotspotArrayPlugin", () => $329a1cedcedb1349$export$2e97a933fd61fb01);
+$parcel$export(module.exports, "ImageHotspotArray", () => $4336b3bb99d0500f$export$aa9dd3c5642820fe);
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $8f6d54ef8e8d6bcf$export$2e2bcd8739ae039({ children: children  }) {
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+        padding: 4,
+        radius: 2,
+        shadow: 1,
+        tone: "caution",
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+            children: children
+        })
+    });
+}
+
+
+
+
+
+
+
+const $b9909e9b23fcefed$var$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"
+};
+const $b9909e9b23fcefed$var$dragStyleWhileDrag = {
+    background: "rgba(0, 0, 0, 0.1)",
+    border: "1px solid #fff",
+    cursor: "none"
+};
+const $b9909e9b23fcefed$var$dragStyleWhileHover = {
+    background: "rgba(0, 0, 0, 0.1)",
+    border: "1px solid #fff"
+};
+const $b9909e9b23fcefed$var$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"
+};
+const $b9909e9b23fcefed$var$dotStyleWhileActive = {
+    visibility: "visible"
+};
+const $b9909e9b23fcefed$var$labelStyle = {
+    color: "white",
+    fontSize: "0.7rem",
+    fontWeight: 600,
+    lineHeight: "1"
+};
+const $b9909e9b23fcefed$var$labelStyleWhileActive = {
+    visibility: "hidden"
+};
+const $b9909e9b23fcefed$var$round = (num)=>Math.round(num * 100) / 100;
+function $b9909e9b23fcefed$export$2e2bcd8739ae039({ value: value , bounds: bounds , update: update , hotspotDescriptionPath: hotspotDescriptionPath , tooltip: tooltip , index: index , schemaType: schemaType , renderPreview: renderPreview  }) {
+    const [isDragging, setIsDragging] = (0, ($parcel$interopDefault($dyHF6$react))).useState(false);
+    const [isHovering, setIsHovering] = (0, ($parcel$interopDefault($dyHF6$react))).useState(false);
+    // x/y are stored as % but need to be converted to px
+    const x = (0, $dyHF6$framermotion.useMotionValue)($b9909e9b23fcefed$var$round(bounds.width * (value.x / 100)));
+    const y = (0, $dyHF6$framermotion.useMotionValue)($b9909e9b23fcefed$var$round(bounds.height * (value.y / 100)));
+    /**
+   * update x/y if the bounds change when resizing the window
+   */ (0, $dyHF6$react.useEffect)(()=>{
+        x.set($b9909e9b23fcefed$var$round(bounds.width * (value.x / 100)));
+        y.set($b9909e9b23fcefed$var$round(bounds.height * (value.y / 100)));
+    }, [
+        x,
+        y,
+        value,
+        bounds
+    ]);
+    const handleDragEnd = (0, ($parcel$interopDefault($dyHF6$react))).useCallback(()=>{
+        setIsDragging(false);
+        // get current values for x/y in px
+        const currentX = x.get();
+        const currentY = y.get();
+        // Which we need to convert back to `%` to patch the document
+        const newX = $b9909e9b23fcefed$var$round(currentX * 100 / bounds.width);
+        const newY = $b9909e9b23fcefed$var$round(currentY * 100 / bounds.height);
+        // Don't go below 0 or above 100
+        const safeX = Math.max(0, Math.min(100, newX));
+        const safeY = Math.max(0, Math.min(100, newY));
+        update(value._key, safeX, safeY);
+    }, [
+        x,
+        y,
+        value,
+        update,
+        bounds
+    ]);
+    const handleDragStart = (0, ($parcel$interopDefault($dyHF6$react))).useCallback(()=>setIsDragging(true), []);
+    const handleHoverStart = (0, ($parcel$interopDefault($dyHF6$react))).useCallback(()=>setIsHovering(true), []);
+    const handleHoverEnd = (0, ($parcel$interopDefault($dyHF6$react))).useCallback(()=>setIsHovering(false), []);
+    if (!x || !y) return null;
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Tooltip), {
+        disabled: isDragging,
+        portal: true,
+        content: tooltip && typeof tooltip === "function" ? /*#__PURE__*/ (0, ($parcel$interopDefault($dyHF6$react))).createElement(tooltip, {
+            value: value,
+            renderPreview: renderPreview,
+            schemaType: schemaType
+        }) : /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+            padding: 2,
+            style: {
+                maxWidth: 200,
+                pointerEvents: `none`
+            },
+            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                textOverflow: "ellipsis",
+                children: hotspotDescriptionPath ? (0, ($parcel$interopDefault($dyHF6$lodashget)))(value, hotspotDescriptionPath) : `${value.x}% x ${value.y}%`
+            })
+        }),
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$framermotion.motion).div, {
+            drag: true,
+            dragConstraints: bounds,
+            dragElastic: 0,
+            dragMomentum: false,
+            onDragEnd: handleDragEnd,
+            onDragStart: handleDragStart,
+            onHoverStart: handleHoverStart,
+            onHoverEnd: handleHoverEnd,
+            style: {
+                ...$b9909e9b23fcefed$var$dragStyle,
+                x: x,
+                y: y,
+                ...isDragging && {
+                    ...$b9909e9b23fcefed$var$dragStyleWhileDrag
+                },
+                ...isHovering && {
+                    ...$b9909e9b23fcefed$var$dragStyleWhileHover
+                }
+            },
+            children: [
+                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+                    style: {
+                        ...$b9909e9b23fcefed$var$dotStyle,
+                        ...(isDragging || isHovering) && {
+                            ...$b9909e9b23fcefed$var$dotStyleWhileActive
+                        }
+                    }
+                }),
+                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("div", {
+                    style: {
+                        ...$b9909e9b23fcefed$var$labelStyle,
+                        ...(isDragging || isHovering) && {
+                            ...$b9909e9b23fcefed$var$labelStyleWhileActive
+                        }
+                    },
+                    children: index + 1
+                })
+            ]
+        })
+    }, value._key);
+}
+
+
+const $4336b3bb99d0500f$var$imageStyle = {
+    width: `100%`,
+    height: `auto`
+};
+const $4336b3bb99d0500f$var$VALID_ROOT_PATHS = [
+    "document",
+    "parent"
+];
+function $4336b3bb99d0500f$export$aa9dd3c5642820fe(props) {
+    const { value: value , onChange: onChange , imageHotspotOptions: imageHotspotOptions , schemaType: schemaType , renderPreview: renderPreview  } = props;
+    const sanityClient = (0, $dyHF6$sanity.useClient)({
+        apiVersion: "2022-01-01"
+    });
+    const imageHotspotPathRoot = (0, $dyHF6$react.useMemo)(()=>{
+        const pathRoot = $4336b3bb99d0500f$var$VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot ?? "") ? imageHotspotOptions.pathRoot : "document";
+        return pathRoot === "document" ? [] : props.path.slice(0, -1);
+    }, [
+        imageHotspotOptions.pathRoot,
+        props.path
+    ]);
+    const rootObject = (0, $dyHF6$sanity.useFormValue)(imageHotspotPathRoot);
+    /**
+   * Finding the image from the imageHotspotPathRoot (defaults to document),
+   * using the path from the hotspot's `options` field
+   *
+   * when changes in imageHotspotPathRoot (e.g. document) occur,
+   * check if there are any changes to the hotspotImage and update the reference
+   */ const hotspotImage = (0, $dyHF6$react.useMemo)(()=>{
+        return (0, ($parcel$interopDefault($dyHF6$lodashget)))(rootObject, imageHotspotOptions.imagePath);
+    }, [
+        rootObject,
+        imageHotspotOptions.imagePath
+    ]);
+    const displayImage = (0, $dyHF6$react.useMemo)(()=>{
+        const builder = (0, ($parcel$interopDefault($dyHF6$sanityimageurl)))(sanityClient).dataset(sanityClient.config().dataset ?? "");
+        const urlFor = (source)=>builder.image(source);
+        if (hotspotImage?.asset?._ref) {
+            const { aspectRatio: aspectRatio  } = (0, $dyHF6$sanityassetutils.getImageDimensions)(hotspotImage.asset._ref);
+            const width = 1200;
+            const height = Math.round(width / aspectRatio);
+            const url = urlFor(hotspotImage).width(width).url();
+            return {
+                width: width,
+                height: height,
+                url: url
+            };
+        }
+        return null;
+    }, [
+        hotspotImage,
+        sanityClient
+    ]);
+    const handleHotspotImageClick = (0, $dyHF6$react.useCallback)((event)=>{
+        const { nativeEvent: nativeEvent  } = event;
+        // Calculate the x/y percentage of the click position
+        const x = Number((nativeEvent.offsetX * 100 / nativeEvent.srcElement.width).toFixed(2));
+        const y = Number((nativeEvent.offsetY * 100 / nativeEvent.srcElement.height).toFixed(2));
+        const description = `New Hotspot at ${x}% x ${y}%`;
+        const newRow = {
+            _key: (0, $dyHF6$sanityutilcontent.randomKey)(12),
+            _type: schemaType.of[0].name,
+            x: x,
+            y: y
+        };
+        if (imageHotspotOptions?.descriptionPath) newRow[imageHotspotOptions.descriptionPath] = description;
+        onChange((0, $dyHF6$sanity.PatchEvent).from([
+            (0, $dyHF6$sanity.setIfMissing)([]),
+            (0, $dyHF6$sanity.insert)([
+                newRow
+            ], "after", [
+                -1
+            ])
+        ]));
+    }, [
+        imageHotspotOptions,
+        onChange,
+        schemaType
+    ]);
+    const handleHotspotMove = (0, $dyHF6$react.useCallback)((key, x, y)=>{
+        onChange((0, $dyHF6$sanity.PatchEvent).from([
+            // Set the `x` value of this array key item
+            (0, $dyHF6$sanity.set)(x, [
+                {
+                    _key: key
+                },
+                "x"
+            ]),
+            // Set the `y` value of this array key item
+            (0, $dyHF6$sanity.set)(y, [
+                {
+                    _key: key
+                },
+                "y"
+            ]), 
+        ]));
+    }, [
+        onChange
+    ]);
+    const hotspotImageRef = (0, $dyHF6$react.useRef)(null);
+    const [imageRect, setImageRect] = (0, $dyHF6$react.useState)();
+    const updateImageRectCallback = (0, $dyHF6$reacthookzweb.useDebouncedCallback)((e)=>setImageRect(e.contentRect), [
+        setImageRect
+    ], 200);
+    (0, $dyHF6$reacthookzweb.useResizeObserver)(hotspotImageRef, updateImageRectCallback);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Stack), {
+        space: [
+            2,
+            2,
+            3
+        ],
+        children: [
+            displayImage?.url ? /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)("div", {
+                style: {
+                    position: `relative`
+                },
+                children: [
+                    imageRect && (value?.length ?? 0) > 0 && value?.map((spot, index)=>/*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $b9909e9b23fcefed$export$2e2bcd8739ae039), {
+                            index: index,
+                            value: spot,
+                            bounds: imageRect,
+                            update: handleHotspotMove,
+                            hotspotDescriptionPath: imageHotspotOptions?.descriptionPath,
+                            tooltip: imageHotspotOptions?.tooltip,
+                            renderPreview: renderPreview,
+                            schemaType: schemaType.of[0]
+                        }, spot._key)),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+                        __unstable_checkered: true,
+                        shadow: 1,
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Flex), {
+                            align: "center",
+                            justify: "center",
+                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("img", {
+                                ref: hotspotImageRef,
+                                src: displayImage.url,
+                                width: displayImage.width,
+                                height: displayImage.height,
+                                alt: "",
+                                style: $4336b3bb99d0500f$var$imageStyle,
+                                onClick: handleHotspotImageClick
+                            })
+                        })
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $8f6d54ef8e8d6bcf$export$2e2bcd8739ae039), {
+                children: imageHotspotOptions.imagePath ? /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$reactjsxruntime.Fragment), {
+                    children: [
+                        "No Hotspot image found at path ",
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("code", {
+                            children: imageHotspotOptions.imagePath
+                        })
+                    ]
+                }) : /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$reactjsxruntime.Fragment), {
+                    children: [
+                        "Define a path in this field using to the image field in this document at",
+                        " ",
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("code", {
+                            children: "options.hotspotImagePath"
+                        })
+                    ]
+                })
+            }),
+            imageHotspotOptions.pathRoot && !$4336b3bb99d0500f$var$VALID_ROOT_PATHS.includes(imageHotspotOptions.pathRoot) && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $8f6d54ef8e8d6bcf$export$2e2bcd8739ae039), {
+                children: [
+                    'The supplied imageHotspotPathRoot "',
+                    imageHotspotOptions.pathRoot,
+                    '" is not valid, falling back to "document". Available values are "',
+                    $4336b3bb99d0500f$var$VALID_ROOT_PATHS.join(", "),
+                    '".'
+                ]
+            }),
+            props.renderDefault(props)
+        ]
+    });
+}
+
+
+
+
+const $329a1cedcedb1349$export$2e97a933fd61fb01 = (0, $dyHF6$sanity.createPlugin)({
+    name: "image-hotspot-array",
+    form: {
+        components: {
+            input: (props)=>{
+                if (props.schemaType.jsonType === "array" && props.schemaType.options?.imageHotspot) {
+                    const imageHotspotOptions = props.schemaType.options?.imageHotspot;
+                    if (imageHotspotOptions) return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $4336b3bb99d0500f$export$aa9dd3c5642820fe), {
+                        ...props,
+                        imageHotspotOptions: imageHotspotOptions
+                    });
+                }
+                return props.renderDefault(props);
+            }
+        }
+    }
+});
+
+
+//# sourceMappingURL=index.js.map