@alpaca-editor/core 1.0.3938 → 1.0.3939

package/dist/editor/ui/SimpleTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleTabs.js","sourceRoot":"","sources":["../../../src/editor/ui/SimpleTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AASzC,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,GAMV;IACC,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAChC,SAAS,GAAG,CAAC,CAAC;IAChB,CAAC;IAED,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;QAClB,SAAS,GAAG,CAAC,CAAC;IAChB,CAAC;IAED,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEnC,OAAO,CACL,8BACE,cAAK,SAAS,EAAE,OAAO,CAAC,yBAAyB,EAAE,SAAS,CAAC,YAC1D,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,iBACE,EAAE,EAAE,GAAG,CAAC,EAAE,EACV,SAAS,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,iBAEnD,GAAG,CAAC,MAAM,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAClC,KAAK,EAAE;wBACL,UAAU,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;wBACnD,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM;wBAC9D,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;wBAC/C,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;qBAC9C,YAEA,GAAG,CAAC,KAAK,IAVL,GAAG,CAAC,EAAE,CAWJ,CACV,CAAC,GACE,EACL,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,IACxB,CACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"SimpleTabs.js","sourceRoot":"","sources":["../../../src/editor/ui/SimpleTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AASzC,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,GAMV;IACC,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAChC,SAAS,GAAG,CAAC,CAAC;IAChB,CAAC;IAED,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;QAClB,SAAS,GAAG,CAAC,CAAC;IAChB,CAAC;IAED,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEnC,OAAO,CACL,8BACE,cAAK,SAAS,EAAE,OAAO,CAAC,iBAAiB,EAAE,SAAS,CAAC,YAClD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,iBACE,EAAE,EAAE,GAAG,CAAC,EAAE,EACV,SAAS,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,iBAEnD,GAAG,CAAC,MAAM,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAClC,KAAK,EAAE;wBACL,UAAU,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;wBACnD,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM;wBAC9D,YAAY,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;wBAC/C,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;qBAC9C,YAEA,GAAG,CAAC,KAAK,IAVL,GAAG,CAAC,EAAE,CAWJ,CACV,CAAC,GACE,EACL,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,IACxB,CACJ,CAAC;AACJ,CAAC"}

package/dist/revision.d.ts

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

package/dist/revision.js

@@ -1,3 +1,3 @@
-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";
 //# sourceMappingURL=revision.js.map

package/dist/styles.css

@@ -675,6 +675,9 @@
   .min-w-64 {
     min-width: calc(var(--spacing) * 64);
   }
+  .min-w-96 {
+    min-width: calc(var(--spacing) * 96);
+  }
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
@@ -1450,9 +1453,6 @@
   .pr-6 {
     padding-right: calc(var(--spacing) * 6);
   }
-  .pr-8 {
-    padding-right: calc(var(--spacing) * 8);
-  }
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
@@ -2523,11 +2523,6 @@
       padding-top: calc(var(--spacing) * 0);
     }
   }
-  .md\:pb-3 {
-    @media (width >= 48rem) {
-      padding-bottom: calc(var(--spacing) * 3);
-    }
-  }
   .md\:pb-4 {
     @media (width >= 48rem) {
       padding-bottom: calc(var(--spacing) * 4);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.3938",
+  "version": "1.0.3939",
   "publishConfig": {
     "access": "public"
   },

package/src/editor/ContentTree.tsx

@@ -231,12 +231,6 @@ export default function ContentTree({
 
   const refreshNode = useCallback(
     async (node: TreeNode) => {
-      const tempNode = { ...node };
-
-      tempNode.children = undefined;
-
-      await doPreloadNodes(expandedKeys || [], [tempNode as CustomTreeNode]);
-
       const item = await editContext?.itemsRepository.getItem(
         node.data as ItemDescriptor,
       );
@@ -256,16 +250,25 @@ export default function ContentTree({
           });
         customNode.selectable = !selectPagesOnly || item.hasLayout;
         customNode.data = item;
-        customNode.hasChildren = item.hasChildren;
-        // Preserve existing parent relationship - don't update it
-      }
+        // Don't set hasChildren yet - we'll determine it after loading children
 
-      node.children = tempNode.children;
+        // Always reload children to get the current state, regardless of expand state
+        const newChildren = await loadNodeChildren(customNode);
+        customNode.children = newChildren;
+
+        // Update hasChildren based on actual children count
+        customNode.hasChildren = newChildren.length > 0;
+
+        // If node is not expanded, clear children to save memory but keep hasChildren correct
+        if (!expandedKeys?.includes(node.key as string)) {
+          customNode.children = undefined;
+        }
+      }
     },
     [
       editContext?.itemsRepository,
       expandedKeys,
-      doPreloadNodes,
+      loadNodeChildren,
       isDraggable,
       selectPagesOnly,
     ],
@@ -341,7 +344,7 @@ export default function ContentTree({
     if (hasNewKeys) {
       setExpandedKeys([...new Set([...expandedKeys, ...newExpandedKeys])]);
     }
-  }, [expandIdPath, expandedKeys, rootItemId]);
+  }, [expandIdPath, rootItemId]);
 
   useEffect(() => {
     const newNodeDictionary: { [key: string]: CustomTreeNode } = {};

package/src/editor/ContextMenu.tsx

@@ -70,6 +70,12 @@ export async function showComponentContextMenu(
   editContext: EditContextType,
   field?: FieldDescriptor,
   fieldButtons?: FieldButton[],
+  onParameterizedAction?: (
+    field: FieldDescriptor,
+    action: FieldButton,
+    allFieldButtons: FieldButton[],
+    event: any,
+  ) => void,
 ) {
   const componentCommandMenuItems = await getComponentMenuItems(
     editContext,
@@ -89,8 +95,20 @@ export async function showComponentContextMenu(
       menuItems.push({
         id: button.id,
         label: button.label,
-        command: async () => {
-          editContext!.triggerFieldAction(field, button);
+        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,
       });

package/src/editor/FieldActionsOverlay.tsx

@@ -0,0 +1,307 @@
+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
+}
+
+const FieldActionsOverlay = React.forwardRef<
+  FieldActionsOverlayRef,
+  FieldActionsOverlayProps
+>(
+  (
+    {
+      generatorButtons,
+      onActionClick,
+      onParameterizedActionExecute,
+      currentOverlay,
+      fieldId,
+      setCurrentOverlay,
+      preSelectedAction,
+    },
+    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 {
+      console.log("FieldActionsOverlay show called with:", {
+        event,
+        actionToSelect,
+        preSelectedAction,
+        overlayId,
+        isTrusted: event?.isTrusted,
+      });
+
+      // 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
+        console.log("Using synthetic event positioning");
+        overlayRef.current?.toggle(event, event.target);
+      } else {
+        // This is a normal event, use standard positioning
+        console.log("Using normal event 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
+      ) {
+        console.log("Auto-selecting action in 50ms:", actionToAutoSelect);
+        // Use longer timeout to ensure overlay is stable
+        setTimeout(() => {
+          console.log(
+            "Calling handleActionClick for action:",
+            actionToAutoSelect,
+          );
+          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">
+                <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 };

package/src/editor/FieldHistory.tsx

@@ -12,9 +12,11 @@ import { SimpleIconButton } from "./ui/SimpleIconButton";
 export function FieldHistory({
   field,
   onHover,
+  onRevert,
 }: {
   field: Field;
   onHover: (historyEntry: FieldHistoryItem | undefined) => void;
+  onRevert?: () => void;
 }) {
   const [fieldHistory, setFieldHistory] = useState<FieldHistoryItem[]>([]);
   const editContext = useEditContext();
@@ -30,13 +32,11 @@ export function FieldHistory({
   }, [field]);
 
   if (fieldHistory.length === 0)
-    return <div className="p-2 text-gray-500 text-xs">No history</div>;
+    return <div className="p-2 text-xs text-gray-500">No history</div>;
 
   return (
     <div>
-      <div className="text-xs p-2 bg-gray-100 text-gray-500">
-        Field History
-      </div>
+      <div className="bg-gray-100 p-2 text-xs text-gray-500">Field History</div>
       <div className="max-h-96 overflow-auto">
         <SimpleTable
           items={fieldHistory}
@@ -55,13 +55,14 @@ export function FieldHistory({
               body: (x) => (
                 <SimpleIconButton
                   icon="pi pi-undo"
-                  onClick={() =>
-                    editContext.operations.editField({
+                  onClick={async () => {
+                    await editContext.operations.editField({
                       field: field.descriptor,
                       rawValue: x.rawValue,
                       refresh: "immediate",
-                    })
-                  }
+                    });
+                    onRevert?.();
+                  }}
                   label="Revert"
                 />
               ),

package/src/editor/FieldListField.tsx

@@ -12,6 +12,10 @@ import { getSessionWithFieldLock } from "./utils";
 
 import { loadFieldButtons } from "./services/editService";
 import { Field, FieldButton } from "./pageModel";
+import {
+  FieldActionsOverlay,
+  FieldActionsOverlayRef,
+} from "./FieldActionsOverlay";
 import { useThrottledCallback } from "use-debounce";
 import { SimpleIconButton } from "./ui/SimpleIconButton";
 import { FieldHistory } from "./FieldHistory";
@@ -43,15 +47,21 @@ export default function FieldListField({
   const fieldItem = field.descriptor.item;
 
   const [showRawValue, setShowRawValue] = useState(false);
-  const generatorsOverlay = useRef<OverlayPanel>(null);
+  const generatorsOverlay = useRef<FieldActionsOverlayRef>(null);
   const fieldHistoryOverlay = useRef<OverlayPanel>(null);
   const [generatorButtons, setButtons] = useState<FieldButton[]>();
   const [isModified, setIsModified] = useState(false);
   const [isSaved, setIsSaved] = useState(false);
   const [historyEntry, setHistoryEntry] = useState<FieldHistoryItem>();
+  async function handleActionClick(action: FieldButton): Promise<void> {
+    editContext?.triggerFieldAction(field.descriptor, action);
+  }
 
-  async function editButtonClicked(x: FieldButton): Promise<void> {
-    editContext?.triggerFieldAction(field.descriptor, x);
+  async function handleParameterizedActionExecute(
+    action: FieldButton,
+    parameters: Record<string, string>,
+  ): Promise<void> {
+    editContext?.triggerFieldAction(field.descriptor, action, parameters);
   }
 
   useEffect(() => {
@@ -148,24 +158,16 @@ export default function FieldListField({
     }
   }, [isFocusedField]);
 
-  useEffect(() => {
-    if (editContext.currentOverlay !== field.id + "_generators")
-      generatorsOverlay.current?.hide();
-  }, [editContext.currentOverlay]);
-
   const renderGeneratorButtons = () => {
     if (generatorButtons?.length || 0 > 0)
       return (
         <>
           {(!executingAction || executingAction.state !== "running") && (
             <SimpleIconButton
-              icon={<WizardIcon className="h-4 w-4" />}
+              icon={<WizardIcon className="h-5 w-5" />}
               label="Generate"
               onClick={(e: any) => {
-                generatorsOverlay.current?.toggle(e);
-                editContext.setCurrentOverlay(field.id + "_generators");
-                e.preventDefault();
-                e.stopPropagation();
+                generatorsOverlay.current?.show(e);
               }}
             ></SimpleIconButton>
           )}
@@ -175,21 +177,15 @@ export default function FieldListField({
               {executingAction?.label}
             </div>
           )}
-          <OverlayPanel ref={generatorsOverlay} className="p-1">
-            {generatorButtons?.map((x) => (
-              <button
-                key={x.id}
-                className="block p-1 text-xs hover:text-gray-400"
-                onClick={() => {
-                  editButtonClicked(x);
-                  generatorsOverlay.current?.hide();
-                }}
-              >
-                {x.icon && <i className={x.icon + " mr-2 text-xs"} />}
-                {x.label}
-              </button>
-            ))}
-          </OverlayPanel>
+          <FieldActionsOverlay
+            ref={generatorsOverlay}
+            generatorButtons={generatorButtons}
+            onActionClick={handleActionClick}
+            onParameterizedActionExecute={handleParameterizedActionExecute}
+            currentOverlay={editContext.currentOverlay}
+            fieldId={field.id}
+            setCurrentOverlay={editContext.setCurrentOverlay}
+          />
         </>
       );
     return null;
@@ -245,7 +241,10 @@ export default function FieldListField({
                 {field.isShared && (
                   <span className="text-xs text-gray-400">[Shared]</span>
                 )}
-                <span className="text-xs">·</span>
+                {((!field.isFallback && field.rawValue !== null) ||
+                  showFallbackButton ||
+                  (config?.buttons && config.buttons.length > 0) ||
+                  !simplified) && <span className="text-xs">·</span>}
                 {!field.isFallback && field.rawValue !== null ? (
                   <button
                     className="p-0 text-xs"
@@ -313,6 +312,7 @@ export default function FieldListField({
                     <FieldHistory
                       field={field}
                       onHover={(x) => setHistoryEntry(x)}
+                      onRevert={() => fieldHistoryOverlay.current?.hide()}
                     />
                   </OverlayPanel>
                 </div>