@payloadcms/next 3.0.0-canary.867cc07 → 3.0.0-canary.893f1e5

package/dist/views/LivePreview/index.client.js

@@ -1,195 +1,366 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DocumentControls, DocumentFields, Form, OperationProvider, SetViewActions, useAuth, useComponentMap, useConfig, useDocumentEvents, useDocumentInfo, useTranslation } from '@payloadcms/ui';
-import { getFormState } from '@payloadcms/ui/shared';
-import React, { Fragment, useCallback } from 'react';
-import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving/index.js';
-import { SetDocumentStepNav } from '../Edit/Default/SetDocumentStepNav/index.js';
-import { SetDocumentTitle } from '../Edit/Default/SetDocumentTitle/index.js';
+import { DocumentControls, DocumentFields, DocumentLocked, DocumentTakeOver, Form, LeaveWithoutSaving, OperationProvider, SetDocumentStepNav, SetDocumentTitle, useAuth, useConfig, useDocumentDrawerContext, useDocumentEvents, useDocumentInfo, useServerFunctions, useTranslation } from '@payloadcms/ui';
+import { abortAndIgnore, handleBackToDashboard, handleGoBack, handleTakeOver } from '@payloadcms/ui/shared';
+import { useRouter } from 'next/navigation.js';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { useLivePreviewContext } from './Context/context.js';
 import { LivePreviewProvider } from './Context/index.js';
 import { LivePreview } from './Preview/index.js';
 import { usePopupWindow } from './usePopupWindow.js';
 const baseClass = 'live-preview';
-const PreviewView = ({ apiRoute, collectionConfig, config, fieldMap, globalConfig, schemaPath, serverURL })=>{
-    const { id, AfterDocument, AfterFields, BeforeDocument, BeforeFields, action, apiURL, collectionSlug, disableActions, disableLeaveWithoutSaving, docPermissions, getDocPreferences, globalSlug, hasPublishPermission, hasSavePermission, initialData, initialState, isEditing, isInitializing, onSave: onSaveFromProps } = useDocumentInfo();
-    const operation = id ? 'update' : 'create';
-    const { admin: { user: userSlug } } = useConfig();
-    const { t } = useTranslation();
-    const { previewWindowType } = useLivePreviewContext();
-    const { refreshCookieAsync, user } = useAuth();
-    const { reportUpdate } = useDocumentEvents();
-    const onSave = useCallback((json)=>{
-        reportUpdate({
-            id,
-            entitySlug: collectionSlug,
-            updatedAt: json?.result?.updatedAt || new Date().toISOString()
-        });
-        // If we're editing the doc of the logged-in user,
-        // Refresh the cookie to get new permissions
-        if (user && collectionSlug === userSlug && id === user.id) {
-            void refreshCookieAsync();
+const PreviewView = ({
+  collectionConfig,
+  config,
+  fields,
+  globalConfig,
+  schemaPath
+}) => {
+  const {
+    id,
+    action,
+    AfterDocument,
+    AfterFields,
+    apiURL,
+    BeforeFields,
+    collectionSlug,
+    currentEditor,
+    disableActions,
+    disableLeaveWithoutSaving,
+    docPermissions,
+    documentIsLocked,
+    getDocPreferences,
+    globalSlug,
+    hasPublishPermission,
+    hasSavePermission,
+    initialData,
+    initialState,
+    isEditing,
+    isInitializing,
+    lastUpdateTime,
+    setCurrentEditor,
+    setDocumentIsLocked,
+    unlockDocument,
+    updateDocumentEditor
+  } = useDocumentInfo();
+  const {
+    getFormState
+  } = useServerFunctions();
+  const {
+    onSave: onSaveFromProps
+  } = useDocumentDrawerContext();
+  const operation = id ? 'update' : 'create';
+  const {
+    config: {
+      admin: {
+        user: userSlug
+      },
+      routes: {
+        admin: adminRoute
+      }
+    }
+  } = useConfig();
+  const router = useRouter();
+  const {
+    t
+  } = useTranslation();
+  const {
+    previewWindowType
+  } = useLivePreviewContext();
+  const {
+    refreshCookieAsync,
+    user
+  } = useAuth();
+  const {
+    reportUpdate
+  } = useDocumentEvents();
+  const docConfig = collectionConfig || globalConfig;
+  const lockDocumentsProp = docConfig?.lockDocuments !== undefined ? docConfig?.lockDocuments : true;
+  const isLockingEnabled = lockDocumentsProp !== false;
+  const lockDurationDefault = 300 // Default 5 minutes in seconds
+  ;
+  const lockDuration = typeof lockDocumentsProp === 'object' ? lockDocumentsProp.duration : lockDurationDefault;
+  const lockDurationInMilliseconds = lockDuration * 1000;
+  const [isReadOnlyForIncomingUser, setIsReadOnlyForIncomingUser] = useState(false);
+  const [showTakeOverModal, setShowTakeOverModal] = useState(false);
+  const formStateAbortControllerRef = useRef(new AbortController());
+  const [editSessionStartTime, setEditSessionStartTime] = useState(Date.now());
+  const lockExpiryTime = lastUpdateTime + lockDurationInMilliseconds;
+  const isLockExpired = Date.now() > lockExpiryTime;
+  const documentLockStateRef = useRef({
+    hasShownLockedModal: false,
+    isLocked: false,
+    user: null
+  });
+  const onSave = useCallback(json => {
+    reportUpdate({
+      id,
+      entitySlug: collectionSlug,
+      updatedAt: json?.result?.updatedAt || new Date().toISOString()
+    });
+    // If we're editing the doc of the logged-in user,
+    // Refresh the cookie to get new permissions
+    if (user && collectionSlug === userSlug && id === user.id) {
+      void refreshCookieAsync();
+    }
+    // Unlock the document after save
+    if ((id || globalSlug) && isLockingEnabled) {
+      setDocumentIsLocked(false);
+    }
+    if (typeof onSaveFromProps === 'function') {
+      void onSaveFromProps({
+        ...json,
+        operation: id ? 'update' : 'create'
+      });
+    }
+  }, [collectionSlug, globalSlug, id, isLockingEnabled, onSaveFromProps, refreshCookieAsync, reportUpdate, setDocumentIsLocked, user, userSlug]);
+  const onChange = useCallback(async ({
+    formState: prevFormState
+  }) => {
+    abortAndIgnore(formStateAbortControllerRef.current);
+    const controller = new AbortController();
+    formStateAbortControllerRef.current = controller;
+    const currentTime = Date.now();
+    const timeSinceLastUpdate = currentTime - editSessionStartTime;
+    const updateLastEdited = isLockingEnabled && timeSinceLastUpdate >= 10000 // 10 seconds
+    ;
+    if (updateLastEdited) {
+      setEditSessionStartTime(currentTime);
+    }
+    const docPreferences = await getDocPreferences();
+    const {
+      lockedState,
+      state
+    } = await getFormState({
+      id,
+      collectionSlug,
+      docPermissions,
+      docPreferences,
+      formState: prevFormState,
+      globalSlug,
+      operation,
+      returnLockStatus: isLockingEnabled ? true : false,
+      schemaPath,
+      signal: controller.signal,
+      updateLastEdited
+    });
+    setDocumentIsLocked(true);
+    if (isLockingEnabled) {
+      const previousOwnerId = typeof documentLockStateRef.current?.user === 'object' ? documentLockStateRef.current?.user?.id : documentLockStateRef.current?.user;
+      if (lockedState) {
+        const lockedUserID = typeof lockedState.user === 'string' || typeof lockedState.user === 'number' ? lockedState.user : lockedState.user.id;
+        if (!documentLockStateRef.current || lockedUserID !== previousOwnerId) {
+          if (previousOwnerId === user.id && lockedUserID !== user.id) {
+            setShowTakeOverModal(true);
+            documentLockStateRef.current.hasShownLockedModal = true;
+          }
+          documentLockStateRef.current = documentLockStateRef.current = {
+            hasShownLockedModal: documentLockStateRef.current?.hasShownLockedModal || false,
+            isLocked: true,
+            user: lockedState.user
+          };
+          setCurrentEditor(lockedState.user);
         }
-        if (typeof onSaveFromProps === 'function') {
-            void onSaveFromProps({
-                ...json,
-                operation: id ? 'update' : 'create'
-            });
+      }
+    }
+    return state;
+  }, [editSessionStartTime, isLockingEnabled, getDocPreferences, getFormState, id, collectionSlug, docPermissions, globalSlug, operation, schemaPath, setDocumentIsLocked, user.id, setCurrentEditor]);
+  // Clean up when the component unmounts or when the document is unlocked
+  useEffect(() => {
+    return () => {
+      if (!isLockingEnabled) {
+        return;
+      }
+      const currentPath = window.location.pathname;
+      const documentId = id || globalSlug;
+      // Routes where we do NOT want to unlock the document
+      const stayWithinDocumentPaths = ['preview', 'api', 'versions'];
+      const isStayingWithinDocument = stayWithinDocumentPaths.some(path => currentPath.includes(path));
+      // Unlock the document only if we're actually navigating away from the document
+      if (documentId && documentIsLocked && !isStayingWithinDocument) {
+        // Check if this user is still the current editor
+        if (typeof documentLockStateRef.current?.user === 'object' ? documentLockStateRef.current?.user?.id === user?.id : documentLockStateRef.current?.user === user?.id) {
+          void unlockDocument(id, collectionSlug ?? globalSlug);
+          setDocumentIsLocked(false);
+          setCurrentEditor(null);
         }
-    }, [
-        collectionSlug,
-        id,
-        onSaveFromProps,
-        refreshCookieAsync,
-        reportUpdate,
-        user,
-        userSlug
-    ]);
-    const onChange = useCallback(async ({ formState: prevFormState })=>{
-        const docPreferences = await getDocPreferences();
-        return getFormState({
-            apiRoute,
-            body: {
-                id,
-                docPreferences,
-                formState: prevFormState,
-                operation,
-                schemaPath
-            },
-            serverURL
-        });
-    }, [
-        serverURL,
-        apiRoute,
-        id,
-        operation,
-        schemaPath,
-        getDocPreferences
-    ]);
-    return /*#__PURE__*/ _jsx(Fragment, {
-        children: /*#__PURE__*/ _jsx(OperationProvider, {
-            operation: operation,
-            children: /*#__PURE__*/ _jsxs(Form, {
-                action: action,
-                className: `${baseClass}__form`,
-                disabled: !hasSavePermission,
-                initialState: initialState,
-                isInitializing: isInitializing,
-                method: id ? 'PATCH' : 'POST',
-                onChange: [
-                    onChange
-                ],
-                onSuccess: onSave,
-                children: [
-                    (collectionConfig && !(collectionConfig.versions?.drafts && collectionConfig.versions?.drafts?.autosave) || globalConfig && !(globalConfig.versions?.drafts && globalConfig.versions?.drafts?.autosave)) && !disableLeaveWithoutSaving && /*#__PURE__*/ _jsx(LeaveWithoutSaving, {}),
-                    /*#__PURE__*/ _jsx(SetDocumentStepNav, {
-                        collectionSlug: collectionSlug,
-                        globalLabel: globalConfig?.label,
-                        globalSlug: globalSlug,
-                        id: id,
-                        pluralLabel: collectionConfig ? collectionConfig?.labels?.plural : undefined,
-                        useAsTitle: collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined,
-                        view: t('general:livePreview')
-                    }),
-                    /*#__PURE__*/ _jsx(SetDocumentTitle, {
-                        collectionConfig: collectionConfig,
-                        config: config,
-                        fallback: id?.toString() || '',
-                        globalConfig: globalConfig
-                    }),
-                    /*#__PURE__*/ _jsx(DocumentControls, {
-                        apiURL: apiURL,
-                        data: initialData,
-                        disableActions: disableActions,
-                        hasPublishPermission: hasPublishPermission,
-                        hasSavePermission: hasSavePermission,
-                        id: id,
-                        isEditing: isEditing,
-                        permissions: docPermissions,
-                        slug: collectionConfig?.slug || globalConfig?.slug
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: [
-                            baseClass,
-                            previewWindowType === 'popup' && `${baseClass}--detached`
-                        ].filter(Boolean).join(' '),
-                        children: [
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: [
-                                    `${baseClass}__main`,
-                                    previewWindowType === 'popup' && `${baseClass}__main--popup-open`
-                                ].filter(Boolean).join(' '),
-                                children: [
-                                    BeforeDocument,
-                                    /*#__PURE__*/ _jsx(DocumentFields, {
-                                        AfterFields: AfterFields,
-                                        BeforeFields: BeforeFields,
-                                        docPermissions: docPermissions,
-                                        fieldMap: fieldMap,
-                                        forceSidebarWrap: true,
-                                        readOnly: !hasSavePermission,
-                                        schemaPath: collectionSlug || globalSlug
-                                    }),
-                                    AfterDocument
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(LivePreview, {
-                                collectionSlug: collectionSlug,
-                                globalSlug: globalSlug
-                            })
-                        ]
-                    })
-                ]
-            })
-        })
-    });
+      }
+      setShowTakeOverModal(false);
+    };
+  }, [collectionSlug, globalSlug, id, unlockDocument, user, setCurrentEditor, isLockingEnabled, documentIsLocked, setDocumentIsLocked]);
+  useEffect(() => {
+    return () => {
+      abortAndIgnore(formStateAbortControllerRef.current);
+    };
+  });
+  const shouldShowDocumentLockedModal = documentIsLocked && currentEditor && (typeof currentEditor === 'object' ? currentEditor.id !== user?.id : currentEditor !== user?.id) && !isReadOnlyForIncomingUser && !showTakeOverModal &&
+  // eslint-disable-next-line react-compiler/react-compiler
+  !documentLockStateRef.current?.hasShownLockedModal && !isLockExpired;
+  return /*#__PURE__*/_jsx(OperationProvider, {
+    operation: operation,
+    children: /*#__PURE__*/_jsxs(Form, {
+      action: action,
+      className: `${baseClass}__form`,
+      disabled: isReadOnlyForIncomingUser || !hasSavePermission,
+      initialState: initialState,
+      isInitializing: isInitializing,
+      method: id ? 'PATCH' : 'POST',
+      onChange: [onChange],
+      onSuccess: onSave,
+      children: [isLockingEnabled && shouldShowDocumentLockedModal && !isReadOnlyForIncomingUser && /*#__PURE__*/_jsx(DocumentLocked, {
+        handleGoBack: () => handleGoBack({
+          adminRoute,
+          collectionSlug,
+          router
+        }),
+        isActive: shouldShowDocumentLockedModal,
+        onReadOnly: () => {
+          setIsReadOnlyForIncomingUser(true);
+          setShowTakeOverModal(false);
+        },
+        onTakeOver: () => handleTakeOver(id, collectionSlug, globalSlug, user, false, updateDocumentEditor, setCurrentEditor, documentLockStateRef, isLockingEnabled),
+        updatedAt: lastUpdateTime,
+        user: currentEditor
+      }), isLockingEnabled && showTakeOverModal && /*#__PURE__*/_jsx(DocumentTakeOver, {
+        handleBackToDashboard: () => handleBackToDashboard({
+          adminRoute,
+          router
+        }),
+        isActive: showTakeOverModal,
+        onReadOnly: () => {
+          setIsReadOnlyForIncomingUser(true);
+          setShowTakeOverModal(false);
+        }
+      }), (collectionConfig && !(collectionConfig.versions?.drafts && collectionConfig.versions?.drafts?.autosave) || globalConfig && !(globalConfig.versions?.drafts && globalConfig.versions?.drafts?.autosave)) && !disableLeaveWithoutSaving && !isReadOnlyForIncomingUser && /*#__PURE__*/_jsx(LeaveWithoutSaving, {}), /*#__PURE__*/_jsx(SetDocumentStepNav, {
+        collectionSlug: collectionSlug,
+        globalLabel: globalConfig?.label,
+        globalSlug: globalSlug,
+        id: id,
+        pluralLabel: collectionConfig ? collectionConfig?.labels?.plural : undefined,
+        useAsTitle: collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined,
+        view: t('general:livePreview')
+      }), /*#__PURE__*/_jsx(SetDocumentTitle, {
+        collectionConfig: collectionConfig,
+        config: config,
+        fallback: id?.toString() || '',
+        globalConfig: globalConfig
+      }), /*#__PURE__*/_jsx(DocumentControls, {
+        apiURL: apiURL,
+        data: initialData,
+        disableActions: disableActions,
+        hasPublishPermission: hasPublishPermission,
+        hasSavePermission: hasSavePermission,
+        id: id,
+        isEditing: isEditing,
+        onTakeOver: () => handleTakeOver(id, collectionSlug, globalSlug, user, true, updateDocumentEditor, setCurrentEditor, documentLockStateRef, isLockingEnabled, setIsReadOnlyForIncomingUser),
+        permissions: docPermissions,
+        readOnlyForIncomingUser: isReadOnlyForIncomingUser,
+        slug: collectionConfig?.slug || globalConfig?.slug,
+        user: currentEditor
+      }), /*#__PURE__*/_jsxs("div", {
+        className: [baseClass, previewWindowType === 'popup' && `${baseClass}--detached`].filter(Boolean).join(' '),
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: [`${baseClass}__main`, previewWindowType === 'popup' && `${baseClass}__main--popup-open`].filter(Boolean).join(' '),
+          children: [/*#__PURE__*/_jsx(DocumentFields, {
+            AfterFields: AfterFields,
+            BeforeFields: BeforeFields,
+            docPermissions: docPermissions,
+            fields: fields,
+            forceSidebarWrap: true,
+            readOnly: isReadOnlyForIncomingUser || !hasSavePermission,
+            schemaPathSegments: [collectionSlug || globalSlug]
+          }), AfterDocument]
+        }), /*#__PURE__*/_jsx(LivePreview, {
+          collectionSlug: collectionSlug,
+          globalSlug: globalSlug
+        })]
+      })]
+    })
+  });
 };
-export const LivePreviewClient = (props)=>{
-    const { breakpoints, url } = props;
-    const { collectionSlug, globalSlug } = useDocumentInfo();
-    const config = useConfig();
-    const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({
-        eventType: 'payload-live-preview',
-        url
+export const LivePreviewClient = props => {
+  const $ = _c(14);
+  const {
+    breakpoints,
+    url
+  } = props;
+  const {
+    collectionSlug,
+    globalSlug
+  } = useDocumentInfo();
+  const {
+    config,
+    config: t0,
+    getEntityConfig
+  } = useConfig();
+  const {
+    routes: t1,
+    serverURL
+  } = t0;
+  const {
+    api: apiRoute
+  } = t1;
+  let t2;
+  if ($[0] !== url) {
+    t2 = {
+      eventType: "payload-live-preview",
+      url
+    };
+    $[0] = url;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const {
+    isPopupOpen,
+    openPopupWindow,
+    popupRef
+  } = usePopupWindow(t2);
+  let t3;
+  if ($[2] !== collectionSlug || $[3] !== getEntityConfig || $[4] !== globalSlug || $[5] !== apiRoute || $[6] !== config || $[7] !== serverURL || $[8] !== breakpoints || $[9] !== isPopupOpen || $[10] !== openPopupWindow || $[11] !== popupRef || $[12] !== url) {
+    const collectionConfig = getEntityConfig({
+      collectionSlug
     });
-    const { collections, globals, routes: { api: apiRoute }, serverURL } = config;
-    const collectionConfig = collectionSlug && collections.find((collection)=>collection.slug === collectionSlug);
-    const globalConfig = globalSlug && globals.find((global)=>global.slug === globalSlug);
-    const schemaPath = collectionSlug || globalSlug;
-    const { getComponentMap } = useComponentMap();
-    const componentMap = getComponentMap({
-        collectionSlug,
-        globalSlug
-    });
-    const { getFieldMap } = useComponentMap();
-    const fieldMap = getFieldMap({
-        collectionSlug: collectionConfig?.slug,
-        globalSlug: globalConfig?.slug
+    const globalConfig = getEntityConfig({
+      globalSlug
     });
-    return /*#__PURE__*/ _jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(SetViewActions, {
-                actions: componentMap?.actionsMap?.Edit?.LivePreview
-            }),
-            /*#__PURE__*/ _jsx(LivePreviewProvider, {
-                breakpoints: breakpoints,
-                fieldSchema: collectionConfig?.fields || globalConfig?.fields,
-                isPopupOpen: isPopupOpen,
-                openPopupWindow: openPopupWindow,
-                popupRef: popupRef,
-                url: url,
-                children: /*#__PURE__*/ _jsx(PreviewView, {
-                    apiRoute: apiRoute,
-                    collectionConfig: collectionConfig,
-                    config: config,
-                    fieldMap: fieldMap,
-                    globalConfig: globalConfig,
-                    schemaPath: schemaPath,
-                    serverURL: serverURL
-                })
-            })
-        ]
+    const schemaPath = collectionSlug || globalSlug;
+    t3 = _jsx(Fragment, {
+      children: _jsx(LivePreviewProvider, {
+        breakpoints,
+        fieldSchema: collectionConfig?.fields || globalConfig?.fields,
+        isPopupOpen,
+        openPopupWindow,
+        popupRef,
+        url,
+        children: _jsx(PreviewView, {
+          apiRoute,
+          collectionConfig,
+          config,
+          fields: (collectionConfig || globalConfig)?.fields,
+          globalConfig,
+          schemaPath,
+          serverURL
+        })
+      })
     });
+    $[2] = collectionSlug;
+    $[3] = getEntityConfig;
+    $[4] = globalSlug;
+    $[5] = apiRoute;
+    $[6] = config;
+    $[7] = serverURL;
+    $[8] = breakpoints;
+    $[9] = isPopupOpen;
+    $[10] = openPopupWindow;
+    $[11] = popupRef;
+    $[12] = url;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return t3;
 };
-
 //# sourceMappingURL=index.client.js.map