payload 1.10.0 → 1.10.2

package/dist/webpack/getDevConfig.js

@@ -1,68 +1,68 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const webpack_1 = __importDefault(require("webpack"));
-const md5_1 = __importDefault(require("md5"));
-const getBaseConfig_1 = __importDefault(require("./getBaseConfig"));
-exports.default = (payloadConfig) => {
-    const baseConfig = (0, getBaseConfig_1.default)(payloadConfig);
-    let config = {
-        ...baseConfig,
-        cache: {
-            type: 'filesystem',
-            // version cache when there are changes to aliases
-            version: (0, md5_1.default)(Object.entries(baseConfig.resolve.alias).join()),
-            buildDependencies: {
-                config: [__filename],
-            },
-        },
-        entry: {
-            ...baseConfig.entry,
-            main: [
-                require.resolve('webpack-hot-middleware/client'),
-                ...baseConfig.entry.main,
-            ],
-        },
-        output: {
-            publicPath: payloadConfig.routes.admin,
-            path: '/',
-            filename: '[name].js',
-        },
-        devtool: 'inline-source-map',
-        mode: 'development',
-        stats: 'errors-warnings',
-        plugins: [
-            ...baseConfig.plugins,
-            new webpack_1.default.HotModuleReplacementPlugin(),
-        ],
-    };
-    config.module.rules.push({
-        test: /\.(scss|css)$/,
-        sideEffects: true,
-        use: [
-            require.resolve('style-loader'),
-            {
-                loader: require.resolve('css-loader'),
-                options: {
-                    url: (url) => (!url.startsWith('/')),
-                },
-            },
-            {
-                loader: require.resolve('postcss-loader'),
-                options: {
-                    postcssOptions: {
-                        plugins: [require.resolve('postcss-preset-env')],
-                    },
-                },
-            },
-            require.resolve('sass-loader'),
-        ],
-    });
-    if (payloadConfig.admin.webpack && typeof payloadConfig.admin.webpack === 'function') {
-        config = payloadConfig.admin.webpack(config);
-    }
-    return config;
-};
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const webpack_1 = __importDefault(require("webpack"));
+const md5_1 = __importDefault(require("md5"));
+const getBaseConfig_1 = __importDefault(require("./getBaseConfig"));
+exports.default = (payloadConfig) => {
+    const baseConfig = (0, getBaseConfig_1.default)(payloadConfig);
+    let config = {
+        ...baseConfig,
+        cache: {
+            type: 'filesystem',
+            // version cache when there are changes to aliases
+            version: (0, md5_1.default)(Object.entries(baseConfig.resolve.alias).join()),
+            buildDependencies: {
+                config: [__filename],
+            },
+        },
+        entry: {
+            ...baseConfig.entry,
+            main: [
+                require.resolve('webpack-hot-middleware/client'),
+                ...baseConfig.entry.main,
+            ],
+        },
+        output: {
+            publicPath: payloadConfig.routes.admin,
+            path: '/',
+            filename: '[name].js',
+        },
+        devtool: 'inline-source-map',
+        mode: 'development',
+        stats: 'errors-warnings',
+        plugins: [
+            ...baseConfig.plugins,
+            new webpack_1.default.HotModuleReplacementPlugin(),
+        ],
+    };
+    config.module.rules.push({
+        test: /\.(scss|css)$/,
+        sideEffects: true,
+        use: [
+            require.resolve('style-loader'),
+            {
+                loader: require.resolve('css-loader'),
+                options: {
+                    url: (url) => (!url.startsWith('/')),
+                },
+            },
+            {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                    postcssOptions: {
+                        plugins: [require.resolve('postcss-preset-env')],
+                    },
+                },
+            },
+            require.resolve('sass-loader'),
+        ],
+    });
+    if (payloadConfig.admin.webpack && typeof payloadConfig.admin.webpack === 'function') {
+        config = payloadConfig.admin.webpack(config);
+    }
+    return config;
+};
 //# sourceMappingURL=getDevConfig.js.map

package/dist/webpack/getProdConfig.d.ts

@@ -1,4 +1,4 @@
-import { Configuration } from 'webpack';
-import { SanitizedConfig } from '../config/types';
-declare const _default: (payloadConfig: SanitizedConfig) => Configuration;
-export default _default;
+import { Configuration } from 'webpack';
+import { SanitizedConfig } from '../config/types';
+declare const _default: (payloadConfig: SanitizedConfig) => Configuration;
+export default _default;

package/dist/webpack/getProdConfig.js

@@ -1,73 +1,73 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
-const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
-const swc_minify_webpack_plugin_1 = require("swc-minify-webpack-plugin");
-const getBaseConfig_1 = __importDefault(require("./getBaseConfig"));
-exports.default = (payloadConfig) => {
-    const baseConfig = (0, getBaseConfig_1.default)(payloadConfig);
-    let config = {
-        ...baseConfig,
-        output: {
-            publicPath: `${payloadConfig.routes.admin}/`,
-            path: payloadConfig.admin.buildPath,
-            filename: '[name].[chunkhash].js',
-            chunkFilename: '[name].[chunkhash].js',
-        },
-        mode: 'production',
-        stats: 'errors-only',
-        optimization: {
-            minimizer: [new swc_minify_webpack_plugin_1.SwcMinifyWebpackPlugin()],
-            splitChunks: {
-                cacheGroups: {
-                    styles: {
-                        name: 'styles',
-                        test: /\.(sa|sc|c)ss$/,
-                        chunks: 'all',
-                        enforce: true,
-                    },
-                },
-            },
-        },
-        plugins: [
-            ...baseConfig.plugins,
-            new mini_css_extract_plugin_1.default({
-                filename: '[name].css',
-                ignoreOrder: true,
-            }),
-        ],
-    };
-    config.module.rules.push({
-        test: /\.(scss|css)$/,
-        sideEffects: true,
-        use: [
-            mini_css_extract_plugin_1.default.loader,
-            {
-                loader: require.resolve('css-loader'),
-                options: {
-                    url: (url) => (!url.startsWith('/')),
-                },
-            },
-            {
-                loader: require.resolve('postcss-loader'),
-                options: {
-                    postcssOptions: {
-                        plugins: [require.resolve('postcss-preset-env')],
-                    },
-                },
-            },
-            require.resolve('sass-loader'),
-        ],
-    });
-    if (process.env.PAYLOAD_ANALYZE_BUNDLE) {
-        config.plugins.push(new webpack_bundle_analyzer_1.BundleAnalyzerPlugin());
-    }
-    if (payloadConfig.admin.webpack && typeof payloadConfig.admin.webpack === 'function') {
-        config = payloadConfig.admin.webpack(config);
-    }
-    return config;
-};
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
+const swc_minify_webpack_plugin_1 = require("swc-minify-webpack-plugin");
+const getBaseConfig_1 = __importDefault(require("./getBaseConfig"));
+exports.default = (payloadConfig) => {
+    const baseConfig = (0, getBaseConfig_1.default)(payloadConfig);
+    let config = {
+        ...baseConfig,
+        output: {
+            publicPath: `${payloadConfig.routes.admin}/`,
+            path: payloadConfig.admin.buildPath,
+            filename: '[name].[chunkhash].js',
+            chunkFilename: '[name].[chunkhash].js',
+        },
+        mode: 'production',
+        stats: 'errors-only',
+        optimization: {
+            minimizer: [new swc_minify_webpack_plugin_1.SwcMinifyWebpackPlugin()],
+            splitChunks: {
+                cacheGroups: {
+                    styles: {
+                        name: 'styles',
+                        test: /\.(sa|sc|c)ss$/,
+                        chunks: 'all',
+                        enforce: true,
+                    },
+                },
+            },
+        },
+        plugins: [
+            ...baseConfig.plugins,
+            new mini_css_extract_plugin_1.default({
+                filename: '[name].css',
+                ignoreOrder: true,
+            }),
+        ],
+    };
+    config.module.rules.push({
+        test: /\.(scss|css)$/,
+        sideEffects: true,
+        use: [
+            mini_css_extract_plugin_1.default.loader,
+            {
+                loader: require.resolve('css-loader'),
+                options: {
+                    url: (url) => (!url.startsWith('/')),
+                },
+            },
+            {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                    postcssOptions: {
+                        plugins: [require.resolve('postcss-preset-env')],
+                    },
+                },
+            },
+            require.resolve('sass-loader'),
+        ],
+    });
+    if (process.env.PAYLOAD_ANALYZE_BUNDLE) {
+        config.plugins.push(new webpack_bundle_analyzer_1.BundleAnalyzerPlugin());
+    }
+    if (payloadConfig.admin.webpack && typeof payloadConfig.admin.webpack === 'function') {
+        config = payloadConfig.admin.webpack(config);
+    }
+    return config;
+};
 //# sourceMappingURL=getProdConfig.js.map

package/dist/webpack/init.d.ts

@@ -1,4 +1,4 @@
-import { Router } from 'express';
-import { SanitizedConfig } from '../config/types';
-declare function initWebpack(config: SanitizedConfig): Router;
-export default initWebpack;
+import { Router } from 'express';
+import { SanitizedConfig } from '../config/types';
+declare function initWebpack(config: SanitizedConfig): Router;
+export default initWebpack;

package/dist/webpack/init.js

@@ -1,22 +1,22 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const webpack_1 = __importDefault(require("webpack"));
-const express_1 = __importDefault(require("express"));
-const webpack_dev_middleware_1 = __importDefault(require("webpack-dev-middleware"));
-const webpack_hot_middleware_1 = __importDefault(require("webpack-hot-middleware"));
-const getDevConfig_1 = __importDefault(require("./getDevConfig"));
-const router = express_1.default.Router();
-function initWebpack(config) {
-    const webpackDevConfig = (0, getDevConfig_1.default)(config);
-    const compiler = (0, webpack_1.default)(webpackDevConfig);
-    router.use((0, webpack_dev_middleware_1.default)(compiler, {
-        publicPath: webpackDevConfig.output.publicPath,
-    }));
-    router.use((0, webpack_hot_middleware_1.default)(compiler));
-    return router;
-}
-exports.default = initWebpack;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const webpack_1 = __importDefault(require("webpack"));
+const express_1 = __importDefault(require("express"));
+const webpack_dev_middleware_1 = __importDefault(require("webpack-dev-middleware"));
+const webpack_hot_middleware_1 = __importDefault(require("webpack-hot-middleware"));
+const getDevConfig_1 = __importDefault(require("./getDevConfig"));
+const router = express_1.default.Router();
+function initWebpack(config) {
+    const webpackDevConfig = (0, getDevConfig_1.default)(config);
+    const compiler = (0, webpack_1.default)(webpackDevConfig);
+    router.use((0, webpack_dev_middleware_1.default)(compiler, {
+        publicPath: webpackDevConfig.output.publicPath,
+    }));
+    router.use((0, webpack_hot_middleware_1.default)(compiler));
+    return router;
+}
+exports.default = initWebpack;
 //# sourceMappingURL=init.js.map

package/dist/webpack/mocks/dotENV.d.ts

@@ -1,4 +1,4 @@
-declare namespace _default {
-    function config(): any;
-}
-export default _default;
+declare namespace _default {
+    function config(): any;
+}
+export default _default;

package/dist/webpack/mocks/dotENV.js

@@ -1,6 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    config: () => null,
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    config: () => null,
+};
 //# sourceMappingURL=dotENV.js.map

package/dist/webpack/mocks/emptyModule.d.ts

@@ -1,2 +1,2 @@
-declare function _default(): void;
-export default _default;
+declare function _default(): void;
+export default _default;

package/dist/webpack/mocks/emptyModule.js

@@ -1,4 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = () => { };
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = () => { };
 //# sourceMappingURL=emptyModule.js.map

package/dist/webpack/mocks/fileMock.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "file-stub";
-export default _default;
+declare const _default: "file-stub";
+export default _default;

package/dist/webpack/mocks/fileMock.js

@@ -1,4 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 'file-stub';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = 'file-stub';
 //# sourceMappingURL=fileMock.js.map

package/docs/authentication/config.mdx

@@ -17,7 +17,7 @@ To enable Authentication on a collection, define an `auth` property and set it t
 | **`useAPIKey`**            | Payload Authentication provides for API keys to be set on each user within an Authentication-enabled Collection. [More](/docs/authentication/config#api-keys)                                                                       |
 | **`tokenExpiration`**      | How long (in seconds) to keep the user logged in. JWTs and HTTP-only cookies will both expire at the same time.                                                                                                                     |
 | **`maxLoginAttempts`**     | Only allow a user to attempt logging in X amount of times. Automatically locks out a user from authenticating if this limit is passed. Set to `0` to disable.                                                                       |
-| **`lockTime`**             | Set the time (in milliseconds) that a user should be locked out if they fail authentication more times than `maxLoginAttempts` allows for.                                                                                                            |
+| **`lockTime`**             | Set the time (in milliseconds) that a user should be locked out if they fail authentication more times than `maxLoginAttempts` allows for.                                                                                          |
 | **`depth`**                | How many levels deep a `user` document should be populated when creating the JWT and binding the `user` to the express `req`. Defaults to `0` and should only be modified if absolutely necessary, as this will affect performance. |
 | **`cookies`**              | Set cookie options, including `secure`, `sameSite`, and `domain`. For advanced users.                                                                                                                                               |
 | **`forgotPassword`**       | Customize the way that the `forgotPassword` operation functions. [More](/docs/authentication/config#forgot-password)                                                                                                                |
@@ -29,10 +29,12 @@ To enable Authentication on a collection, define an `auth` property and set it t
 
 To integrate with third-party APIs or services, you might need the ability to generate API keys that can be used to identify as a certain user within Payload.
 
+In Payload, users are essentially documents within a collection. Just like you can authenticate as a user with an email and password, which is considered as our default local auth strategy, you can also authenticate as a user with an API key. API keys are generated on a user-by-user basis, similar to email and passwords, and are meant to represent a single user.
+
 For example, if you have a third-party service or external app that needs to be able to perform protected actions at its discretion, you have two options:
 
 1. Create a user for the third-party app, and log in each time to receive a token before you attempt to access any protected actions
-1. Enable API key support for the Collection, where you can generate a non-expiring API key per user in the collection
+1. Enable API key support for the Collection, where you can generate a non-expiring API key per user in the collection. This is particularly useful as you can create a "user" that reflects an integration with a specific external service and assign a "role" or specific access only needed by that service/integration. Alternatively, you could create a "super admin" user and assign an API key to that user so that any requests made with that API key are considered as being made by that super user.
 
 Technically, both of these options will work for third-party integrations but the second option with API key is simpler, because it reduces the amount of work that your integrations need to do to be authenticated properly.
 
@@ -45,7 +47,7 @@ To enable API keys on a collection, set the `useAPIKey` auth option to `true`. F
 
 #### Authenticating via API Key
 
-To authenticate REST or GraphQL API requests using an API key, set the `Authorization` header. The header is case-sensitive and needs the slug of the `auth.useAPIKey` enabled collection, then " API-Key ", followed by the `apiKey` that has been assigned. Payload's built-in middleware will then assign the user document to `req.user` and handle requests with the proper access control.
+To authenticate REST or GraphQL API requests using an API key, set the `Authorization` header. The header is case-sensitive and needs the slug of the `auth.useAPIKey` enabled collection, then " API-Key ", followed by the `apiKey` that has been assigned. Payload's built-in middleware will then assign the user document to `req.user` and handle requests with the proper access control. By doing this, Payload recognizes the request being made as a request by the user associated with that API key.
 
 **For example, using Fetch:**
 
@@ -59,6 +61,8 @@ const response = await fetch("http://localhost:3000/api/pages", {
 });
 ```
 
+Payload ensures that the same, uniform access control is used across all authentication strategies. This enables you to utilize your existing access control configurations with both API keys and the standard email/password authentication. This consistency can aid in maintaining granular control over your API keys.
+
 ### Forgot Password
 
 You can customize how the Forgot Password workflow operates with the following options on the `auth.forgotPassword` property:

package/docs/integrations/vercel-visual-editing.mdx

@@ -0,0 +1,104 @@
+---
+title: Vercel Visual Editing
+label: Vercel Visual Editing
+order: 10
+desc: Payload + Vercel Visual Editing allows yours editors to navigate directly from the content rendered on your front-end to the fields in Payload that control it.
+keywords: vercel, vercel visual editing, visual editing, content source maps, Content Management System, cms, headless, javascript, node, react, express
+---
+
+[Vercel Visual Editing](https://vercel.com/docs/workflow-collaboration/visual-editing) will allow your editors to navigate directly from the content rendered on your front-end to the fields in Payload that control it. This requires no changes to your front-end code and very few changes to your Payload config.
+
+![Versions](/images/docs/vercel-visual-editing.jpg)
+
+<Banner type="warning">
+  Vercel Visual Editing is an enterprise-only feature and only available for
+  deployments hosted on Vercel. If you are an existing enterprise customer,
+  [contact our sales team](https://payloadcms.com/for-enterprise) for help with
+  your integration.
+</Banner>
+
+### How it works
+
+To power Vercel Visual Editing, Payload embeds Content Source Maps into its API responses. Content Source Maps are invisible, encoded JSON values that include a link back to the field in the CMS that generated the content. When rendered on the page, Vercel detects and decodes these values to display the Visual Editing interface.
+
+For full details on how the encoding and decoding algorithm works, check out [`@vercel/stega`](https://www.npmjs.com/package/@vercel/stega).
+
+### Getting Started
+
+Setting up Payload with Vercel Visual Editing is easy. First, install the `@payloadcms/plugin-csm` plugin into your project. This plugin requires an API key to install, [contact our sales team](https://payloadcms.com/for-enterprise) if you don't already have one.
+
+```bash
+npm i @payloadcms/plugin-csm
+```
+
+Then in the `plugins` array of your Payload config, call the plugin and enable any collections that require Content Source Maps.
+
+```ts
+import { buildConfig } from "payload/config"
+import contentSourceMaps from "@payloadcms/plugin-csm"
+
+const config = buildConfig({
+  collections: [
+    {
+      slug: "pages",
+      fields: [
+        {
+          name: 'slug',
+          type: 'text',
+        },
+        {
+          name: 'title,'
+          type: 'text',
+        },
+      ],
+    },
+  ],
+  plugins: [
+    contentSourceMaps({
+      collections: ["pages"],
+    }),
+  ],
+})
+
+export default config
+```
+
+Now in your Next.js app, include the `?encodeSourceMaps=true` parameter in any of your API requests. For performance reasons, this should only be done when in draft mode or on preview deployments.
+
+```ts
+if (isDraftMode || process.env.VERCEL_ENV === "preview") {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_PAYLOAD_CMS_URL}/api/pages?where[slug][equals]=${slug}&encodeSourceMaps=true`
+  );
+}
+```
+
+And that's it! You are now ready to enter Edit Mode and begin visually editing your content.
+
+##### Edit Mode
+
+To see Visual Editing on your site, you first need to visit any preview deployment on Vercel and login using the Vercel Toolbar. When Content Source Maps are detected on the page, a pencil icon will appear in the toolbar. Clicking this icon will enable Edit Mode, highlighting all editable fields on the page in blue.
+
+![Versions](/images/docs/vercel-toolbar.jpg)
+
+### Troubleshooting
+
+##### Dates
+
+The plugin does not encode `date` fields by default, but for some cases like text that uses negative CSS letter-spacing, it may be necessary to split the encoded data out from the rendered text. This way you can safely use the cleaned data as expected.
+
+```ts
+import { vercelStegaSplit } from "@vercel/stega";
+const { cleaned, encoded } = vercelStegaSplit(text);
+```
+
+##### Blocks
+
+All `blocks` fields by definition do not have plain text strings to encode. For this reason, blocks are given an additional `encodedSourceMap` key, which you can use to enable Visual Editing on entire sections of your site. You can then specify the editing container by adding the `data-vercel-edit-target` HTML attribute to any top-level element of your block.
+
+```ts
+<div data-vercel-edit-target>
+  <span style={{ display: "none" }}>{encodedSourceMap}</span>
+  {children}
+</div>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "MIT",
   "engines": {

package/utilities.d.ts

@@ -1 +1 @@
-export * from './dist/utilities/configToJSONSchema';
+export { entityToJSONSchema } from './dist/utilities/configToJSONSchema';