@alpaca-editor/core 1.0.3938 → 1.0.3939

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

@@ -23,6 +23,11 @@ import { showComponentContextMenu } from "../ContextMenu";
 import { loadFieldButtons } from "../services/editService";
 import { usePathname } from "next/navigation";
 import { EditorWarnings } from "../EditorWarnings";
+import {
+  FieldActionsOverlay,
+  FieldActionsOverlayRef,
+} from "../FieldActionsOverlay";
+import { FieldButton, FieldDescriptor } from "../pageModel";
 
 import { Component, ItemDescriptor } from "../pageModel";
 import { NoLayout } from "../page-editor-chrome/NoLayout";
@@ -61,6 +66,29 @@ export function PageViewerFrame({
   const [showSpinner, setShowSpinner] = useState(false);
   const [scroll, setScroll] = useState(0);
   const [showMiniMap, setShowMiniMap] = useState(false);
+  const fieldActionsOverlay = useRef<FieldActionsOverlayRef>(null);
+  const [contextMenuFieldButtons, setContextMenuFieldButtons] = useState<
+    FieldButton[]
+  >([]);
+  const [contextMenuField, setContextMenuField] = useState<
+    FieldDescriptor | undefined
+  >();
+  const [contextMenuPosition, setContextMenuPosition] = useState<
+    { x: number; y: number } | undefined
+  >();
+  const [preSelectedAction, setPreSelectedAction] = useState<
+    FieldButton | undefined
+  >();
+
+  // Clear preSelectedAction when overlay is closed
+  useEffect(() => {
+    if (
+      editContext?.currentOverlay !==
+      `${contextMenuField?.fieldId || ""}_generators`
+    ) {
+      setPreSelectedAction(undefined);
+    }
+  }, [editContext?.currentOverlay, contextMenuField?.fieldId]);
 
   const zoom = pageViewContext.zoom;
   const blockBlurEventRef = useRef(0);
@@ -68,6 +96,25 @@ export function PageViewerFrame({
     ItemDescriptor | undefined
   >(undefined);
 
+  // Field action handlers for the overlay
+  const handleActionClick = async (action: FieldButton): Promise<void> => {
+    if (contextMenuField) {
+      editContext?.triggerFieldAction(contextMenuField, action);
+    }
+  };
+
+  const handleParameterizedActionExecute = async (
+    action: FieldButton,
+    parameters: Record<string, string>,
+  ): Promise<void> => {
+    if (contextMenuField) {
+      editContext?.triggerFieldAction(contextMenuField, action, parameters);
+    }
+  };
+
+  // Note: handleParameterizedActionFromContextMenu is now created inline in handleContextMenu
+  // to avoid React state timing issues with contextMenuPosition
+
   const pageItemDescriptor = pageViewContext.pageItemDescriptor;
 
   useEffect(() => {
@@ -505,17 +552,103 @@ export function PageViewerFrame({
         clientY: event.clientY + iframeRect.y,
       });
 
+      // Store the original context menu position for overlay positioning
+      const menuPosition = {
+        x: event.clientX + iframeRect.x,
+        y: event.clientY + iframeRect.y,
+      };
+      setContextMenuPosition(menuPosition);
+
+      console.log("Original event:", event);
+      console.log("Adjusted event:", adjustedEvent);
+      console.log("Menu position:", menuPosition);
+
       const field = fieldElement
         ? getFieldDescriptorFromElement(fieldElement)
         : undefined;
 
       const fieldButtons = field ? await loadFieldButtons(field) : [];
 
+      // Create a handler that has access to the current menu position
+      const handleParameterizedActionWithPosition = (
+        field: FieldDescriptor,
+        action: FieldButton,
+        allFieldButtons: FieldButton[],
+        event: any,
+      ) => {
+        setContextMenuField(field);
+        setContextMenuFieldButtons([action]);
+        setPreSelectedAction(action);
+
+        // Create a new MouseEvent with the captured position
+        const syntheticEvent = new MouseEvent("click", {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+          clientX: menuPosition.x,
+          clientY: menuPosition.y,
+          screenX: menuPosition.x,
+          screenY: menuPosition.y,
+        });
+
+        // Add target property to the event for proper positioning
+        Object.defineProperty(syntheticEvent, "target", {
+          value: document.body,
+          enumerable: true,
+        });
+        console.log("About to show overlay with position:", {
+          menuPosition,
+          syntheticEvent,
+          preSelectedAction: action,
+        });
+
+        // Add a small delay to ensure context menu has closed
+        setTimeout(() => {
+          console.log("Showing overlay with position:", {
+            menuPosition,
+            syntheticEvent,
+            preSelectedAction: action,
+          });
+
+          // Create a temporary element at the exact position for better positioning
+          const tempElement = document.createElement("div");
+          tempElement.style.position = "fixed";
+          tempElement.style.left = menuPosition.x + "px";
+          tempElement.style.top = menuPosition.y + "px";
+          tempElement.style.width = "1px";
+          tempElement.style.height = "1px";
+          tempElement.style.visibility = "hidden";
+          tempElement.style.pointerEvents = "none";
+          document.body.appendChild(tempElement);
+
+          // Create event targeting the positioned element
+          const positionedEvent = new MouseEvent("click", {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            clientX: menuPosition.x,
+            clientY: menuPosition.y,
+          });
+          Object.defineProperty(positionedEvent, "target", {
+            value: tempElement,
+            enumerable: true,
+          });
+
+          fieldActionsOverlay.current?.show(positionedEvent, action);
+
+          // Clean up the temporary element after overlay is shown
+          setTimeout(() => {
+            document.body.removeChild(tempElement);
+          }, 1000);
+        }, 100);
+      };
+
       const showMenu = await showComponentContextMenu(
         selectedComponents,
         editContextRef.current!,
         field,
         fieldButtons,
+        handleParameterizedActionWithPosition,
       );
       if (showMenu) showMenu(adjustedEvent);
     };
@@ -734,6 +867,16 @@ export function PageViewerFrame({
           </>
         )}
       </div>
+      <FieldActionsOverlay
+        ref={fieldActionsOverlay}
+        generatorButtons={contextMenuFieldButtons}
+        onActionClick={handleActionClick}
+        onParameterizedActionExecute={handleParameterizedActionExecute}
+        currentOverlay={editContext?.currentOverlay}
+        fieldId={contextMenuField?.fieldId || ""}
+        setCurrentOverlay={editContext?.setCurrentOverlay || (() => {})}
+        preSelectedAction={preSelectedAction}
+      />
     </div>
   );
 }

package/src/editor/pageModel.ts

@@ -74,6 +74,17 @@ export type ItemRef = {
   name?: string;
 };
 
+export type FieldButtonParameter = {
+  id: string;
+  label: string;
+  placeholder?: string;
+  type?: "text" | "textarea" | "number" | "select";
+  required?: boolean;
+  defaultValue?: string;
+  options?: { value: string; label: string }[]; // for select type
+  rows?: number; // for textarea type
+};
+
 export type FieldButton = {
   id: string;
   label: string;
@@ -81,6 +92,7 @@ export type FieldButton = {
   action?: string;
   icon?: string;
   isGenerator: boolean;
+  parameters?: FieldButtonParameter[];
 };
 
 export type LockSession = {

package/src/editor/reviews/Comment.tsx

@@ -13,6 +13,7 @@ import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { ProgressSpinner } from "primereact/progressspinner";
 import { useDebouncedCallback } from "use-debounce";
+import { ActionButton } from "../../components/ActionButton";
 
 export function Comment({ comment }: { comment: CommentType }) {
   const editContext = useEditContext();
@@ -257,8 +258,7 @@ export function Comment({ comment }: { comment: CommentType }) {
       )}
       {!isSaving && (
         <div className="mt-1 flex justify-end gap-2">
-          <Button
-            variant="outline"
+          <ActionButton
             onClick={() => {
               if (comment.isNew) {
                 if (editContext?.setComments) {
@@ -272,11 +272,10 @@ export function Comment({ comment }: { comment: CommentType }) {
             }}
           >
             Cancel
-          </Button>
+          </ActionButton>
 
-          <Button
+          <ActionButton
             className="tour-submit-comment-button"
-            variant="outline"
             onClick={async () => {
               comment.text = commentText;
               setIsSaving(true);
@@ -299,7 +298,7 @@ export function Comment({ comment }: { comment: CommentType }) {
             }}
           >
             {comment.isNew ? "Comment" : "Save"}
-          </Button>
+          </ActionButton>
         </div>
       )}
       {renderContextInfo()}

package/src/editor/services/editService.ts

@@ -184,6 +184,7 @@ export async function executeFieldAction(
   action: string,
   sessionId: string,
   selectedText: string,
+  parameters: Record<string, string>,
   callback: (data: any) => void,
 ): Promise<ExecutionResult<any>> {
   const response = await fetch(
@@ -197,6 +198,7 @@ export async function executeFieldAction(
         action,
         selectedText,
         sessionId,
+        parameters,
       }),
       credentials: "include",
       headers: {

package/src/editor/ui/Icons.tsx

@@ -5,6 +5,7 @@ export function WizardIcon({ className }: { className?: string }) {
       height="24"
       viewBox="0 0 24 24"
       fill="none"
+      className={className}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/editor/ui/ItemList.tsx

@@ -0,0 +1,76 @@
+import { ResultItem } from "./ItemSearch";
+import { ItemDescriptor } from "../pageModel";
+
+interface ItemListProps {
+  items: ResultItem[];
+  onItemHover?: (item: ResultItem | undefined) => void;
+  onItemClick: (
+    item: ItemDescriptor & { path?: string; idPath?: string; icon?: string },
+  ) => void;
+  maxItems?: number;
+  className?: string;
+  showPath?: boolean;
+}
+
+export const ItemList: React.FC<ItemListProps> = ({
+  items,
+  onItemHover,
+  onItemClick,
+  maxItems = 6,
+  className = "",
+  showPath = true,
+}) => {
+  const filteredItems = items.filter((x) => x.language).slice(0, maxItems);
+
+  const handleItemClick = (item: ResultItem) => {
+    onItemClick({
+      id: item.id,
+      language: item.language,
+      version: 0,
+      path: item.path,
+      icon: item.icon,
+      idPath: item.idPath,
+    });
+  };
+
+  if (filteredItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`flex flex-1 flex-col gap-1 overflow-y-auto ${className}`}>
+      {filteredItems.map((item) => (
+        <div
+          key={item.id + item.language}
+          className="flex cursor-pointer items-start gap-2 rounded p-1 text-xs hover:bg-gray-50"
+          onMouseEnter={() => onItemHover?.(item)}
+          onMouseLeave={() => onItemHover?.(undefined)}
+          onClick={() => handleItemClick(item)}
+        >
+          {item.icon && (
+            <img
+              src={item.icon}
+              width="16"
+              height="16"
+              className="mt-0.5 flex-shrink-0"
+            />
+          )}
+
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+            <div className="truncate font-medium text-gray-900">
+              {item.name}
+              <span className="text-2xs ml-1 text-gray-400">
+                ({item.language})
+              </span>
+            </div>
+            {showPath && (
+              <div className="text-2xs break-words text-gray-500">
+                {item.path}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/editor/ui/ItemSearch.tsx

@@ -6,6 +6,7 @@ import { useDebouncedCallback } from "use-debounce";
 import { ProgressSpinner } from "primereact/progressspinner";
 import { ItemDescriptor } from "../pageModel";
 import { getItemDescriptor } from "../utils";
+import { ItemList } from "./ItemList";
 
 export type ResultItem = {
   id: string;
@@ -112,7 +113,7 @@ export const ItemSearch: React.FC<SearchProps> = ({
       <div className="relative">
         <div className="flex items-center">
           <InputText
-            className="w-full pr-8 text-sm" // Add padding to the right to make space for the spinner
+            className="w-full rounded border border-gray-300 px-2 py-1 pr-6 text-xs focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none"
             onChange={(e) => setQuery(e.target.value)}
             value={query}
             ref={inputRef}
@@ -134,51 +135,13 @@ export const ItemSearch: React.FC<SearchProps> = ({
         </div>
       </div>
       {results.length > 0 && (
-        <div
-          className={`mt-1 flex flex-1 flex-col gap-1 overflow-y-auto ${resultClassName}`}
-        >
-          {results
-            .filter((x) => x.language)
-            .slice(0, 6)
-            .map((x) => (
-              <div
-                key={x.id + x.language}
-                className="flex cursor-pointer items-start gap-2 rounded p-2 text-xs hover:bg-gray-50"
-                onMouseEnter={() => setHoveredItem?.(x)}
-                onMouseLeave={() => setHoveredItem?.(undefined)}
-                onClick={() =>
-                  itemSelected({
-                    id: x.id,
-                    language: x.language,
-                    version: 0,
-                    path: x.path,
-                    icon: x.icon,
-                    idPath: x.idPath,
-                  })
-                }
-              >
-                {x.icon && (
-                  <img
-                    src={x.icon}
-                    width="16"
-                    height="16"
-                    className="mt-0.5 flex-shrink-0"
-                  />
-                )}
-                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                  <div className="truncate font-medium text-gray-900">
-                    {x.name}
-                    <span className="text-2xs ml-1 text-gray-400">
-                      ({x.language})
-                    </span>
-                  </div>
-                  <div className="text-2xs truncate text-gray-500">
-                    {x.path}
-                  </div>
-                </div>
-              </div>
-            ))}
-        </div>
+        <ItemList
+          items={results}
+          onItemHover={setHoveredItem}
+          onItemClick={itemSelected}
+          maxItems={6}
+          className={`mt-1 ${resultClassName}`}
+        />
       )}
       {results.length === 0 && !loading && query && (
         <div className="mt-1 text-xs text-gray-500">No results found</div>

package/src/editor/ui/SimpleTabs.tsx

@@ -30,7 +30,7 @@ export function SimpleTabs({
 
   return (
     <>
-      <div className={twMerge("flex gap-4 pb-1 md:pb-3", className)}>
+      <div className={twMerge("flex gap-4 pb-1", className)}>
         {tabs.map((tab, index) => (
           <button
             id={tab.id}

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3938";
-export const buildDate = "2025-06-06 15:49:56";
+export const version = "1.0.3939";
+export const buildDate = "2025-06-07 12:23:08";