@ai-stack/payloadcms 3.2.26 → 3.68.0-beta.2

package/dist/ui/Compose/hooks/useActiveFieldTracking.js

@@ -8,6 +8,12 @@ import { useEffect } from 'react';
     'textarea',
     'rich-text-lexical'
 ];
+// Performance optimization: Cache container and field type lookups
+const containerCache = new WeakMap();
+const fieldTypeCache = new WeakMap();
+// Performance optimization: Throttle/debounce timers
+let pointerDownThrottleTimer = null;
+let focusDebounceTimer = null;
 let currentContainer = null;
 let rafId = null // Track RAF to cancel if needed
 ;
@@ -21,7 +27,16 @@ let rafId = null // Track RAF to cancel if needed
 };
 /**
  * Find container from React Select dropdown elements
+ * Performance: Early exit if not in a listbox/option element
  */ const findContainerFromReactSelect = (target)=>{
+    // Early exit if element doesn't have role indicator for React Select
+    const role = target.getAttribute('role');
+    if (!role || ![
+        'listbox',
+        'option'
+    ].includes(role)) {
+        return null;
+    }
     const listbox = target.closest('[role="listbox"]');
     if (!listbox?.id) {
         return null;
@@ -33,27 +48,45 @@ let rafId = null // Track RAF to cancel if needed
 };
 /**
  * Check if a container has one of the allowed field type classes
+ * Performance: Uses WeakMap cache to avoid repeated class list checks
  */ const isAllowedFieldType = (container)=>{
-    return ALLOWED_FIELD_TYPES.some((type)=>container.classList.contains(type) || container.classList.contains(`field-type-${type}`));
+    // Check cache first
+    if (fieldTypeCache.has(container)) {
+        return fieldTypeCache.get(container);
+    }
+    // Compute and cache result
+    const result = ALLOWED_FIELD_TYPES.some((type)=>container.classList.contains(type) || container.classList.contains(`field-type-${type}`));
+    fieldTypeCache.set(container, result);
+    return result;
 };
 /**
  * Resolve the .field-type container for a given event target
  * Only returns containers that match allowed field types
+ * Performance: Uses WeakMap cache to avoid repeated DOM traversals
  */ const resolveContainerFromTarget = (target)=>{
     if (!(target instanceof HTMLElement)) {
         return null;
     }
-    // Check for direct parent first
+    // Check cache first
+    if (containerCache.has(target)) {
+        const cached = containerCache.get(target);
+        // Validate cache entry is still in DOM
+        if (!cached || cached.isConnected) {
+            return cached;
+        }
+        // Invalidate stale cache entry
+        containerCache.delete(target);
+    }
+    // Perform lookup
     let container = target.closest('.field-type');
-    // If not found, fall back to React Select logic
+    // Fall back to React Select logic if needed
     if (!container) {
         container = findContainerFromReactSelect(target);
     }
-    // Only return if it's an allowed field type
-    if (container && isAllowedFieldType(container)) {
-        return container;
-    }
-    return null;
+    // Validate field type and cache result
+    const result = container && isAllowedFieldType(container) ? container : null;
+    containerCache.set(target, result);
+    return result;
 };
 /**
  * Update the active container and toggle CSS class
@@ -116,6 +149,7 @@ const isInteractiveElement = (element)=>{
 };
 /**
  * Handle focus events - only activate if focus is on an interactive element within .field-type
+ * Performance: Debounced by 10ms to handle rapid focus changes
  */ const onFocusIn = (e)=>{
     const target = e.target;
     if (!(target instanceof HTMLElement)) {
@@ -129,11 +163,20 @@ const isInteractiveElement = (element)=>{
     if (!isInteractiveElement(target)) {
         return;
     }
-    const container = resolveContainerFromTarget(target);
-    setActiveContainer(container);
+    // Clear any pending debounce
+    if (focusDebounceTimer !== null) {
+        clearTimeout(focusDebounceTimer);
+    }
+    // Debounce to reduce work during rapid focus changes (e.g., fast tabbing)
+    focusDebounceTimer = window.setTimeout(()=>{
+        focusDebounceTimer = null;
+        const container = resolveContainerFromTarget(target);
+        setActiveContainer(container);
+    }, 10);
 };
 /**
  * Handle pointer/mouse events - only switch when clicking a different .field-type
+ * Performance: Early exit for non-field clicks + 50ms throttling
  */ const onPointerDown = (e)=>{
     const target = e.target;
     if (!(target instanceof HTMLElement)) {
@@ -143,8 +186,24 @@ const isInteractiveElement = (element)=>{
     if (currentContainer?.isConnected && currentContainer.contains(target)) {
         return;
     }
+    // Performance: Quick check before expensive traversal
+    // If click is nowhere near a field, just clear active state
+    if (!target.closest('.field-type')) {
+        if (currentContainer) {
+            setActiveContainer(null);
+        }
+        return;
+    }
+    // Throttle to prevent excessive work on rapid clicking
+    if (pointerDownThrottleTimer !== null) {
+        return;
+    }
     const container = resolveContainerFromTarget(target);
     setActiveContainer(container);
+    // Set throttle timer for 50ms
+    pointerDownThrottleTimer = window.setTimeout(()=>{
+        pointerDownThrottleTimer = null;
+    }, 50);
 };
 /**
  * Handle keyboard navigation (Tab key)

package/dist/ui/Compose/hooks/useActiveFieldTracking.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/Compose/hooks/useActiveFieldTracking.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\n/**\n * Allowed field type classes that should show the active state\n */\nconst ALLOWED_FIELD_TYPES = ['upload', 'text', 'textarea', 'rich-text-lexical']\n\nlet currentContainer: HTMLElement | null = null\nlet rafId: null | number = null // Track RAF to cancel if needed\n\n/**\n * Safely escape CSS selector values\n */\nconst cssEscape = (value: string): string => {\n  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {\n    return CSS.escape(value)\n  }\n  return value.replace(/([ #;?%&,.+*~':\"!^$[\\]()=>|/@])/g, '\\\\$1')\n}\n\n/**\n * Find container from React Select dropdown elements\n */\nconst findContainerFromReactSelect = (target: HTMLElement): HTMLElement | null => {\n  const listbox = target.closest<HTMLElement>('[role=\"listbox\"]')\n  if (!listbox?.id) {\n    return null\n  }\n\n  const id = cssEscape(listbox.id)\n  const selector = `[aria-controls=\"${id}\"], [aria-owns=\"${id}\"]`\n  const control = document.querySelector<HTMLElement>(selector)\n\n  return control?.closest<HTMLElement>('.field-type') ?? null\n}\n\n/**\n * Check if a container has one of the allowed field type classes\n */\nconst isAllowedFieldType = (container: HTMLElement): boolean => {\n  return ALLOWED_FIELD_TYPES.some(\n    (type) =>\n      container.classList.contains(type) || container.classList.contains(`field-type-${type}`),\n  )\n}\n\n/**\n * Resolve the .field-type container for a given event target\n * Only returns containers that match allowed field types\n */\nconst resolveContainerFromTarget = (target: EventTarget | null): HTMLElement | null => {\n  if (!(target instanceof HTMLElement)) {\n    return null\n  }\n\n  // Check for direct parent first\n  let container = target.closest<HTMLElement>('.field-type')\n\n  // If not found, fall back to React Select logic\n  if (!container) {\n    container = findContainerFromReactSelect(target)\n  }\n\n  // Only return if it's an allowed field type\n  if (container && isAllowedFieldType(container)) {\n    return container\n  }\n\n  return null\n}\n\n/**\n * Update the active container and toggle CSS class\n * - Avoids acting on disconnected nodes\n * - Avoids redundant class work\n */\nconst setActiveContainer = (next: HTMLElement | null): void => {\n  // Normalize both references against disconnected nodes\n  if (currentContainer && !currentContainer.isConnected) {\n    currentContainer = null\n  }\n  if (next && !next.isConnected) {\n    next = null\n  }\n\n  if (currentContainer === next) {\n    return\n  }\n\n  currentContainer?.classList.remove('ai-plugin-active')\n  if (next) {\n    next.classList.add('ai-plugin-active')\n  }\n  currentContainer = next\n}\n\nconst clearActiveContainer = (): void => {\n  if (currentContainer) {\n    currentContainer.classList.remove('ai-plugin-active')\n    currentContainer = null\n  }\n\n  // Cancel any pending RAF\n  if (rafId !== null) {\n    cancelAnimationFrame(rafId)\n    rafId = null\n  }\n}\n\nconst isInteractiveElement = (element: HTMLElement): boolean => {\n  const tagName = element.tagName.toLowerCase()\n  const interactiveTags = ['input', 'textarea', 'select', 'button']\n\n  if (interactiveTags.includes(tagName)) {\n    return true\n  }\n\n  // Check for contenteditable\n  if (element.isContentEditable) {\n    return true\n  }\n\n  // Check for elements with role=\"textbox\" or role=\"combobox\" (React Select)\n  const role = element.getAttribute('role')\n  if (role && ['combobox', 'listbox', 'searchbox', 'textbox'].includes(role)) {\n    return true\n  }\n\n  return false\n}\n\n/**\n * Handle focus events - only activate if focus is on an interactive element within .field-type\n */\nconst onFocusIn = (e: FocusEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  // Early exit if we're already inside the current container\n  if (currentContainer?.isConnected && currentContainer.contains(target)) {\n    return\n  }\n\n  // Only activate if the focused element is actually interactive\n  if (!isInteractiveElement(target)) {\n    return\n  }\n\n  const container = resolveContainerFromTarget(target)\n  setActiveContainer(container)\n}\n\n/**\n * Handle pointer/mouse events - only switch when clicking a different .field-type\n */\nconst onPointerDown = (e: PointerEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  // Early exit if clicking within current container\n  if (currentContainer?.isConnected && currentContainer.contains(target)) {\n    return\n  }\n\n  const container = resolveContainerFromTarget(target)\n  setActiveContainer(container)\n}\n\n/**\n * Handle keyboard navigation (Tab key)\n */\nconst onKeyDown = (e: KeyboardEvent): void => {\n  if (e.key !== 'Tab') {\n    return\n  }\n\n  // Cancel any pending RAF to prevent queuing\n  if (rafId !== null) {\n    cancelAnimationFrame(rafId)\n  }\n\n  // Defer until after focus has shifted\n  rafId = requestAnimationFrame(() => {\n    rafId = null\n    const container = resolveContainerFromTarget(document.activeElement)\n    setActiveContainer(container)\n  })\n}\n\n/**\n * Handle visibility changes to properly cleanup when page is hidden\n */\nconst onVisibilityChange = (): void => {\n  if (typeof document !== 'undefined' && document.hidden) {\n    // Clear active state and cancel pending operations\n    clearActiveContainer()\n  }\n}\n\n/**\n * Initialize document-level listeners to track the active field container.\n * When a container is active, it receives the 'ai-plugin-active' class.\n */\nexport const useActiveFieldTracking = (): void => {\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return\n    }\n\n    const pluginWindow = window as {\n      __aiComposeTracking?: boolean\n      __aiComposeTrackingController?: AbortController\n      __aiComposeTrackingCount?: number\n    } & Window\n\n    // Track number of mounted users of the hook\n    pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 0) + 1\n\n    // Initialize listeners only once\n    if (!pluginWindow.__aiComposeTracking) {\n      const controller = new AbortController()\n      pluginWindow.__aiComposeTrackingController = controller\n\n      // Use capture for early handling\n      document.addEventListener('focusin', onFocusIn, {\n        capture: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('pointerdown', onPointerDown, {\n        capture: true,\n        passive: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('keydown', onKeyDown, {\n        capture: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('visibilitychange', onVisibilityChange, {\n        signal: controller.signal,\n      })\n\n      pluginWindow.__aiComposeTracking = true\n    }\n\n    return () => {\n      // Decrement and cleanup when the last user unmounts\n      pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 1) - 1\n\n      if ((pluginWindow.__aiComposeTrackingCount ?? 0) <= 0) {\n        // Atomically remove all listeners\n        pluginWindow.__aiComposeTrackingController?.abort()\n        pluginWindow.__aiComposeTrackingController = undefined\n\n        // Clear active state and cancel pending operations\n        clearActiveContainer()\n\n        // Reset all state\n        pluginWindow.__aiComposeTracking = false\n        pluginWindow.__aiComposeTrackingCount = 0\n      }\n    }\n  }, [])\n}\n"],"names":["useEffect","ALLOWED_FIELD_TYPES","currentContainer","rafId","cssEscape","value","CSS","escape","replace","findContainerFromReactSelect","target","listbox","closest","id","selector","control","document","querySelector","isAllowedFieldType","container","some","type","classList","contains","resolveContainerFromTarget","HTMLElement","setActiveContainer","next","isConnected","remove","add","clearActiveContainer","cancelAnimationFrame","isInteractiveElement","element","tagName","toLowerCase","interactiveTags","includes","isContentEditable","role","getAttribute","onFocusIn","e","onPointerDown","onKeyDown","key","requestAnimationFrame","activeElement","onVisibilityChange","hidden","useActiveFieldTracking","window","pluginWindow","__aiComposeTrackingCount","__aiComposeTracking","controller","AbortController","__aiComposeTrackingController","addEventListener","capture","signal","passive","abort","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/ui/Compose/hooks/useActiveFieldTracking.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\n/**\n * Allowed field type classes that should show the active state\n */\nconst ALLOWED_FIELD_TYPES = ['upload', 'text', 'textarea', 'rich-text-lexical']\n\n// Performance optimization: Cache container and field type lookups\nconst containerCache = new WeakMap<HTMLElement, HTMLElement | null>()\nconst fieldTypeCache = new WeakMap<HTMLElement, boolean>()\n\n// Performance optimization: Throttle/debounce timers\nlet pointerDownThrottleTimer: null | number = null\nlet focusDebounceTimer: null | number = null\n\nlet currentContainer: HTMLElement | null = null\nlet rafId: null | number = null // Track RAF to cancel if needed\n\n/**\n * Safely escape CSS selector values\n */\nconst cssEscape = (value: string): string => {\n  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {\n    return CSS.escape(value)\n  }\n  return value.replace(/([ #;?%&,.+*~':\"!^$[\\]()=>|/@])/g, '\\\\$1')\n}\n\n/**\n * Find container from React Select dropdown elements\n * Performance: Early exit if not in a listbox/option element\n */\nconst findContainerFromReactSelect = (target: HTMLElement): HTMLElement | null => {\n  // Early exit if element doesn't have role indicator for React Select\n  const role = target.getAttribute('role')\n  if (!role || !['listbox', 'option'].includes(role)) {\n    return null\n  }\n\n  const listbox = target.closest<HTMLElement>('[role=\"listbox\"]')\n  if (!listbox?.id) {\n    return null\n  }\n\n  const id = cssEscape(listbox.id)\n  const selector = `[aria-controls=\"${id}\"], [aria-owns=\"${id}\"]`\n  const control = document.querySelector<HTMLElement>(selector)\n\n  return control?.closest<HTMLElement>('.field-type') ?? null\n}\n\n/**\n * Check if a container has one of the allowed field type classes\n * Performance: Uses WeakMap cache to avoid repeated class list checks\n */\nconst isAllowedFieldType = (container: HTMLElement): boolean => {\n  // Check cache first\n  if (fieldTypeCache.has(container)) {\n    return fieldTypeCache.get(container)!\n  }\n\n  // Compute and cache result\n  const result = ALLOWED_FIELD_TYPES.some(\n    (type) =>\n      container.classList.contains(type) || container.classList.contains(`field-type-${type}`),\n  )\n\n  fieldTypeCache.set(container, result)\n  return result\n}\n\n/**\n * Resolve the .field-type container for a given event target\n * Only returns containers that match allowed field types\n * Performance: Uses WeakMap cache to avoid repeated DOM traversals\n */\nconst resolveContainerFromTarget = (target: EventTarget | null): HTMLElement | null => {\n  if (!(target instanceof HTMLElement)) {\n    return null\n  }\n\n  // Check cache first\n  if (containerCache.has(target)) {\n    const cached = containerCache.get(target)!\n    // Validate cache entry is still in DOM\n    if (!cached || cached.isConnected) {\n      return cached\n    }\n    // Invalidate stale cache entry\n    containerCache.delete(target)\n  }\n\n  // Perform lookup\n  let container = target.closest<HTMLElement>('.field-type')\n\n  // Fall back to React Select logic if needed\n  if (!container) {\n    container = findContainerFromReactSelect(target)\n  }\n\n  // Validate field type and cache result\n  const result = container && isAllowedFieldType(container) ? container : null\n  containerCache.set(target, result)\n\n  return result\n}\n\n/**\n * Update the active container and toggle CSS class\n * - Avoids acting on disconnected nodes\n * - Avoids redundant class work\n */\nconst setActiveContainer = (next: HTMLElement | null): void => {\n  // Normalize both references against disconnected nodes\n  if (currentContainer && !currentContainer.isConnected) {\n    currentContainer = null\n  }\n  if (next && !next.isConnected) {\n    next = null\n  }\n\n  if (currentContainer === next) {\n    return\n  }\n\n  currentContainer?.classList.remove('ai-plugin-active')\n  if (next) {\n    next.classList.add('ai-plugin-active')\n  }\n  currentContainer = next\n}\n\nconst clearActiveContainer = (): void => {\n  if (currentContainer) {\n    currentContainer.classList.remove('ai-plugin-active')\n    currentContainer = null\n  }\n\n  // Cancel any pending RAF\n  if (rafId !== null) {\n    cancelAnimationFrame(rafId)\n    rafId = null\n  }\n}\n\nconst isInteractiveElement = (element: HTMLElement): boolean => {\n  const tagName = element.tagName.toLowerCase()\n  const interactiveTags = ['input', 'textarea', 'select', 'button']\n\n  if (interactiveTags.includes(tagName)) {\n    return true\n  }\n\n  // Check for contenteditable\n  if (element.isContentEditable) {\n    return true\n  }\n\n  // Check for elements with role=\"textbox\" or role=\"combobox\" (React Select)\n  const role = element.getAttribute('role')\n  if (role && ['combobox', 'listbox', 'searchbox', 'textbox'].includes(role)) {\n    return true\n  }\n\n  return false\n}\n\n/**\n * Handle focus events - only activate if focus is on an interactive element within .field-type\n * Performance: Debounced by 10ms to handle rapid focus changes\n */\nconst onFocusIn = (e: FocusEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  // Early exit if we're already inside the current container\n  if (currentContainer?.isConnected && currentContainer.contains(target)) {\n    return\n  }\n\n  // Only activate if the focused element is actually interactive\n  if (!isInteractiveElement(target)) {\n    return\n  }\n\n  // Clear any pending debounce\n  if (focusDebounceTimer !== null) {\n    clearTimeout(focusDebounceTimer)\n  }\n\n  // Debounce to reduce work during rapid focus changes (e.g., fast tabbing)\n  focusDebounceTimer = window.setTimeout(() => {\n    focusDebounceTimer = null\n    const container = resolveContainerFromTarget(target)\n    setActiveContainer(container)\n  }, 10)\n}\n\n/**\n * Handle pointer/mouse events - only switch when clicking a different .field-type\n * Performance: Early exit for non-field clicks + 50ms throttling\n */\nconst onPointerDown = (e: PointerEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  // Early exit if clicking within current container\n  if (currentContainer?.isConnected && currentContainer.contains(target)) {\n    return\n  }\n\n  // Performance: Quick check before expensive traversal\n  // If click is nowhere near a field, just clear active state\n  if (!target.closest('.field-type')) {\n    if (currentContainer) {\n      setActiveContainer(null)\n    }\n    return\n  }\n\n  // Throttle to prevent excessive work on rapid clicking\n  if (pointerDownThrottleTimer !== null) {\n    return\n  }\n\n  const container = resolveContainerFromTarget(target)\n  setActiveContainer(container)\n\n  // Set throttle timer for 50ms\n  pointerDownThrottleTimer = window.setTimeout(() => {\n    pointerDownThrottleTimer = null\n  }, 50)\n}\n\n/**\n * Handle keyboard navigation (Tab key)\n */\nconst onKeyDown = (e: KeyboardEvent): void => {\n  if (e.key !== 'Tab') {\n    return\n  }\n\n  // Cancel any pending RAF to prevent queuing\n  if (rafId !== null) {\n    cancelAnimationFrame(rafId)\n  }\n\n  // Defer until after focus has shifted\n  rafId = requestAnimationFrame(() => {\n    rafId = null\n    const container = resolveContainerFromTarget(document.activeElement)\n    setActiveContainer(container)\n  })\n}\n\n/**\n * Handle visibility changes to properly cleanup when page is hidden\n */\nconst onVisibilityChange = (): void => {\n  if (typeof document !== 'undefined' && document.hidden) {\n    // Clear active state and cancel pending operations\n    clearActiveContainer()\n  }\n}\n\n/**\n * Initialize document-level listeners to track the active field container.\n * When a container is active, it receives the 'ai-plugin-active' class.\n */\nexport const useActiveFieldTracking = (): void => {\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return\n    }\n\n    const pluginWindow = window as {\n      __aiComposeTracking?: boolean\n      __aiComposeTrackingController?: AbortController\n      __aiComposeTrackingCount?: number\n    } & Window\n\n    // Track number of mounted users of the hook\n    pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 0) + 1\n\n    // Initialize listeners only once\n    if (!pluginWindow.__aiComposeTracking) {\n      const controller = new AbortController()\n      pluginWindow.__aiComposeTrackingController = controller\n\n      // Use capture for early handling\n      document.addEventListener('focusin', onFocusIn, {\n        capture: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('pointerdown', onPointerDown, {\n        capture: true,\n        passive: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('keydown', onKeyDown, {\n        capture: true,\n        signal: controller.signal,\n      })\n      document.addEventListener('visibilitychange', onVisibilityChange, {\n        signal: controller.signal,\n      })\n\n      pluginWindow.__aiComposeTracking = true\n    }\n\n    return () => {\n      // Decrement and cleanup when the last user unmounts\n      pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 1) - 1\n\n      if ((pluginWindow.__aiComposeTrackingCount ?? 0) <= 0) {\n        // Atomically remove all listeners\n        pluginWindow.__aiComposeTrackingController?.abort()\n        pluginWindow.__aiComposeTrackingController = undefined\n\n        // Clear active state and cancel pending operations\n        clearActiveContainer()\n\n        // Reset all state\n        pluginWindow.__aiComposeTracking = false\n        pluginWindow.__aiComposeTrackingCount = 0\n      }\n    }\n  }, [])\n}\n"],"names":["useEffect","ALLOWED_FIELD_TYPES","containerCache","WeakMap","fieldTypeCache","pointerDownThrottleTimer","focusDebounceTimer","currentContainer","rafId","cssEscape","value","CSS","escape","replace","findContainerFromReactSelect","target","role","getAttribute","includes","listbox","closest","id","selector","control","document","querySelector","isAllowedFieldType","container","has","get","result","some","type","classList","contains","set","resolveContainerFromTarget","HTMLElement","cached","isConnected","delete","setActiveContainer","next","remove","add","clearActiveContainer","cancelAnimationFrame","isInteractiveElement","element","tagName","toLowerCase","interactiveTags","isContentEditable","onFocusIn","e","clearTimeout","window","setTimeout","onPointerDown","onKeyDown","key","requestAnimationFrame","activeElement","onVisibilityChange","hidden","useActiveFieldTracking","pluginWindow","__aiComposeTrackingCount","__aiComposeTracking","controller","AbortController","__aiComposeTrackingController","addEventListener","capture","signal","passive","abort","undefined"],"mappings":"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"}

package/dist/ui/Compose/hooks/useGenerate.d.ts

@@ -7,7 +7,10 @@ export declare const useGenerate: ({ instructionId }: {
     instructionId: string;
 }) => {
     generate: (options?: ActionCallbackParams) => Promise<void | Response>;
+    isJobActive: boolean;
     isLoading: boolean;
+    jobProgress: number;
+    jobStatus: string | undefined;
     stop: () => void;
 };
 export {};

package/dist/ui/Compose/hooks/useGenerate.js

@@ -2,8 +2,8 @@ import { experimental_useObject as useObject } from '@ai-sdk/react';
 import { useEditorConfigContext } from '@payloadcms/richtext-lexical/client';
 import { toast, useConfig, useDocumentInfo, useField, useForm, useLocale } from '@payloadcms/ui';
 import { jsonSchema } from 'ai';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { PLUGIN_API_ENDPOINT_GENERATE, PLUGIN_API_ENDPOINT_GENERATE_UPLOAD, PLUGIN_INSTRUCTIONS_TABLE, PLUGIN_NAME } from '../../../defaults.js';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { PLUGIN_AI_JOBS_TABLE, PLUGIN_API_ENDPOINT_GENERATE, PLUGIN_API_ENDPOINT_GENERATE_UPLOAD, PLUGIN_INSTRUCTIONS_TABLE, PLUGIN_NAME } from '../../../defaults.js';
 import { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js';
 import { editorSchemaValidator } from '../../../utilities/editorSchemaValidator.js';
 import { fieldToJsonSchema } from '../../../utilities/fieldToJsonSchema.js';
@@ -27,10 +27,15 @@ export const useGenerate = ({ instructionId })=>{
         path: pathFromContext ?? ''
     });
     const { set: setHistory } = useHistory();
+    // Async job UI state
+    const [jobStatus, setJobStatus] = useState(undefined);
+    const [jobProgress, setJobProgress] = useState(0);
+    const [isJobActive, setIsJobActive] = useState(false);
     const { getData } = useForm();
     const { id: documentId, collectionSlug } = useDocumentInfo();
     const localFromContext = useLocale();
-    const { config: { collections } } = useConfig();
+    // Reuse config from above instead of calling useConfig again
+    const { collections } = config;
     const collection = collections.find((collection)=>collection.slug === PLUGIN_INSTRUCTIONS_TABLE);
     const { custom: { [PLUGIN_NAME]: { editorConfig = {} } = {} } = {} } = collection?.admin ?? {};
     const { schema: editorSchema = {} } = editorConfig;
@@ -110,7 +115,8 @@ export const useGenerate = ({ instructionId })=>{
     }, [
         object,
         editor,
-        field
+        field,
+        setValue
     ]);
     const streamObject = useCallback(({ action = 'Compose', params })=>{
         const doc = getData();
@@ -154,19 +160,70 @@ export const useGenerate = ({ instructionId })=>{
             method: 'POST'
         }).then(async (uploadResponse)=>{
             if (uploadResponse.ok) {
-                const { result } = await uploadResponse.json();
-                if (!result) {
-                    throw new Error('generateUpload: Something went wrong');
+                const json = await uploadResponse.json();
+                const { job, result } = json || {};
+                if (result) {
+                    // Set the upload ID
+                    setValue(result?.id);
+                    setHistory(result?.id);
+                    // Show toast to prompt user to save
+                    toast.success('Image generated successfully! Click Save to see the preview.');
+                    return uploadResponse;
+                }
+                // Async job: poll AI Jobs collection for status/progress/result_id
+                if (job && job.id) {
+                    setIsJobActive(true);
+                    const cancelled = false;
+                    let attempts = 0;
+                    const maxAttempts = 600 // up to ~10 minutes @ 1s
+                    ;
+                    // Basic in-hook state via closure variables; UI will re-render off fetches below
+                    const poll = async ()=>{
+                        if (cancelled) {
+                            return;
+                        }
+                        try {
+                            const res = await fetch(`${serverURL}${api}/${PLUGIN_AI_JOBS_TABLE}/${job.id}`, {
+                                credentials: 'include'
+                            });
+                            if (res.ok) {
+                                const jobDoc = await res.json();
+                                const { progress, result_id, status } = jobDoc || {};
+                                setJobStatus(status);
+                                setJobProgress(progress ?? 0);
+                                // When result present, set field and finish
+                                if (status === 'completed' && result_id) {
+                                    // Force upload field to refetch by clearing then setting the ID
+                                    setValue(null);
+                                    setTimeout(()=>{
+                                        setValue(result_id);
+                                    }, 0);
+                                    setHistory(result_id);
+                                    setIsJobActive(false);
+                                    return;
+                                }
+                                if (status === 'failed') {
+                                    setIsJobActive(false);
+                                    throw new Error('Video generation failed');
+                                }
+                            }
+                        } catch (e) {
+                        // silent retry
+                        }
+                        attempts += 1;
+                        if (!cancelled && attempts < maxAttempts) {
+                            setTimeout(poll, 1000);
+                        }
+                    };
+                    setTimeout(poll, 1000);
+                    return uploadResponse;
                 }
-                setValue(result?.id);
-                setHistory(result?.id);
-                console.log('Image updated...', result);
+                throw new Error('generateUpload: Unexpected response');
             } else {
                 const { errors = [] } = await uploadResponse.json();
                 const errStr = errors.map((error)=>error.message).join(', ');
                 throw new Error(errStr);
             }
-            return uploadResponse;
         }).catch((error)=>{
             toast.error(`Failed to generate: ${error.message}`);
             console.error('Error generating or setting your upload, please set it manually if its saved in your media files.', error);
@@ -200,7 +257,10 @@ export const useGenerate = ({ instructionId })=>{
     ]);
     return {
         generate,
+        isJobActive,
         isLoading: loadingObject,
+        jobProgress,
+        jobStatus,
         stop
     };
 };

package/dist/ui/Compose/hooks/useGenerate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/Compose/hooks/useGenerate.ts"],"sourcesContent":["import { experimental_useObject as useObject } from '@ai-sdk/react'\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { toast, useConfig, useDocumentInfo, useField, useForm, useLocale } from '@payloadcms/ui'\nimport { jsonSchema } from 'ai'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\n\nimport type { ActionMenuItems, GenerateTextarea } from '../../../types.js'\n\nimport {\n  PLUGIN_API_ENDPOINT_GENERATE,\n  PLUGIN_API_ENDPOINT_GENERATE_UPLOAD,\n  PLUGIN_INSTRUCTIONS_TABLE,\n  PLUGIN_NAME,\n} from '../../../defaults.js'\nimport { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js'\nimport { editorSchemaValidator } from '../../../utilities/editorSchemaValidator.js'\nimport { fieldToJsonSchema } from '../../../utilities/fieldToJsonSchema.js'\nimport { setSafeLexicalState } from '../../../utilities/setSafeLexicalState.js'\nimport { useHistory } from './useHistory.js'\n\ntype ActionCallbackParams = { action: ActionMenuItems; params?: unknown }\n\nexport const useGenerate = ({ instructionId }: { instructionId: string }) => {\n  // Create a ref to hold the current instructionId\n  const instructionIdRef = useRef(instructionId)\n\n  // Update the ref whenever instructionId changes\n  useEffect(() => {\n    instructionIdRef.current = instructionId\n  }, [instructionId])\n\n  const { field, path: pathFromContext } = useFieldProps()\n  const editorConfigContext = useEditorConfigContext()\n\n  const { editor } = editorConfigContext\n\n  const { config } = useConfig()\n  const {\n    routes: { api },\n    serverURL,\n  } = config\n\n  const { setValue } = useField<any>({\n    path: pathFromContext ?? '',\n  })\n\n  const { set: setHistory } = useHistory()\n\n  const { getData } = useForm()\n  const { id: documentId, collectionSlug } = useDocumentInfo()\n\n  const localFromContext = useLocale()\n  const {\n    config: { collections },\n  } = useConfig()\n\n  const collection = collections.find((collection) => collection.slug === PLUGIN_INSTRUCTIONS_TABLE)\n  const { custom: { [PLUGIN_NAME]: { editorConfig = {} } = {} } = {} } = collection?.admin ?? {}\n  const { schema: editorSchema = {} } = editorConfig\n\n  const memoizedValidator = useMemo(() => {\n    return editorSchemaValidator(editorSchema)\n  }, [editorSchema])\n\n  const memoizedSchema = useMemo(\n    () =>\n      jsonSchema(editorSchema, {\n        validate: (value) => {\n          const isValid = memoizedValidator(value)\n\n          if (isValid) {\n            return {\n              success: true,\n              value,\n            }\n          } else {\n            return {\n              error: new Error('Invalid schema'),\n              success: false,\n            }\n          }\n        },\n      }),\n    [memoizedValidator],\n  )\n\n  // Active JSON schema for useObject based on field type\n  const activeSchema = useMemo(() => {\n    const f = field as any\n    const fieldType = f?.type as string | undefined\n    if (fieldType === 'richText') {\n      return memoizedSchema\n    }\n    if (f && f.name && fieldType) {\n      const schemaJson = fieldToJsonSchema(f)\n      if (schemaJson && Object.keys(schemaJson).length > 0) {\n        return jsonSchema(schemaJson)\n      }\n    }\n    return undefined\n  }, [field, memoizedSchema])\n\n  const {\n    isLoading: loadingObject,\n    object,\n    stop: objectStop,\n    submit,\n  } = useObject({\n    api: `/api${PLUGIN_API_ENDPOINT_GENERATE}`,\n    onError: (error: any) => {\n      toast.error(`Failed to generate: ${error.message}`)\n      console.error('Error generating object:', error)\n    },\n    onFinish: (result) => {\n      if (result.object && field) {\n        if (field.type === 'richText') {\n          setHistory(result.object)\n          setValue(result.object)\n        } else if ('name' in field) {\n          setHistory(result.object[field.name])\n          setValue(result.object[field.name])\n        }\n      } else {\n        console.log('onFinish: result, field ', result, field)\n      }\n    },\n    schema: activeSchema as any,\n  })\n\n  useEffect(() => {\n    if (!object) {\n      return\n    }\n\n    requestAnimationFrame(() => {\n      if (field?.type === 'richText') {\n        setSafeLexicalState(object, editor)\n      } else if (field && 'name' in field && object[field.name]) {\n        setValue(object[field.name])\n      }\n    })\n  }, [object, editor, field])\n\n  const streamObject = useCallback(\n    ({ action = 'Compose', params }: ActionCallbackParams) => {\n      const doc = getData()\n\n      const currentInstructionId = instructionIdRef.current\n\n      const options = {\n        action,\n        actionParams: params,\n        instructionId: currentInstructionId,\n      }\n\n      submit({\n        allowedEditorNodes: Array.from(editor?._nodes?.keys() || []),\n        doc: {\n          ...doc,\n          id: documentId,\n        },\n        locale: localFromContext?.code,\n        options,\n      })\n    },\n    [localFromContext?.code, instructionIdRef, documentId],\n  )\n\n  const generateUpload = useCallback(async () => {\n    const doc = getData()\n    const currentInstructionId = instructionIdRef.current\n\n    return fetch(`${serverURL}${api}${PLUGIN_API_ENDPOINT_GENERATE_UPLOAD}`, {\n      body: JSON.stringify({\n        collectionSlug: collectionSlug ?? '',\n        doc,\n        documentId,\n        locale: localFromContext?.code,\n        options: {\n          instructionId: currentInstructionId,\n        },\n      } satisfies Parameters<GenerateTextarea>[0]),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n      .then(async (uploadResponse) => {\n        if (uploadResponse.ok) {\n          const { result } = await uploadResponse.json()\n          if (!result) {\n            throw new Error('generateUpload: Something went wrong')\n          }\n\n          setValue(result?.id)\n          setHistory(result?.id)\n          console.log('Image updated...', result)\n        } else {\n          const { errors = [] } = await uploadResponse.json()\n          const errStr = errors.map((error: any) => error.message).join(', ')\n          throw new Error(errStr)\n        }\n        return uploadResponse\n      })\n      .catch((error) => {\n        toast.error(`Failed to generate: ${error.message}`)\n        console.error(\n          'Error generating or setting your upload, please set it manually if its saved in your media files.',\n          error,\n        )\n      })\n  }, [getData, localFromContext?.code, instructionIdRef, setValue, documentId, collectionSlug])\n\n  const generate = useCallback(\n    async (options?: ActionCallbackParams) => {\n      if ((field as any)?.type === 'upload') {\n        return generateUpload()\n      }\n      // All supported types use structured object generation when schema is provided server-side\n      return streamObject(options ?? { action: 'Compose' })\n    },\n    [generateUpload, streamObject, field],\n  )\n\n  const stop = useCallback(() => {\n    console.log('Stopping...')\n    objectStop()\n  }, [objectStop])\n\n  return {\n    generate,\n    isLoading: loadingObject,\n    stop,\n  }\n}\n"],"names":["experimental_useObject","useObject","useEditorConfigContext","toast","useConfig","useDocumentInfo","useField","useForm","useLocale","jsonSchema","useCallback","useEffect","useMemo","useRef","PLUGIN_API_ENDPOINT_GENERATE","PLUGIN_API_ENDPOINT_GENERATE_UPLOAD","PLUGIN_INSTRUCTIONS_TABLE","PLUGIN_NAME","useFieldProps","editorSchemaValidator","fieldToJsonSchema","setSafeLexicalState","useHistory","useGenerate","instructionId","instructionIdRef","current","field","path","pathFromContext","editorConfigContext","editor","config","routes","api","serverURL","setValue","set","setHistory","getData","id","documentId","collectionSlug","localFromContext","collections","collection","find","slug","custom","editorConfig","admin","schema","editorSchema","memoizedValidator","memoizedSchema","validate","value","isValid","success","error","Error","activeSchema","f","fieldType","type","name","schemaJson","Object","keys","length","undefined","isLoading","loadingObject","object","stop","objectStop","submit","onError","message","console","onFinish","result","log","requestAnimationFrame","streamObject","action","params","doc","currentInstructionId","options","actionParams","allowedEditorNodes","Array","from","_nodes","locale","code","generateUpload","fetch","body","JSON","stringify","credentials","headers","method","then","uploadResponse","ok","json","errors","errStr","map","join","catch","generate"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/ui/Compose/hooks/useGenerate.ts"],"sourcesContent":["import { experimental_useObject as useObject } from '@ai-sdk/react'\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { toast, useConfig, useDocumentInfo, useField, useForm, useLocale } from '@payloadcms/ui'\nimport { jsonSchema } from 'ai'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { ActionMenuItems, GenerateTextarea } from '../../../types.js'\n\nimport {\n  PLUGIN_AI_JOBS_TABLE,\n  PLUGIN_API_ENDPOINT_GENERATE,\n  PLUGIN_API_ENDPOINT_GENERATE_UPLOAD,\n  PLUGIN_INSTRUCTIONS_TABLE,\n  PLUGIN_NAME,\n} from '../../../defaults.js'\nimport { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js'\nimport { editorSchemaValidator } from '../../../utilities/editorSchemaValidator.js'\nimport { fieldToJsonSchema } from '../../../utilities/fieldToJsonSchema.js'\nimport { setSafeLexicalState } from '../../../utilities/setSafeLexicalState.js'\nimport { useHistory } from './useHistory.js'\n\ntype ActionCallbackParams = { action: ActionMenuItems; params?: unknown }\n\nexport const useGenerate = ({ instructionId }: { instructionId: string }) => {\n  // Create a ref to hold the current instructionId\n  const instructionIdRef = useRef(instructionId)\n\n  // Update the ref whenever instructionId changes\n  useEffect(() => {\n    instructionIdRef.current = instructionId\n  }, [instructionId])\n\n  const { field, path: pathFromContext } = useFieldProps()\n  const editorConfigContext = useEditorConfigContext()\n\n  const { editor } = editorConfigContext\n\n  const { config } = useConfig()\n  const {\n    routes: { api },\n    serverURL,\n  } = config\n\n  const { setValue } = useField<any>({\n    path: pathFromContext ?? '',\n  })\n\n  const { set: setHistory } = useHistory()\n\n  // Async job UI state\n  const [jobStatus, setJobStatus] = useState<string | undefined>(undefined)\n  const [jobProgress, setJobProgress] = useState<number>(0)\n  const [isJobActive, setIsJobActive] = useState<boolean>(false)\n\n  const { getData } = useForm()\n  const { id: documentId, collectionSlug } = useDocumentInfo()\n\n  const localFromContext = useLocale()\n  \n  // Reuse config from above instead of calling useConfig again\n  const { collections } = config\n\n  const collection = collections.find((collection) => collection.slug === PLUGIN_INSTRUCTIONS_TABLE)\n  const { custom: { [PLUGIN_NAME]: { editorConfig = {} } = {} } = {} } = collection?.admin ?? {}\n  const { schema: editorSchema = {} } = editorConfig\n\n  const memoizedValidator = useMemo(() => {\n    return editorSchemaValidator(editorSchema)\n  }, [editorSchema])\n\n  const memoizedSchema = useMemo(\n    () =>\n      jsonSchema(editorSchema, {\n        validate: (value) => {\n          const isValid = memoizedValidator(value)\n\n          if (isValid) {\n            return {\n              success: true,\n              value,\n            }\n          } else {\n            return {\n              error: new Error('Invalid schema'),\n              success: false,\n            }\n          }\n        },\n      }),\n    [memoizedValidator],\n  )\n\n  // Active JSON schema for useObject based on field type\n  const activeSchema = useMemo(() => {\n    const f = field as any\n    const fieldType = f?.type as string | undefined\n    if (fieldType === 'richText') {\n      return memoizedSchema\n    }\n    if (f && f.name && fieldType) {\n      const schemaJson = fieldToJsonSchema(f)\n      if (schemaJson && Object.keys(schemaJson).length > 0) {\n        return jsonSchema(schemaJson)\n      }\n    }\n    return undefined\n  }, [field, memoizedSchema])\n\n  const {\n    isLoading: loadingObject,\n    object,\n    stop: objectStop,\n    submit,\n  } = useObject({\n    api: `/api${PLUGIN_API_ENDPOINT_GENERATE}`,\n    onError: (error: any) => {\n      toast.error(`Failed to generate: ${error.message}`)\n      console.error('Error generating object:', error)\n    },\n    onFinish: (result) => {\n      if (result.object && field) {\n        if (field.type === 'richText') {\n          setHistory(result.object)\n          setValue(result.object)\n        } else if ('name' in field) {\n          setHistory(result.object[field.name])\n          setValue(result.object[field.name])\n        }\n      } else {\n        console.log('onFinish: result, field ', result, field)\n      }\n    },\n    schema: activeSchema as any,\n  })\n\n  useEffect(() => {\n    if (!object) {\n      return\n    }\n\n    requestAnimationFrame(() => {\n      if (field?.type === 'richText') {\n      setSafeLexicalState(object, editor)\n      } else if (field && 'name' in field && object[field.name]) {\n        setValue(object[field.name])\n      }\n    })\n  }, [object, editor, field, setValue])\n\n  const streamObject = useCallback(\n    ({ action = 'Compose', params }: ActionCallbackParams) => {\n      const doc = getData()\n\n      const currentInstructionId = instructionIdRef.current\n\n      const options = {\n        action,\n        actionParams: params,\n        instructionId: currentInstructionId,\n      }\n\n      submit({\n        allowedEditorNodes: Array.from(editor?._nodes?.keys() || []),\n        doc: {\n          ...doc,\n          id: documentId,\n        },\n        locale: localFromContext?.code,\n        options,\n      })\n    },\n    [localFromContext?.code, instructionIdRef, documentId],\n  )\n\n  const generateUpload = useCallback(async () => {\n    const doc = getData()\n    const currentInstructionId = instructionIdRef.current\n\n    return fetch(`${serverURL}${api}${PLUGIN_API_ENDPOINT_GENERATE_UPLOAD}`, {\n      body: JSON.stringify({\n        collectionSlug: collectionSlug ?? '',\n        doc,\n        documentId,\n        locale: localFromContext?.code,\n        options: {\n          instructionId: currentInstructionId,\n        },\n      } satisfies Parameters<GenerateTextarea>[0]),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n      .then(async (uploadResponse) => {\n        if (uploadResponse.ok) {\n          const json = await uploadResponse.json()\n          const { job, result } = json || {}\n          if (result) {\n            // Set the upload ID\n            setValue(result?.id)\n            setHistory(result?.id)\n            \n            // Show toast to prompt user to save\n            toast.success('Image generated successfully! Click Save to see the preview.')\n            \n            return uploadResponse\n          }\n\n          // Async job: poll AI Jobs collection for status/progress/result_id\n          if (job && job.id) {\n            setIsJobActive(true)\n            const cancelled = false\n            let attempts = 0\n            const maxAttempts = 600 // up to ~10 minutes @ 1s\n\n            // Basic in-hook state via closure variables; UI will re-render off fetches below\n            const poll = async (): Promise<void> => {\n              if (cancelled) {\n                return\n              }\n              try {\n                const res = await fetch(\n                  `${serverURL}${api}/${PLUGIN_AI_JOBS_TABLE}/${job.id}`,\n                  { credentials: 'include' },\n                )\n                if (res.ok) {\n                  const jobDoc = await res.json()\n                  const { progress, result_id, status } = jobDoc || {}\n                  setJobStatus(status)\n                  setJobProgress(progress ?? 0)\n                  // When result present, set field and finish\n                  if (status === 'completed' && result_id) {\n                    // Force upload field to refetch by clearing then setting the ID\n                    setValue(null)\n                    setTimeout(() => {\n                      setValue(result_id)\n                    }, 0)\n                    setHistory(result_id)\n                    setIsJobActive(false)\n                    return\n                  }\n                  if (status === 'failed') {\n                    setIsJobActive(false)\n                    throw new Error('Video generation failed')\n                  }\n                }\n              } catch (e) {\n                // silent retry\n              }\n\n              attempts += 1\n              if (!cancelled && attempts < maxAttempts) {\n                setTimeout(poll, 1000)\n              }\n            }\n            setTimeout(poll, 1000)\n            return uploadResponse\n          }\n\n          throw new Error('generateUpload: Unexpected response')\n        } else {\n          const { errors = [] } = await uploadResponse.json()\n          const errStr = errors.map((error: any) => error.message).join(', ')\n          throw new Error(errStr)\n        }\n      })\n      .catch((error) => {\n        toast.error(`Failed to generate: ${error.message}`)\n        console.error(\n          'Error generating or setting your upload, please set it manually if its saved in your media files.',\n          error,\n        )\n      })\n  }, [getData, localFromContext?.code, instructionIdRef, setValue, documentId, collectionSlug])\n\n  const generate = useCallback(\n    async (options?: ActionCallbackParams) => {\n      if ((field as any)?.type === 'upload') {\n        return generateUpload()\n      }\n      // All supported types use structured object generation when schema is provided server-side\n      return streamObject(options ?? { action: 'Compose' })\n    },\n    [generateUpload, streamObject, field],\n  )\n\n  const stop = useCallback(() => {\n    console.log('Stopping...')\n    objectStop()\n  }, [objectStop])\n\n  return {\n    generate,\n    isJobActive,\n    isLoading: loadingObject,\n    jobProgress,\n    jobStatus,\n    stop,\n  }\n}\n"],"names":["experimental_useObject","useObject","useEditorConfigContext","toast","useConfig","useDocumentInfo","useField","useForm","useLocale","jsonSchema","useCallback","useEffect","useMemo","useRef","useState","PLUGIN_AI_JOBS_TABLE","PLUGIN_API_ENDPOINT_GENERATE","PLUGIN_API_ENDPOINT_GENERATE_UPLOAD","PLUGIN_INSTRUCTIONS_TABLE","PLUGIN_NAME","useFieldProps","editorSchemaValidator","fieldToJsonSchema","setSafeLexicalState","useHistory","useGenerate","instructionId","instructionIdRef","current","field","path","pathFromContext","editorConfigContext","editor","config","routes","api","serverURL","setValue","set","setHistory","jobStatus","setJobStatus","undefined","jobProgress","setJobProgress","isJobActive","setIsJobActive","getData","id","documentId","collectionSlug","localFromContext","collections","collection","find","slug","custom","editorConfig","admin","schema","editorSchema","memoizedValidator","memoizedSchema","validate","value","isValid","success","error","Error","activeSchema","f","fieldType","type","name","schemaJson","Object","keys","length","isLoading","loadingObject","object","stop","objectStop","submit","onError","message","console","onFinish","result","log","requestAnimationFrame","streamObject","action","params","doc","currentInstructionId","options","actionParams","allowedEditorNodes","Array","from","_nodes","locale","code","generateUpload","fetch","body","JSON","stringify","credentials","headers","method","then","uploadResponse","ok","json","job","cancelled","attempts","maxAttempts","poll","res","jobDoc","progress","result_id","status","setTimeout","e","errors","errStr","map","join","catch","generate"],"mappings":"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"}

package/dist/ui/Compose/hooks/useHistory.d.ts

@@ -1,7 +1,6 @@
 export declare const useHistory: () => {
     canRedo: boolean;
     canUndo: boolean;
-    currentValue: any;
     redo: () => any;
     set: (data: any) => any;
     undo: () => any;

package/dist/ui/Compose/hooks/useHistory.js

@@ -1,21 +1,29 @@
 'use client';
-import { useDocumentInfo, useField } from '@payloadcms/ui';
-import { useCallback, useEffect } from 'react';
+import { useDocumentInfo, useForm } from '@payloadcms/ui';
+import { useCallback, useEffect, useRef } from 'react';
+import { getSiblingData } from 'payload/shared';
 import { PLUGIN_NAME } from '../../../defaults.js';
 import { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js';
 const STORAGE_KEY = `${PLUGIN_NAME}-fields-history`;
+const MAX_HISTORY_SIZE = 50;
+// Global cache to prevent synchronous localStorage reads on every render
+let globalHistoryCache = null;
 export const useHistory = ()=>{
     const { id } = useDocumentInfo();
-    const { path: pathFromContext, schemaPath } = useFieldProps();
-    const { value: currentFieldValue } = useField({
-        path: pathFromContext ?? ''
-    });
+    const { path, schemaPath } = useFieldProps();
+    const { getData } = useForm();
     const fieldKey = `${id}.${schemaPath}`;
     const getLatestHistory = useCallback(()=>{
+        // Return cache if available
+        if (globalHistoryCache) {
+            return globalHistoryCache;
+        }
         try {
-            // This condition is applied, as it was somehow triggering on server side
             if (typeof localStorage !== 'undefined') {
-                return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+                // Read once, cache it
+                const stored = localStorage.getItem(STORAGE_KEY);
+                globalHistoryCache = stored ? JSON.parse(stored) : {};
+                return globalHistoryCache;
             }
             return {};
         } catch (e) {
@@ -23,25 +31,75 @@ export const useHistory = ()=>{
             return {};
         }
     }, []);
+    // Debounce timer ref to prevent excessive localStorage writes
+    const saveTimerRef = useRef(null);
     const saveToLocalStorage = useCallback((newGlobalHistory)=>{
-        if (typeof localStorage !== 'undefined') {
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(newGlobalHistory));
+        // Update cache immediately
+        globalHistoryCache = newGlobalHistory;
+        if (typeof localStorage === 'undefined') {
+            return;
+        }
+        // Clear any pending save
+        if (saveTimerRef.current) {
+            clearTimeout(saveTimerRef.current);
         }
+        // Debounce the save operation by 500ms
+        saveTimerRef.current = setTimeout(()=>{
+            // Use requestIdleCallback if available to avoid blocking the main thread
+            if (typeof requestIdleCallback !== 'undefined') {
+                requestIdleCallback(()=>{
+                    try {
+                        localStorage.setItem(STORAGE_KEY, JSON.stringify(newGlobalHistory));
+                    } catch (e) {
+                        console.warn('Failed to save history to localStorage', e);
+                    }
+                }, {
+                    timeout: 2000
+                });
+            } else {
+                // Fallback for browsers without requestIdleCallback
+                try {
+                    localStorage.setItem(STORAGE_KEY, JSON.stringify(newGlobalHistory));
+                } catch (e) {
+                    console.warn('Failed to save history to localStorage', e);
+                }
+            }
+            saveTimerRef.current = null;
+        }, 500);
+    }, []);
+    // Sync with other tabs
+    useEffect(()=>{
+        const handleStorageChange = (e)=>{
+            if (e.key === STORAGE_KEY && e.newValue) {
+                try {
+                    globalHistoryCache = JSON.parse(e.newValue);
+                } catch (err) {
+                // ignore parse error
+                }
+            }
+        };
+        window.addEventListener('storage', handleStorageChange);
+        return ()=>{
+            window.removeEventListener('storage', handleStorageChange);
+        };
     }, []);
     // Clear previous history
     const clearHistory = useCallback(()=>{
         const latestHistory = {
             ...getLatestHistory()
         };
+        let hasChanges = false;
         Object.keys(latestHistory).forEach((k)=>{
             if (!k.startsWith(id?.toString() ?? '')) {
                 delete latestHistory[k];
+                hasChanges = true;
             }
         });
-        saveToLocalStorage(latestHistory);
+        if (hasChanges) {
+            saveToLocalStorage(latestHistory);
+        }
     }, [
         id,
-        fieldKey,
         getLatestHistory,
         saveToLocalStorage
     ]);
@@ -54,22 +112,46 @@ export const useHistory = ()=>{
             history: []
         };
         let newIndex = currentIndex;
+        let historyUpdated = false;
+        const newHistoryArray = [
+            ...history
+        ];
         if (currentIndex == -1) {
             newIndex = 0;
-            if (currentFieldValue) {
-                history[newIndex] = currentFieldValue;
+            // Get initial value from form data instead of subscribing to useField
+            // This implementation avoids re-rendering on every keystroke
+            try {
+                const data = getData();
+                // We need to resolve the value from the data object using the path
+                // path might be 'group.subgroup.field'
+                if (path) {
+                    const value = getSiblingData(data, path);
+                    if (value) {
+                        newHistoryArray[newIndex] = value;
+                        historyUpdated = true;
+                    }
+                }
+            } catch (e) {
+            // If we can't get the data, just ignore
             }
         }
-        const newGlobalHistory = {
-            ...latestHistory,
-            [fieldKey]: {
-                currentIndex: newIndex,
-                history
-            }
-        };
-        saveToLocalStorage(newGlobalHistory);
+        if (historyUpdated) {
+            const newGlobalHistory = {
+                ...latestHistory,
+                [fieldKey]: {
+                    currentIndex: newIndex,
+                    history: newHistoryArray
+                }
+            };
+            saveToLocalStorage(newGlobalHistory);
+        }
     }, [
-        fieldKey
+        fieldKey,
+        getData,
+        path,
+        clearHistory,
+        getLatestHistory,
+        saveToLocalStorage
     ]);
     const set = useCallback((data)=>{
         const latestHistory = getLatestHistory();
@@ -77,10 +159,15 @@ export const useHistory = ()=>{
             currentIndex: -1,
             history: []
         };
-        const newHistory = [
+        // Create new history array slice, appending new data
+        let newHistory = [
             ...history.slice(0, currentIndex + 1),
             data
         ];
+        // Enforce Max History Size
+        if (newHistory.length > MAX_HISTORY_SIZE) {
+            newHistory = newHistory.slice(newHistory.length - MAX_HISTORY_SIZE);
+        }
         const newGlobalHistory = {
             ...latestHistory,
             [fieldKey]: {
@@ -158,11 +245,11 @@ export const useHistory = ()=>{
     const fieldHistory = getLatestFieldHistory();
     const canUndo = fieldHistory.currentIndex > 0;
     const canRedo = fieldHistory.currentIndex < fieldHistory.history.length - 1;
-    const currentValue = fieldHistory.history[fieldHistory.currentIndex];
+    // Note: We deliberately do not return currentValue to avoid subscription re-renders
+    // The consumers of this hook (UndoRedoActions) didn't use it anyway.
     return {
         canRedo,
         canUndo,
-        currentValue,
         redo,
         set,
         undo