@alpaca-editor/core 1.0.0

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

@@ -0,0 +1,154 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useEditContext } from "../client/editContext";
+
+import { PictureEditor } from "../PictureEditor";
+import { getComponentById } from "../componentTreeHelper";
+import { PictureField } from "../fieldTypes";
+
+export function PictureEditorOverlay() {
+  const editContext = useEditContext();
+
+  const pageViewContext = editContext?.pageView;
+  const iframe = pageViewContext?.editorIframeRef.current;
+
+  const [field, setField] = useState<PictureField>();
+  const [variantName, setVariantName] = useState<string>();
+  const [element, setElement] = useState<HTMLElement>();
+  const editContextRef = useRef(editContext);
+
+  useEffect(() => {
+    editContextRef.current = editContext;
+  }, [editContext]);
+
+  const onMouseEnter = useCallback(
+    (e: MouseEvent) => {
+      if (!e.target) return;
+
+      if (!("closest" in e.target)) return;
+
+      const target = e.target as HTMLElement;
+
+      const pictureElement = target.closest("picture") || target.closest("img");
+
+      setElement(pictureElement || undefined);
+    },
+    [iframe, editContext]
+  );
+
+  useEffect(() => {
+    if (element) {
+      const itemId = element.getAttribute("data-itemid");
+      const language = element.getAttribute("data-language");
+      const version = element.getAttribute("data-version");
+      const fieldId = element.getAttribute("data-fieldid");
+
+      if (
+        !itemId ||
+        !language ||
+        !version ||
+        !fieldId ||
+        !pageViewContext?.page ||
+        !iframe?.contentWindow
+      )
+        return;
+
+      const component = getComponentById(itemId, pageViewContext.page!);
+
+      if (component == null) return;
+
+      const pictureField = component.datasourceItem?.fields.find(
+        (f) => f.id === fieldId
+      ) as PictureField;
+
+      if (!pictureField) return;
+
+      setField(pictureField);
+    } else {
+      setField(undefined);
+    }
+  }, [element, pageViewContext?.page]);
+
+  useEffect(() => {
+    if (!element || !iframe?.contentWindow) return;
+
+    const sourceELement = getCurrentPictureSource(
+      element,
+      iframe.contentWindow
+    );
+
+    if (sourceELement) {
+      const variantName = sourceELement.getAttribute("data-variant");
+
+      if (variantName) {
+        setVariantName(variantName);
+      }
+    }
+  }, [pageViewContext?.viewport, element]);
+
+  const handleLoad = () => {
+    if (iframe?.contentDocument) {
+      iframe.contentDocument.addEventListener("mouseenter", onMouseEnter, true);
+    }
+  };
+
+  useEffect(() => {
+    if (iframe) {
+      // Ensure the iframe is loaded and accessible
+      iframe.addEventListener("load", handleLoad);
+
+      return () => {
+        if (iframe?.contentDocument) {
+          iframe?.contentDocument.removeEventListener(
+            "mouseenter",
+            onMouseEnter
+          );
+        }
+
+        if (iframe) {
+          iframe.removeEventListener("load", handleLoad);
+        }
+      };
+    }
+  }, [iframe, editContext?.refreshCompletedFlag]);
+
+  if (!field || !variantName || !element) return null;
+
+  const bounds = element.getBoundingClientRect();
+
+  const style = {
+    left: bounds.x + "px",
+    top: bounds.y + "px",
+    width: bounds.width + "px",
+    height: bounds.height + "px",
+  };
+
+  return (
+    <PictureEditor
+      field={field}
+      variantName={variantName}
+      style={style}
+      forwardScrollevents={true}
+      isPageEditor={true}
+    />
+  );
+}
+
+function getCurrentPictureSource(
+  pictureElement: HTMLElement,
+  iframeWindow: Window
+): HTMLElement | null {
+  if (pictureElement.tagName === "IMG") return pictureElement;
+
+  const sources = pictureElement.querySelectorAll("source");
+  let currentSrc: HTMLSourceElement | null = null;
+
+  sources.forEach((source) => {
+    const media = source.getAttribute("media");
+    if (!media) return;
+    if (media && iframeWindow.matchMedia(media).matches) {
+      currentSrc = source;
+    }
+  });
+
+  return currentSrc || pictureElement.querySelector("img") || null;
+}

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

@@ -0,0 +1,171 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useEditContext } from "../client/editContext";
+import { classNames } from "primereact/utils";
+import { MenuItem } from "primereact/menuitem";
+
+import { getAbsoluteIconUrl } from "../utils";
+import { Placeholder } from "../pageModel";
+
+export function PlaceholderDropZone({
+  placeholder,
+  description,
+  index,
+  parentName,
+  spotPosition,
+  spotPositionElement,
+  spotPositionAnchor,
+  size,
+}: {
+  placeholder: Placeholder;
+  description?: string;
+  index: number;
+  parentName?: string;
+  spotPosition: { x: number; y: number };
+  spotPositionElement: Element;
+  size: "large" | "small";
+  spotPositionAnchor: "top" | "bottom" | "left" | "right";
+}) {
+  const [isHovering, setIsHovering] = useState(false);
+
+  const editContext = useEditContext();
+  if (!editContext) return;
+
+  function dragOver(ev: any) {
+    ev.dataTransfer.dropEffect =
+      editContext?.dragObject?.type == "template" ? "copy" : "move";
+    setIsHovering(true);
+    ev.preventDefault();
+  }
+
+  function drop(ev: any) {
+    ev.preventDefault();
+    setIsHovering(false);
+    editContext!.setStatusMessage("");
+    editContext!.droppedInPlaceholder(
+      placeholder.key,
+      index,
+      spotPositionElement,
+      spotPositionAnchor
+    );
+  }
+
+  const overlayStyle = {
+    top: spotPosition.y,
+    left: spotPosition.x,
+    zIndex: isHovering ? 40 : 30,
+    transform: "none",
+  };
+
+  if (size === "small") overlayStyle.transform = "scale(0.5)";
+
+  useEffect(() => {
+    if (isHovering) {
+      editContext.setStatusMessage(
+        <div>
+          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>
+      );
+    } else {
+      editContext.setStatusMessage("");
+    }
+  }, [isHovering]);
+
+  return (
+    <div className="absolute" style={overlayStyle}>
+      <div
+        onDragOver={dragOver}
+        title={(description ?? placeholder.name) + " (" + index + ")"}
+        data-testid="placeholder-dropzone"
+        data-testindex={index}
+        onDrop={drop}
+        onDragLeave={() => setIsHovering(false)}
+        onClick={(e) => {
+          //const placeholderKeyComponents = placeholder.key.split("_");
+          // const parentId =
+          //   placeholderKeyComponents.length === 1
+          //     ? undefined
+          //     : placeholderKeyComponents[0];
+          const insertOption = placeholder.insertOptions.find(
+            (x) => x.typeId === editContext.selectedForInsertion
+          );
+          if (insertOption) {
+            editContext!.droppedInPlaceholder(
+              placeholder.key,
+              index,
+              spotPositionElement,
+              spotPositionAnchor,
+              insertOption
+            );
+
+            return;
+          }
+          const insertOptions =
+            placeholder.insertOptions
+              ?.filter((x) => !x.isHidden && !x.isInvalid)
+              .map((x) => ({
+                id: x.typeId,
+                icon: (
+                  <img
+                    src={getAbsoluteIconUrl(x.icon)}
+                    width="16"
+                    height="16"
+                    className="m-1"
+                  />
+                ),
+                label: x.name,
+                command: () => {
+                  editContext.operations.addComponent(
+                    x.typeId,
+                    placeholder.key,
+                    index
+                  );
+                },
+              })) || ([] as MenuItem[]);
+
+          if (insertOptions.length > 0)
+            editContext.showContextMenu(e, [
+              {
+                label: "Insert",
+                disabled: true,
+                className: "border-b border-gray-400 pb-2 pl-2",
+                template: () => {
+                  return (
+                    <span className="text-black text-sm ">Insert</span>
+                  );
+                },
+              },
+              ...insertOptions,
+            ]);
+          e.preventDefault();
+        }}
+        className="placeholder cursor-pointer placeholder-dropzone"
+      >
+        <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"
+          )}
+          data-testid="placeholder-dropzone-button"
+        >
+          <i className="pi pi-plus block" />
+          {/* {isHovering && (
+            <div className="flex flex-col items-center">
+              {parentName}{" "}
+              <div className="text-xs text-gray-500">
+                ({description || placeholder.key} {index})
+              </div>
+            </div>
+          )} */}
+        </div>
+      </div>
+    </div>
+    // </div>
+  );
+}

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

@@ -0,0 +1,233 @@
+import { useEffect, useState } from "react";
+import { useEditContext } from "../client/editContext";
+
+import { getAllPlaceholders } from "../componentTreeHelper";
+import { findComponentRect } from "../utils";
+import { PlaceholderDropZone } from "./PlaceholderDropZone";
+import { Placeholder } from "../pageModel";
+
+export function PlaceholderDropZones({
+  scale,
+  iframe,
+  size,
+}: {
+  scale?: number;
+  iframe?: HTMLIFrameElement | null;
+  size: "large" | "small";
+}) {
+  const [placeholders, setPlaceholders] = useState<Placeholder[]>([]);
+  const editContext = useEditContext();
+  const pageViewContext = editContext?.pageView;
+
+  useEffect(() => {
+    if (!pageViewContext?.page) return;
+    setPlaceholders(getAllPlaceholders(pageViewContext.page!));
+  }, [pageViewContext?.page]);
+
+  if (
+    !pageViewContext ||
+    (!editContext?.dragObject && !editContext.selectedForInsertion) ||
+    !placeholders
+  )
+    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
+      )
+  );
+
+  if (!iframe) return;
+
+  const zones: {
+    placeholder: Placeholder;
+    position: { x: number; y: number };
+    index: number;
+    element: Element;
+    anchor: "top" | "bottom" | "left" | "right";
+    description?: string | null;
+  }[] = [];
+
+  const scrollHeight =
+    editContext.pageView.editorIframeRef?.current?.contentWindow?.document
+      .documentElement.scrollHeight || 0;
+
+  matchingPlaceholders.forEach((placeholder) => {
+    const placeholderElement =
+      iframe!.contentWindow?.document.body.querySelector(
+        "[data-placeholder-start='" + placeholder.key + "']"
+      );
+
+    if (!placeholderElement) return;
+
+    const prev = getPreviousElement(placeholderElement);
+
+    const nextOrParent =
+      getNextElement(placeholderElement) || placeholderElement.parentElement;
+
+    const orientation = placeholderElement?.getAttribute("data-orientation");
+
+    const rect = (prev ?? nextOrParent)!.getBoundingClientRect();
+    const zoom = pageViewContext.zoom;
+
+    const position =
+      orientation === "horizontal"
+        ? {
+            x: (prev ? rect.x + rect.width : rect.x) * zoom,
+            y: (rect.y + rect.height / 2) * zoom,
+          }
+        : {
+            x: (rect.x + rect.width / 2) * zoom,
+            y: (prev ? rect.y + rect.height : rect.y) * zoom,
+          };
+
+    let index = 0;
+
+    const description = placeholderElement.getAttribute("data-description");
+
+    let anchor: "top" | "bottom" | "left" | "right" = "top";
+
+    if (prev && orientation === "horizontal") {
+      anchor = "right";
+    }
+    if (prev && orientation !== "horizontal") {
+      anchor = "bottom";
+    }
+    if (!prev && orientation === "horizontal") {
+      anchor = "left";
+    }
+    if (!prev && orientation !== "horizontal") {
+      anchor = "top";
+    }
+
+    zones.push({
+      placeholder,
+      position,
+      index,
+      element: prev ?? nextOrParent!,
+      anchor,
+      description,
+    });
+
+    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))
+    );
+    const y = Math.min(
+      scrollHeight - 20,
+      Math.max(20 - pageViewContext.scroll, zone.position.y * (scale || 1))
+    );
+
+    return (
+      <PlaceholderDropZone
+        key={index}
+        placeholder={zone.placeholder}
+        spotPosition={{
+          x,
+          y,
+        }}
+        index={zone.index}
+        size={size}
+        spotPositionElement={zone.element}
+        spotPositionAnchor={zone.anchor}
+        parentName={zone.placeholder.parentComponent?.name}
+        description={zone.description || undefined}
+      />
+    );
+  });
+}
+
+function getPreviousElement(element: Element): Element | null {
+  let prev = element.previousElementSibling;
+  while (prev && prev.tagName === "SCRIPT") {
+    prev = prev.previousElementSibling;
+  }
+  return prev;
+}
+
+function getNextElement(element: Element): Element | null {
+  let next = element.nextElementSibling;
+
+  while (next && next.tagName === "SCRIPT") {
+    next = next.nextElementSibling;
+  }
+  return next;
+}
+
+function getPositionFromRect(
+  rect: { x: number; y: number; width: number; height: number },
+  zoom: number,
+  orientation?: string | null
+) {
+  const position =
+    orientation === "horizontal"
+      ? {
+          x: rect.x + rect.width * zoom,
+          y: (rect.y + rect.height / 2) * zoom,
+        }
+      : {
+          x: (rect.x + rect.width / 2) * zoom,
+          y: rect.y + rect.height * zoom,
+        };
+
+  return position;
+}

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

@@ -0,0 +1,70 @@
+import { Dropdown } from "primereact/dropdown";
+import { InputNumber } from "primereact/inputnumber";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { RotateDeviceIcon } from "../ui/Icons";
+import { useDebouncedCallback } from "use-debounce";
+import { PageViewContext } from "./pageViewContext";
+import { EditorConfiguration } from "../../config/types";
+
+export function DeviceToolbar({
+  pageViewContext,
+  configuration,
+}: {
+  pageViewContext: PageViewContext;
+  configuration: EditorConfiguration;
+}) {
+  const debouncedSetDeviceWidth = useDebouncedCallback(
+    (width: number | undefined) => {
+      pageViewContext.setDeviceWidth(width);
+    },
+    400
+  );
+  const debouncedSetDeviceHeight = useDebouncedCallback(
+    (height: number | undefined) => {
+      pageViewContext.setDeviceHeight(height);
+    },
+    400
+  );
+
+  return (
+    <div className="flex justify-center w-full items-center bg-gray-100 p-1 z-1000 text-sm gap-2 border-b">
+      <Dropdown
+        options={configuration.devices.map((x) => ({
+          label: x.name,
+          value: x.name,
+        }))}
+        value={pageViewContext.device}
+        onChange={(e) => pageViewContext.setDevice(e.value)}
+      />
+      <InputNumber
+        size={4}
+        max={10000}
+        className="text-sm"
+        value={pageViewContext.deviceWidth}
+        onChange={(e) => debouncedSetDeviceWidth(e.value || undefined)}
+      />
+      x
+      <InputNumber
+        size={4}
+        max={10000}
+        className="text-sm"
+        value={pageViewContext.deviceHeight}
+        onChange={(e) => debouncedSetDeviceHeight(e.value || undefined)}
+      />
+      <SimpleIconButton
+        icon="pi pi-lock"
+        selected={pageViewContext.lockHeight || false}
+        onClick={() =>
+          pageViewContext.setLockHeight(!pageViewContext.lockHeight)
+        }
+        label="Lock Height"
+      />
+      <SimpleIconButton
+        icon={<RotateDeviceIcon className="w-4 h-4" />}
+        selected={pageViewContext.rotate || false}
+        onClick={() => pageViewContext.setRotate(!pageViewContext.rotate)}
+        label="Rotate"
+      />
+    </div>
+  );
+}