@alpaca-editor/core 1.0.4027 → 1.0.4030

package/src/editor/menubar/toolbar-sections/ViewportControls.tsx

@@ -19,6 +19,7 @@ export function ViewportControls() {
         icon={<Monitor className="h-6 w-6 p-1" strokeWidth={1} />}
         label="Desktop"
         size="large"
+        data-testid="desktop-viewport-button"
         selected={device === "desktop"}
         onClick={() => setDevice("desktop")}
       />
@@ -26,6 +27,7 @@ export function ViewportControls() {
         icon={<Smartphone className="h-6 w-6 p-1" strokeWidth={1} />}
         label="Mobile"
         size="large"
+        data-testid="mobile-viewport-button"
         selected={Boolean(device && device !== "desktop")}
         onClick={() => {
           if (editContext.configuration.devices[0]) {

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

@@ -1,4 +1,4 @@
-import { useEditContext } from "../client/editContext";
+import { useEditContext, useModifiedFieldsContext } from "../client/editContext";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 import { FieldEditedIndicator } from "./FieldEditedIndicator";
 
@@ -12,10 +12,11 @@ export function FieldEditedIndicators({
   scroll?: number;
 }) {
   const editContext = useEditContext();
+  const modifiedFieldsContext = useModifiedFieldsContext();
 
-  if (!editContext) return null;
+  if (!editContext || !modifiedFieldsContext) return null;
 
-  const fields = editContext.lastEditedFields;
+  const fields = modifiedFieldsContext.recentEdits;
 
   return (
     <>

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

@@ -263,6 +263,15 @@ export function FrameMenu({
     suggestions: "bg-teal-400",
   };
 
+  const dropzoneColorVariants = {
+    shared: "bg-orange-400/40 hover:bg-orange-400",
+    readonly: "bg-gray-400/40 hover:bg-gray-400",
+    layout: "bg-purple-400/40 hover:bg-purple-400",
+    default: "bg-component-blue/40 hover:bg-component-blue",
+    nonMovable: "bg-red-400/40 hover:bg-red-400",
+    suggestions: "bg-teal-400/40 hover:bg-teal-400",
+  };
+
   // Calculate initial estimation for the header width
   const estimatedHeaderWidth = buttons.length * 30 + component.name.length * 8; // Approximate width calculation
   const initialIsHeaderWiderThanComponent =
@@ -404,7 +413,7 @@ export function FrameMenu({
         appendPosition &&
         dummyElement && (
           <PlaceholderDropZone
-            className="bg-component-blue/40 hover:bg-component-blue rounded-md"
+            className={`${dropzoneColorVariants[color]} rounded-md`}
             insertMenuTitle="Append"
             placeholder={placeholder}
             description={`Append to ${placeholder.name}`}

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

@@ -368,7 +368,6 @@ ONLY provide the completion text (what comes after the user's text), never repea
       const result = await executePrompt(
         messages,
         {
-          endpoint: "/alpaca/editor/ai/complete",
           promptData: {
             itemid: itemId,
             language,

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

@@ -332,6 +332,7 @@ export function EditorForm({
             onClick={() => editContext.select([])}
             label="Back to page"
             size="large"
+            data-testid="back-to-page-button"
           />
         )}
         {editContext.selection.length === 0 && <div className="w-12" />}

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

@@ -3,7 +3,7 @@ import { EditorForm } from "./EditorForm";
 import { PageViewerFrame } from "./PageViewerFrame";
 import { useEffect, useState } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { useEditContext } from "../client/editContext";
+import { useEditContext, useModifiedFieldsContext } from "../client/editContext";
 import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Splitter, SplitterPanel } from "../ui/Splitter";
@@ -26,6 +26,7 @@ export function PageViewer({
   noMargins?: boolean;
 }) {
   const editContext = useEditContext();
+  const modifiedFieldsContext = useModifiedFieldsContext();
 
   const [followEdits, setFollowEdits] = useState(followEditsDefault);
   const [formEditorCollapsed, setFormEditorCollapsed] = useState(false);
@@ -43,20 +44,20 @@ export function PageViewer({
   useEffect(() => {
     if (
       followEdits &&
-      editContext?.lastEditedFields &&
-      editContext.lastEditedFields.length > 0
+      modifiedFieldsContext?.recentEdits &&
+      modifiedFieldsContext.recentEdits.length > 0
     ) {
-      if (editContext.inlineEditingFieldElement) return;
+      if (editContext?.inlineEditingFieldElement) return;
 
       const lastEdit =
-        editContext.lastEditedFields[editContext.lastEditedFields.length - 1];
+        modifiedFieldsContext.recentEdits[modifiedFieldsContext.recentEdits.length - 1];
 
       if (!lastEdit) return;
 
-      if (!lastEdit.user.ai || lastEdit.user.name !== editContext.user?.name)
+      if (!lastEdit.user.ai || lastEdit.user.name !== editContext?.user?.name)
         return;
 
-      if (editContext.selection.indexOf(lastEdit.item.id) === -1) {
+      if (editContext?.selection.indexOf(lastEdit.item.id) === -1) {
         editContext.select([lastEdit.item.id]);
       }
 
@@ -70,7 +71,7 @@ export function PageViewer({
       }
     }
   }, [
-    editContext?.lastEditedFields,
+    modifiedFieldsContext?.recentEdits,
     editContext,
     followEdits,
     pageViewContext,

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

@@ -491,8 +491,14 @@ export function PageViewerFrame({
       const componentId = findNearestEditableComponentId(target as HTMLElement);
 
       if (componentId) {
+        // Only change selection if right-clicking on a component that's not in the current selection
+        // AND we don't have multiple components selected
         if (!editContextRef.current?.selection.includes(componentId)) {
-          editContextRef.current!.select([componentId]);
+          // If we have multiple components selected, don't change the selection
+          // unless we're specifically trying to select a different component
+          if ((editContextRef.current?.selection.length || 0) <= 1) {
+            editContextRef.current!.select([componentId]);
+          }
         }
       }
 

package/src/editor/page-viewer/pageViewContext.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useMemo } from "react";
 
 import { ItemDescriptor, Page, PageSkeleton } from "../pageModel";
 import { usePageModel } from "../client/pageModelBuilder";
@@ -110,7 +110,7 @@ export function usePageViewContext({
         resizeObserver.disconnect();
       }
     };
-  }, [editorIframeRef.current, workaround]);
+  }, [editorIframeRef.current, updateViewportRectDebounced]);
 
   useEffect(() => {
     if (!pageItemDescriptor) return;
@@ -162,10 +162,18 @@ export function usePageViewContext({
 
   function updateViewportRect() {
     const rect = editorIframeRef.current?.getBoundingClientRect();
-    if (rect) setViewportRect({ width: rect.width, height: rect.height });
+    if (rect) {
+      setViewportRect((prev) => {
+        // Only update if dimensions actually changed
+        if (prev.width !== rect.width || prev.height !== rect.height) {
+          return { width: rect.width, height: rect.height };
+        }
+        return prev;
+      });
+    }
   }
 
-  const pageViewContext: PageViewContext = {
+  const pageViewContext: PageViewContext = useMemo(() => ({
     device,
     setDevice,
     deviceWidth,
@@ -192,7 +200,34 @@ export function usePageViewContext({
     site,
     editUrl,
     previewUrl,
-  };
+  }), [
+    device,
+    deviceWidth,
+    deviceHeight,
+    lockHeight,
+    scroll,
+    zoom,
+    fullscreen,
+    rotate,
+    page,
+    viewportRect,
+    resolvedPageItemDescriptor,
+    isHeadless,
+    site,
+    editUrl,
+    previewUrl,
+    setDevice,
+    setDeviceWidth,
+    setDeviceHeight,
+    setLockHeight,
+    setScroll,
+    setZoom,
+    setFullscreen,
+    setRotate,
+    setPageSkeleton,
+    setWorkaround,
+    editorIframeRef
+  ]);
 
   return pageViewContext;
 }

package/src/editor/reviews/Comment.tsx

@@ -187,13 +187,13 @@ export function Comment({ comment }: { comment: CommentType }) {
                 icon="pi pi-sparkles"
                 label="AI"
                 onClick={async (event) => {
-                  editContext?.showAiPopup(event as any, {
-                    initialPrompt:
-                      'Please help me resolve this comment: "' +
-                      comment.text +
-                      '"',
-                    hiddenSystemPrompt: getHiddenSystemPrompt(comment),
-                  });
+                  // editContext?.showAiPopup(event as any, {
+                  //   initialPrompt:
+                  //     'Please help me resolve this comment: "' +
+                  //     comment.text +
+                  //     '"',
+                  //   hiddenSystemPrompt: getHiddenSystemPrompt(comment),
+                  // });
                 }}
               />
             )}