@ixo/editor 2.12.0 → 2.13.0

package/dist/{chunk-5QJ4XXRA.mjs → chunk-JRIF7FLP.mjs}

@@ -17426,9 +17426,18 @@ import React168, { useCallback as useCallback42, useEffect as useEffect47, useRe
 import { Box as Box30 } from "@mantine/core";
 var SCROLL_ZONE_SIZE = 80;
 var SCROLL_SPEED = 12;
-var ExternalDropZone = ({ editor, onDrop, acceptedType = "application/x-artifact", dropIndicator, children }) => {
+var ExternalDropZone = ({
+  editor,
+  onDrop,
+  acceptedType = "application/x-artifact",
+  dropIndicator,
+  isPlacementMode = false,
+  onPlacementCancel,
+  children
+}) => {
   const containerRef = useRef13(null);
   const [isValidDrag, setIsValidDrag] = useState63(false);
+  const [isHoveringInPlacementMode, setIsHoveringInPlacementMode] = useState63(false);
   const [indicatorStyle, setIndicatorStyle] = useState63({});
   const dropPositionRef = useRef13(null);
   const scrollAnimationRef = useRef13(null);
@@ -17598,8 +17607,87 @@ var ExternalDropZone = ({ editor, onDrop, acceptedType = "application/x-artifact
     window.addEventListener("dragend", handleGlobalDragEnd);
     return () => window.removeEventListener("dragend", handleGlobalDragEnd);
   }, [stopAutoScroll]);
+  const handleOverlayMouseMove = useCallback42(
+    (e) => {
+      setIsHoveringInPlacementMode(true);
+      checkAutoScroll(e.clientY);
+      const result = findDropPosition(e.clientY);
+      if (result) {
+        dropPositionRef.current = result.position;
+        setIndicatorStyle({
+          position: "absolute",
+          top: result.indicatorTop,
+          left: 0,
+          right: 0,
+          zIndex: 9999,
+          pointerEvents: "none"
+        });
+      }
+    },
+    [findDropPosition, checkAutoScroll]
+  );
+  const handleOverlayMouseLeave = useCallback42(() => {
+    setIsHoveringInPlacementMode(false);
+    dropPositionRef.current = null;
+    stopAutoScroll();
+  }, [stopAutoScroll]);
+  const handleOverlayClick = useCallback42(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const position = dropPositionRef.current;
+      if (position) {
+        onDrop(position);
+      }
+      setIsHoveringInPlacementMode(false);
+      dropPositionRef.current = null;
+      stopAutoScroll();
+    },
+    [onDrop, stopAutoScroll]
+  );
+  const handleOverlayWheel = useCallback42(
+    (e) => {
+      const container = getScrollContainer();
+      if (container === window) {
+        window.scrollBy(0, e.deltaY);
+      } else {
+        container.scrollBy(0, e.deltaY);
+      }
+    },
+    [getScrollContainer]
+  );
+  useEffect47(() => {
+    if (!isPlacementMode) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onPlacementCancel?.();
+      }
+    };
+    const handleGlobalClick = (e) => {
+      const target = e.target;
+      if (target.closest("[data-placement-toggle]")) {
+        return;
+      }
+      if (containerRef.current && !containerRef.current.contains(target)) {
+        onPlacementCancel?.();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("click", handleGlobalClick, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("click", handleGlobalClick, true);
+    };
+  }, [isPlacementMode, onPlacementCancel]);
+  useEffect47(() => {
+    if (!isPlacementMode) {
+      setIsHoveringInPlacementMode(false);
+      dropPositionRef.current = null;
+    }
+  }, [isPlacementMode]);
   useEffect47(() => {
-    if (isValidDrag) {
+    const isActive = isValidDrag || isPlacementMode && isHoveringInPlacementMode;
+    if (isActive) {
       document.body.classList.add("external-artifact-drag-active");
     } else {
       document.body.classList.remove("external-artifact-drag-active");
@@ -17607,7 +17695,7 @@ var ExternalDropZone = ({ editor, onDrop, acceptedType = "application/x-artifact
     return () => {
       document.body.classList.remove("external-artifact-drag-active");
     };
-  }, [isValidDrag]);
+  }, [isValidDrag, isPlacementMode, isHoveringInPlacementMode]);
   useEffect47(() => {
     return () => {
       if (scrollAnimationRef.current) {
@@ -17618,18 +17706,44 @@ var ExternalDropZone = ({ editor, onDrop, acceptedType = "application/x-artifact
   const indicatorWithPosition = dropIndicator && React168.isValidElement(dropIndicator) ? React168.cloneElement(dropIndicator, {
     indicatorTop: typeof indicatorStyle.top === "number" ? indicatorStyle.top : void 0
   }) : dropIndicator;
+  const shouldShowIndicator = isValidDrag || isPlacementMode && isHoveringInPlacementMode;
   return /* @__PURE__ */ React168.createElement(
     Box30,
     {
       ref: containerRef,
-      style: { position: "relative", width: "100%", height: "100%" },
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%"
+      },
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
       onDrop: handleDrop,
-      "data-external-drag": isValidDrag ? "true" : void 0
+      "data-external-drag": isValidDrag ? "true" : void 0,
+      "data-placement-mode": isPlacementMode ? "true" : void 0
     },
     children,
-    isValidDrag && indicatorWithPosition && /* @__PURE__ */ React168.createElement(Box30, { style: { ...indicatorStyle, background: "none", border: "none", boxShadow: "none" } }, indicatorWithPosition)
+    isPlacementMode && /* @__PURE__ */ React168.createElement(
+      Box30,
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          cursor: "crosshair",
+          zIndex: 9998,
+          // Below the indicator (9999) but above content
+          background: "transparent"
+        },
+        onMouseMove: handleOverlayMouseMove,
+        onMouseLeave: handleOverlayMouseLeave,
+        onClick: handleOverlayClick,
+        onWheel: handleOverlayWheel
+      }
+    ),
+    shouldShowIndicator && indicatorWithPosition && /* @__PURE__ */ React168.createElement(Box30, { style: { ...indicatorStyle, background: "none", border: "none", boxShadow: "none" } }, indicatorWithPosition)
   );
 };
 
@@ -17706,7 +17820,9 @@ function IxoEditorContent({
   pageHeaderProps,
   onExternalDrop,
   externalDropType,
-  dropIndicator
+  dropIndicator,
+  isPlacementMode,
+  onPlacementCancel
 }) {
   const { activePanel } = usePanelStore();
   const isPanelOpen = activePanel !== null;
@@ -17749,7 +17865,19 @@ function IxoEditorContent({
     },
     selfNav && /* @__PURE__ */ React170.createElement(PageHeader, { ...pageHeaderProps }),
     /* @__PURE__ */ React170.createElement(CoverImage, { coverImageUrl, logoUrl }),
-    onExternalDrop ? /* @__PURE__ */ React170.createElement(ExternalDropZone, { editor, onDrop: onExternalDrop, acceptedType: externalDropType, dropIndicator }, editorContent) : editorContent
+    (onExternalDrop || isPlacementMode) && isEditable ? /* @__PURE__ */ React170.createElement(
+      ExternalDropZone,
+      {
+        editor,
+        onDrop: onExternalDrop || (() => {
+        }),
+        acceptedType: externalDropType,
+        dropIndicator,
+        isPlacementMode,
+        onPlacementCancel
+      },
+      editorContent
+    ) : editorContent
   ), isPanelVisible && /* @__PURE__ */ React170.createElement(PanelContent, { theme: config.theme }));
 }
 function IxoEditor({
@@ -17772,7 +17900,9 @@ function IxoEditor({
   dynamicListPanelRenderer,
   onExternalDrop,
   externalDropType,
-  dropIndicator
+  dropIndicator,
+  isPlacementMode,
+  onPlacementCancel
 }) {
   if (!editor) {
     return null;
@@ -17814,7 +17944,9 @@ function IxoEditor({
         pageHeaderProps,
         onExternalDrop,
         externalDropType,
-        dropIndicator
+        dropIndicator,
+        isPlacementMode,
+        onPlacementCancel
       },
       children
     )
@@ -18354,4 +18486,4 @@ export {
   ixoGraphQLClient,
   getEntity
 };
-//# sourceMappingURL=chunk-5QJ4XXRA.mjs.map
+//# sourceMappingURL=chunk-JRIF7FLP.mjs.map