@alpaca-editor/core 1.0.3813 → 1.0.3817

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

@@ -1,4 +1,4 @@
-import { useEditContext } from "../client/editContext";
+import { useEditContext, EditorMode } from "../client/editContext";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 import { InlineEditor } from "./InlineEditor";
 import { FieldActionsIndicators } from "./FieldActionIndicators";
@@ -12,11 +12,11 @@ import { CommentHighlightings } from "./CommentHighlightings";
 
 export function PageEditorChrome({
   iframe,
-  mode,
+  compareView,
   pageViewContext,
 }: {
   iframe: HTMLIFrameElement;
-  mode: "edit" | "compare" | "view";
+  compareView: boolean;
   pageViewContext: PageViewContext;
 }) {
   const editContext = useEditContext();
@@ -59,11 +59,11 @@ export function PageEditorChrome({
       const scale = pageViewContext.zoom;
       const x = Math.min(
         pageViewContext.viewport.width - 20,
-        Math.max(20, insertingPosition.x * (scale || 1))
+        Math.max(20, insertingPosition.x * (scale || 1)),
       );
       const y = Math.min(
         pageViewContext.viewport.height - 20,
-        Math.max(20, insertingPosition.y * (scale || 1))
+        Math.max(20, insertingPosition.y * (scale || 1)),
       );
 
       return {
@@ -79,10 +79,10 @@ export function PageEditorChrome({
 
   return (
     <>
-      <FrameMenus mode={mode} pageViewContext={pageViewContext} />
+      <FrameMenus pageViewContext={pageViewContext} compareView={compareView} />
       <InlineEditor
-        mode={mode === "edit" ? "edit" : "view"}
         pageViewContext={pageViewContext}
+        compareView={compareView}
       />
       <LockedFieldIndicator />
       <FieldActionsIndicators />
@@ -95,7 +95,7 @@ export function PageEditorChrome({
 
       <FieldEditedIndicators pageViewContext={pageViewContext} />
 
-      {mode === "edit" && (
+      {editContext.mode === "edit" && (
         <>
           <PlaceholderDropZones
             iframe={pageViewContext?.editorIframeRef.current}
@@ -104,12 +104,9 @@ export function PageEditorChrome({
           <PictureEditorOverlay />
 
           {insertingStyle && (
-            <div
-              className="absolute flex h-8 w-8"
-              style={insertingStyle}
-            >
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-8 w-8 bg-sky-500"></span>
+            <div className="absolute flex h-8 w-8" style={insertingStyle}>
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span>
+              <span className="relative inline-flex h-8 w-8 rounded-full bg-sky-500"></span>
             </div>
           )}
         </>

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";
+}

package/src/editor/page-viewer/EditorForm.tsx

@@ -15,15 +15,18 @@ import { SimpleTabs, Tab } from "../ui/SimpleTabs";
 export function EditorForm({
   pageViewContext,
   readonly,
+  compareView,
 }: {
   pageViewContext?: PageViewContext;
   readonly?: boolean;
+  compareView: boolean;
 }) {
   const editContext = useEditContext()!;
   if (!pageViewContext) pageViewContext = editContext.pageView;
 
   const setInsertMode = editContext.setInsertMode;
-  const insertMode = editContext.insertMode;
+  const insertMode =
+    editContext.insertMode && editContext.mode === "edit" && !compareView;
   const [activeTabKey, setActiveTabKey] = useState("content");
   const [item, setItem] = useState<RenderedItem>();
   const [component, setComponent] = useState<Component>();
@@ -32,8 +35,6 @@ export function EditorForm({
     if (insertMode) {
       setInsertMode(false);
     } else {
-      // if (editContext.selection.length > 0)
-      //   editContext.setSelectedForInsertion(editContext.selection[0]);
       setInsertMode(true);
     }
   };
@@ -141,7 +142,7 @@ export function EditorForm({
       label: headline,
       content: (
         <div className="relative h-full">
-          <div className="absolute inset-0 overflow-auto px-3">
+          <div className="absolute inset-0 overflow-auto">
             <FieldList
               fields={fields}
               validators={validators}
@@ -159,7 +160,7 @@ export function EditorForm({
   if (itemFields.length > 0)
     tabPanels.push(getFieldsTab(itemFields, "Content", "content"));
 
-  //TODO: generalize this
+  //TODO: generalize thisdata-field-id
   if (editorFields) {
     Object.keys(editorFields).forEach((key) => {
       if (key !== "Content" && key !== "Design") {
@@ -181,7 +182,7 @@ export function EditorForm({
     label: "Advanced",
     content: (
       <div className="relative h-full">
-        <div className="absolute inset-0 overflow-auto px-3">
+        <div className="absolute inset-0 overflow-auto">
           <ItemInfo item={item} />
           <FieldList
             fields={[{ fields: item.fields }]}
@@ -211,7 +212,7 @@ export function EditorForm({
         )}
         {editContext.selection.length === 0 && <div className="w-12" />}
         <div
-          className="flex-1 text-center"
+          className="flex-1 text-center text-gray-800"
           id="item-name"
           data-testid="component-name"
         >
@@ -228,7 +229,12 @@ export function EditorForm({
           onClick={() => toggleInsertMode()}
           label={insertMode ? "Continue editing" : "Insert component"}
           size="large"
-          disabled={!editContext.page?.item.canWriteItem || !item?.canWriteItem}
+          disabled={
+            !editContext.page?.item.canWriteItem ||
+            !item?.canWriteItem ||
+            editContext.mode !== "edit" ||
+            compareView
+          }
         />
       </h1>
 
@@ -237,7 +243,7 @@ export function EditorForm({
         <SimpleTabs
           key="editor-tabs"
           tabs={tabPanels}
-          className="flex flex-1 items-center justify-center border-b border-gray-200 bg-gray-50 py-3 text-sm"
+          className="flex flex-1 items-center justify-center border-b border-gray-200 bg-gray-50 py-2.5 text-sm"
           activeTab={tabPanels.findIndex((x) => x.id === activeTabKey) || 0}
           setActiveTab={(index) => setActiveTabKey(tabPanels[index]?.id!)}
         ></SimpleTabs>

package/src/editor/page-viewer/MiniMap.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { useEditContext } from "../client/editContext";
+import { useEditContext, EditorMode } from "../client/editContext";
 import { PlaceholderDropZones } from "../page-editor-chrome/PlaceholderDropZones";
 import { FieldEditedIndicators } from "../page-editor-chrome/FieldEditedIndicators";
 import { PageViewContext } from "./pageViewContext";
@@ -9,13 +9,13 @@ export function MiniMap({
   deviceHeight,
   scroll,
   mainViewIframeRef,
-  mode,
+  compareView,
   pageViewContext,
 }: {
   deviceHeight?: number;
   scroll: number;
   mainViewIframeRef: React.RefObject<HTMLIFrameElement | null>;
-  mode: "edit" | "compare" | "view";
+  compareView: boolean;
   pageViewContext: PageViewContext;
 }) {
   const editContext = useEditContext();
@@ -331,7 +331,7 @@ export function MiniMap({
             }}
           ></div>
         )}
-      {mode === "edit" && (
+      {editContext.mode === "edit" && (
         <PlaceholderDropZones
           scale={scale}
           iframe={iframeRef.current}

package/src/editor/page-viewer/PageViewer.tsx

@@ -5,19 +5,19 @@ import { PageViewerFrame } from "./PageViewerFrame";
 import { useEffect, useState } from "react";
 import { useRef } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { useEditContext } from "../client/editContext";
+import { EditorMode, useEditContext } from "../client/editContext";
 import { useDebouncedCallback } from "use-debounce";
 
 export function PageViewer({
   pageViewContext,
   showFormEditor,
-  mode,
+  compareView,
   name,
   followEditsDefault,
 }: {
   pageViewContext?: PageViewContext;
   showFormEditor: boolean;
-  mode: "view" | "edit" | "compare";
+  compareView?: boolean;
   name: string;
   followEditsDefault?: boolean;
 }) {
@@ -26,7 +26,6 @@ export function PageViewer({
   const editContext = useEditContext();
 
   const [followEdits, setFollowEdits] = useState(followEditsDefault);
-
   const allotmentRef = useRef<AllotmentHandle>(null);
   const [formEditorWidth, setFormEditorWidth] = useState(0);
 
@@ -88,7 +87,8 @@ export function PageViewer({
         <div className="flex-1">
           <EditorForm
             pageViewContext={pageViewContext}
-            readonly={mode !== "edit"}
+            readonly={editContext?.mode !== "edit"}
+            compareView={compareView || false}
           />
         </div>
         <div className="flex items-center justify-between gap-1 bg-gray-50 p-1">
@@ -107,7 +107,7 @@ export function PageViewer({
 
   panels.push(
     <PageViewerFrame
-      mode={mode}
+      compareView={compareView || false}
       pageViewContext={pageViewContext}
       key="frame"
     />,