@alpaca-editor/core 1.0.3939 → 1.0.3942

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

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

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