@alpaca-editor/core 1.0.3942 → 1.0.3943

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

@@ -0,0 +1,338 @@
+import { useEffect, useRef, useState } from "react";
+
+import { EditButton, useEditContext, EditorMode } from "../client/editContext";
+import { Rect, findComponentRect } from "../utils";
+import { useThrottledCallback } from "use-debounce";
+import { Component } from "../pageModel";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import { ArrowUpFromDot } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+import { ComponentCommand } from "../commands/componentCommands";
+
+export function FrameMenu({
+  component,
+  compareView,
+  pageViewContext,
+}: {
+  component: Component;
+  compareView: boolean;
+  pageViewContext: PageViewContext;
+}) {
+  const editContext = useEditContext();
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const mutationObserverRef = useRef<MutationObserver | null>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
+  const [commands, setCommands] = useState<ComponentCommand[]>([]);
+
+  const [componentRect, setComponentRect] = useState<Rect>();
+  const [isHeaderWiderThanComponent, setIsHeaderWiderThanComponent] =
+    useState(false);
+
+  const updatePosition = () => {
+    if (!component || !editContext || !pageViewContext) return;
+
+    const iframe = pageViewContext.editorIframeRef.current;
+
+    if (!iframe) return;
+
+    const resetSelection = () => {
+      setComponentRect(undefined);
+    };
+
+    const componentRect = findComponentRect(iframe, component)?.rect;
+
+    if (!componentRect) {
+      resetSelection();
+      return;
+    }
+
+    setComponentRect(componentRect);
+  };
+
+  const updatePositionThrottled = useThrottledCallback(updatePosition, 30);
+
+  // Effect to handle changes in the observed element
+  useEffect(() => {
+    if (component) {
+      const iframe = pageViewContext!.editorIframeRef.current;
+      if (!iframe) return;
+
+      mutationObserverRef.current = new MutationObserver(() => {
+        updatePosition();
+      });
+
+      if (!iframe.contentDocument) return;
+
+      mutationObserverRef.current.observe(iframe.contentDocument, {
+        childList: true, // observe direct children changes
+        subtree: true, // observe all descendants changes
+        characterData: true, // observe text changes
+        //attributes: true, // observe attribute changes (like style or class)
+      });
+      // Create a new ResizeObserver instance
+      resizeObserverRef.current = new ResizeObserver(() => {
+        updatePosition();
+      });
+
+      const scrollContainer =
+        iframe.contentWindow?.document.scrollingElement ||
+        iframe.contentWindow?.document.body;
+
+      scrollContainer?.addEventListener("scroll", updatePositionThrottled);
+      iframe.contentWindow?.addEventListener("scroll", updatePositionThrottled);
+
+      const componentRect = findComponentRect(iframe, component);
+
+      if (!componentRect) {
+        updatePosition();
+        return;
+      }
+
+      componentRect.elements.forEach((componentElement) => {
+        resizeObserverRef.current!.observe(componentElement);
+      });
+    }
+
+    return () => {
+      if (mutationObserverRef.current) {
+        mutationObserverRef.current.disconnect();
+        mutationObserverRef.current = null;
+      }
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+    };
+  }, [component]);
+
+  // Effect to measure header width and compare with componentRect
+  useEffect(() => {
+    if (!headerRef.current || !componentRect) return;
+
+    const headerResizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const headerWidth = entry.contentRect.width;
+        setIsHeaderWiderThanComponent(headerWidth > componentRect.width);
+      }
+    });
+
+    headerResizeObserver.observe(headerRef.current);
+
+    return () => {
+      headerResizeObserver.disconnect();
+    };
+  }, [componentRect]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      updatePosition();
+    }, 100);
+  }, [
+    pageViewContext?.scroll,
+    pageViewContext?.viewport,
+    pageViewContext?.device,
+    pageViewContext?.fullscreen,
+    pageViewContext?.zoom,
+  ]);
+
+  if (!component || !editContext) return null;
+
+  // const commands = editContext.getComponentCommands([component]);
+
+  useEffect(() => {
+    async function loadCommands() {
+      const commands = await editContext!.getComponentCommands([component]);
+      setCommands(commands);
+    }
+    loadCommands();
+  }, [component]);
+
+  const isDraggable =
+    component.canBeMoved &&
+    editContext.mode === "edit" &&
+    !component.layoutId &&
+    pageViewContext.page?.item.canWriteItem;
+  false;
+
+  const commandButtons = commands
+    .filter(
+      (x) =>
+        !editContext.isCommandDisabled({ command: x }) &&
+        x.visibilityScopes.indexOf("editFrame") >= 0,
+    )
+    .map((x) => ({
+      id: x.id + "_button",
+      icon: x.icon,
+      label: x.label,
+      onClick: (ev: any) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        editContext.executeCommand({
+          command: x,
+          event: ev,
+        });
+      },
+    }));
+
+  const customButtons: EditButton[] = []; // TODO
+
+  const buttons = [...customButtons, ...commandButtons];
+
+  function handleDragStart(event: React.DragEvent<HTMLDivElement>): void {
+    if (!component?.datasourceItem) return;
+    event.dataTransfer.setData("componentId", component.id);
+    setTimeout(() => {
+      if (!component?.datasourceItem) return;
+      editContext!.dragStart({
+        type: "component",
+        typeId: component.typeId,
+        templateId: component.datasourceItem?.templateId,
+        name: component.name,
+        component: {
+          id: component.id,
+          language: pageViewContext.page!.item.language,
+          version: pageViewContext.page!.item.version,
+        },
+      });
+    }, 50);
+
+    event.stopPropagation();
+  }
+
+  function handleDragEnd(): void {
+    editContext!.dragEnd();
+  }
+
+  const isShared = component.isShared;
+  const isReadonly = editContext.mode === "preview" || compareView;
+  const isLayout = component.layoutId;
+
+  function getColor() {
+    if (isReadonly) return "readonly";
+    if (editContext?.mode === "suggestions") return "suggestions";
+    if (isShared) return "shared";
+    if (isLayout) return "layout";
+    if (component.canBeMoved) return "default";
+    return "nonMovable";
+  }
+  const color = getColor();
+
+  const colorVariants = {
+    shared: "border-orange-400",
+    readonly: "border-gray-400",
+    layout: "border-purple-400",
+    default: "border-sky-400",
+    nonMovable: "border-red-400",
+    suggestions: "border-teal-400",
+  };
+
+  const bgColorVariants = {
+    shared: "bg-orange-400",
+    readonly: "bg-gray-400",
+    layout: "bg-purple-400",
+    default: "bg-sky-400",
+    nonMovable: "bg-red-400",
+    suggestions: "bg-teal-400",
+  };
+
+  // Calculate initial estimation for the header width
+  const estimatedHeaderWidth = buttons.length * 30 + component.name.length * 8; // Approximate width calculation
+  const initialIsHeaderWiderThanComponent =
+    estimatedHeaderWidth > (componentRect?.width || 0);
+
+  useEffect(() => {
+    setIsHeaderWiderThanComponent(initialIsHeaderWiderThanComponent);
+  }, [initialIsHeaderWiderThanComponent]);
+
+  const isMultiSelected = editContext.selection.length > 1;
+  if (!componentRect) return null;
+
+  return (
+    <>
+      <div
+        className={cn(
+          "pointer-events-none absolute inset-0 rounded-b-sm border-2",
+          colorVariants[color],
+          "tour-frame-menu opacity-50 hover:opacity-100",
+          !isMultiSelected && isHeaderWiderThanComponent && "border-t-0",
+          !isMultiSelected && !isHeaderWiderThanComponent && "rounded-tl-sm",
+          isMultiSelected && "rounded-t-sm",
+        )}
+        style={{
+          left: componentRect.x,
+          top: componentRect.y,
+          width: componentRect.width,
+          height: componentRect.height,
+          zIndex: 8,
+        }}
+        data-testid="frame-menu"
+      >
+        {!isMultiSelected && (
+          <div
+            ref={headerRef}
+            className={
+              `editframe-menu pointer-events-auto absolute z-1000 flex items-center pr-4 text-base text-white ${bgColorVariants[color]} ` +
+              (componentRect.y - 36 < 0 ? "rounded-bl-lg" : "rounded-t-lg") +
+              (isHeaderWiderThanComponent ? " rounded-bl-lg" : "")
+            }
+            style={{
+              right: "-2px",
+              top: componentRect.y - 36 < 0 ? "0" : undefined,
+              bottom:
+                componentRect.y - 36 >= 0
+                  ? componentRect.height - 2
+                  : undefined,
+              zIndex: 800,
+              height: "36px",
+            }}
+          >
+            <div
+              draggable={isDraggable}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+              className={`group flex items-center gap-1 pr-2 pl-3 text-sm text-nowrap ${
+                isDraggable ? "cursor-move" : "cursor-default"
+              } `}
+            >
+              {component.name}
+              {component.parentPlaceholder?.parentComponent && (
+                <span
+                  className="cursor-pointer opacity-0 transition-opacity group-hover:opacity-100"
+                  onClick={() => {
+                    editContext.select([
+                      component.parentPlaceholder?.parentComponent.id || "",
+                    ]);
+                  }}
+                >
+                  <ArrowUpFromDot height={14} width={14} />
+                </span>
+              )}
+            </div>
+            {editContext.mode === "edit" && (
+              <div className="flex items-center gap-2.5 text-sm">
+                {buttons.map((b, i) => (
+                  <div
+                    className="cursor-pointer hover:text-gray-200"
+                    title={b.label}
+                    key={i}
+                    onClick={(ev) => {
+                      ev.stopPropagation();
+                      b.onClick(ev);
+                    }}
+                  >
+                    {typeof b.icon === "string" ? (
+                      <i className={b.icon + " cursor-pointer text-sm"} />
+                    ) : (
+                      b.icon
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import { findComponent } from "../componentTreeHelper";
+import { useEditContext, EditorMode } from "../client/editContext";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import { FrameMenu } from "./FrameMenu";
+import { Component } from "../pageModel";
+export function FrameMenus({
+  compareView,
+  pageViewContext,
+}: {
+  compareView: boolean;
+  pageViewContext: PageViewContext;
+}) {
+  const editContext = useEditContext();
+  const selection = editContext?.selection;
+
+  const [components, setComponents] = useState<Component[]>([]);
+
+  useEffect(() => {
+    if (!pageViewContext.page) return;
+
+    const comps: Component[] = selection
+      ? selection
+          .map((id) =>
+            findComponent(
+              id,
+              pageViewContext.page?.rootComponent.placeholders || [],
+            ),
+          )
+          .filter((c): c is NonNullable<typeof c> => c !== undefined)
+      : [];
+
+    setComponents(comps);
+  }, [selection, pageViewContext.page]);
+
+  return (
+    <>
+      {components.map((c) => (
+        <FrameMenu
+          key={c.id}
+          component={c}
+          compareView={compareView}
+          pageViewContext={pageViewContext}
+        />
+      ))}{" "}
+    </>
+  );
+}