@alpaca-editor/core 1.0.3812 → 1.0.3815

package/src/editor/page-editor-chrome/PlaceholderDropZone.tsx

@@ -47,7 +47,7 @@ export function PlaceholderDropZone({
       placeholder.key,
       index,
       spotPositionElement,
-      spotPositionAnchor
+      spotPositionAnchor,
     );
   }
 
@@ -64,11 +64,10 @@ export function PlaceholderDropZone({
     if (isHovering) {
       editContext.setStatusMessage(
         <div>
-          Drop into placeholder{" "}
-          <span className="font-bold">{parentName}</span> /{" "}
-          <span className="font-bold">{description || placeholder.name}</span>{" "}
+          Drop into placeholder <span className="font-bold">{parentName}</span>{" "}
+          / <span className="font-bold">{description || placeholder.name}</span>{" "}
           at position <span className="font-bold">{index + 1}</span>
-        </div>
+        </div>,
       );
     } else {
       editContext.setStatusMessage("");
@@ -91,7 +90,7 @@ export function PlaceholderDropZone({
           //     ? undefined
           //     : placeholderKeyComponents[0];
           const insertOption = placeholder.insertOptions.find(
-            (x) => x.typeId === editContext.selectedForInsertion
+            (x) => x.typeId === editContext.selectedForInsertion,
           );
           if (insertOption) {
             editContext!.droppedInPlaceholder(
@@ -99,7 +98,7 @@ export function PlaceholderDropZone({
               index,
               spotPositionElement,
               spotPositionAnchor,
-              insertOption
+              insertOption,
             );
 
             return;
@@ -122,7 +121,7 @@ export function PlaceholderDropZone({
                   editContext.operations.addComponent(
                     x.typeId,
                     placeholder.key,
-                    index
+                    index,
                   );
                 },
               })) || ([] as MenuItem[]);
@@ -134,23 +133,21 @@ export function PlaceholderDropZone({
                 disabled: true,
                 className: "border-b border-gray-400 pb-2 pl-2",
                 template: () => {
-                  return (
-                    <span className="text-black text-sm ">Insert</span>
-                  );
+                  return <span className="text-sm text-black">Insert</span>;
                 },
               },
               ...insertOptions,
             ]);
           e.preventDefault();
         }}
-        className="placeholder cursor-pointer placeholder-dropzone"
+        className="placeholder placeholder-dropzone cursor-pointer"
       >
         <div
           className={classNames(
             isHovering
-              ? "z-30 shadow-xl shadow-black w-20 h-20 shadow-blue-500/50"
-              : "z-30 w-10 h-10 hover:scale-[1.1]",
-            "transition-all duration-200 text-white text-center p-2 text-sm flex justify-center items-center bg-blue-500 rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 test-ph-dropzone tour-placeholder-dropzone"
+              ? "z-30 h-20 w-20 shadow-xl shadow-black shadow-blue-500/50"
+              : "z-30 h-10 w-10 hover:scale-[1.1]",
+            "test-ph-dropzone tour-placeholder-dropzone absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-blue-500 p-2 text-center text-sm text-white opacity-100 transition-all duration-300 ease-in-out",
           )}
           data-testid="placeholder-dropzone-button"
         >

package/src/editor/page-editor-chrome/PlaceholderDropZones.tsx

@@ -4,7 +4,7 @@ import { useEditContext } from "../client/editContext";
 import { getAllPlaceholders } from "../componentTreeHelper";
 import { findComponentRect } from "../utils";
 import { PlaceholderDropZone } from "./PlaceholderDropZone";
-import { Placeholder } from "../pageModel";
+import { Placeholder, Component } from "../pageModel";
 
 export function PlaceholderDropZones({
   scale,
@@ -31,22 +31,31 @@ export function PlaceholderDropZones({
   )
     return null;
 
-  const matchingPlaceholders = placeholders.filter(
-    (x) =>
-      x.parentComponent?.id === editContext.selectedForInsertion ||
-      x.insertOptions?.find(
-        (y) =>
-          y.typeId === editContext.selectedForInsertion ||
-          y.typeId === editContext.dragObject?.typeId ||
-          y.typeId === editContext.dragObject?.templateId ||
-          y.compatibleTemplates?.find(
-            (z) => z == editContext.dragObject?.typeId
-          ) !== undefined ||
-          y.typeId === editContext.dragObject?.templateId ||
-          y.compatibleTemplates?.find(
-            (z) => z == editContext.dragObject?.templateId
-          ) !== undefined
-      )
+  const matchingPlaceholders = placeholders.filter((x) => {
+    // x.parentComponent?.id === editContext.selectedForInsertion ||
+    const matchingInsertOptions = x.insertOptions?.find(
+      (y) =>
+        // y.typeId === editContext.selectedForInsertion ||
+        y.typeId === editContext.dragObject?.typeId,
+      // ||
+      // y.typeId === editContext.dragObject?.templateId ||
+      // y.compatibleTypeIds?.find(
+      //   (z) => z == editContext.dragObject?.typeId,
+      // ) !== undefined ||
+      // y.typeId === editContext.dragObject?.templateId ||
+      // y.compatibleTypeIds?.find(
+      //   (z) => z == editContext.dragObject?.templateId,
+      // ) !== undefined,
+    );
+
+    return matchingInsertOptions !== undefined;
+  });
+
+  console.log(
+    "matching placeholders: ",
+    matchingPlaceholders,
+    editContext.selectedForInsertion,
+    editContext.dragObject,
   );
 
   if (!iframe) return;
@@ -65,10 +74,13 @@ export function PlaceholderDropZones({
       .documentElement.scrollHeight || 0;
 
   matchingPlaceholders.forEach((placeholder) => {
-    const placeholderElement =
-      iframe!.contentWindow?.document.body.querySelector(
-        "[data-placeholder-start='" + placeholder.key + "']"
-      );
+    let placeholderElement = iframe!.contentWindow?.document.body.querySelector(
+      "[data-placeholder-start='" + placeholder.key + "']",
+    );
+
+    if (!placeholderElement && placeholder.components.length > 0) {
+      placeholderElement = placeholder.components[0]?.firstDOMElement;
+    }
 
     if (!placeholderElement) return;
 
@@ -77,7 +89,13 @@ export function PlaceholderDropZones({
     const nextOrParent =
       getNextElement(placeholderElement) || placeholderElement.parentElement;
 
-    const orientation = placeholderElement?.getAttribute("data-orientation");
+    let orientation = placeholderElement?.getAttribute("data-orientation");
+
+    if (!orientation)
+      orientation = detectOrientation(
+        placeholderElement,
+        placeholder.components,
+      );
 
     const rect = (prev ?? nextOrParent)!.getBoundingClientRect();
     const zoom = pageViewContext.zoom;
@@ -121,60 +139,81 @@ export function PlaceholderDropZones({
       description,
     });
 
-    let nextElement = placeholderElement?.nextElementSibling;
-    while (nextElement) {
-      nextElement = nextElement?.nextElementSibling;
-      if (nextElement) {
-        if (
-          nextElement.getAttribute("data-placeholder-end") === placeholder.key
-        ) {
-          break;
-        }
+    placeholder.components.forEach((component) => {
+      const componentRect = findComponentRect(iframe, component);
+      if (!componentRect) return;
 
-        if (nextElement.getAttribute("data-component-end")) {
-          const componentRect = findComponentRect(
-            iframe,
-            (nextElement.getAttribute("data-component-end") ||
-              nextElement.getAttribute("data-dropzone"))!
-          );
-          if (!componentRect) continue;
-          const position = getPositionFromRect(
-            componentRect.rect,
-            pageViewContext.zoom,
-            orientation
-          );
-          index++;
-          zones.push({
-            placeholder,
-            position,
-            index,
-            anchor: orientation === "horizontal" ? "right" : "bottom",
-            element: componentRect.elements[componentRect.elements.length - 1]!,
-          });
-        } else if (nextElement.getAttribute("data-dropzone")) {
-          const rect = nextElement.getBoundingClientRect();
-          const position = getPositionFromRect(rect, pageViewContext.zoom);
-          index++;
-          zones.push({
-            placeholder,
-            position,
-            index,
-            anchor: orientation === "horizontal" ? "left" : "top",
-            element: nextElement,
-          });
-        }
-      }
-    }
+      const position = getPositionFromRect(
+        componentRect.rect,
+        pageViewContext.zoom,
+        orientation,
+      );
+
+      index++;
+
+      zones.push({
+        placeholder,
+        position,
+        index,
+        anchor: orientation === "horizontal" ? "right" : "bottom",
+        element: componentRect.elements[componentRect.elements.length - 1]!,
+      });
+    });
+
+    //   let nextElement = placeholderElement?.nextElementSibling;
+    //   while (nextElement) {
+    //     nextElement = nextElement?.nextElementSibling;
+    //     if (nextElement) {
+    //       if (
+    //         nextElement.getAttribute("data-placeholder-end") === placeholder.key
+    //       ) {
+    //         break;
+    //       }
+
+    //       if (nextElement.getAttribute("data-component-end")) {
+    //         const componentRect = findComponentRect(
+    //           iframe,
+    //           (nextElement.getAttribute("data-component-end") ||
+    //             nextElement.getAttribute("data-dropzone"))!,
+    //         );
+    //         if (!componentRect) continue;
+    //         const position = getPositionFromRect(
+    //           componentRect.rect,
+    //           pageViewContext.zoom,
+    //           orientation,
+    //         );
+    //         index++;
+    //         zones.push({
+    //           placeholder,
+    //           position,
+    //           index,
+    //           anchor: orientation === "horizontal" ? "right" : "bottom",
+    //           element: componentRect.elements[componentRect.elements.length - 1]!,
+    //         });
+    //       } else if (nextElement.getAttribute("data-dropzone")) {
+    //         const rect = nextElement.getBoundingClientRect();
+    //         const position = getPositionFromRect(rect, pageViewContext.zoom);
+    //         index++;
+    //         zones.push({
+    //           placeholder,
+    //           position,
+    //           index,
+    //           anchor: orientation === "horizontal" ? "left" : "top",
+    //           element: nextElement,
+    //         });
+    //       }
+    //     }
+    //   }
   });
 
   return zones.map((zone, index) => {
     const x = Math.min(
       pageViewContext.viewport.width - 20,
-      Math.max(20, zone.position.x * (scale || 1))
+      Math.max(20, zone.position.x * (scale || 1)),
     );
     const y = Math.min(
       scrollHeight - 20,
-      Math.max(20 - pageViewContext.scroll, zone.position.y * (scale || 1))
+      Math.max(20 - pageViewContext.scroll, zone.position.y * (scale || 1)),
     );
 
     return (
@@ -216,7 +255,7 @@ function getNextElement(element: Element): Element | null {
 function getPositionFromRect(
   rect: { x: number; y: number; width: number; height: number },
   zoom: number,
-  orientation?: string | null
+  orientation?: string | null,
 ) {
   const position =
     orientation === "horizontal"
@@ -231,3 +270,55 @@ function getPositionFromRect(
 
   return position;
 }
+
+function detectOrientation(
+  placeholderElement: Element,
+  components: Component[],
+): "horizontal" | "vertical" {
+  // Check parent element for flex/grid direction
+  const parentElement = placeholderElement.parentElement;
+  if (parentElement) {
+    const parentStyle = window.getComputedStyle(parentElement);
+    const display = parentStyle.getPropertyValue("display");
+
+    // Check for flex direction
+    if (display === "flex" || display === "inline-flex") {
+      const flexDirection = parentStyle.getPropertyValue("flex-direction");
+      if (flexDirection === "row" || flexDirection === "row-reverse") {
+        return "horizontal";
+      }
+      if (flexDirection === "column" || flexDirection === "column-reverse") {
+        return "vertical";
+      }
+    }
+
+    // Check for grid layout
+    if (display === "grid" || display === "inline-grid") {
+      const gridAutoFlow = parentStyle.getPropertyValue("grid-auto-flow");
+      if (gridAutoFlow.includes("column")) {
+        return "horizontal";
+      }
+      if (gridAutoFlow.includes("row")) {
+        return "vertical";
+      }
+    }
+  }
+
+  // Analyze sibling positions if available
+  if (components.length > 1) {
+    const prevRect = components[0]?.firstDOMElement?.getBoundingClientRect();
+    const nextRect = components[1]?.firstDOMElement?.getBoundingClientRect();
+
+    if (!prevRect || !nextRect) return "horizontal";
+
+    // Compare the position differences
+    const horizontalDiff = Math.abs(nextRect.x - prevRect.x);
+    const verticalDiff = Math.abs(nextRect.y - prevRect.y);
+
+    // If horizontal difference is greater, it's likely a horizontal layout
+    return horizontalDiff > verticalDiff ? "horizontal" : "vertical";
+  }
+
+  // Default to vertical if we can't determine
+  return "vertical";
+}