@alpaca-editor/core 1.0.3942 → 1.0.3943

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

@@ -0,0 +1,61 @@
+import { useEditContext } from "../client/editContext";
+import { findFieldElement } from "../utils";
+import { EditSession } from "../../types";
+
+export function LockedFieldIndicator() {
+  const editContext = useEditContext();
+  if (!editContext) return;
+
+  const sessionsWithFieldLock = editContext.activeSessions.filter(
+    (x) => x.fieldLock && x.sessionId !== editContext.sessionId
+  );
+
+  return (
+    <>
+      {sessionsWithFieldLock.map((session) => {
+        if (!session.fieldLock) return;
+        const iframe = editContext.pageView.editorIframeRef.current;
+        if (!iframe) return;
+        const element = findFieldElement(iframe, session.fieldLock);
+        if (!element) return;
+
+        return (
+          <FieldLock
+            key={session.sessionId}
+            element={element}
+            iframe={iframe}
+            session={session}
+          />
+        );
+      })}
+    </>
+  );
+}
+function FieldLock({
+  element,
+  iframe,
+  session,
+}: {
+  session: EditSession;
+  element: Element;
+  iframe: HTMLIFrameElement;
+}) {
+  const rect = element.getBoundingClientRect();
+  const editorRect = iframe.getBoundingClientRect();
+
+  if (rect && editorRect) {
+    return (
+      <div
+        className="absolute  text-xs text-white p-0.5 rounded hover:opacity-100 opacity-90"
+        style={{
+          left: rect.left + "px",
+          top: rect.top + "px",
+          background: session.color,
+        }}
+      >
+        {session.user.name}
+      </div>
+    );
+  }
+  return null;
+}

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

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+
+import { FullItem } from "../pageModel";
+import { useEditContext } from "../client/editContext";
+
+export function NoLayout() {
+  const [lastPageItem, setLastPageItem] = useState<FullItem | null>(null);
+  const editContext = useEditContext();
+
+  useEffect(() => {
+    const updateLastPage = async () => {
+      if (!editContext?.pageView.pageItemDescriptor) return;
+
+      const lastPage = await editContext.itemsRepository.getItem(
+        editContext.pageView.pageItemDescriptor
+      );
+
+      if (lastPage) setLastPageItem(lastPage);
+    };
+
+    updateLastPage();
+  }, [editContext?.currentItemDescriptor]);
+  return (
+    <div className="h-full w-full flex flex-col items-center justify-center text-sm">
+      Item has no layout.
+      {lastPageItem && (
+        <div
+          className="cursor-pointer hover:underline p-2"
+          onClick={() => editContext?.loadItem(lastPageItem.descriptor)}
+        >
+          Load {lastPageItem?.name}?
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,122 @@
+import { useEditContext, EditorMode } from "../client/editContext";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import { InlineEditor } from "./InlineEditor";
+import { FieldActionsIndicators } from "./FieldActionIndicators";
+import { PlaceholderDropZones } from "./PlaceholderDropZones";
+import { PictureEditorOverlay } from "./PictureEditorOverlay";
+import { useEffect, useState } from "react";
+import { LockedFieldIndicator } from "./LockedFieldIndicator";
+import { FrameMenus } from "./FrameMenus";
+import { FieldEditedIndicators } from "./FieldEditedIndicators";
+import { CommentHighlightings } from "./CommentHighlightings";
+import { SuggestionHighlightings } from "./SuggestionHighlightings";
+export function PageEditorChrome({
+  iframe,
+  compareView,
+  pageViewContext,
+}: {
+  iframe: HTMLIFrameElement;
+  compareView: boolean;
+  pageViewContext: PageViewContext;
+}) {
+  const editContext = useEditContext();
+  const [insertingStyle, setInsertingStyle] = useState<React.CSSProperties>();
+
+  if (!editContext?.pageView || !iframe?.contentDocument) return null;
+
+  useEffect(() => {
+    if (!editContext.inserting) setInsertingStyle(undefined);
+    let insertingPosition: { y: number; x: number } | undefined;
+    const insertingRect = editContext.inserting
+      ? editContext.inserting.positionElement.getBoundingClientRect()
+      : null;
+
+    if (insertingRect) {
+      if (editContext.inserting?.positionAnchor === "top")
+        insertingPosition = {
+          y: insertingRect.y,
+          x: insertingRect.x + insertingRect.width / 2,
+        };
+      if (editContext.inserting?.positionAnchor === "bottom")
+        insertingPosition = {
+          y: insertingRect.y + insertingRect.height,
+          x: insertingRect.x + insertingRect.width / 2,
+        };
+      if (editContext.inserting?.positionAnchor === "left")
+        insertingPosition = {
+          y: insertingRect.y + insertingRect.height / 2,
+          x: insertingRect.x,
+        };
+      if (editContext.inserting?.positionAnchor === "right")
+        insertingPosition = {
+          y: insertingRect.y + insertingRect.height / 2,
+          x: insertingRect.x + insertingRect.width,
+        };
+    }
+
+    const getInsertingStyle = () => {
+      if (!insertingPosition) return;
+      const scale = pageViewContext.zoom;
+      const x = Math.min(
+        pageViewContext.viewport.width - 20,
+        Math.max(20, insertingPosition.x * (scale || 1)),
+      );
+      const y = Math.min(
+        pageViewContext.viewport.height - 20,
+        Math.max(20, insertingPosition.y * (scale || 1)),
+      );
+
+      return {
+        top: y - 16 + "px",
+        left: x - 16 + "px",
+        zIndex: 1000,
+      };
+    };
+
+    const insertingStyle = getInsertingStyle();
+    setInsertingStyle(insertingStyle);
+  }, [editContext.inserting, pageViewContext.viewport]);
+
+  return (
+    <>
+      <FrameMenus pageViewContext={pageViewContext} compareView={compareView} />
+      <InlineEditor
+        pageViewContext={pageViewContext}
+        compareView={compareView}
+      />
+      <LockedFieldIndicator />
+      <FieldActionsIndicators />
+      {editContext.showComments && (
+        <CommentHighlightings
+          iframe={pageViewContext?.editorIframeRef.current!}
+          scale={1}
+        />
+      )}
+      {editContext.showSuggestedEdits && (
+        <SuggestionHighlightings
+          iframe={pageViewContext?.editorIframeRef.current!}
+          scale={1}
+        />
+      )}
+
+      <FieldEditedIndicators pageViewContext={pageViewContext} />
+
+      {editContext.mode === "edit" && (
+        <>
+          <PlaceholderDropZones
+            iframe={pageViewContext?.editorIframeRef.current}
+            size="large"
+          />
+          <PictureEditorOverlay />
+
+          {insertingStyle && (
+            <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/PictureEditorOverlay.tsx

@@ -0,0 +1,161 @@
+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(() => {
+    const loadField = async () => {
+      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 item = await editContext!.itemsRepository.getItem(
+          component.datasourceItem!,
+        );
+
+        const pictureField = item?.fields.find(
+          (f) => f.id === fieldId,
+        ) as PictureField;
+
+        if (!pictureField) return;
+
+        setField(pictureField);
+      } else {
+        setField(undefined);
+      }
+    };
+    loadField();
+  }, [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,169 @@
+"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,
+                    editContext.currentItemDescriptor!,
+                  );
+                },
+              })) || ([] 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-sm text-black">Insert</span>;
+                },
+              },
+              ...insertOptions,
+            ]);
+          e.preventDefault();
+        }}
+        className="placeholder placeholder-dropzone cursor-pointer"
+      >
+        <div
+          className={classNames(
+            isHovering
+              ? "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"
+        >
+          <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>
+  );
+}