@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/ContextMenu.tsx

@@ -0,0 +1,230 @@
+import { EditContextType } from "./client/editContext";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+
+import { FieldDescriptor } from "../types";
+import { Component, FieldButton } from "./pageModel";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "../components/ui/context-menu";
+import { MenuItem } from "../config/types";
+
+// export function getFieldContextMenu(
+//   field: Field,
+//   editContext: EditContextType,
+//   customButtons: EditButton[] = []
+// ) {
+//   return (e: any) => {
+//     e.preventDefault();
+//     e.stopPropagation();
+//     const menuItems: MenuItem[] = getComponentMenuItems(
+//       editContext,
+//       getComponentById(field._editor!.descriptor.item.id, editContext.page!)!
+//     );
+
+//     if (customButtons.length) {
+//       if (menuItems.length)
+//         menuItems.push({
+//           separator: true,
+//         });
+
+//       customButtons.forEach((button) => {
+//         menuItems.push({
+//           label: button.label,
+//           command: (ev) => button.onClick(ev.originalEvent as any),
+//           icon: button.icon,
+//         });
+//       });
+//     }
+
+//     if (field._editor?.buttons?.length) {
+//       if (menuItems.length)
+//         menuItems.push({
+//           separator: true,
+//         });
+
+//       field._editor?.buttons.forEach((button: FieldButton) => {
+//         menuItems.push({
+//           label: button.label,
+//           command: () => {
+//             editContext!.triggerFieldAction(field._editor!.descriptor, button);
+//           },
+//           icon: button.icon ? "pi " + button.icon : undefined,
+//         });
+//       });
+//     }
+
+//     if (!e.ctrlKey && !e.shiftKey && !e.altKey && menuItems.length) {
+//       editContext.select([field._editor!.descriptor.item.id]);
+//       editContext!.setFocusedField(field._editor!.descriptor, false);
+//       editContext!.showContextMenu(e, menuItems);
+//     }
+//   };
+// }
+
+export async function showComponentContextMenu(
+  components: Component[],
+  editContext: EditContextType,
+  field?: FieldDescriptor,
+  fieldButtons?: FieldButton[],
+  onParameterizedAction?: (
+    field: FieldDescriptor,
+    action: FieldButton,
+    allFieldButtons: FieldButton[],
+    event: any,
+  ) => void,
+) {
+  const componentCommandMenuItems = await getComponentMenuItems(
+    editContext,
+    components,
+  );
+
+  const menuItems = componentCommandMenuItems;
+
+  if (!editContext.readonly && field && fieldButtons?.length) {
+    if (menuItems.length)
+      menuItems.push({
+        id: "separator",
+        separator: true,
+      });
+
+    fieldButtons.forEach((button) => {
+      menuItems.push({
+        id: button.id,
+        label: button.label,
+        command: async (event) => {
+          // Check if the button has parameters
+          if (button.parameters && button.parameters.length > 0) {
+            // If we have a parameterized action handler, use it
+            if (onParameterizedAction) {
+              onParameterizedAction(field, button, fieldButtons, event);
+            } else {
+              // Fallback: execute without parameters (might not work well)
+              editContext!.triggerFieldAction(field, button);
+            }
+          } else {
+            // For simple actions, execute directly
+            editContext!.triggerFieldAction(field, button);
+          }
+        },
+        icon: button.icon ? <img src={button.icon} width={16} /> : undefined,
+      });
+    });
+  }
+
+  return (e: any) => {
+    if (!e.shiftKey && !e.altKey) {
+      if (menuItems.length) {
+        //        editContext.select([component.id]);
+        editContext!.showContextMenu(e, menuItems);
+      }
+
+      return true;
+    }
+    return false;
+  };
+}
+
+export interface EditContextMenuRef {
+  show: (event: any, menuItems: MenuItem[]) => void;
+  close: (event: any) => void;
+}
+
+interface EditContextMenuProps {}
+
+export const EditContextMenu = forwardRef<
+  EditContextMenuRef,
+  EditContextMenuProps
+>((props, ref) => {
+  const canvasRef = useRef<HTMLSpanElement>(null);
+
+  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
+  if (!props) return;
+  useImperativeHandle(ref, () => ({
+    show: (e: any, items: MenuItem[]) => {
+      if (!e.ctrlKey && !e.shiftKey && !e.altKey) {
+        setMenuItems(items);
+        e.preventDefault();
+        triggerRightClick(canvasRef.current!, {
+          position: { x: e.clientX, y: e.clientY },
+        });
+      }
+    },
+    close: (event: any) => {
+      //  cm.current?.hide(event);
+    },
+  }));
+
+  const triggerRightClick = (
+    element: HTMLSpanElement,
+    { position }: { position: any },
+  ) => {
+    const event = new MouseEvent("contextmenu", {
+      bubbles: true,
+      cancelable: true,
+      clientX: position.x,
+      clientY: position.y,
+    });
+    element.dispatchEvent(event);
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <span id="contextmenu_canvas" ref={canvasRef}>
+          CM trigger
+        </span>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        {menuItems.map((item, index) =>
+          item.separator ? (
+            <ContextMenuSeparator />
+          ) : (
+            <ContextMenuItem
+              key={index}
+              onClick={(e) => {
+                if (item.command) {
+                  item.command(e);
+                }
+                // Close the context menu when an item is clicked
+                canvasRef.current?.dispatchEvent(
+                  new KeyboardEvent("keydown", { key: "Escape" }),
+                );
+              }}
+              disabled={item.disabled}
+              className="cursor-pointer"
+            >
+              {item.icon}
+              {item.label}
+            </ContextMenuItem>
+          ),
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+  // return <ContextMenu model={menuItems} ref={cm} />;
+});
+async function getComponentMenuItems(
+  editContext: EditContextType,
+  components: Component[],
+): Promise<MenuItem[]> {
+  const componentCommands = await editContext.getComponentCommands(components);
+
+  const componentCommandMenuItems = componentCommands.map((x) => {
+    return {
+      id: x.id,
+      label: x.label,
+      icon: x.icon,
+      command: (ev: React.SyntheticEvent) =>
+        editContext.executeCommand({
+          command: x,
+          event: ev,
+        }),
+      disabled: editContext.isCommandDisabled({ command: x }),
+    };
+  });
+  return componentCommandMenuItems;
+}

package/src/editor/Editor.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { EditorClient } from "./client/EditorClient";
+
+import { ItemDescriptor } from "./pageModel";
+import { EditorConfiguration } from "../config/types";
+import { useEffect, useState } from "react";
+import { SystemStatus, UserInfo } from "../types";
+
+import { getUserInfo } from "./services/editService";
+import { getSystemStatus } from "./services/systemService";
+import uuid from "react-uuid";
+import { getConfiguration } from "../config/config";
+
+export function Editor({
+  configure,
+  className,
+  page,
+}: {
+  configure: (props: {
+    configuration: EditorConfiguration;
+    user: UserInfo;
+  }) => EditorConfiguration;
+  className?: string;
+  page?: ItemDescriptor;
+}) {
+  const [config, setConfig] = useState<EditorConfiguration>();
+  const [userInfo, setUserInfo] = useState<UserInfo>();
+  const [systemStatus, setSystemStatus] = useState<SystemStatus>();
+
+  const sessionId =
+    typeof window !== "undefined"
+      ? sessionStorage.getItem("sessionId") || uuid()
+      : uuid();
+
+  useEffect(() => {
+    // Get user info and system status
+    getUserInfo().then((userInfo) => {
+      if (!userInfo) {
+        window.location.href = "/sitecore/login";
+        return;
+      }
+      setUserInfo(userInfo);
+    });
+
+    getSystemStatus().then((status) => {
+      if (status.data) {
+        setSystemStatus(status.data);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!userInfo || !systemStatus) return;
+
+    const config = configure({
+      configuration: getConfiguration(),
+      user: userInfo,
+    });
+    setConfig(config);
+  }, [userInfo, systemStatus]);
+
+  if (!userInfo || !systemStatus) return null;
+
+  if (systemStatus.messages.some((m) => m.severity === "error")) {
+    return (
+      <div className="fixed inset-0 flex flex-col items-center justify-center gap-2 text-sm">
+        <h1 className="text-2xl">Please fix the following issues:</h1>
+        <div className="text-sm text-red-500">
+          {systemStatus.messages.map((m) => (
+            <div key={m.message}>{m.message}</div>
+          ))}
+        </div>
+        <p>Check the logs for more details.</p>
+      </div>
+    );
+  }
+
+  if (!config) return null;
+
+  return (
+    <EditorClient
+      configuration={config}
+      className={className}
+      item={page}
+      sessionId={sessionId}
+      userInfo={userInfo}
+    ></EditorClient>
+  );
+}

package/src/editor/EditorWarning.tsx

@@ -0,0 +1,34 @@
+import { classNames } from "primereact/utils";
+
+export function EditorWarning({
+  title,
+  severity = "warning",
+  children,
+}: {
+  title: string;
+  severity?: "info" | "error" | "warning";
+  children: React.ReactNode;
+}) {
+  const background =
+    severity === "info"
+      ? "bg-blue-100"
+      : severity === "error"
+      ? "bg-red-100"
+      : "bg-yellow-100";
+  return (
+    <div
+      className={classNames(
+        background,
+        "text-sm text-gray-500 border-b border-yellow-300 flex gap-2 items-stretch"
+      )}
+    >
+      <div className="bg-yellow-200 px-4 flex items-center text-gray-900">
+        <span className="pi pi-exclamation-triangle text-2xl" />
+      </div>
+      <div className="p-2">
+        <div className="font-bold">{title}</div>
+        <div className="text-xs">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/editor/EditorWarnings.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { EditContextType, useEditContext } from "./client/editContext";
+
+import { FullItem } from "./pageModel";
+
+export type EditorWarningProps = {
+  item: FullItem;
+  editContext: EditContextType;
+};
+
+export function EditorWarnings({ item }: { item?: FullItem }) {
+  var context = useEditContext();
+  if (!context || context.mode === "preview") return;
+
+  if (!item) {
+    item = context.page?.item;
+  }
+
+  if (!item) return;
+
+  return (
+    <div className="z-50 w-full">
+      {context.configuration.editorWarnings.map((x, i) =>
+        React.createElement(x, {
+          item,
+          key: "warning" + i,
+          editContext: context!,
+        }),
+      )}
+    </div>
+  );
+}

package/src/editor/FieldActionsOverlay.tsx

@@ -0,0 +1,296 @@
+import React, { useState, useRef, useEffect } from "react";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { FieldButton, FieldButtonParameter } from "./pageModel";
+
+interface FieldActionsOverlayProps {
+  generatorButtons?: FieldButton[];
+  onActionClick: (action: FieldButton) => void;
+  onParameterizedActionExecute: (
+    action: FieldButton,
+    parameters: Record<string, string>,
+  ) => void;
+  currentOverlay?: any;
+  fieldId: string;
+  setCurrentOverlay: (overlay: any) => void;
+  preSelectedAction?: FieldButton; // Auto-select this action when overlay opens
+  hideBackButton?: boolean; // Hide back button when directly selecting an action
+}
+
+const FieldActionsOverlay = React.forwardRef<
+  FieldActionsOverlayRef,
+  FieldActionsOverlayProps
+>(
+  (
+    {
+      generatorButtons,
+      onActionClick,
+      onParameterizedActionExecute,
+      currentOverlay,
+      fieldId,
+      setCurrentOverlay,
+      preSelectedAction,
+      hideBackButton,
+    },
+    ref,
+  ) => {
+    const overlayRef = useRef<OverlayPanel>(null);
+    const [selectedParameterizedAction, setSelectedParameterizedAction] =
+      useState<FieldButton | null>(null);
+    const [parameterValues, setParameterValues] = useState<
+      Record<string, string>
+    >({});
+
+    const overlayId = fieldId + "_generators";
+
+    useEffect(() => {
+      if (currentOverlay !== overlayId) {
+        overlayRef.current?.hide();
+        resetParameterizedAction();
+      }
+    }, [currentOverlay, overlayId]);
+
+    // Auto-select preSelectedAction if provided (removed from useEffect)
+    // Now handled in the show function
+
+    function resetParameterizedAction(): void {
+      setSelectedParameterizedAction(null);
+      setParameterValues({});
+    }
+
+    function handleActionClick(action: FieldButton): void {
+      if (action.parameters && action.parameters.length > 0) {
+        setSelectedParameterizedAction(action);
+        // Initialize parameter values with defaults
+        const initialValues: Record<string, string> = {};
+        action.parameters.forEach((param) => {
+          initialValues[param.id] = param.defaultValue || "";
+        });
+        setParameterValues(initialValues);
+      } else {
+        onActionClick(action);
+        overlayRef.current?.hide();
+      }
+    }
+
+    function executeParameterizedAction(): void {
+      if (selectedParameterizedAction) {
+        onParameterizedActionExecute(
+          selectedParameterizedAction,
+          parameterValues,
+        );
+        resetParameterizedAction();
+        overlayRef.current?.hide();
+      }
+    }
+
+    function goBackToActionList(): void {
+      resetParameterizedAction();
+    }
+
+    function cancelParameterizedAction(): void {
+      resetParameterizedAction();
+      overlayRef.current?.hide();
+    }
+
+    function updateParameterValue(paramId: string, value: string): void {
+      setParameterValues((prev) => ({ ...prev, [paramId]: value }));
+    }
+
+    function areRequiredParametersFilled(): boolean {
+      if (!selectedParameterizedAction?.parameters) return true;
+
+      return selectedParameterizedAction.parameters.every((param) => {
+        if (!param.required) return true;
+        const value = parameterValues[param.id] || "";
+        return value.trim().length > 0;
+      });
+    }
+
+    function renderParameterInput(
+      param: FieldButtonParameter,
+      shouldAutoFocus: boolean = false,
+    ): React.ReactNode {
+      const value = parameterValues[param.id] || "";
+      const commonProps = {
+        value,
+        onChange: (
+          e: React.ChangeEvent<
+            HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+          >,
+        ) => updateParameterValue(param.id, e.target.value),
+        onKeyDown: (e: React.KeyboardEvent) => {
+          if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            if (areRequiredParametersFilled()) {
+              executeParameterizedAction();
+            }
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            goBackToActionList();
+          }
+        },
+        className: "w-full rounded border p-2 text-xs",
+        placeholder: param.placeholder || "",
+        autoFocus: shouldAutoFocus,
+      };
+
+      switch (param.type) {
+        case "textarea":
+          return (
+            <textarea
+              {...commonProps}
+              rows={param.rows || 3}
+              className={commonProps.className + " resize-none"}
+            />
+          );
+        case "number":
+          return <input {...commonProps} type="number" />;
+        case "select":
+          return (
+            <select {...commonProps}>
+              <option value="">
+                {param.placeholder || "Select an option..."}
+              </option>
+              {param.options?.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          );
+        case "text":
+        default:
+          return <input {...commonProps} type="text" />;
+      }
+    }
+
+    function show(event: any, actionToSelect?: FieldButton): void {
+      // Set overlay state first, then show
+      setCurrentOverlay(overlayId);
+
+      // Check if this is a synthetic event (from context menu) or real event (from button click)
+      if (
+        event &&
+        event.isTrusted === false &&
+        event.target &&
+        event.target.style
+      ) {
+        // This is likely our synthetic event with a positioned target element
+        overlayRef.current?.toggle(event, event.target);
+      } else {
+        // This is a normal event, use standard positioning
+        overlayRef.current?.toggle(event);
+      }
+
+      // Use the passed actionToSelect or fall back to preSelectedAction prop
+      const actionToAutoSelect = actionToSelect || preSelectedAction;
+
+      // Auto-select the action after overlay is shown
+      if (
+        actionToAutoSelect &&
+        actionToAutoSelect.parameters &&
+        actionToAutoSelect.parameters.length > 0
+      ) {
+        // Use longer timeout to ensure overlay is stable
+        setTimeout(() => {
+          handleActionClick(actionToAutoSelect);
+        }, 50);
+      } else {
+        console.log(
+          "Not auto-selecting - actionToAutoSelect:",
+          actionToAutoSelect,
+        );
+      }
+    }
+
+    function hide(): void {
+      overlayRef.current?.hide();
+    }
+
+    React.useImperativeHandle(ref, () => ({
+      show,
+      hide,
+    }));
+
+    return (
+      <OverlayPanel ref={overlayRef} className="p-1">
+        {selectedParameterizedAction ? (
+          <div className="min-w-64 p-2">
+            <div className="mb-2">
+              <div className="mb-2 flex items-center">
+                {!hideBackButton && (
+                  <button
+                    className="mr-2 text-xs hover:text-gray-400"
+                    onClick={goBackToActionList}
+                  >
+                    <i className="pi pi-arrow-left" />
+                  </button>
+                )}
+                <span className="text-xs font-semibold">
+                  {selectedParameterizedAction.label}
+                </span>
+              </div>
+              <div className="mb-3 text-xs text-gray-600">
+                {selectedParameterizedAction.description}
+              </div>
+
+              {selectedParameterizedAction.parameters?.map((param, index) => (
+                <div key={param.id} className="mb-3">
+                  <label className="mb-1 block text-xs font-medium">
+                    {param.label}
+                    {param.required && (
+                      <span className="ml-1 text-red-500">*</span>
+                    )}
+                  </label>
+                  {renderParameterInput(param, index === 0)}
+                </div>
+              ))}
+
+              <div className="mt-1 text-xs text-gray-500">
+                Ctrl+Enter to execute, Esc to cancel
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <button
+                className="rounded bg-blue-500 px-3 py-1 text-xs text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
+                onClick={executeParameterizedAction}
+                disabled={!areRequiredParametersFilled()}
+              >
+                Execute
+              </button>
+              <button
+                className="rounded bg-gray-300 px-3 py-1 text-xs text-gray-700 hover:bg-gray-400"
+                onClick={cancelParameterizedAction}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        ) : (
+          <>
+            {generatorButtons?.map((x) => (
+              <button
+                key={x.id}
+                className="block p-1 text-xs hover:text-gray-400"
+                onClick={() => handleActionClick(x)}
+              >
+                {x.icon && <i className={x.icon + " mr-2 text-xs"} />}
+                {x.label}
+              </button>
+            ))}
+          </>
+        )}
+      </OverlayPanel>
+    );
+  },
+);
+
+// Export methods to be used by parent component
+export interface FieldActionsOverlayRef {
+  show: (event: any, actionToSelect?: FieldButton) => void;
+  hide: () => void;
+}
+
+FieldActionsOverlay.displayName = "FieldActionsOverlay";
+
+export { FieldActionsOverlay };