@alpaca-editor/core 1.0.3938 → 1.0.3941

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

@@ -1,61 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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

@@ -1,169 +0,0 @@
-"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>
-  );
-}