@payloadcms/next 3.0.0-canary.a5aaf21 → 3.0.0-canary.a6e7305

package/dist/views/LivePreview/Toolbar/index.scss

@@ -1,41 +1,43 @@
 @import '../../../scss/styles.scss';
 
-.live-preview-toolbar {
-  display: flex;
-  background-color: var(--theme-bg);
-  color: var(--theme-text);
-  height: calc(var(--base) * 1.75);
-  align-items: center;
-  flex-shrink: 0;
+@layer payload-default {
+  .live-preview-toolbar {
+    display: flex;
+    background-color: var(--theme-bg);
+    color: var(--theme-text);
+    height: calc(var(--base) * 1.75);
+    align-items: center;
+    flex-shrink: 0;
 
-  &--static {
-    position: relative;
-    width: 100%;
-    justify-content: center;
-    border-bottom: 1px solid var(--theme-elevation-100);
-  }
+    &--static {
+      position: relative;
+      width: 100%;
+      justify-content: center;
+      border-bottom: 1px solid var(--theme-elevation-100);
+    }
 
-  &--draggable {
-    @include shadow-lg;
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin: 0;
-    border-radius: 4px;
-  }
+    &--draggable {
+      @include shadow-lg;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 0;
+      border-radius: 4px;
+    }
 
-  &__drag-handle {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    cursor: grab;
+    &__drag-handle {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      cursor: grab;
 
-    .icon--drag-handle .fill {
-      fill: var(--theme-elevation-300);
-    }
+      .icon--drag-handle .fill {
+        fill: var(--theme-elevation-300);
+      }
 
-    &:active {
-      cursor: grabbing;
+      &:active {
+        cursor: grabbing;
+      }
     }
   }
 }

package/dist/views/LivePreview/ToolbarArea/index.scss

@@ -1,4 +1,6 @@
-.toolbar-area {
-  width: 100%;
-  height: 100%;
+@layer payload-default {
+  .toolbar-area {
+    width: 100%;
+    height: 100%;
+  }
 }

package/dist/views/LivePreview/index.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAKV,IAAI,EACJ,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAehB,OAAO,KAAgC,MAAM,OAAO,CAAA;AAOpD,OAAO,cAAc,CAAA;AAoLrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IACtD,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAA;IAC1B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CACrB,CAmDA,CAAA"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/LivePreview/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAMV,IAAI,EACJ,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAqBhB,OAAO,KAA6D,MAAM,OAAO,CAAA;AASjF,OAAO,cAAc,CAAA;AA4YrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IACtD,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAA;IAC1B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CACrB,CAmDA,CAAA"}

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

@@ -3,8 +3,11 @@
 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, useConfig, useDocumentEvents, useDocumentInfo, useTranslation } from '@payloadcms/ui';
-import { getFormState } from '@payloadcms/ui/shared';
-import React, { Fragment, useCallback } from 'react';
+import { getFormState, handleBackToDashboard, handleGoBack, handleTakeOver } from '@payloadcms/ui/shared';
+import { useRouter } from 'next/navigation.js';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { DocumentLocked } from '../../elements/DocumentLocked/index.js';
+import { DocumentTakeOver } from '../../elements/DocumentTakeOver/index.js';
 import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving/index.js';
 import { SetDocumentStepNav } from '../Edit/Default/SetDocumentStepNav/index.js';
 import { SetDocumentTitle } from '../Edit/Default/SetDocumentTitle/index.js';
@@ -13,17 +16,15 @@ import { LivePreviewProvider } from './Context/index.js';
 import { LivePreview } from './Preview/index.js';
 import { usePopupWindow } from './usePopupWindow.js';
 const baseClass = 'live-preview';
-const PreviewView = t0 => {
-  const $ = _c(53);
-  const {
-    apiRoute,
-    collectionConfig,
-    config,
-    fields,
-    globalConfig,
-    schemaPath,
-    serverURL
-  } = t0;
+const PreviewView = ({
+  apiRoute,
+  collectionConfig,
+  config,
+  fields,
+  globalConfig,
+  schemaPath,
+  serverURL
+}) => {
   const {
     id,
     action,
@@ -33,9 +34,11 @@ const PreviewView = t0 => {
     BeforeDocument,
     BeforeFields,
     collectionSlug,
+    currentEditor,
     disableActions,
     disableLeaveWithoutSaving,
     docPermissions,
+    documentIsLocked,
     getDocPreferences,
     globalSlug,
     hasPublishPermission,
@@ -44,18 +47,25 @@ const PreviewView = t0 => {
     initialState,
     isEditing,
     isInitializing,
-    onSave: onSaveFromProps
+    lastUpdateTime,
+    onSave: onSaveFromProps,
+    setCurrentEditor,
+    setDocumentIsLocked,
+    unlockDocument,
+    updateDocumentEditor
   } = useDocumentInfo();
-  const operation = id ? "update" : "create";
+  const operation = id ? 'update' : 'create';
   const {
-    config: t1
+    config: {
+      admin: {
+        user: userSlug
+      },
+      routes: {
+        admin: adminRoute
+      }
+    }
   } = useConfig();
-  const {
-    admin: t2
-  } = t1;
-  const {
-    user: userSlug
-  } = t2;
+  const router = useRouter();
   const {
     t
   } = useTranslation();
@@ -69,193 +79,201 @@ const PreviewView = t0 => {
   const {
     reportUpdate
   } = useDocumentEvents();
-  let t3;
-  if ($[0] !== reportUpdate || $[1] !== id || $[2] !== collectionSlug || $[3] !== user || $[4] !== userSlug || $[5] !== refreshCookieAsync || $[6] !== onSaveFromProps) {
-    t3 = json => {
-      reportUpdate({
-        id,
-        entitySlug: collectionSlug,
-        updatedAt: json?.result?.updatedAt || new Date().toISOString()
+  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 [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'
       });
-      if (user && collectionSlug === userSlug && id === user.id) {
-        refreshCookieAsync();
+    }
+  }, [collectionSlug, globalSlug, id, isLockingEnabled, onSaveFromProps, refreshCookieAsync, reportUpdate, setDocumentIsLocked, user, userSlug]);
+  const onChange = useCallback(async ({
+    formState: prevFormState
+  }) => {
+    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({
+      apiRoute,
+      body: {
+        id,
+        collectionSlug,
+        docPreferences,
+        formState: prevFormState,
+        globalSlug,
+        operation,
+        returnLockStatus: isLockingEnabled ? true : false,
+        schemaPath,
+        updateLastEdited
+      },
+      serverURL
+    });
+    setDocumentIsLocked(true);
+    if (isLockingEnabled) {
+      const previousOwnerId = typeof documentLockStateRef.current?.user === 'object' ? documentLockStateRef.current?.user?.id : documentLockStateRef.current?.user;
+      if (lockedState) {
+        if (!documentLockStateRef.current || lockedState.user.id !== previousOwnerId) {
+          if (previousOwnerId === user.id && lockedState.user.id !== 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);
+        }
+      }
+    }
+    return state;
+  }, [collectionSlug, editSessionStartTime, globalSlug, serverURL, apiRoute, id, isLockingEnabled, operation, schemaPath, getDocPreferences, setCurrentEditor, setDocumentIsLocked, user]);
+  // Clean up when the component unmounts or when the document is unlocked
+  useEffect(() => {
+    return () => {
+      if (!isLockingEnabled) {
+        return;
       }
-      if (typeof onSaveFromProps === "function") {
-        onSaveFromProps({
-          ...json,
-          operation: id ? "update" : "create"
-        });
+      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);
+        }
       }
+      setShowTakeOverModal(false);
     };
-    $[0] = reportUpdate;
-    $[1] = id;
-    $[2] = collectionSlug;
-    $[3] = user;
-    $[4] = userSlug;
-    $[5] = refreshCookieAsync;
-    $[6] = onSaveFromProps;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  const onSave = t3;
-  let t4;
-  if ($[8] !== getDocPreferences || $[9] !== apiRoute || $[10] !== id || $[11] !== operation || $[12] !== schemaPath || $[13] !== serverURL) {
-    t4 = async t5 => {
-      const {
-        formState: prevFormState
-      } = t5;
-      const docPreferences = await getDocPreferences();
-      const {
-        state
-      } = await getFormState({
-        apiRoute,
-        body: {
-          id,
-          docPreferences,
-          formState: prevFormState,
-          operation,
-          schemaPath
+  }, [collectionSlug, globalSlug, id, unlockDocument, user, setCurrentEditor, isLockingEnabled, documentIsLocked, setDocumentIsLocked]);
+  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);
         },
-        serverURL
-      });
-      return state;
-    };
-    $[8] = getDocPreferences;
-    $[9] = apiRoute;
-    $[10] = id;
-    $[11] = operation;
-    $[12] = schemaPath;
-    $[13] = serverURL;
-    $[14] = t4;
-  } else {
-    t4 = $[14];
-  }
-  const onChange = t4;
-  const t5 = !hasSavePermission;
-  const t6 = id ? "PATCH" : "POST";
-  let t7;
-  if ($[15] !== onChange || $[16] !== collectionConfig || $[17] !== globalConfig || $[18] !== disableLeaveWithoutSaving || $[19] !== t || $[20] !== collectionSlug || $[21] !== globalSlug || $[22] !== id || $[23] !== config || $[24] !== apiURL || $[25] !== initialData || $[26] !== disableActions || $[27] !== hasPublishPermission || $[28] !== hasSavePermission || $[29] !== isEditing || $[30] !== docPermissions || $[31] !== previewWindowType || $[32] !== AfterFields || $[33] !== BeforeFields || $[34] !== fields || $[35] !== BeforeDocument || $[36] !== AfterDocument || $[37] !== action || $[38] !== t5 || $[39] !== initialState || $[40] !== isInitializing || $[41] !== t6 || $[42] !== onSave || $[43] !== operation) {
-    let t8;
-    if ($[45] !== collectionConfig || $[46] !== globalConfig || $[47] !== disableLeaveWithoutSaving) {
-      t8 = (collectionConfig && !(collectionConfig.versions?.drafts && collectionConfig.versions?.drafts?.autosave) || globalConfig && !(globalConfig.versions?.drafts && globalConfig.versions?.drafts?.autosave)) && !disableLeaveWithoutSaving && _jsx(LeaveWithoutSaving, {});
-      $[45] = collectionConfig;
-      $[46] = globalConfig;
-      $[47] = disableLeaveWithoutSaving;
-      $[48] = t8;
-    } else {
-      t8 = $[48];
-    }
-    const t9 = _jsx(SetDocumentStepNav, {
-      collectionSlug,
-      globalLabel: globalConfig?.label,
-      globalSlug,
-      id,
-      pluralLabel: collectionConfig ? collectionConfig?.labels?.plural : undefined,
-      useAsTitle: collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined,
-      view: t("general:livePreview")
-    });
-    const t10 = _jsx(SetDocumentTitle, {
-      collectionConfig,
-      config,
-      fallback: id?.toString() || "",
-      globalConfig
-    });
-    const t11 = _jsx(DocumentControls, {
-      apiURL,
-      data: initialData,
-      disableActions,
-      hasPublishPermission,
-      hasSavePermission,
-      id,
-      isEditing,
-      permissions: docPermissions,
-      slug: collectionConfig?.slug || globalConfig?.slug
-    });
-    const t12 = previewWindowType === "popup" && `${baseClass}--detached`;
-    let t13;
-    if ($[49] !== t12) {
-      t13 = [baseClass, t12].filter(Boolean);
-      $[49] = t12;
-      $[50] = t13;
-    } else {
-      t13 = $[50];
-    }
-    const t14 = t13.join(" ");
-    const t15 = previewWindowType === "popup" && `${baseClass}__main--popup-open`;
-    let t16;
-    if ($[51] !== t15) {
-      t16 = [`${baseClass}__main`, t15].filter(Boolean);
-      $[51] = t15;
-      $[52] = t16;
-    } else {
-      t16 = $[52];
-    }
-    t7 = _jsx(OperationProvider, {
-      operation,
-      children: _jsxs(Form, {
-        action,
-        className: `${baseClass}__form`,
-        disabled: t5,
-        initialState,
-        isInitializing,
-        method: t6,
-        onChange: [onChange],
-        onSuccess: onSave,
-        children: [t8, t9, t10, t11, _jsxs("div", {
-          className: t14,
-          children: [_jsxs("div", {
-            className: t16.join(" "),
-            children: [BeforeDocument, _jsx(DocumentFields, {
-              AfterFields,
-              BeforeFields,
-              docPermissions,
-              fields,
-              forceSidebarWrap: true,
-              readOnly: !hasSavePermission,
-              schemaPath: collectionSlug || globalSlug
-            }), AfterDocument]
-          }), _jsx(LivePreview, {
-            collectionSlug,
-            globalSlug
-          })]
+        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: [BeforeDocument, /*#__PURE__*/_jsx(DocumentFields, {
+            AfterFields: AfterFields,
+            BeforeFields: BeforeFields,
+            docPermissions: docPermissions,
+            fields: fields,
+            forceSidebarWrap: true,
+            readOnly: isReadOnlyForIncomingUser || !hasSavePermission,
+            schemaPath: collectionSlug || globalSlug
+          }), AfterDocument]
+        }), /*#__PURE__*/_jsx(LivePreview, {
+          collectionSlug: collectionSlug,
+          globalSlug: globalSlug
         })]
-      })
-    });
-    $[15] = onChange;
-    $[16] = collectionConfig;
-    $[17] = globalConfig;
-    $[18] = disableLeaveWithoutSaving;
-    $[19] = t;
-    $[20] = collectionSlug;
-    $[21] = globalSlug;
-    $[22] = id;
-    $[23] = config;
-    $[24] = apiURL;
-    $[25] = initialData;
-    $[26] = disableActions;
-    $[27] = hasPublishPermission;
-    $[28] = hasSavePermission;
-    $[29] = isEditing;
-    $[30] = docPermissions;
-    $[31] = previewWindowType;
-    $[32] = AfterFields;
-    $[33] = BeforeFields;
-    $[34] = fields;
-    $[35] = BeforeDocument;
-    $[36] = AfterDocument;
-    $[37] = action;
-    $[38] = t5;
-    $[39] = initialState;
-    $[40] = isInitializing;
-    $[41] = t6;
-    $[42] = onSave;
-    $[43] = operation;
-    $[44] = t7;
-  } else {
-    t7 = $[44];
-  }
-  return t7;
+      })]
+    })
+  });
 };
 export const LivePreviewClient = props => {
   const $ = _c(14);