chore(release): db-postgres/0.2.1 [skip ci]

* feat(richtext-lexical): ability to configure link feature enabled relations on a field-level

* feat(richtext-lexical): ability to configure Relationship feature enabled relations on a field-level

* chore(richtext-lexical): Improve Link feature props typing

* chore(richtext-lexical): Improve Link and Relationship feature props typing

* fix(richtext-lexical): Link drawer types

* chore: merge conflict resolve

* chore(richtext-lexical): Link Feature: add comments that explain how getBaseFields works

.github/PULL_REQUEST_TEMPLATE.md

@@ -12,8 +12,8 @@
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] Change to the [templates](../templates/) directory (does not affect core functionality)
-- [ ] Change to the [examples](../examples/) directory (does not affect core functionality)
+- [ ] Change to the [templates](https://github.com/payloadcms/payload/tree/main/templates) directory (does not affect core functionality)
+- [ ] Change to the [examples](https://github.com/payloadcms/payload/tree/main/examples) directory (does not affect core functionality)
 - [ ] This change requires a documentation update
 
 ## Checklist:

CHANGELOG.md

@@ -1,3 +1,160 @@
+## [2.4.0](https://github.com/payloadcms/payload/compare/v2.3.1...v2.4.0) (2023-12-06)
+
+
+### Features
+
+* add Chinese Traditional translation ([#4372](https://github.com/payloadcms/payload/issues/4372)) ([50253f6](https://github.com/payloadcms/payload/commit/50253f617c22d0d185bbac7f9d4304cddbc01f06))
+* async live preview urls ([#4339](https://github.com/payloadcms/payload/issues/4339)) ([5f17324](https://github.com/payloadcms/payload/commit/5f173241df6dc316d498767b1c81718e9c2b9a51))
+* pass path to FieldDescription ([#4364](https://github.com/payloadcms/payload/issues/4364)) ([3b8a27d](https://github.com/payloadcms/payload/commit/3b8a27d199b3969cbca6ca750450798cb70f21e8))
+* **richtext-lexical:** lazy import React components to prevent client-only code from leaking into the server ([#4290](https://github.com/payloadcms/payload/issues/4290)) ([5de347f](https://github.com/payloadcms/payload/commit/5de347ffffca3bf38315d3d87d2ccc5c28cd2723))
+* **richtext-lexical:** Link & Relationship Feature: field-level configurable allowed relationships ([#4182](https://github.com/payloadcms/payload/issues/4182)) ([7af8f29](https://github.com/payloadcms/payload/commit/7af8f29b4a8dddf389356e4db142f8d434cdc964))
+
+
+### Bug Fixes
+
+* **db-postgres:** sorting on a not-configured field throws error ([#4382](https://github.com/payloadcms/payload/issues/4382)) ([dbaecda](https://github.com/payloadcms/payload/commit/dbaecda0e92fcb0fa67b4c5ac085e025f02de53a))
+* defaultValues computed on new globals ([#4380](https://github.com/payloadcms/payload/issues/4380)) ([b6cffce](https://github.com/payloadcms/payload/commit/b6cffcea07b9fa21698b00b8bbed6f27197ded41))
+* handles null upload field values ([#4397](https://github.com/payloadcms/payload/issues/4397)) ([cf9a370](https://github.com/payloadcms/payload/commit/cf9a3704df21ce8b32feb0680793cba804cd66f7))
+* **live-preview:** populates rte uploads and relationships ([#4379](https://github.com/payloadcms/payload/issues/4379)) ([4090aeb](https://github.com/payloadcms/payload/commit/4090aebb0e94e776258f0c1c761044a4744a1857))
+* **live-preview:** sends raw js objects through window.postMessage instead of json ([#4354](https://github.com/payloadcms/payload/issues/4354)) ([03a3872](https://github.com/payloadcms/payload/commit/03a387233d1b8876a2fcaa5f3b3fd5ed512c0bc4))
+* simplifies query validation and fixes nested relationship fields ([#4391](https://github.com/payloadcms/payload/issues/4391)) ([4b5453e](https://github.com/payloadcms/payload/commit/4b5453e8e5484f7afcadbf5bccf8369b552969c6))
+* upload editing error with plugin-cloud ([#4170](https://github.com/payloadcms/payload/issues/4170)) ([fcbe574](https://github.com/payloadcms/payload/commit/fcbe5744d945dc43642cdaa2007ddc252ecafafa))
+* uploads files after validation ([#4218](https://github.com/payloadcms/payload/issues/4218)) ([65adfd2](https://github.com/payloadcms/payload/commit/65adfd21ed538b79628dc4f8ce9e1a5a1bba6aed))
+
+### ⚠ BREAKING CHANGES
+
+* **richtext-lexical:** lazy import React components to prevent client-only code from leaking into the server (#4290)
+
+### ⚠️ @payloadcms/richtext-lexical
+
+Most important: If you are updating `@payloadcms/richtext-lexical` to v0.4.0 or higher, you will HAVE to update `payload` to the latest version as well. If you don't update it, payload likely won't start up due to validation errors. It's generally good practice to upgrade packages prefixed with `@payloadcms/` together with `payload` and keep the versions in sync.
+
+`@payloadcms/richtext-slate` is not affected by this.
+
+Every single property in the `Feature` interface which accepts a React component now no longer accepts a React component, but a function which imports a React component instead. This is done to ensure no unnecessary client-only code is leaked to the server when importing Features on a server.
+Here's an example migration:
+
+Old:
+
+```ts
+import { BlockIcon } from '../../lexical/ui/icons/Block'
+...
+Icon: BlockIcon,
+```
+
+New:
+
+```ts
+// import { BlockIcon } from '../../lexical/ui/icons/Block' // <= Remove this import
+...
+Icon: () =>
+  // @ts-expect-error
+  import('../../lexical/ui/icons/Block').then((module) => module.BlockIcon),
+```
+
+Or alternatively, if you're using default exports instead of named exports:
+
+```ts
+// import BlockIcon from '../../lexical/ui/icons/Block' // <= Remove this import
+...
+Icon: () =>
+  // @ts-expect-error
+  import('../../lexical/ui/icons/Block'),
+```
+
+The types for `SanitizedEditorConfig` and `EditorConfig` have changed. Their respective `lexical` property no longer expects the `LexicalEditorConfig`. It now expects a function returning the `LexicalEditorConfig`. You will have to adjust this if you adjusted that property anywhere, e.g. when initializing the lexical field editor property, or when initializing a new headless editor.
+
+The following exports are now exported from the `@payloadcms/richtext-lexical/components` subpath exports instead of `@payloadcms/richtext-lexical`:
+
+- ToolbarButton
+- ToolbarDropdown
+- RichTextCell
+- RichTextField
+- defaultEditorLexicalConfig
+
+You will have to adjust your imports, only if you import any of those properties in your project.
+
+## [2.3.1](https://github.com/payloadcms/payload/compare/v2.3.0...v2.3.1) (2023-12-01)
+
+
+### Bug Fixes
+
+* ensure doc controls are not hidden behind lexical field ([#4345](https://github.com/payloadcms/payload/issues/4345)) ([bea79fe](https://github.com/payloadcms/payload/commit/bea79feaeaee18bf94dd04262f134483f1468494))
+* query validation on relationship fields ([#4353](https://github.com/payloadcms/payload/issues/4353)) ([fe888b5](https://github.com/payloadcms/payload/commit/fe888b5f6ceaa3969eac759cbdfb109b106dae05))
+* **richtext-lexical:** blocks content may be hidden behind components outside of the editor ([#4325](https://github.com/payloadcms/payload/issues/4325)) ([3e745e9](https://github.com/payloadcms/payload/commit/3e745e91da620a00e3f0f91892ee3ec66ba72bc0))
+* **richtext-lexical:** Blocks node: incorrect conversion from v1 node to v2 node ([ef84a2c](https://github.com/payloadcms/payload/commit/ef84a2cfffbb1be52dd948e59eeec0ce324e9046))
+
+## [2.3.0](https://github.com/payloadcms/payload/compare/v2.2.2...v2.3.0) (2023-11-30)
+
+
+### Features
+
+* add serbian (latin and cyrillic) translations ([#4268](https://github.com/payloadcms/payload/issues/4268)) ([40c8909](https://github.com/payloadcms/payload/commit/40c8909ee0003d45a1afa4524ade557268d01067))
+* **db-mongodb:** search for migrations dir intelligently ([530c825](https://github.com/payloadcms/payload/commit/530c825f806708df8672e66c8e9c559c5e625e5e))
+* **db-postgres:** search for migrations dir intelligently ([308979f](https://github.com/payloadcms/payload/commit/308979f31d27979955a52f32be4ea33849b48f30))
+* **live-preview:** batches api requests ([#4315](https://github.com/payloadcms/payload/issues/4315)) ([d49bb43](https://github.com/payloadcms/payload/commit/d49bb4351f22f17f68477c3145594abbb60fab05))
+* relationship sortOptions property ([#4301](https://github.com/payloadcms/payload/issues/4301)) ([224cddd](https://github.com/payloadcms/payload/commit/224cddd04573eff578ea3fa9ea5419f28b66c613))
+* support migrations with js files ([2122242](https://github.com/payloadcms/payload/commit/21222421929ae19728c31bdccc84995ce3951224))
+* support OAuth 2.0 format Authorization: Bearer tokens in headers ([c1eb9d1](https://github.com/payloadcms/payload/commit/c1eb9d1727daf96375e73943882621127b78e593))
+* useDocumentEvents ([#4284](https://github.com/payloadcms/payload/issues/4284)) ([9bb7a88](https://github.com/payloadcms/payload/commit/9bb7a88526569a726de468de6b2010d52169ea77))
+
+
+### Bug Fixes
+
+* **db-postgres:** allow for nested block fields to be queried ([#4237](https://github.com/payloadcms/payload/issues/4237)) ([cd07873](https://github.com/payloadcms/payload/commit/cd07873fc544766b4aeeff873dfb8d6e3e97e9dc))
+* **db-postgres:** error saving nested arrays with versions ([#4302](https://github.com/payloadcms/payload/issues/4302)) ([3514bfb](https://github.com/payloadcms/payload/commit/3514bfbdaee99341ae739d03591cb63bd9415fe3))
+* duplicate documents with required localized fields ([#4236](https://github.com/payloadcms/payload/issues/4236)) ([9da9b1f](https://github.com/payloadcms/payload/commit/9da9b1fc5050d4f29bcf6dce2f22027834aaf698))
+* incorrect key property in Tabs field component ([#4311](https://github.com/payloadcms/payload/issues/4311)) ([3502ce7](https://github.com/payloadcms/payload/commit/3502ce720b3020eed5fc733884b525303faa4c15)), closes [#4282](https://github.com/payloadcms/payload/issues/4282)
+* **live-preview-react:** removes payload from peer deps ([7e1052f](https://github.com/payloadcms/payload/commit/7e1052fd98c88a4d68af08f98ccc8936edb8ebf6))
+* **live-preview:** compounds merge results ([#4306](https://github.com/payloadcms/payload/issues/4306)) ([381c158](https://github.com/payloadcms/payload/commit/381c158b0303b515164ae487b0ce7e555ae1a08d))
+* **live-preview:** property resets rte nodes ([#4313](https://github.com/payloadcms/payload/issues/4313)) ([66679fb](https://github.com/payloadcms/payload/commit/66679fbdd6f804bff8a58d9504c226c9fb8a57a0))
+* **live-preview:** re-populates externally updated relationships ([#4287](https://github.com/payloadcms/payload/issues/4287)) ([57fc211](https://github.com/payloadcms/payload/commit/57fc2116749059bc55161897cf139031926035ec))
+* **live-preview:** removes payload from peer deps ([b4af95f](https://github.com/payloadcms/payload/commit/b4af95f894b5f6614bace38ef79e7148e084bd3b))
+* properly exports useDocumentsEvents hook ([#4314](https://github.com/payloadcms/payload/issues/4314)) ([5420963](https://github.com/payloadcms/payload/commit/542096361f0c13aed9c6a7d971e2c47047d8e2d2))
+* properly sets tabs key in fieldSchemaToJSON ([#4317](https://github.com/payloadcms/payload/issues/4317)) ([9cc88bb](https://github.com/payloadcms/payload/commit/9cc88bb47443ecdf525f4c99d9f13d81c141c471))
+* **richtext-lexical:** HTML Converter field not working inside of tabs ([#4293](https://github.com/payloadcms/payload/issues/4293)) ([5bf6493](https://github.com/payloadcms/payload/commit/5bf64933b4b99a0ac8ef7d1d91d0165a16636a9f))
+* **richtext-lexical:** re-use payload population logic to fix population-related issues ([#4291](https://github.com/payloadcms/payload/issues/4291)) ([094d02c](https://github.com/payloadcms/payload/commit/094d02ce1d85106470a1a8c6ffe9050873f2e57a))
+* **richtext-slate:** add use client to top of tsx files importing from payload core ([#4312](https://github.com/payloadcms/payload/issues/4312)) ([d4f28b1](https://github.com/payloadcms/payload/commit/d4f28b16b4d42f224e9c5e4254f9ec55107a2f97))
+
+
+### BREAKING CHANGES
+
+### ⚠️ @payloadcms/richtext-lexical
+
+The `SlashMenuGroup` and `SlashMenuOption` classes have changed. If you have any custom lexical Features which are adding new slash menu entries, this will be a breaking change for you. If not, no action is required from your side.
+
+Here are the breaking changes and how to migrate:
+
+1. The `SlashMenuOption`'s first argument is now used as a `key` and not as a display name. Additionally, a new, optional `displayName` property is added which will serve as the display name. Make sure your `key` does not contain any spaces or special characters.
+2. The `title` property of `SlashMenuGroup` has been replaced by a new, mandatory `key` and an optional `displayName` property. To migrate, you will have to remove the `title` property and add a `key` property instead - make sure you do not use spaces or special characters in the `key`.
+3. Additionally, if you have custom styles targeting elements inside of slash or floating-select-toolbar menus, you will have to adjust those too, as the CSS classes changed
+
+[This is an example of performing these updates](
+https://github.com/payloadcms/payload/pull/4257/files#diff-dc2e7f503dd7076dff1d810da7ec77b8fc6a9e41127df4a417dece1b6e1587a0L61)
+
+## [2.2.2](https://github.com/payloadcms/payload/compare/v2.2.1...v2.2.2) (2023-11-27)
+
+
+### Features
+
+* **i18n:** adds Korean translation ([#4258](https://github.com/payloadcms/payload/issues/4258)) ([1401718](https://github.com/payloadcms/payload/commit/1401718b3b549ce1454389a982474dbe159eb61f))
+
+
+### Bug Fixes
+
+* number field validation ([#4233](https://github.com/payloadcms/payload/issues/4233)) ([19fcfc2](https://github.com/payloadcms/payload/commit/19fcfc27af2ecb68ff989dcaed19b7b7d041a322))
+* passes date options to the react-datepicker in filter UI, removes duplicate options from operators select ([#4225](https://github.com/payloadcms/payload/issues/4225)) ([3d2b62b](https://github.com/payloadcms/payload/commit/3d2b62b2100e36a54adc6a675257a4d671fdd469))
+* prevent json data getting reset when switching tabs ([#4123](https://github.com/payloadcms/payload/issues/4123)) ([1dcd3a2](https://github.com/payloadcms/payload/commit/1dcd3a27825ed9d276b997a66f84bb2c05e87955))
+* transactions broken within doc access ([443847e](https://github.com/payloadcms/payload/commit/443847ec716a3b87032d9d1904b6c90aadd47197))
+* typo in polish translations ([#4234](https://github.com/payloadcms/payload/issues/4234)) ([56a4692](https://github.com/payloadcms/payload/commit/56a469266207ef83053b0c9176d1be4fc26087e6))
+
+## [2.2.1](https://github.com/payloadcms/payload/compare/v2.2.0...v2.2.1) (2023-11-21)
+
+
+### Bug Fixes
+
+* make outputSchema optional on richtext config ([#4230](https://github.com/payloadcms/payload/issues/4230)) ([3a784a0](https://github.com/payloadcms/payload/commit/3a784a06cc6c42c96b8d6cf023d942e6661be7b5))
+
 ## [2.2.0](https://github.com/payloadcms/payload/compare/v2.1.1...v2.2.0) (2023-11-20)
 
 

CONTRIBUTING.md

@@ -14,7 +14,7 @@ If you find a vulnerability within the core Payload repository, and we determine
 
 ## Documentation edits
 
-Payload documentation can be found directly within its codebase and you can feel free to make changes / improvements to any of it through opening a PR. We utilize these files directly in our website and will periodically deploy documentation updates as necessary.
+Payload documentation can be found directly within its codebase, and you can feel free to make changes / improvements to any of it through opening a PR. We utilize these files directly in our website and will periodically deploy documentation updates as necessary.
 
 ## Building additional features
 
@@ -30,9 +30,17 @@ Our design review ensures that proposed changes fit seamlessly with other compon
 
 To help us work on new features, you can create a new feature request post in [GitHub Discussion](https://github.com/payloadcms/payload/discussions) or discuss it in our [Discord](https://discord.com/invite/payload). New functionality often has large implications across the entire Payload repo, so it is best to discuss the architecture and approach before starting work on a pull request.
 
+### Installation & Requirements
+
+Payload is structured as a Monorepo, encompassing not only the core Payload platform but also various plugins and packages. To install all required dependencies, you have to run `pnpm install` once in the root directory. **PNPM IS REQUIRED!** Yarn or npm will not work - you will have to use pnpm to develop in the core repository. In most systems, the easiest way to install pnpm is to run `corepack enable` in your terminal.
+
+If you're coming from a very outdated version of payload, it is recommended to nuke the node_modules folder before running pnpm install. On UNIX systems, you can easily do that using the `pnpm clean:unix` command, which will delete all node_modules folders and build artefacts.
+
+It is also recommended to use at least Node v18 or higher. You can check your current node version by typing `node --version` in your terminal. The easiest way to switch between different node versions is to use [nvm](https://github.com/nvm-sh/nvm#intro).
+
 ### Code
 
-Most new functionality should keep testing in mind. With 1.0, testability of new features has been vastly improved. All top-level directories within the `test/` directory are for testing a specific category: `fields`, `collections`, etc.
+Most new functionality should keep testing in mind. All top-level directories within the `test/` directory are for testing a specific category: `fields`, `collections`, etc.
 
 If it makes sense to add your feature to an existing test directory, please do so.
 
@@ -49,21 +57,35 @@ A typical directory with `test/` will be structured like this:
 - `config.ts` - This is the _granular_ Payload config for testing. It should be as lightweight as possible. Reference existing configs for an example
 - `int.spec.ts` - This is the test file run by jest. Any test file must have a `*int.spec.ts` suffix.
 - `e2e.spec.ts` - This is the end-to-end test file that will load up the admin UI using the above config and run Playwright tests. These tests are typically only needed if a large change is being made to the Admin UI.
-- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `pnpm dev:generate-types my-test-dir`.
+- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `pnpm dev:generate-types my-test-dir`. Replace `my-test-dir` with the name of your testing directory.
 
-The directory split up in this way specifically to reduce friction when creating tests and to add the ability to boot up Payload with that specific config.
+Each test directory is split up in this way specifically to reduce friction when creating tests and to add the ability to boot up Payload with that specific config.
 
-The following command will start Payload with your config: `pnpm dev my-test-dir`. This command will start up Payload using your config and refresh a test database on every restart.
+The following command will start Payload with your config: `pnpm dev my-test-dir`. Example: `pnpm dev fields` for the test/`fields` test suite. This command will start up Payload using your config and refresh a test database on every restart. If you're using VS Code, the most common run configs are automatically added to your editor - you should be able to find them in your VS Code launch tab.
 
-By default, it will automatically log you in with the default credentials. To disable that, you can either pass in the --no-auto-login flag (example: `pnpm dev my-test-dir --no-auto-login`) or set the `PAYLOAD_PUBLIC_DISABLE_AUTO_LOGIN` environment variable to `false`.
+By default, payload will [automatically log you in](https://payloadcms.com/docs/authentication/config#admin-autologin) with the default credentials. To disable that, you can either pass in the --no-auto-login flag (example: `pnpm dev my-test-dir --no-auto-login`) or set the `PAYLOAD_PUBLIC_DISABLE_AUTO_LOGIN` environment variable to `false`.
 
-If you wish to use to your own Mongo database for the `test` directory instead of using the in memory database, all you need to do is add the following env vars to the `test/dev.ts` file:
+The default credentials are `dev@payloadcms.com` as E-Mail and `test` as password. These are used in the auto-login.
+
+### Testing with your own MongoDB database
+
+If you wish to use your own MongoDB database for the `test` directory instead of using the in memory database, all you need to do is add the following env vars to the `test/dev.ts` file:
 
 - `process.env.NODE_ENV`
 - `process.env.PAYLOAD_TEST_MONGO_URL`
-- Simply set `process.env.NODE_ENV` to `test` and set `process.env.PAYLOAD_TEST_MONGO_URL` to your mongo url e.g. `mongodb://127.0.0.1/your-test-db`.
+- Simply set `process.env.NODE_ENV` to `test` and set `process.env.PAYLOAD_TEST_MONGO_URL` to your MongoDB URL e.g. `mongodb://127.0.0.1/your-test-db`.
 
-NOTE: It is recommended to add the test credentials (located in `test/credentials.ts`) to your autofill for `localhost:3000/admin` as this will be required on every nodemon restart. The default credentials are `dev@payloadcms.com` as E-Mail and `test` as password.
+### Using Postgres
+
+If you have postgres installed on your system, you can also run the test suites using postgres. By default, mongodb is used.
+
+To do that, simply set the `PAYLOAD_DATABASE` environment variable to `postgres`.
+
+### Running the e2e and int tests
+
+You can run the entire test suite using `pnpm test`. If you wish to only run e2e tests, you can use `pnpm test:e2e`. If you wish to only run int tests, you can use `pnpm test:int`.
+
+By default, `pnpm test:int` will only run int test against MongoDB. To run int tests against postgres, you can use `pnpm test:int:postgres`. You will have to have postgres installed on your system for this to work.
 
 ### Commits
 

docs/admin/components.mdx

@@ -572,13 +572,15 @@ With these properties you can add multiple components before and after the input
 
 ```tsx
 import React from 'react'
+import { Field } from 'payload/types'
+
 import './style.scss'
 
 const ClearButton: React.FC = () => {
   return <button onClick={() => {/* ... */}}>X</button>
 }
 
-const fieldField: Field = {
+const titleField: Field = {
   name: 'title',
   type: 'text',
   admin: {

docs/admin/excluding-server-code.mdx

@@ -172,20 +172,34 @@ export default buildConfig({
   collections: [Subscriptions],
   admin: {
     bundler: viteBundler(),
-    vite: (config) => {
-      return {
-        ...config,
-        resolve: {
-          ...config.resolve,
-          // highlight-start
-          alias: {
-            ...config.resolve.alias,
-            // remember, vite aliases are exact-match only
-            './hooks/createStripeSubscription': mockModulePath,
-          },
-          // highlight-end
-        },
+    vite: (incomingViteConfig) => {
+      const existingAliases = incomingViteConfig?.resolve?.alias || {};
+      let aliasArray: { find: string | RegExp; replacement: string; }[] = [];
+
+      // Pass the existing Vite aliases
+      if (Array.isArray(existingAliases)) {
+        aliasArray = existingAliases;
+      } else {
+        aliasArray = Object.values(existingAliases);
       }
+
+
+      // highlight-start
+      // Add your own aliases using the find and replacement keys
+      // remember, vite aliases are exact-match only
+      aliasArray.push({
+        find: '../server-only-module',
+        replacement: path.resolve(__dirname, './path/to/browser-safe-module.js')
+      });
+      // highlight-end
+
+      return {
+        ...incomingViteConfig,
+        resolve: {
+          ...(incomingViteConfig?.resolve || {}),
+          alias: aliasArray,
+        }
+      };
     },
   },
 })

docs/admin/hooks.mdx

@@ -784,3 +784,33 @@ const MyComponent: React.FC = () => {
     </button>
   )
 }
+```
+
+### useDocumentEvents
+
+The `useDocumentEvents` hook provides a way of subscribing to cross-document events, such as updates made to nested documents within a drawer. This hook will report document events that are outside the scope of the document currently being edited. This hook provides the following:
+
+| Property                  | Description                                                                                                                               |
+|---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|
+| **`mostRecentUpdate`**    | An object containing the most recently updated document. It contains the `entitySlug`, `id` (if collection), and `updatedAt` properties   |
+| **`reportUpdate`**        | A method used to report updates to documents. It accepts the same arguments as the `mostRecentUpdate` property.                           |
+
+**Example:**
+
+```tsx
+import { useDocumentEvents } from 'payload/components/hooks'
+
+const ListenForUpdates: React.FC = () => {
+  const { mostRecentUpdate } = useDocumentEvents()
+
+  return (
+    <span>
+      {JSON.stringify(mostRecentUpdate)}
+    </span>
+  )
+}
+```
+
+<Banner type="info">
+  Right now the `useDocumentEvents` hook only tracks recently updated documents, but in the future it will track more document-related events as needed, such as document creation, deletion, etc.
+</Banner>

docs/admin/vite.mdx

@@ -21,7 +21,7 @@ Then you will need to add the [bundler](/docs/admin/bundlers) to your Payload co
 
 ```ts
 import { buildConfig } from '@payloadcms/config'
-import viteBundler from '@payloadcms/bundler-vite'
+import { viteBundler } from '@payloadcms/bundler-vite'
 
 export default buildConfig({
   collections: [],
@@ -60,17 +60,33 @@ export const buildConfig({
   collections: [],
   admin: {
     bundler: viteBundler(),
-    vite: (incomingViteConfig) => ({
-      ...incomingViteConfig,
-      resolve: {
-        ...(incomingViteConfig?.resolve || {}),
-        alias: {
-          ...(incomingViteConfig?.resolve?.alias || {}),
-          '../server-only-module': path.resolve(__dirname, './path/to/browser-safe-module.js'),
-          '../../server-only-module': path.resolve(__dirname, './path/to/browser-safe-module.js'),
-        }
+    vite: (incomingViteConfig) => {
+      const existingAliases = incomingViteConfig?.resolve?.alias || {};
+      let aliasArray: { find: string | RegExp; replacement: string; }[] = [];
+
+      // Pass the existing Vite aliases
+      if (Array.isArray(existingAliases)) {
+        aliasArray = existingAliases;
+      } else {
+        aliasArray = Object.values(existingAliases);
       }
-    })
+
+      // Add your own aliases using the find and replacement keys
+      aliasArray.push({
+        find: '../server-only-module',
+        replacement: path.resolve(__dirname, './path/to/browser-safe-module.js')
+        find: '../../server-only-module',
+        replacement: path.resolve(__dirname, './path/to/browser-safe-module.js')
+      });
+
+      return {
+        ...incomingViteConfig,
+        resolve: {
+          ...(incomingViteConfig?.resolve || {}),
+          alias: aliasArray,
+        }
+      };
+    },
   }
 })
 ```
@@ -90,7 +106,8 @@ That plugin should create an alias to support Vite as follows:
 ```ts
 {
   // aliases go here
-  'payload-plugin-cool': path.resolve(__dirname, './my-admin-plugin.js')
+  find: 'payload-plugin-cool',
+  replacement: path.resolve(__dirname, './my-admin-plugin.js')
 }
 
 ```
@@ -108,22 +125,36 @@ export const buildConfig({
   collections: [],
   admin: {
     bundler: viteBundler(),
-    vite: (incomingViteConfig) => ({
-      ...incomingViteConfig,
-      resolve: {
-        ...(incomingViteConfig?.resolve || {}),
-        alias: {
-          ...(incomingViteConfig?.resolve?.alias || {}),
-          // custom aliases go here
-          '../server-only-module': path.resolve(__dirname, './path/to/browser-safe-module.js'),
-        }
+    vite: (incomingViteConfig) => {
+      const existingAliases = incomingViteConfig?.resolve?.alias || {};
+      let aliasArray: { find: string | RegExp; replacement: string; }[] = [];
+
+      // Pass the existing Vite aliases
+      if (Array.isArray(existingAliases)) {
+        aliasArray = existingAliases;
+      } else {
+        aliasArray = Object.values(existingAliases);
       }
-    })
+
+      // Add your own aliases using the find and replacement keys
+      aliasArray.push({
+        find: '../server-only-module',
+        replacement: path.resolve(__dirname, './path/to/browser-safe-module.js')
+      });
+
+      return {
+        ...incomingViteConfig,
+        resolve: {
+          ...(incomingViteConfig?.resolve || {}),
+          alias: aliasArray,
+        }
+      };
+    },
   }
 })
 ```
 
-Learn more about [aliasing server-only modules](http://localhost:3000/docs/admin/excluding-server-code#aliasing-server-only-modules).
+Learn more about [aliasing server-only modules](https://payloadcms.com/docs/admin/excluding-server-code#aliasing-server-only-modules).
 
 Even though there is a new property for Vite configs specifically, we have implemented some "compatibility" between Webpack and Vite out-of-the-box.
 

docs/authentication/overview.mdx

@@ -82,7 +82,7 @@ Once enabled, each document that is created within the Collection can be thought
 
 ### Token-based auth
 
-Successfully logging in returns a `JWT` (JSON web token) which is how a user will identify themselves to Payload. By providing this JWT via either an HTTP-only cookie or an `Authorization` header, Payload will automatically identify the user and add its user JWT data to the Express `req`, which is available throughout Payload including within access control, hooks, and more.
+Successfully logging in returns a `JWT` (JSON web token) which is how a user will identify themselves to Payload. By providing this JWT via either an HTTP-only cookie or an `Authorization: JWT` or `Authorization: Bearer` header, Payload will automatically identify the user and add its user JWT data to the Express `req`, which is available throughout Payload including within access control, hooks, and more.
 
 You can specify what data gets encoded to the JWT token by setting `saveToJWT` to true in your auth collection fields. If you wish to use a different key other than the field `name`, you can provide it to `saveToJWT` as a string. It is also possible to use `saveToJWT` on fields that are nested in inside groups and tabs. If a group has a `saveToJWT` set it will include the object with all sub-fields in the token. You can set `saveToJWT: false` for any fields you wish to omit. If a field inside a group has `saveToJWT` set, but the group does not, the field will be included at the top level of the token.
 

docs/configuration/collections.mdx

@@ -59,7 +59,7 @@ export const Orders: CollectionConfig = {
 #### More collection config examples
 
 You can find an assortment
-of [example collection configs](https://github.com/payloadcms/public-demo/tree/master/src/collections) in the Public
+of [example collection configs](https://github.com/payloadcms/public-demo/tree/master/src/payload/collections) in the Public
 Demo source code on GitHub.
 
 ### Admin options

docs/configuration/globals.mdx

@@ -59,7 +59,7 @@ export default Nav
 
 #### Global config example
 
-You can find an [example Global config](https://github.com/payloadcms/public-demo/blob/master/src/globals/MainMenu.ts) in the Public Demo source code on GitHub.
+You can find a few [example Global configs](https://github.com/payloadcms/public-demo/tree/master/src/payload/globals) in the Public Demo source code on GitHub.
 
 ### Admin options
 

docs/database/migrations.mdx

@@ -46,8 +46,14 @@ export async function down({ payload }: MigrateDownArgs): Promise<void> {
 };
 ```
 
+### Migrations Directory
+
+Each DB adapter has an optional property `migrationDir` where you can override where you want your migrations to be stored/read. If this is not specified, Payload will check the default and possibly make a best effort to find your migrations directory by searching in common locations ie. `./src/migrations`, `./dist/migrations`, `./migrations`, etc.
+
 All database adapters should implement similar migration patterns, but there will be small differences based on the adapter and its specific needs. Below is a list of all migration commands that should be supported by your database adapter.
 
+## Commands
+
 ### Migrate
 
 The `migrate` command will run any migrations that have not yet been run.

docs/fields/overview.mdx

@@ -251,11 +251,16 @@ const field = {
 
 ### Description
 
-A description can be configured three ways.
+A description can be configured in three ways.
 
 - As a string
-- As a function that accepts an object containing the field's value, which returns a string
-- As a React component that accepts value as a prop
+- As a function which returns a string
+- As a React component
+
+Functions are called with an optional argument object with the following shape, and React components are rendered with the following props:
+
+- `path` - the path of the field
+- `value` - the current value of the field
 
 As shown above, you can simply provide a string that will show by the field, but there are use cases where you may want to create some dynamic feedback. By using a function or a component for the `description` property you can provide realtime feedback as the user interacts with the form.
 
@@ -269,8 +274,8 @@ As shown above, you can simply provide a string that will show by the field, but
       type: 'text',
       maxLength: 20,
       admin: {
-        description: ({ value }) =>
-          `${typeof value === 'string' ? 20 - value.length : '20'} characters left`,
+        description: ({ path, value }) =>
+          `${typeof value === 'string' ? 20 - value.length : '20'} characters left (field: ${path})`,
       },
     },
   ]
@@ -290,11 +295,12 @@ This example will display the number of characters allowed as the user types.
       maxLength: 20,
       admin: {
         description:
-          ({ value }) => (
+          ({ path, value }) => (
             <div>
               Character count:
               {' '}
               { value?.length || 0 }
+               (field: {path})
             </div>
           )
       }
@@ -303,7 +309,7 @@ This example will display the number of characters allowed as the user types.
 }
 ```
 
-This component will count the number of characters entered.
+This component will count the number of characters entered, as well as display the path of the field.
 
 ### TypeScript
 

docs/fields/relationship.mdx

@@ -70,6 +70,43 @@ Set to `true` if you'd like this field to be sortable within the Admin UI using
 
 Set to `false` if you'd like to disable the ability to create new documents from within the relationship field (hides the "Add new" button in the admin UI).
 
+**`sortOptions`**
+
+The `sortOptions` property allows you to define a default sorting order for the options within a Relationship field's dropdown. This can be particularly useful for ensuring that the most relevant options are presented first to the user.
+
+You can specify `sortOptions` in two ways:
+
+**As a string:**
+
+Provide a string to define a global default sort field for all relationship field dropdowns across different collections. You can prefix the field name with a minus symbol ("-") to sort in descending order.
+
+Example:
+
+```ts
+sortOptions: 'fieldName',
+```
+This configuration will sort all relationship field dropdowns by `"fieldName"` in ascending order.
+
+**As an object :**
+
+Specify an object where keys are collection slugs and values are strings representing the field names to sort by. This allows for different sorting fields for each collection's relationship dropdown.
+
+Example:
+
+```ts
+sortOptions: {
+  "pages": "fieldName1",
+  "posts": "-fieldName2",
+  "categories": "fieldName3"
+}
+```
+In this configuration:
+- Dropdowns related to `pages` will be sorted by `"fieldName1"` in ascending order.
+- Dropdowns for `posts` will use `"fieldName2"` for sorting in descending order (noted by the "-" prefix).
+- Dropdowns associated with `categories` will sort based on `"fieldName3"` in ascending order.
+
+Note: If `sortOptions` is not defined, the default sorting behavior of the Relationship field dropdown will be used.
+
 ### Filtering relationship options
 
 Options can be dynamically limited by supplying a [query constraint](/docs/queries/overview), which will be used both for validating input and filtering available relationships in the UI.

docs/getting-started/installation.mdx

@@ -10,7 +10,7 @@ keywords: documentation, getting started, guide, Content Management System, cms,
 
 Payload requires the following software:
 
-- Yarn or NPM
+- Any JavaScript package manager (Yarn, NPM, or pnpm)
 - Node.js version 16+
 - Any [compatible database](/docs/database/overview) (MongoDB or Postgres)
 

docs/live-preview/frontend.mdx

@@ -187,3 +187,55 @@ For a working demonstration of this, check out the official [Live Preview Exampl
 - [Next.js App Router](https://github.com/payloadcms/payload/tree/main/examples/live-preview/next-app)
 - [Next.js Pages Router](https://github.com/payloadcms/payload/tree/main/examples/live-preview/next-pages)
 
+## Troubleshooting
+
+### Relationships and/or uploads are not populating
+
+If you are using relationships or uploads in your front-end application, and your front-end application runs on a different domain than your Payload server, you may need to configure [CORS](../configuration/overview) to allow requests to be made between the two domains. This includes sites that are running on a different port or subdomain. Similarly, if you are protecting resources behind user authentication, you may also need to configure [CSRF](../authentication/overview#csrf-protection) to allow cookies to be sent between the two domains. For example:
+
+```ts
+// payload.config.ts
+{
+  // ...
+  // If your site is running on a different domain than your Payload server,
+  // This will allows requests to be made between the two domains
+  cors: {
+    [
+      'http://localhost:3001' // Your front-end application
+    ],
+  },
+  // If you are protecting resources behind user authentication,
+  // This will allow cookies to be sent between the two domains
+  csrf: {
+    [
+      'http://localhost:3001' // Your front-end application
+    ],
+  },
+}
+```
+
+### Relationships and/or uploads disappear after editing a document
+
+It is possible that either you are setting an improper [`depth`](../getting-started/concepts#depth) in your initial request and/or your `useLivePreview` hook, or they're mismatched. Ensure that the `depth` parameter is set to the correct value, and that it matches exactly in both places. For example:
+
+```tsx
+// Your initial request
+const { docs } = await payload.find({
+  collection: 'pages',
+  depth: 1, // Ensure this is set to the proper depth for your application
+  where: {
+    slug: {
+      equals: 'home',
+    }
+  }
+})
+```
+
+```tsx
+// Your hook
+const { data } = useLivePreview<PageType>({
+  initialData: initialPage,
+  serverURL: PAYLOAD_SERVER_URL,
+  depth: 1, // Ensure this matches the depth of your initial request
+})
+```

docs/live-preview/overview.mdx

@@ -12,6 +12,10 @@ Live Preview works by rendering an iframe on the page that loads your front-end
 
 {/* IMAGE OF LIVE PREVIEW HERE */}
 
+<Banner type="warning">
+  Live Preview is currently in beta. You may use this feature in production, but please be aware that it is subject to change and may not be fully stable for all use cases. If you encounter any issues, please [report them](https://github.com/payloadcms/payload/issues/new?assignees=jacobsfletch&labels=possible-bug&projects=&title=Live%20Preview&template=1.bug_report.yml) with as much detail as possible.
+</Banner>
+
 ## Setup
 
 Setting up Live Preview is easy. You first need to enable it through the `admin.livePreview` property of your Payload config. It takes the following options:

docs/local-api/overview.mdx

@@ -6,7 +6,9 @@ desc: The Payload Local API allows you to interact with your database and execut
 keywords: local api, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-The Payload Local API gives you the ability to execute the same operations that are available through REST and GraphQL within Node, directly on your server. Here, you don't need to deal with server latency or network speed whatsoever and can interact directly with your database.
+The Payload Local API gives you the ability to execute the same operations that are available through REST and GraphQL
+within Node, directly on your server. Here, you don't need to deal with server latency or network speed whatsoever and
+can interact directly with your database.
 
 <Banner type="success">
   <strong>Tip:</strong>
@@ -30,7 +32,9 @@ You can gain access to the currently running `payload` object via two ways:
 
 ##### Importing it
 
-You can import or require `payload` into your own files after it's been initialized, but you need to make sure that your `import` / `require` statements come **after** you call `payload.init()`—otherwise Payload won't have been initialized yet. That might be obvious. To us, it's usually not.
+You can import or require `payload` into your own files after it's been initialized, but you need to make sure that
+your `import` / `require` statements come **after** you call `payload.init()`—otherwise Payload won't have been
+initialized yet. That might be obvious. To us, it's usually not.
 
 Example:
 
@@ -47,7 +51,8 @@ const afterChangeHook: CollectionAfterChangeHook = async () => {
 
 ##### Accessing from the `req`
 
-Payload is available anywhere you have access to the Express `req` - including within your access control and hook functions.
+Payload is available anywhere you have access to the Express `req` - including within your access control and hook
+functions.
 
 Example:
 
@@ -61,10 +66,11 @@ const afterChangeHook: CollectionAfterChangeHook = async ({ req: { payload } })
 
 ### Local options available
 
-You can specify more options within the Local API vs. REST or GraphQL due to the server-only context that they are executed in.
+You can specify more options within the Local API vs. REST or GraphQL due to the server-only context that they are
+executed in.
 
 | Local Option       | Description                                                                                                                                                                                                                                                                                                                                                           |
-| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `collection`       | Required for Collection operations. Specifies the Collection slug to operate against.                                                                                                                                                                                                                                                                                 |
 | `data`             | The data to use within the operation. Required for `create`, `update`.                                                                                                                                                                                                                                                                                                |
 | `depth`            | [Control auto-population](/docs/getting-started/concepts#depth) of nested relationship and upload fields.                                                                                                                                                                                                                                                             |
@@ -268,7 +274,8 @@ const result = await payload.delete({
 
 ## Auth Operations
 
-If a collection has [`Authentication`](/docs/authentication/overview) enabled, additional Local API operations will be available:
+If a collection has [`Authentication`](/docs/authentication/overview) enabled, additional Local API operations will be
+available:
 
 #### Login
 
@@ -319,10 +326,11 @@ const token = await payload.forgotPassword({
 //   token: 'o38jf0q34jfij43f3f...', // JWT used for auth
 //   user: { ... } // the user document that just logged in
 // }
-const result = await payload.forgotPassword({
+const result = await payload.resetPassword({
   collection: 'users', // required
   data: {
     // required
+    password: req.body.password, // the new password to set
     token: 'afh3o2jf2p3f...', // the token generated from the forgotPassword operation
   },
   req: req, // pass an Express `req` which will be provided to all hooks
@@ -402,7 +410,9 @@ const result = await payload.updateGlobal({
 
 ## Next.js Conflict with Local API
 
-There is a known issue when using the Local API with Next.js version `13.4.13` and higher. Next.js executes within a separate child process, and Payload has not been initalized yet in these instances. That means that unless you explicitly initialize Payload within your operation, it will not be running and return no data / an empty object.
+There is a known issue when using the Local API with Next.js version `13.4.13` and higher. Next.js executes within a
+separate child process, and Payload has not been initalized yet in these instances. That means that unless you
+explicitly initialize Payload within your operation, it will not be running and return no data / an empty object.
 
 As a workaround, we recommend leveraging the following pattern to determine and ensure Payload is initalized:
 
@@ -462,7 +472,8 @@ export const getPayloadClient = async ({ initOptions, seed }: Args = {}): Promis
 }
 ```
 
-To checkout how this works in a project, take a look at our [custom server example](https://github.com/payloadcms/payload/blob/master/examples/custom-server/src/getPayload.ts).
+To checkout how this works in a project, take a look at
+our [custom server example](https://github.com/payloadcms/payload/blob/master/examples/custom-server/src/getPayload.ts).
 
 ## Example Script using Local API
 

docs/production/deployment.mdx

@@ -11,7 +11,8 @@ keywords: deployment, production, config, configuration, documentation, Content
   launch. <strong>Awesome! Great work!</strong> Now, what's next?
 </Banner>
 
-There are many ways to deploy Payload to a production environment. When evaluating how you will deploy Payload, you need to consider these main aspects:
+There are many ways to deploy Payload to a production environment. When evaluating how you will deploy Payload, you need
+to consider these main aspects:
 
 1. [Basics](#basics)
 1. [Security](#security)
@@ -21,19 +22,26 @@ There are many ways to deploy Payload to a production environment. When evaluati
 
 ## Basics
 
-In order for Payload to run, it requires both the server code and the built admin panel. These will be the `dist` and `build` directories by default. If you've used `create-payload-app` to create your project, executing the `build` npm script will build both and output these directories.
+In order for Payload to run, it requires both the server code and the built admin panel. These will be the `dist`
+and `build` directories by default. If you've used `create-payload-app` to create your project, executing the `build`
+npm script will build both and output these directories.
 
 ## Security
 
-Payload features a suite of security features that you can rely on to strengthen your application's security. When deploying to Production, it's a good idea to double-check that you are making proper use of each of them.
+Payload features a suite of security features that you can rely on to strengthen your application's security. When
+deploying to Production, it's a good idea to double-check that you are making proper use of each of them.
 
 ##### The Secret Key
 
-When you initialize Payload, you provide it with a `secret` property. This property should be impossible to guess and extremely difficult for brute-force attacks to crack. Make sure your Production `secret` is a long, complex string. It's often best practice to store it in an `env` file which is not checked into your Git repository, using `dotenv` to supply it to your `payload.init` call.
+When you initialize Payload, you provide it with a `secret` property. This property should be impossible to guess and
+extremely difficult for brute-force attacks to crack. Make sure your Production `secret` is a long, complex string. It's
+often best practice to store it in an `env` file which is not checked into your Git repository, using `dotenv` to supply
+it to your `payload.init` call.
 
 ##### Double-check and thoroughly test all Access Control
 
-Because _**you**_ are in complete control of who can do what with your data, you should double and triple-check that you wield that power responsibly before deploying to Production.
+Because _**you**_ are in complete control of who can do what with your data, you should double and triple-check that you
+wield that power responsibly before deploying to Production.
 
 <Banner type="error">
   <strong>By default, all Access Control functions require that a user is successfully logged in to Payload to create, read, update, or delete data.</strong>{' '}
@@ -44,7 +52,8 @@ Because _**you**_ are in complete control of who can do what with your data, you
 
 ##### Building the Admin panel
 
-Before running in Production, you need to have built a production-ready copy of the Payload Admin panel. To do this, Payload provides the `build` NPM script. You can use it by adding a `script` to your `package.json` file like this:
+Before running in Production, you need to have built a production-ready copy of the Payload Admin panel. To do this,
+Payload provides the `build` NPM script. You can use it by adding a `script` to your `package.json` file like this:
 
 `package.json`:
 
@@ -60,19 +69,26 @@ Before running in Production, you need to have built a production-ready copy of
 }
 ```
 
-Then, to build Payload, you would run `npm run build` in your project folder. A production-ready Admin bundle will be created in the `build` directory.
+Then, to build Payload, you would run `npm run build` in your project folder. A production-ready Admin bundle will be
+created in the `build` directory.
 
 ##### Setting Node to Production
 
-Make sure you set the environment variable `NODE_ENV` to `production`. Based on this variable, many Node packages automatically optimize themselves. In production, Payload automatically disables the [GraphQL Playground](/docs/graphql/overview#graphql-playground), serves a production-ready version of the Admin panel, and other changes.
+Make sure you set the environment variable `NODE_ENV` to `production`. Based on this variable, many Node packages
+automatically optimize themselves. In production, Payload automatically disables
+the [GraphQL Playground](/docs/graphql/overview#graphql-playground), serves a production-ready version of the Admin
+panel, and other changes.
 
 ##### Secure Cookie Settings
 
-You should be using an SSL certificate for production Payload instances, which means you can [enable secure cookies](/docs/authentication/config) in your Authentication-enabled Collection configs.
+You should be using an SSL certificate for production Payload instances, which means you
+can [enable secure cookies](/docs/authentication/config) in your Authentication-enabled Collection configs.
 
 ##### Preventing API Abuse
 
-Payload comes with a robust set of built-in anti-abuse measures, such as locking out users after X amount of failed login attempts, request rate limiting, GraphQL query complexity limits, max `depth` settings, and more. [Click here to learn more](/docs/production/preventing-abuse).
+Payload comes with a robust set of built-in anti-abuse measures, such as locking out users after X amount of failed
+login attempts, request rate limiting, GraphQL query complexity limits, max `depth` settings, and
+more. [Click here to learn more](/docs/production/preventing-abuse).
 
 ## MongoDB
 
@@ -80,11 +96,18 @@ Payload can be used with any MongoDB compatible database including AWS DocumentD
 
 ##### Managing MongoDB yourself
 
-If you are using a [persistent filesystem-based cloud host](#persistent-vs-ephemeral-filesystems) such as a [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/) or an [Amazon EC2](https://aws.amazon.com/ec2/?ec2-whats-new.sort-by=item.additionalFields.postDateTime&ec2-whats-new.sort-order=desc) server, you might opt to install MongoDB directly on that server itself so that Node can communicate with it locally. With this approach, you can benefit from faster response times, but scaling can become more involved as your app's user base grows.
+If you are using a [persistent filesystem-based cloud host](#persistent-vs-ephemeral-filesystems) such as
+a [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/) or
+an [Amazon EC2](https://aws.amazon.com/ec2/?ec2-whats-new.sort-by=item.additionalFields.postDateTime&ec2-whats-new.sort-order=desc)
+server, you might opt to install MongoDB directly on that server itself so that Node can communicate with it locally.
+With this approach, you can benefit from faster response times, but scaling can become more involved as your app's user
+base grows.
 
 ##### Letting someone else do it
 
-Alternatively, you can rely on a third-party MongoDB host such as [MongoDB Atlas](https://www.mongodb.com/). With Atlas or a similar cloud provider, you can trust them to take care of your database's availability, security, redundancy, and backups.
+Alternatively, you can rely on a third-party MongoDB host such as [MongoDB Atlas](https://www.mongodb.com/). With Atlas
+or a similar cloud provider, you can trust them to take care of your database's availability, security, redundancy, and
+backups.
 
 <Banner type="warning">
   <strong>Note:</strong>
@@ -98,21 +121,31 @@ Alternatively, you can rely on a third-party MongoDB host such as [MongoDB Atlas
 
 ##### DocumentDB
 
-When using AWS DocumentDB, you will need to configure connection options for authentication in the `mongoOptions` passed to `payload.init`. You also need to set `mongoOptions.useFacet` to `false` to disable use of the unsupported `$facet` aggregation.
+When using AWS DocumentDB, you will need to configure connection options for authentication in the `connectOptions`
+passed to the `mongooseAdapter` . You also need to set `connectOptions.useFacet` to `false` to disable use of the
+unsupported `$facet` aggregation.
 
 ##### CosmosDB
 
-When using Azure Cosmos DB, an index is needed for any field you may want to sort on. To add the sort index for all fields that may be sorted in the admin UI use the <a href="/docs/configuration/overview">indexSortableFields</a> configuration option.
+When using Azure Cosmos DB, an index is needed for any field you may want to sort on. To add the sort index for all
+fields that may be sorted in the admin UI use the <a href="/docs/configuration/overview">indexSortableFields</a>
+configuration option.
 
 ## File storage
 
-If you are using Payload to [manage file uploads](/docs/upload/overview), you need to consider where your uploaded files will be permanently stored. If you do not use Payload for file uploads, then this section does not impact your app whatsoever.
+If you are using Payload to [manage file uploads](/docs/upload/overview), you need to consider where your uploaded files
+will be permanently stored. If you do not use Payload for file uploads, then this section does not impact your app
+whatsoever.
 
 #### Persistent vs Ephemeral Filesystems
 
-Some cloud app hosts such as [Heroku](https://heroku.com) use `ephemeral` file systems, which means that any files uploaded to your server only last until the server restarts or shuts down. Heroku and similar providers schedule restarts and shutdowns without your control, meaning your uploads will accidentally disappear without any way to get them back.
+Some cloud app hosts such as [Heroku](https://heroku.com) use `ephemeral` file systems, which means that any files
+uploaded to your server only last until the server restarts or shuts down. Heroku and similar providers schedule
+restarts and shutdowns without your control, meaning your uploads will accidentally disappear without any way to get
+them back.
 
-Alternatively, persistent filesystems will never delete your files and can be trusted to reliably host uploads perpetually.
+Alternatively, persistent filesystems will never delete your files and can be trusted to reliably host uploads
+perpetually.
 
 **Popular cloud providers with ephemeral filesystems:**
 
@@ -135,21 +168,26 @@ Alternatively, persistent filesystems will never delete your files and can be tr
 
 ##### Using ephemeral filesystem providers like Heroku
 
-If you don't use Payload's `upload` functionality, you can go ahead and use Heroku or similar platform easily. Everything will work exactly as you want it to.
+If you don't use Payload's `upload` functionality, you can go ahead and use Heroku or similar platform easily.
+Everything will work exactly as you want it to.
 
-But, if you do, and you still want to use an ephemeral filesystem provider, you can write a hook-based solution to _copy_ the files your users upload to a more permanent storage solution like Amazon S3 or DigitalOcean Spaces.
+But, if you do, and you still want to use an ephemeral filesystem provider, you can write a hook-based solution to
+_copy_ the files your users upload to a more permanent storage solution like Amazon S3 or DigitalOcean Spaces.
 
 **To automatically send uploaded files to S3 or similar, you could:**
 
-- Write an asynchronous `beforeChange` hook for all Collections that support Uploads, which takes any uploaded `file` from the Express `req` and sends it to an S3 bucket
-- Write an `afterRead` hook to save a `s3URL` field that automatically takes the `filename` stored and formats a full S3 URL
+- Write an asynchronous `beforeChange` hook for all Collections that support Uploads, which takes any uploaded `file`
+  from the Express `req` and sends it to an S3 bucket
+- Write an `afterRead` hook to save a `s3URL` field that automatically takes the `filename` stored and formats a full S3
+  URL
 - Write an `afterDelete` hook that automatically deletes files from the S3 bucket
 
 With the above configuration, deploying to Heroku or similar becomes no problem.
 
 ## DigitalOcean Tutorials
 
-DigitalOcean provides extremely helpful documentation that can walk you through the entire process of creating a production-ready Droplet to host your Payload app:
+DigitalOcean provides extremely helpful documentation that can walk you through the entire process of creating a
+production-ready Droplet to host your Payload app:
 
 1. Create a new Ubuntu 20.04 droplet on [DigitalOcean](https://digitalocean.com)
 1. [Initial server setup](https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-20-04)
@@ -160,18 +198,25 @@ DigitalOcean provides extremely helpful documentation that can walk you through
 
 ### Swap Space
 
-Swap refers to a section of storage on the hard drive that is reserved to temporarily store data that can no longer fit within RAM. This allows for the expansion of your server's working memory, with some limitations. Swap space comes into play when available RAM can no longer accommodate actively used application data, enabling the system to continue functioning.
+Swap refers to a section of storage on the hard drive that is reserved to temporarily store data that can no longer fit
+within RAM. This allows for the expansion of your server's working memory, with some limitations. Swap space comes into
+play when available RAM can no longer accommodate actively used application data, enabling the system to continue
+functioning.
 
-Insufficient space can lead to deployment errors and memory-related issues, resulting in application crashes, sluggish performance, or an unresponsive server.
+Insufficient space can lead to deployment errors and memory-related issues, resulting in application crashes, sluggish
+performance, or an unresponsive server.
 
 Common deployment error due to **space limitations** (as reported by users):
+
 - `Error: Command failed with exit code 1`
 
-To configure swap, we recommend following this tutorial on [How To Add Swap Space](https://www.digitalocean.com/community/tutorials/how-to-add-swap-space-on-ubuntu-22-04).
+To configure swap, we recommend following this tutorial
+on [How To Add Swap Space](https://www.digitalocean.com/community/tutorials/how-to-add-swap-space-on-ubuntu-22-04).
 
 ## Docker
 
-This is an example of a multi-stage docker build of Payload for production. Ensure you are setting your environment variables on deployment, like `PAYLOAD_SECRET`, `PAYLOAD_CONFIG_PATH`, and `DATABASE_URI` if needed.
+This is an example of a multi-stage docker build of Payload for production. Ensure you are setting your environment
+variables on deployment, like `PAYLOAD_SECRET`, `PAYLOAD_CONFIG_PATH`, and `DATABASE_URI` if needed.
 
 ```dockerfile
 FROM node:18-alpine as base

docs/rich-text/lexical.mdx

@@ -153,8 +153,8 @@ Here's an overview of all the included features:
 | **`HeadingFeature`**           | Yes                 | Adds Heading Nodes (by default, H1 - H6, but that can be customized)                                                                                                                   |
 | **`AlignFeature`**             | Yes                 | Allows you to align text left, centered and right                                                                                                                                      |
 | **`IndentFeature`**            | Yes                 | Allows you to indent text with the tab key                                                                                                                                             |
-| **`UnoderedListFeature`**      | Yes                 | Adds unordered lists (ol)                                                                                                                                                              |
-| **`OrderedListFeature`**       | Yes                 | Adds ordered lists (ul)                                                                                                                                                                |
+| **`UnorderedListFeature`**      | Yes                 | Adds unordered lists (ul)                                                                                                                                                              |
+| **`OrderedListFeature`**       | Yes                 | Adds ordered lists (ol)                                                                                                                                                                |
 | **`CheckListFeature`**         | Yes                 | Adds checklists                                                                                                                                                                        |
 | **`LinkFeature`**              | Yes                 | Allows you to create internal and external links                                                                                                                                       |
 | **`RelationshipFeature`**      | Yes                 | Allows you to create block-level (not inline) relationships to other documents                                                                                                         |
@@ -346,7 +346,7 @@ Once you have your headless editor instance, you can use it to convert HTML to L
 ```ts
 import { $generateNodesFromDOM } from '@lexical/html'
 import { $getRoot,$getSelection } from 'lexical'
-import JSDOM from 'jsdom'
+import { JSDOM } from 'jsdom';
 
 headlessEditor.update(() => {
   // In a headless environment you can use a package such as JSDom to parse the HTML string.

examples/custom-server/src/dotenv.js

@@ -1,3 +0,0 @@
-module.exports = {
-  config: () => null,
-}

packages/bundler-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/bundler-vite",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "The officially supported Vite bundler adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/create-payload-app/README.md

@@ -10,7 +10,7 @@ CLI for easily starting new Payload project
 
       $ npx create-payload-app
       $ npx create-payload-app my-project
-      $ npx create-payload-app -n my-project -t blog
+      $ npx create-payload-app -n my-project -t website
 
   OPTIONS
 

packages/db-mongodb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-mongodb",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "The officially supported MongoDB database adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/db-mongodb/src/index.ts

@@ -2,6 +2,7 @@ import type { ClientSession, ConnectOptions, Connection } from 'mongoose'
 import type { Payload } from 'payload'
 import type { BaseDatabaseAdapter } from 'payload/database'
 
+import fs from 'fs'
 import mongoose from 'mongoose'
 import path from 'path'
 import { createDatabaseAdapter } from 'payload/database'
@@ -94,7 +95,7 @@ export function mongooseAdapter({
   url,
 }: Args): MongooseAdapterResult {
   function adapter({ payload }: { payload: Payload }) {
-    const migrationDir = migrationDirArg || path.resolve(process.cwd(), 'src/migrations')
+    const migrationDir = findMigrationDir(migrationDirArg)
     mongoose.set('strictQuery', false)
 
     extendWebpackConfig(payload.config)
@@ -149,3 +150,42 @@ export function mongooseAdapter({
 
   return adapter
 }
+
+/**
+ * Attempt to find migrations directory.
+ *
+ * Checks for the following directories in order:
+ * - `migrationDir` argument from Payload config
+ * - `src/migrations`
+ * - `dist/migrations`
+ * - `migrations`
+ *
+ * Defaults to `src/migrations`
+ *
+ * @param migrationDir
+ * @returns
+ */
+function findMigrationDir(migrationDir?: string): string {
+  const cwd = process.cwd()
+  const srcDir = path.resolve(cwd, 'src/migrations')
+  const distDir = path.resolve(cwd, 'dist/migrations')
+  const relativeMigrations = path.resolve(cwd, 'migrations')
+
+  // Use arg if provided
+  if (migrationDir) return migrationDir
+
+  // Check other common locations
+  if (fs.existsSync(srcDir)) {
+    return srcDir
+  }
+
+  if (fs.existsSync(distDir)) {
+    return distDir
+  }
+
+  if (fs.existsSync(relativeMigrations)) {
+    return relativeMigrations
+  }
+
+  return srcDir
+}

packages/db-postgres/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-postgres",
-  "version": "0.1.13",
+  "version": "0.2.1",
   "description": "The officially supported Postgres database adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -26,7 +26,8 @@
     "drizzle-orm": "0.28.5",
     "pg": "8.11.3",
     "prompts": "2.4.2",
-    "to-snake-case": "1.0.0"
+    "to-snake-case": "1.0.0",
+    "uuid": "9.0.0"
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",

packages/db-postgres/src/find/findMany.ts

@@ -33,7 +33,7 @@ export const findMany = async function find({
   const db = adapter.sessions[req.transactionID]?.db || adapter.drizzle
   const table = adapter.tables[tableName]
 
-  let limit = limitArg ?? 10
+  const limit = limitArg ?? 10
   let totalDocs: number
   let totalPages: number
   let hasPrevPage: boolean
@@ -51,6 +51,7 @@ export const findMany = async function find({
   })
 
   const orderedIDMap: Record<number | string, number> = {}
+  let orderedIDs: (number | string)[]
 
   const selectDistinctMethods: ChainedMethods = []
 
@@ -116,7 +117,8 @@ export const findMany = async function find({
     selectDistinctResult.forEach(({ id }, i) => {
       orderedIDMap[id as number | string] = i
     })
-    findManyArgs.where = inArray(adapter.tables[tableName].id, Object.keys(orderedIDMap))
+    orderedIDs = Object.keys(orderedIDMap)
+    findManyArgs.where = inArray(adapter.tables[tableName].id, orderedIDs)
   } else {
     findManyArgs.limit = limitArg === 0 ? undefined : limitArg
 
@@ -132,7 +134,7 @@ export const findMany = async function find({
 
   const findPromise = db.query[tableName].findMany(findManyArgs)
 
-  if (pagination !== false || selectDistinctResult?.length > limit) {
+  if (pagination !== false && (orderedIDs ? orderedIDs?.length >= limit : true)) {
     const selectCountMethods: ChainedMethods = []
 
     joinAliases.forEach(({ condition, table }) => {
@@ -174,9 +176,8 @@ export const findMany = async function find({
     rawDocs.sort((a, b) => orderedIDMap[a.id] - orderedIDMap[b.id])
   }
 
-  if (pagination === false) {
+  if (pagination === false || !totalDocs) {
     totalDocs = rawDocs.length
-    limit = totalDocs
     totalPages = 1
     pagingCounter = 1
     hasPrevPage = false

packages/db-postgres/src/index.ts

@@ -1,5 +1,6 @@
 import type { Payload } from 'payload'
 
+import fs from 'fs'
 import path from 'path'
 import { createDatabaseAdapter } from 'payload/database'
 
@@ -42,7 +43,7 @@ export type { MigrateDownArgs, MigrateUpArgs } from './types'
 
 export function postgresAdapter(args: Args): PostgresAdapterResult {
   function adapter({ payload }: { payload: Payload }) {
-    const migrationDir = args.migrationDir || path.resolve(process.cwd(), 'src/migrations')
+    const migrationDir = findMigrationDir(args.migrationDir)
 
     extendWebpackConfig(payload.config)
     extendViteConfig(payload.config)
@@ -53,6 +54,7 @@ export function postgresAdapter(args: Args): PostgresAdapterResult {
       // Postgres-specific
       drizzle: undefined,
       enums: {},
+      fieldConstraints: {},
       pool: undefined,
       poolOptions: args.pool,
       push: args.push,
@@ -60,7 +62,6 @@ export function postgresAdapter(args: Args): PostgresAdapterResult {
       schema: {},
       sessions: {},
       tables: {},
-      fieldConstraints: {},
 
       // DatabaseAdapter
       beginTransaction,
@@ -101,3 +102,42 @@ export function postgresAdapter(args: Args): PostgresAdapterResult {
 
   return adapter
 }
+
+/**
+ * Attempt to find migrations directory.
+ *
+ * Checks for the following directories in order:
+ * - `migrationDir` argument from Payload config
+ * - `src/migrations`
+ * - `dist/migrations`
+ * - `migrations`
+ *
+ * Defaults to `src/migrations`
+ *
+ * @param migrationDir
+ * @returns
+ */
+function findMigrationDir(migrationDir?: string): string {
+  const cwd = process.cwd()
+  const srcDir = path.resolve(cwd, 'src/migrations')
+  const distDir = path.resolve(cwd, 'dist/migrations')
+  const relativeMigrations = path.resolve(cwd, 'migrations')
+
+  // Use arg if provided
+  if (migrationDir) return migrationDir
+
+  // Check other common locations
+  if (fs.existsSync(srcDir)) {
+    return srcDir
+  }
+
+  if (fs.existsSync(distDir)) {
+    return distDir
+  }
+
+  if (fs.existsSync(relativeMigrations)) {
+    return relativeMigrations
+  }
+
+  return srcDir
+}

packages/db-postgres/src/queries/buildQuery.ts

@@ -64,20 +64,25 @@ const buildQuery = async function buildQuery({
       orderBy.order = asc
     }
 
-    const { columnName: sortTableColumnName, table: sortTable } = getTableColumnFromPath({
-      adapter,
-      collectionPath: sortPath,
-      fields,
-      joinAliases,
-      joins,
-      locale,
-      pathSegments: sortPath.replace(/__/g, '.').split('.'),
-      selectFields,
-      tableName,
-    })
+    try {
+      const { columnName: sortTableColumnName, table: sortTable } = getTableColumnFromPath({
+        adapter,
+        collectionPath: sortPath,
+        fields,
+        joinAliases,
+        joins,
+        locale,
+        pathSegments: sortPath.replace(/__/g, '.').split('.'),
+        selectFields,
+        tableName,
+      })
+      orderBy.column = sortTable?.[sortTableColumnName]
+    } catch (err) {
+      // continue
+    }
+  }
 
-    orderBy.column = sortTable[sortTableColumnName]
-  } else {
+  if (!orderBy?.column) {
     orderBy.order = desc
     const createdAt = adapter.tables[tableName]?.createdAt
 

packages/db-postgres/src/queries/getTableColumnFromPath.ts

@@ -297,6 +297,9 @@ export const getTableColumnFromPath = ({
             table: adapter.tables[newTableName],
           }
         }
+        if (pathSegments[1] === 'blockType') {
+          throw new APIError('Querying on blockType is not supported')
+        }
         break
       }
 

packages/db-postgres/src/upsertRow/insertArrays.ts

@@ -36,7 +36,7 @@ export const insertArrays = async ({ adapter, arrays, db, parentRows }: Args): P
         }
       }
 
-      const parentID = parentRows[parentRowIndex].id
+      const parentID = parentRows[parentRowIndex].id || parentRows[parentRowIndex]._parentID
 
       // Add any sub arrays that need to be created
       // We will call this recursively below

packages/live-preview-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/live-preview-react",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "The official live preview React SDK for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -25,7 +25,6 @@
     "payload": "workspace:*"
   },
   "peerDependencies": {
-    "payload": "^2.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "exports": {

packages/live-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/live-preview",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "The official live preview JavaScript SDK for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -20,9 +20,6 @@
     "@payloadcms/eslint-config": "workspace:*",
     "payload": "workspace:*"
   },
-  "peerDependencies": {
-    "payload": "^2.0.0"
-  },
   "exports": {
     ".": {
       "default": "./src/index.ts",

packages/live-preview/src/handleMessage.ts

@@ -6,6 +6,10 @@ import { mergeData } from '.'
 // Send this cached value to `mergeData`, instead of `eventData.fieldSchemaJSON` directly
 let payloadLivePreviewFieldSchema = undefined // TODO: type this from `fieldSchemaToJSON` return type
 
+// Each time the data is merged, cache the result as a `previousData` variable
+// This will ensure changes compound overtop of each other
+let payloadLivePreviewPreviousData = undefined
+
 export const handleMessage = async <T>(args: {
   apiRoute?: string
   depth?: number
@@ -15,34 +19,40 @@ export const handleMessage = async <T>(args: {
 }): Promise<T> => {
   const { apiRoute, depth, event, initialData, serverURL } = args
 
-  if (event.origin === serverURL && event.data) {
-    const eventData = JSON.parse(event?.data)
+  if (
+    event.origin === serverURL &&
+    event.data &&
+    typeof event.data === 'object' &&
+    event.data.type === 'payload-live-preview'
+  ) {
+    const { data, externallyUpdatedRelationship, fieldSchemaJSON } = event.data
 
-    if (eventData.type === 'payload-live-preview') {
-      if (!payloadLivePreviewFieldSchema && eventData.fieldSchemaJSON) {
-        payloadLivePreviewFieldSchema = eventData.fieldSchemaJSON
-      }
-
-      if (!payloadLivePreviewFieldSchema) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          'Payload Live Preview: No `fieldSchemaJSON` was received from the parent window. Unable to merge data.',
-        )
-
-        return initialData
-      }
-
-      const mergedData = await mergeData<T>({
-        apiRoute,
-        depth,
-        fieldSchema: payloadLivePreviewFieldSchema,
-        incomingData: eventData.data,
-        initialData,
-        serverURL,
-      })
-
-      return mergedData
+    if (!payloadLivePreviewFieldSchema && fieldSchemaJSON) {
+      payloadLivePreviewFieldSchema = fieldSchemaJSON
     }
+
+    if (!payloadLivePreviewFieldSchema) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Payload Live Preview: No `fieldSchemaJSON` was received from the parent window. Unable to merge data.',
+      )
+
+      return initialData
+    }
+
+    const mergedData = await mergeData<T>({
+      apiRoute,
+      depth,
+      externallyUpdatedRelationship,
+      fieldSchema: payloadLivePreviewFieldSchema,
+      incomingData: data,
+      initialData: payloadLivePreviewPreviousData || initialData,
+      serverURL,
+    })
+
+    payloadLivePreviewPreviousData = mergedData
+
+    return mergedData
   }
 
   return initialData

packages/live-preview/src/mergeData.ts

@@ -1,10 +1,14 @@
+import type { PaginatedDocs } from 'payload/database'
 import type { fieldSchemaToJSON } from 'payload/utilities'
 
+import type { PopulationsByCollection, UpdatedDocument } from './types'
+
 import { traverseFields } from './traverseFields'
 
 export const mergeData = async <T>(args: {
   apiRoute?: string
   depth?: number
+  externallyUpdatedRelationship?: UpdatedDocument
   fieldSchema: ReturnType<typeof fieldSchemaToJSON>
   incomingData: Partial<T>
   initialData: T
@@ -18,6 +22,7 @@ export const mergeData = async <T>(args: {
   const {
     apiRoute,
     depth,
+    externallyUpdatedRelationship,
     fieldSchema,
     incomingData,
     initialData,
@@ -27,22 +32,52 @@ export const mergeData = async <T>(args: {
 
   const result = { ...initialData }
 
-  const populationPromises: Promise<void>[] = []
+  const populationsByCollection: PopulationsByCollection = {}
 
   traverseFields({
-    apiRoute,
-    depth,
+    externallyUpdatedRelationship,
     fieldSchema,
     incomingData,
-    populationPromises,
+    populationsByCollection,
     result,
-    serverURL,
   })
 
-  await Promise.all(populationPromises)
+  await Promise.all(
+    Object.entries(populationsByCollection).map(async ([collection, populations]) => {
+      const ids = new Set(populations.map(({ id }) => id))
+      const url = `${serverURL}${
+        apiRoute || '/api'
+      }/${collection}?depth=${depth}&where[id][in]=${Array.from(ids).join(',')}`
+
+      let res: PaginatedDocs
+
+      try {
+        res = await fetch(url, {
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        }).then((res) => res.json())
+
+        if (res?.docs?.length > 0) {
+          res.docs.forEach((doc) => {
+            populationsByCollection[collection].forEach((population) => {
+              if (population.id === doc.id) {
+                population.ref[population.accessor] = doc
+              }
+            })
+          })
+        }
+      } catch (err) {
+        console.error(err) // eslint-disable-line no-console
+      }
+    }),
+  )
 
   return {
     ...result,
-    ...(returnNumberOfRequests ? { _numberOfRequests: populationPromises.length } : {}),
+    ...(returnNumberOfRequests
+      ? { _numberOfRequests: Object.keys(populationsByCollection).length }
+      : {}),
   }
 }

packages/live-preview/src/promise.ts

@@ -1,28 +0,0 @@
-export const promise = async (args: {
-  accessor: number | string
-  apiRoute?: string
-  collection: string
-  depth: number
-  id: number | string
-  ref: Record<string, unknown>
-  serverURL: string
-}): Promise<void> => {
-  const { id, accessor, apiRoute, collection, depth, ref, serverURL } = args
-
-  const url = `${serverURL}${apiRoute || '/api'}/${collection}/${id}?depth=${depth}`
-
-  let res: Record<string, unknown> | null | undefined = null
-
-  try {
-    res = await fetch(url, {
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    }).then((res) => res.json())
-  } catch (err) {
-    console.error(err) // eslint-disable-line no-console
-  }
-
-  ref[accessor] = res
-}

packages/live-preview/src/ready.ts

@@ -8,10 +8,10 @@ export const ready = (args: { serverURL: string }): void => {
     const windowToPostTo: Window = window?.opener || window?.parent
 
     windowToPostTo?.postMessage(
-      JSON.stringify({
+      {
         ready: true,
         type: 'payload-live-preview',
-      }),
+      },
       serverURL,
     )
   }

packages/live-preview/src/traverseFields.ts

@@ -1,24 +1,22 @@
 import type { fieldSchemaToJSON } from 'payload/utilities'
 
-import { promise } from './promise'
+import type { PopulationsByCollection, UpdatedDocument } from './types'
+
+import { traverseRichText } from './traverseRichText'
 
 export const traverseFields = <T>(args: {
-  apiRoute?: string
-  depth?: number
+  externallyUpdatedRelationship?: UpdatedDocument
   fieldSchema: ReturnType<typeof fieldSchemaToJSON>
   incomingData: T
-  populationPromises: Promise<void>[]
+  populationsByCollection: PopulationsByCollection
   result: T
-  serverURL: string
 }): void => {
   const {
-    apiRoute,
-    depth,
+    externallyUpdatedRelationship,
     fieldSchema: fieldSchemas,
     incomingData,
-    populationPromises,
+    populationsByCollection,
     result,
-    serverURL,
   } = args
 
   fieldSchemas.forEach((fieldSchema) => {
@@ -26,6 +24,16 @@ export const traverseFields = <T>(args: {
       const fieldName = fieldSchema.name
 
       switch (fieldSchema.type) {
+        case 'richText':
+          result[fieldName] = traverseRichText({
+            externallyUpdatedRelationship,
+            incomingData: incomingData[fieldName],
+            populationsByCollection,
+            result: result[fieldName],
+          })
+
+          break
+
         case 'array':
           if (Array.isArray(incomingData[fieldName])) {
             result[fieldName] = incomingData[fieldName].map((incomingRow, i) => {
@@ -38,18 +46,17 @@ export const traverseFields = <T>(args: {
               }
 
               traverseFields({
-                apiRoute,
-                depth,
+                externallyUpdatedRelationship,
                 fieldSchema: fieldSchema.fields,
                 incomingData: incomingRow,
-                populationPromises,
+                populationsByCollection,
                 result: result[fieldName][i],
-                serverURL,
               })
 
               return result[fieldName][i]
             })
           }
+
           break
 
         case 'blocks':
@@ -72,13 +79,11 @@ export const traverseFields = <T>(args: {
               }
 
               traverseFields({
-                apiRoute,
-                depth,
+                externallyUpdatedRelationship,
                 fieldSchema: incomingBlockJSON.fields,
                 incomingData: incomingBlock,
-                populationPromises,
+                populationsByCollection,
                 result: result[fieldName][i],
-                serverURL,
               })
 
               return result[fieldName][i]
@@ -96,13 +101,11 @@ export const traverseFields = <T>(args: {
           }
 
           traverseFields({
-            apiRoute,
-            depth,
+            externallyUpdatedRelationship,
             fieldSchema: fieldSchema.fields,
             incomingData: incomingData[fieldName] || {},
-            populationPromises,
+            populationsByCollection,
             result: result[fieldName],
-            serverURL,
           })
 
           break
@@ -111,7 +114,7 @@ export const traverseFields = <T>(args: {
         case 'relationship':
           // Handle `hasMany` relationships
           if (fieldSchema.hasMany && Array.isArray(incomingData[fieldName])) {
-            if (!result[fieldName]) {
+            if (!result[fieldName] || !incomingData[fieldName].length) {
               result[fieldName] = []
             }
 
@@ -131,33 +134,39 @@ export const traverseFields = <T>(args: {
                 const newID = incomingRelation.value
                 const newRelation = incomingRelation.relationTo
 
-                if (oldID !== newID || oldRelation !== newRelation) {
-                  populationPromises.push(
-                    promise({
-                      id: incomingRelation.value,
-                      accessor: 'value',
-                      apiRoute,
-                      collection: newRelation,
-                      depth,
-                      ref: result[fieldName][i],
-                      serverURL,
-                    }),
-                  )
+                const hasChanged = newID !== oldID || newRelation !== oldRelation
+                const hasUpdated =
+                  newRelation === externallyUpdatedRelationship?.entitySlug &&
+                  newID === externallyUpdatedRelationship?.id
+
+                if (hasChanged || hasUpdated) {
+                  if (!populationsByCollection[newRelation]) {
+                    populationsByCollection[newRelation] = []
+                  }
+
+                  populationsByCollection[newRelation].push({
+                    id: incomingRelation.value,
+                    accessor: 'value',
+                    ref: result[fieldName][i],
+                  })
                 }
               } else {
                 // Handle `hasMany` monomorphic
-                if (result[fieldName][i]?.id !== incomingRelation) {
-                  populationPromises.push(
-                    promise({
-                      id: incomingRelation,
-                      accessor: i,
-                      apiRoute,
-                      collection: String(fieldSchema.relationTo),
-                      depth,
-                      ref: result[fieldName],
-                      serverURL,
-                    }),
-                  )
+                const hasChanged = incomingRelation !== result[fieldName][i]?.id
+                const hasUpdated =
+                  fieldSchema.relationTo === externallyUpdatedRelationship?.entitySlug &&
+                  incomingRelation === externallyUpdatedRelationship?.id
+
+                if (hasChanged || hasUpdated) {
+                  if (!populationsByCollection[fieldSchema.relationTo]) {
+                    populationsByCollection[fieldSchema.relationTo] = []
+                  }
+
+                  populationsByCollection[fieldSchema.relationTo].push({
+                    id: incomingRelation,
+                    accessor: i,
+                    ref: result[fieldName],
+                  })
                 }
               }
             })
@@ -197,23 +206,26 @@ export const traverseFields = <T>(args: {
               const newRelation = hasNewValue ? incomingData[fieldName].relationTo : ''
               const oldRelation = hasOldValue ? result[fieldName].relationTo : ''
 
+              const hasChanged = newID !== oldID || newRelation !== oldRelation
+              const hasUpdated =
+                newRelation === externallyUpdatedRelationship?.entitySlug &&
+                newID === externallyUpdatedRelationship?.id
+
               // if the new value/relation is different from the old value/relation
               // populate the new value, otherwise leave it alone
-              if (newID !== oldID || newRelation !== oldRelation) {
+              if (hasChanged || hasUpdated) {
                 // if the new value is not empty, populate it
                 // otherwise set the value to null
                 if (newID) {
-                  populationPromises.push(
-                    promise({
-                      id: newID,
-                      accessor: 'value',
-                      apiRoute,
-                      collection: newRelation,
-                      depth,
-                      ref: result[fieldName],
-                      serverURL,
-                    }),
-                  )
+                  if (!populationsByCollection[newRelation]) {
+                    populationsByCollection[newRelation] = []
+                  }
+
+                  populationsByCollection[newRelation].push({
+                    id: newID,
+                    accessor: 'value',
+                    ref: result[fieldName],
+                  })
                 } else {
                   result[fieldName] = null
                 }
@@ -232,23 +244,26 @@ export const traverseFields = <T>(args: {
                   result[fieldName].id) ||
                 result[fieldName]
 
+              const hasChanged = newID !== oldID
+              const hasUpdated =
+                fieldSchema.relationTo === externallyUpdatedRelationship?.entitySlug &&
+                newID === externallyUpdatedRelationship?.id
+
               // if the new value is different from the old value
               // populate the new value, otherwise leave it alone
-              if (newID !== oldID) {
+              if (hasChanged || hasUpdated) {
                 // if the new value is not empty, populate it
                 // otherwise set the value to null
                 if (newID) {
-                  populationPromises.push(
-                    promise({
-                      id: newID,
-                      accessor: fieldName,
-                      apiRoute,
-                      collection: String(fieldSchema.relationTo),
-                      depth,
-                      ref: result as Record<string, unknown>,
-                      serverURL,
-                    }),
-                  )
+                  if (!populationsByCollection[fieldSchema.relationTo]) {
+                    populationsByCollection[fieldSchema.relationTo] = []
+                  }
+
+                  populationsByCollection[fieldSchema.relationTo].push({
+                    id: newID,
+                    accessor: fieldName,
+                    ref: result as Record<string, unknown>,
+                  })
                 } else {
                   result[fieldName] = null
                 }

packages/live-preview/src/traverseRichText.ts

@@ -0,0 +1,103 @@
+import type { PopulationsByCollection, UpdatedDocument } from './types'
+
+export const traverseRichText = ({
+  externallyUpdatedRelationship,
+  incomingData,
+  populationsByCollection,
+  result,
+}: {
+  externallyUpdatedRelationship?: UpdatedDocument
+  incomingData: any
+  populationsByCollection: PopulationsByCollection
+  result: any
+}): any => {
+  if (Array.isArray(incomingData)) {
+    if (!result) {
+      result = []
+    }
+
+    result = incomingData.map((item, index) => {
+      if (!result[index]) {
+        result[index] = item
+      }
+
+      return traverseRichText({
+        externallyUpdatedRelationship,
+        incomingData: item,
+        populationsByCollection,
+        result: result[index],
+      })
+    })
+  } else if (incomingData && typeof incomingData === 'object') {
+    if (!result) {
+      result = {}
+    }
+
+    // Remove keys from `result` that do not appear in `incomingData`
+    // There's likely another way to do this,
+    // But recursion and references make this very difficult
+    Object.keys(result).forEach((key) => {
+      if (!(key in incomingData)) {
+        delete result[key]
+      }
+    })
+
+    // Iterate over the keys of `incomingData` and populate `result`
+    Object.keys(incomingData).forEach((key) => {
+      if (!result[key]) {
+        // Instantiate the key in `result` if it doesn't exist
+        // Ensure its type matches the type of the `incomingData`
+        // We don't have a schema to check against here
+        result[key] =
+          incomingData[key] && typeof incomingData[key] === 'object'
+            ? Array.isArray(incomingData[key])
+              ? []
+              : {}
+            : undefined
+      }
+
+      const isRelationship = key === 'value' && 'relationTo' in incomingData
+
+      if (isRelationship) {
+        // or if there are no keys besides id
+        const needsPopulation =
+          !result.value ||
+          typeof result.value !== 'object' ||
+          (typeof result.value === 'object' &&
+            Object.keys(result.value).length === 1 &&
+            'id' in result.value)
+
+        const hasChanged =
+          result &&
+          typeof result === 'object' &&
+          result.value.id === externallyUpdatedRelationship?.id
+
+        if (needsPopulation || hasChanged) {
+          if (!populationsByCollection[incomingData.relationTo]) {
+            populationsByCollection[incomingData.relationTo] = []
+          }
+
+          populationsByCollection[incomingData.relationTo].push({
+            id:
+              incomingData[key] && typeof incomingData[key] === 'object'
+                ? incomingData[key].id
+                : incomingData[key],
+            accessor: 'value',
+            ref: result,
+          })
+        }
+      } else {
+        result[key] = traverseRichText({
+          externallyUpdatedRelationship,
+          incomingData: incomingData[key],
+          populationsByCollection,
+          result: result[key],
+        })
+      }
+    })
+  } else {
+    result = incomingData
+  }
+
+  return result
+}

packages/live-preview/src/types.ts

@@ -1,3 +1,18 @@
 export type LivePreviewArgs = {}
 
 export type LivePreview = void
+
+export type PopulationsByCollection = {
+  [slug: string]: Array<{
+    accessor: number | string
+    id: number | string
+    ref: Record<string, unknown>
+  }>
+}
+
+// TODO: import this from `payload/admin/components/utilities/DocumentEvents/types.ts`
+export type UpdatedDocument = {
+  entitySlug: string
+  id?: number | string
+  updatedAt: string
+}

packages/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -26,7 +26,7 @@
     }
   },
   "scripts": {
-    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types && pnpm build:components && ts-node -T ./scripts/exportPointerFiles.ts",
+    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types && pnpm build:components && ts-node -T ../../scripts/exportPointerFiles.ts ../packages/payload dist/exports",
     "build:components": "webpack --config dist/admin/components.config.js",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",

packages/payload/src/admin/Root.tsx

@@ -17,6 +17,7 @@ import { StepNavProvider } from './components/elements/StepNav'
 import { AuthProvider } from './components/utilities/Auth'
 import { ConfigProvider } from './components/utilities/Config'
 import { CustomProvider } from './components/utilities/CustomProvider'
+import { DocumentEventsProvider } from './components/utilities/DocumentEvents'
 import { I18n } from './components/utilities/I18n'
 import { LoadingOverlayProvider } from './components/utilities/LoadingOverlay'
 import { LocaleProvider } from './components/utilities/Locale'
@@ -49,11 +50,13 @@ const Root = ({ config: incomingConfig }: { config?: SanitizedConfig }) => {
                         <LocaleProvider>
                           <StepNavProvider>
                             <LoadingOverlayProvider>
-                              <NavProvider>
-                                <CustomProvider>
-                                  <Routes />
-                                </CustomProvider>
-                              </NavProvider>
+                              <DocumentEventsProvider>
+                                <NavProvider>
+                                  <CustomProvider>
+                                    <Routes />
+                                  </CustomProvider>
+                                </NavProvider>
+                              </DocumentEventsProvider>
                             </LoadingOverlayProvider>
                           </StepNavProvider>
                         </LocaleProvider>

packages/payload/src/admin/components/elements/DocumentControls/index.scss

@@ -5,7 +5,7 @@
   position: sticky;
   top: 0;
   width: 100%;
-  z-index: 1;
+  z-index: 2;
   display: flex;
   align-items: center;
 

packages/payload/src/admin/components/elements/DuplicateDocument/index.tsx

@@ -90,36 +90,41 @@ const Duplicate: React.FC<Props> = ({ id, collection, slug }) => {
         if (result.status === 201 || result.status === 200) {
           return json.doc.id
         }
-        json.errors.forEach((error) => toast.error(error.message))
+
+        // only show the error if this is the initial request failing
+        if (!duplicateID) {
+          json.errors.forEach((error) => toast.error(error.message))
+        }
         return null
       }
 
-      let duplicateID
+      let duplicateID: string
       let abort = false
+      const localeErrors = []
 
       if (localization) {
         await localization.localeCodes.reduce(async (priorLocalePatch, locale) => {
           await priorLocalePatch
           if (abort) return
-          duplicateID = await saveDocument({ id, duplicateID, locale })
+          const localeResult = await saveDocument({
+            id,
+            duplicateID,
+            locale,
+          })
+          duplicateID = localeResult || duplicateID
+          if (duplicateID && !localeResult) {
+            localeErrors.push(locale)
+          }
           if (!duplicateID) {
             abort = true
           }
         }, Promise.resolve())
-
-        if (abort && duplicateID) {
-          // delete the duplicate doc to prevent incomplete
-          await requests.delete(`${serverURL}${api}/${slug}/${duplicateID}`, {
-            headers: {
-              'Accept-Language': i18n.language,
-            },
-          })
-        }
       } else {
         duplicateID = await saveDocument({ id })
       }
 
       if (!duplicateID) {
+        // document was not saved, error toast was displayed
         return
       }
 
@@ -128,6 +133,16 @@ const Duplicate: React.FC<Props> = ({ id, collection, slug }) => {
         { autoClose: 3000 },
       )
 
+      if (localeErrors.length > 0) {
+        toast.error(
+          `
+          ${t('error:localesNotSaved', { count: localeErrors.length })}
+          ${localeErrors.join(', ')}
+          `,
+          { autoClose: 5000 },
+        )
+      }
+
       setModified(false)
 
       setTimeout(() => {

packages/payload/src/admin/components/elements/PreviewSizes/index.tsx

@@ -78,16 +78,17 @@ const PreviewSizes: React.FC<{
   const [orderedSizes, setOrderedSizes] = useState<FileSizes>(() => sortSizes(sizes, imageSizes))
   const [selectedSize, setSelectedSize] = useState<null | string>(null)
 
-  const generateImageUrl = (filename) => {
-    return `${staticURL}/${filename}${imageCacheTag ? `?${imageCacheTag}` : ''}`
+  const generateImageUrl = (doc) => {
+    if (!doc.filename) return null
+    if (doc.url) return `${doc.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`
   }
   useEffect(() => {
     setOrderedSizes(sortSizes(sizes, imageSizes))
   }, [sizes, imageSizes, imageCacheTag])
 
   const mainPreviewSrc = selectedSize
-    ? generateImageUrl(`${orderedSizes[selectedSize]?.filename}`)
-    : generateImageUrl(doc.filename)
+    ? generateImageUrl(doc.sizes[selectedSize])
+    : generateImageUrl(doc)
 
   const originalImage = useMemo(
     (): FileSizes[0] => ({
@@ -121,12 +122,12 @@ const PreviewSizes: React.FC<{
             meta={originalImage}
             name={originalFilename}
             onClick={() => setSelectedSize(null)}
-            previewSrc={generateImageUrl(doc.filename)}
+            previewSrc={generateImageUrl(doc)}
           />
 
           {Object.entries(orderedSizes).map(([key, val]) => {
             const selected = selectedSize === key
-            const previewSrc = val.filename ? generateImageUrl(val.filename) : undefined
+            const previewSrc = generateImageUrl(val)
 
             if (previewSrc) {
               return (

packages/payload/src/admin/components/elements/WhereBuilder/Condition/Date/index.tsx

@@ -6,10 +6,14 @@ import DatePicker from '../../../DatePicker'
 
 const baseClass = 'condition-value-date'
 
-const DateField: React.FC<Props> = ({ disabled, onChange, value }) => (
-  <div className={baseClass}>
-    <DatePicker onChange={onChange} readOnly={disabled} value={value} />
-  </div>
-)
+const DateField: React.FC<Props> = ({ admin, disabled, onChange, value }) => {
+  const { date } = admin || {}
+
+  return (
+    <div className={baseClass}>
+      <DatePicker {...date} onChange={onChange} readOnly={disabled} value={value} />
+    </div>
+  )
+}
 
 export default DateField

packages/payload/src/admin/components/elements/WhereBuilder/Condition/Date/types.ts

@@ -1,4 +1,8 @@
+import type { Props as DateType } from '../../../../../components/elements/DatePicker/types'
 export type Props = {
+  admin?: {
+    date?: DateType
+  }
   disabled?: boolean
   onChange: () => void
   value: Date

packages/payload/src/admin/components/elements/WhereBuilder/index.tsx

@@ -23,14 +23,26 @@ const baseClass = 'where-builder'
 const reduceFields = (fields, i18n) =>
   flattenTopLevelFields(fields).reduce((reduced, field) => {
     if (typeof fieldTypes[field.type] === 'object') {
+      const operatorKeys = new Set()
+      const operators = fieldTypes[field.type].operators.reduce((acc, operator) => {
+        if (!operatorKeys.has(operator.value)) {
+          operatorKeys.add(operator.value)
+          return [
+            ...acc,
+            {
+              ...operator,
+              label: i18n.t(`operators:${operator.label}`),
+            },
+          ]
+        }
+        return acc
+      }, [])
+
       const formattedField = {
         label: getTranslation(field.label || field.name, i18n),
         value: field.name,
         ...fieldTypes[field.type],
-        operators: fieldTypes[field.type].operators.map((operator) => ({
-          ...operator,
-          label: i18n.t(`operators:${operator.label}`),
-        })),
+        operators,
         props: {
           ...field,
         },

packages/payload/src/admin/components/forms/FieldDescription/index.tsx

@@ -10,13 +10,13 @@ import { isComponent } from './types'
 const baseClass = 'field-description'
 
 const FieldDescription: React.FC<Props> = (props) => {
-  const { className, description, value, marginPlacement } = props
+  const { className, description, marginPlacement, path, value } = props
 
   const { i18n } = useTranslation()
 
   if (isComponent(description)) {
     const Description = description
-    return <Description value={value} />
+    return <Description path={path} value={value} />
   }
 
   if (description) {
@@ -31,7 +31,7 @@ const FieldDescription: React.FC<Props> = (props) => {
           .join(' ')}
       >
         {typeof description === 'function'
-          ? description({ value })
+          ? description({ path, value })
           : getTranslation(description, i18n)}
       </div>
     )

packages/payload/src/admin/components/forms/FieldDescription/types.ts

@@ -1,8 +1,12 @@
 import React from 'react'
 
-export type DescriptionFunction = (value?: unknown) => string
+type Args<T = unknown> = {
+  path: string
+  value?: T
+}
+export type DescriptionFunction<T = unknown> = (args: Args<T>) => string
 
-export type DescriptionComponent = React.ComponentType<{ value: unknown }>
+export type DescriptionComponent<T = unknown> = React.ComponentType<Args<T>>
 
 export type Description =
   | DescriptionComponent
@@ -13,8 +17,9 @@ export type Description =
 export type Props = {
   className?: string
   description?: Description
+  marginPlacement?: 'bottom' | 'top'
+  path?: string
   value?: unknown
-  marginPlacement?: 'top' | 'bottom'
 }
 
 export function isComponent(description: Description): description is DescriptionComponent {

packages/payload/src/admin/components/forms/field-types/Array/index.tsx

@@ -214,6 +214,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
         <FieldDescription
           className={`field-description-${path.replace(/\./g, '__')}`}
           description={description}
+          path={path}
           value={value}
         />
       </header>

packages/payload/src/admin/components/forms/field-types/Blocks/index.tsx

@@ -215,7 +215,7 @@ const BlocksField: React.FC<Props> = (props) => {
             </ul>
           )}
         </div>
-        <FieldDescription description={description} value={value} />
+        <FieldDescription description={description} path={path} value={value} />
       </header>
       <NullifyLocaleField fieldValue={value} localized={localized} path={path} />
       {(rows.length > 0 || (!valid && (showRequired || showMinRows))) && (

packages/payload/src/admin/components/forms/field-types/Checkbox/index.tsx

@@ -96,7 +96,7 @@ const Checkbox: React.FC<Props> = (props) => {
         readOnly={readOnly}
         required={required}
       />
-      <FieldDescription description={description} value={value} />
+      <FieldDescription description={description} path={path} value={value} />
     </div>
   )
 }

packages/payload/src/admin/components/forms/field-types/Code/index.tsx

@@ -82,7 +82,7 @@ const Code: React.FC<Props> = (props) => {
         readOnly={readOnly}
         value={(value as string) || ''}
       />
-      <FieldDescription description={description} value={value} />
+      <FieldDescription description={description} path={path} value={value} />
     </div>
   )
 }

packages/payload/src/admin/components/forms/field-types/Collapsible/index.tsx

@@ -14,8 +14,8 @@ import RenderFields from '../../RenderFields'
 import { RowLabel } from '../../RowLabel'
 import { WatchChildErrors } from '../../WatchChildErrors'
 import withCondition from '../../withCondition'
-import './index.scss'
 import { fieldBaseClass } from '../shared'
+import './index.scss'
 
 const baseClass = 'collapsible-field'
 
@@ -89,7 +89,6 @@ const CollapsibleField: React.FC<Props> = (props) => {
 
   return (
     <div
-      id={`field-${fieldPreferencesKey}${path ? `-${path.replace(/\./g, '__')}` : ''}`}
       className={[
         fieldBaseClass,
         baseClass,
@@ -98,6 +97,7 @@ const CollapsibleField: React.FC<Props> = (props) => {
       ]
         .filter(Boolean)
         .join(' ')}
+      id={`field-${fieldPreferencesKey}${path ? `-${path.replace(/\./g, '__')}` : ''}`}
     >
       <WatchChildErrors fieldSchema={fields} path={path} setErrorCount={setErrorCount} />
       <Collapsible
@@ -125,7 +125,7 @@ const CollapsibleField: React.FC<Props> = (props) => {
           readOnly={readOnly}
         />
       </Collapsible>
-      <FieldDescription description={description} />
+      <FieldDescription description={description} path={path} />
     </div>
   )
 }

packages/payload/src/admin/components/forms/field-types/DateTime/Input.tsx

@@ -91,7 +91,7 @@ export const DateTimeInput: React.FC<DateTimeInputProps> = (props) => {
         />
         {Array.isArray(afterInput) && afterInput.map((Component, i) => <Component key={i} />)}
       </div>
-      <FieldDescription description={description} value={value} />
+      <FieldDescription description={description} path={path} value={value} />
     </div>
   )
 }

packages/payload/src/admin/components/forms/field-types/Email/index.tsx

@@ -81,7 +81,7 @@ const Email: React.FC<Props> = (props) => {
         />
         {Array.isArray(afterInput) && afterInput.map((Component, i) => <Component key={i} />)}
       </div>
-      <FieldDescription description={description} value={value} />
+      <FieldDescription description={description} path={path} value={value} />
     </div>
   )
 }

packages/payload/src/admin/components/forms/field-types/Group/index.tsx

@@ -77,6 +77,7 @@ const Group: React.FC<Props> = (props) => {
                 <FieldDescription
                   className={`field-description-${path.replace(/\./g, '__')}`}
                   description={description}
+                  path={path}
                   value={null}
                 />
               </header>

packages/payload/src/admin/components/forms/field-types/JSON/index.tsx

@@ -9,8 +9,8 @@ import FieldDescription from '../../FieldDescription'
 import DefaultLabel from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
-import './index.scss'
 import { fieldBaseClass } from '../shared'
+import './index.scss'
 
 const baseClass = 'json-field'
 
@@ -19,13 +19,13 @@ const JSONField: React.FC<Props> = (props) => {
     name,
     admin: {
       className,
+      components: { Error, Label } = {},
       condition,
       description,
       editorOptions,
       readOnly,
       style,
       width,
-      components: { Error, Label } = {},
     } = {},
     label,
     path: pathFromProps,
@@ -69,8 +69,8 @@ const JSONField: React.FC<Props> = (props) => {
   )
 
   useEffect(() => {
-    setStringValue(JSON.stringify(initialValue, null, 2))
-  }, [initialValue])
+    setStringValue(JSON.stringify(value ? value : initialValue, null, 2))
+  }, [initialValue, value])
 
   return (
     <div
@@ -97,7 +97,7 @@ const JSONField: React.FC<Props> = (props) => {
         readOnly={readOnly}
         value={stringValue}
       />
-      <FieldDescription description={description} value={value} />
+      <FieldDescription description={description} path={path} value={value} />
     </div>
   )
 }

packages/payload/src/admin/components/forms/field-types/Point/index.tsx

@@ -134,7 +134,7 @@ const PointField: React.FC<Props> = (props) => {
           </div>
         </li>
       </ul>
-      <FieldDescription description={description} value={value} />
+      <FieldDescription description={description} path={path} value={value} />
     </div>
   )
 }

packages/payload/src/admin/components/forms/field-types/RadioGroup/Input.tsx

@@ -8,13 +8,15 @@ import { optionIsObject } from '../../../../../fields/config/types'
 import DefaultError from '../../Error'
 import FieldDescription from '../../FieldDescription'
 import DefaultLabel from '../../Label'
+import { fieldBaseClass } from '../shared'
 import RadioInput from './RadioInput'
 import './index.scss'
-import { fieldBaseClass } from '../shared'
 
 const baseClass = 'radio-group'
 
 export type RadioGroupInputProps = Omit<RadioField, 'type'> & {
+  Error?: React.ComponentType<any>
+  Label?: React.ComponentType<any>
   className?: string
   description?: Description
   errorMessage?: string
@@ -28,13 +30,13 @@ export type RadioGroupInputProps = Omit<RadioField, 'type'> & {
   style?: React.CSSProperties
   value?: string
   width?: string
-  Error?: React.ComponentType<any>
-  Label?: React.ComponentType<any>
 }
 
 const RadioGroupInput: React.FC<RadioGroupInputProps> = (props) => {
   const {
     name,
+    Error,
+    Label,
     className,
     description,
     errorMessage,
@@ -49,8 +51,6 @@ const RadioGroupInput: React.FC<RadioGroupInputProps> = (props) => {
     style,
     value,
     width,
-    Error,
-    Label,
   } = props
 
   const ErrorComp = Error || DefaultError
@@ -103,7 +103,7 @@ const RadioGroupInput: React.FC<RadioGroupInputProps> = (props) => {
           )
         })}
       </ul>
-      <FieldDescription description={description} value={value} />
+      <FieldDescription description={description} path={path} value={value} />
     </div>
   )
 }

packages/payload/src/admin/components/forms/field-types/RadioGroup/index.tsx

@@ -12,13 +12,13 @@ const RadioGroup: React.FC<Props> = (props) => {
     name,
     admin: {
       className,
+      components: { Error, Label } = {},
       condition,
       description,
       layout = 'horizontal',
       readOnly,
       style,
       width,
-      components: { Error, Label } = {},
     } = {},
     label,
     options,
@@ -44,6 +44,8 @@ const RadioGroup: React.FC<Props> = (props) => {
 
   return (
     <RadioGroupInput
+      Error={Error}
+      Label={Label}
       className={className}
       description={description}
       errorMessage={errorMessage}
@@ -58,8 +60,6 @@ const RadioGroup: React.FC<Props> = (props) => {
       style={style}
       value={value}
       width={width}
-      Error={Error}
-      Label={Label}
     />
   )
 }

packages/payload/src/admin/components/forms/field-types/Relationship/index.tsx

@@ -40,13 +40,14 @@ const Relationship: React.FC<Props> = (props) => {
     admin: {
       allowCreate = true,
       className,
+      components: { Error, Label } = {},
       condition,
       description,
       isSortable = true,
       readOnly,
+      sortOptions,
       style,
       width,
-      components: { Error, Label } = {},
     } = {},
     filterOptions,
     hasMany,
@@ -139,7 +140,14 @@ const Relationship: React.FC<Props> = (props) => {
 
           if (resultsFetched < 10) {
             const collection = collections.find((coll) => coll.slug === relation)
-            const fieldToSearch = collection?.admin?.useAsTitle || 'id'
+            let fieldToSearch = collection?.defaultSort || collection?.admin?.useAsTitle || 'id'
+            if (!searchArg) {
+              if (typeof sortOptions === 'string') {
+                fieldToSearch = sortOptions
+              } else if (sortOptions?.[relation]) {
+                fieldToSearch = sortOptions[relation]
+              }
+            }
 
             const query: {
               [key: string]: unknown
@@ -236,6 +244,7 @@ const Relationship: React.FC<Props> = (props) => {
       locale,
       filterOptionsResult,
       serverURL,
+      sortOptions,
       api,
       i18n,
       config,
@@ -252,7 +261,7 @@ const Relationship: React.FC<Props> = (props) => {
     (searchArg: string, valueArg: Value | Value[]) => {
       if (search !== searchArg) {
         setLastLoadedPage({})
-        updateSearch(searchArg, valueArg)
+        updateSearch(searchArg, valueArg, searchArg !== '')
       }
     },
     [search, updateSearch],
@@ -518,7 +527,7 @@ const Relationship: React.FC<Props> = (props) => {
         </div>
       )}
       {errorLoading && <div className={`${baseClass}__error-loading`}>{errorLoading}</div>}
-      <FieldDescription description={description} value={value} />
+      <FieldDescription description={description} path={path} value={value} />
     </div>
   )
 }

packages/payload/src/admin/components/forms/field-types/RichText/index.tsx

@@ -1,12 +1,34 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import type { RichTextField } from '../../../../../fields/config/types'
 import type { RichTextAdapter } from './types'
-
-const RichText: React.FC<RichTextField> = (props) => {
+const RichText: React.FC<RichTextField> = (fieldprops) => {
   // eslint-disable-next-line react/destructuring-assignment
-  const editor: RichTextAdapter = props.editor
-  return <editor.FieldComponent {...props} />
+  const editor: RichTextAdapter = fieldprops.editor
+
+  const isLazy = 'LazyFieldComponent' in editor
+
+  const ImportedFieldComponent: React.FC<any> = useMemo(() => {
+    return isLazy
+      ? React.lazy(() => {
+          return editor.LazyFieldComponent().then((resolvedComponent) => ({
+            default: resolvedComponent,
+          }))
+        })
+      : null
+  }, [editor, isLazy])
+
+  if (isLazy) {
+    return (
+      ImportedFieldComponent && (
+        <React.Suspense>
+          <ImportedFieldComponent {...fieldprops} />
+        </React.Suspense>
+      )
+    )
+  }
+
+  return <editor.FieldComponent {...fieldprops} />
 }
 
 export default RichText

packages/payload/src/admin/components/forms/field-types/RichText/types.ts

@@ -1,6 +1,7 @@
 import type { JSONSchema4 } from 'json-schema'
 
 import type { PayloadRequest } from '../../../../../express/types'
+import type { RequestContext } from '../../../../../express/types'
 import type { RichTextField, Validate } from '../../../../../fields/config/types'
 import type { CellComponentProps } from '../../../views/collections/List/Cell/types'
 
@@ -12,15 +13,11 @@ export type RichTextFieldProps<
   path?: string
 }
 
-export type RichTextAdapter<
+type RichTextAdapterBase<
   Value extends object = object,
   AdapterProps = any,
   ExtraFieldProperties = {},
 > = {
-  CellComponent: React.FC<
-    CellComponentProps<RichTextField<Value, AdapterProps, ExtraFieldProperties>>
-  >
-  FieldComponent: React.FC<RichTextFieldProps<Value, AdapterProps, ExtraFieldProperties>>
   afterReadPromise?: ({
     field,
     incomingEditorState,
@@ -30,8 +27,7 @@ export type RichTextAdapter<
     incomingEditorState: Value
     siblingDoc: Record<string, unknown>
   }) => Promise<void> | null
-
-  outputSchema: ({
+  outputSchema?: ({
     field,
     isRequired,
   }: {
@@ -39,10 +35,14 @@ export type RichTextAdapter<
     isRequired: boolean
   }) => JSONSchema4
   populationPromise?: (data: {
+    context: RequestContext
     currentDepth?: number
     depth: number
     field: RichTextField<Value, AdapterProps, ExtraFieldProperties>
+    findMany: boolean
+    flattenLocales: boolean
     overrideAccess?: boolean
+    populationPromises: Promise<void>[]
     req: PayloadRequest
     showHiddenFields: boolean
     siblingDoc: Record<string, unknown>
@@ -54,3 +54,25 @@ export type RichTextAdapter<
     RichTextField<Value, AdapterProps, ExtraFieldProperties>
   >
 }
+
+export type RichTextAdapter<
+  Value extends object = object,
+  AdapterProps = any,
+  ExtraFieldProperties = {},
+> = RichTextAdapterBase<Value, AdapterProps, ExtraFieldProperties> &
+  (
+    | {
+        CellComponent: React.FC<
+          CellComponentProps<RichTextField<Value, AdapterProps, ExtraFieldProperties>>
+        >
+        FieldComponent: React.FC<RichTextFieldProps<Value, AdapterProps, ExtraFieldProperties>>
+      }
+    | {
+        LazyCellComponent: () => Promise<
+          React.FC<CellComponentProps<RichTextField<Value, AdapterProps, ExtraFieldProperties>>>
+        >
+        LazyFieldComponent: () => Promise<
+          React.FC<RichTextFieldProps<Value, AdapterProps, ExtraFieldProperties>>
+        >
+      }
+  )

packages/payload/src/admin/components/forms/field-types/Select/Input.tsx

@@ -14,6 +14,8 @@ import { fieldBaseClass } from '../shared'
 import './index.scss'
 
 export type SelectInputProps = Omit<SelectField, 'options' | 'type' | 'value'> & {
+  Error?: React.ComponentType<any>
+  Label?: React.ComponentType<any>
   className?: string
   description?: Description
   errorMessage?: string
@@ -29,12 +31,12 @@ export type SelectInputProps = Omit<SelectField, 'options' | 'type' | 'value'> &
   style?: React.CSSProperties
   value?: string | string[]
   width?: string
-  Error?: React.ComponentType<any>
-  Label?: React.ComponentType<any>
 }
 
 const SelectInput: React.FC<SelectInputProps> = (props) => {
   const {
+    Error,
+    Label,
     className,
     defaultValue,
     description,
@@ -52,8 +54,6 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
     style,
     value,
     width,
-    Error,
-    Label,
   } = props
 
   const { i18n } = useTranslation()
@@ -111,7 +111,7 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
         showError={showError}
         value={valueToRender as Option}
       />
-      <FieldDescription description={description} value={value} />
+      <FieldDescription description={description} path={path} value={value} />
     </div>
   )
 }

packages/payload/src/admin/components/forms/field-types/Tabs/index.tsx

@@ -95,7 +95,7 @@ const TabsField: React.FC<Props> = (props) => {
         : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex
       setActiveTabIndex(initialIndex || 0)
     }
-    getInitialPref()
+    void getInitialPref()
   }, [path, indexPath, getPreference, preferencesKey, tabsPrefKey])
 
   const handleTabChange = useCallback(
@@ -177,6 +177,7 @@ const TabsField: React.FC<Props> = (props) => {
                   className={`${baseClass}__description`}
                   description={activeTabConfig.description}
                   marginPlacement="bottom"
+                  path={path}
                 />
                 <RenderFields
                   fieldSchema={activeTabConfig.fields.map((field) => {
@@ -193,7 +194,11 @@ const TabsField: React.FC<Props> = (props) => {
                   fieldTypes={fieldTypes}
                   forceRender={forceRender}
                   indexPath={indexPath}
-                  key={String(activeTabConfig.label)}
+                  key={
+                    activeTabConfig.label
+                      ? getTranslation(activeTabConfig.label, i18n)
+                      : activeTabConfig['name']
+                  }
                   margins="small"
                   permissions={
                     tabHasName(activeTabConfig) && permissions?.[activeTabConfig.name]

packages/payload/src/admin/components/forms/field-types/Text/Input.tsx

@@ -95,6 +95,7 @@ const TextInput: React.FC<TextInputProps> = (props) => {
       <FieldDescription
         className={`field-description-${path.replace(/\./g, '__')}`}
         description={description}
+        path={path}
         value={value}
       />
     </div>

packages/payload/src/admin/components/forms/field-types/Textarea/Input.tsx

@@ -98,7 +98,7 @@ const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
           {Array.isArray(afterInput) && afterInput.map((Component, i) => <Component key={i} />)}
         </div>
       </label>
-      <FieldDescription description={description} value={value} />
+      <FieldDescription description={description} path={path} value={value} />
     </div>
   )
 }

packages/payload/src/admin/components/forms/field-types/Upload/Input.tsx

@@ -24,6 +24,8 @@ import './index.scss'
 const baseClass = 'upload'
 
 export type UploadInputProps = Omit<UploadField, 'type'> & {
+  Error?: React.ComponentType<any>
+  Label?: React.ComponentType<any>
   api?: string
   className?: string
   collection?: SanitizedCollectionConfig
@@ -41,12 +43,12 @@ export type UploadInputProps = Omit<UploadField, 'type'> & {
   style?: React.CSSProperties
   value?: string
   width?: string
-  Error?: React.ComponentType<any>
-  Label?: React.ComponentType<any>
 }
 
 const UploadInput: React.FC<UploadInputProps> = (props) => {
   const {
+    Error,
+    Label,
     api = '/api',
     className,
     collection,
@@ -64,8 +66,6 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
     style,
     value,
     width,
-    Error,
-    Label,
   } = props
 
   const { i18n, t } = useTranslation('fields')
@@ -88,7 +88,7 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
   })
 
   useEffect(() => {
-    if (typeof value !== 'undefined' && value !== '') {
+    if (value !== null && typeof value !== 'undefined' && value !== '') {
       const fetchFile = async () => {
         const response = await fetch(`${serverURL}${api}/${relationTo}/${value}`, {
           credentials: 'include',
@@ -191,7 +191,7 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
               </div>
             </div>
           )}
-          <FieldDescription description={description} value={file} />
+          <FieldDescription description={description} path={path} value={file} />
         </React.Fragment>
       )}
       {!readOnly && <DocumentDrawer onSave={onSave} />}

packages/payload/src/admin/components/utilities/DocumentEvents/index.tsx

@@ -0,0 +1,16 @@
+import React, { createContext, useContext, useState } from 'react'
+
+import type { UpdatedDocument } from './types'
+
+const Context = createContext({
+  mostRecentUpdate: null,
+  reportUpdate: (doc: UpdatedDocument) => null, // eslint-disable-line @typescript-eslint/no-unused-vars
+})
+
+export const DocumentEventsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [mostRecentUpdate, reportUpdate] = useState<UpdatedDocument>(null)
+
+  return <Context.Provider value={{ mostRecentUpdate, reportUpdate }}>{children}</Context.Provider>
+}
+
+export const useDocumentEvents = () => useContext(Context)

packages/payload/src/admin/components/utilities/DocumentEvents/types.ts

@@ -0,0 +1,10 @@
+export type UpdatedDocument = {
+  entitySlug: string
+  id?: string
+  updatedAt: string
+}
+
+export type DocumentEventsContext = {
+  mostRecentUpdate: UpdatedDocument
+  reportUpdate: (updatedDocument: Array<UpdatedDocument>) => void
+}

packages/payload/src/admin/components/views/Global/index.tsx

@@ -11,6 +11,7 @@ import buildStateFromSchema from '../../forms/Form/buildStateFromSchema'
 import { fieldTypes } from '../../forms/field-types'
 import { useAuth } from '../../utilities/Auth'
 import { useConfig } from '../../utilities/Config'
+import { useDocumentEvents } from '../../utilities/DocumentEvents'
 import { useDocumentInfo } from '../../utilities/DocumentInfo'
 import { EditDepthContext } from '../../utilities/EditDepth'
 import { useLocale } from '../../utilities/Locale'
@@ -37,10 +38,17 @@ const GlobalView: React.FC<IndexProps> = (props) => {
     serverURL,
   } = useConfig()
 
+  const { reportUpdate } = useDocumentEvents()
+
   const { admin: { components: { views: { Edit: Edit } = {} } = {} } = {}, fields, slug } = global
 
   const onSave = useCallback(
     async (json) => {
+      reportUpdate({
+        entitySlug: global.slug,
+        updatedAt: json?.result?.updatedAt || new Date().toISOString(),
+      })
+
       getVersions()
       getDocPermissions()
       setUpdatedAt(json?.result?.updatedAt)
@@ -59,7 +67,18 @@ const GlobalView: React.FC<IndexProps> = (props) => {
       })
       setInitialState(state)
     },
-    [getVersions, fields, user, locale, t, getDocPermissions, getDocPreferences, config],
+    [
+      getVersions,
+      fields,
+      user,
+      locale,
+      t,
+      getDocPermissions,
+      getDocPreferences,
+      config,
+      global,
+      reportUpdate,
+    ],
   )
 
   const [{ data, isLoading: isLoadingData }] = usePayloadAPI(`${serverURL}${api}/globals/${slug}`, {

packages/payload/src/admin/components/views/LivePreview/Context/index.tsx

@@ -125,10 +125,13 @@ export const LivePreviewProvider: React.FC<LivePreviewProviderProps> = (props) =
   // Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
-      if (url.startsWith(event.origin)) {
-        const data = JSON.parse(event.data)
-
-        if (data.type === 'payload-live-preview' && data.ready) {
+      if (
+        url?.startsWith(event.origin) &&
+        event.data &&
+        typeof event.data === 'object' &&
+        event.data.type === 'payload-live-preview'
+      ) {
+        if (event.data.ready) {
           setAppIsReady(true)
         }
       }

packages/payload/src/admin/components/views/LivePreview/Preview/index.tsx

@@ -2,8 +2,10 @@ import React, { useEffect } from 'react'
 
 import type { EditViewProps } from '../../types'
 
+import { ShimmerEffect } from '../../../elements/ShimmerEffect'
 import { useAllFormFields } from '../../../forms/Form/context'
 import reduceFieldsToValues from '../../../forms/Form/reduceFieldsToValues'
+import { useDocumentEvents } from '../../../utilities/DocumentEvents'
 import { useLivePreviewContext } from '../Context/context'
 import { DeviceContainer } from '../Device'
 import { IFrame } from '../IFrame'
@@ -23,6 +25,8 @@ export const LivePreview: React.FC<EditViewProps> = (props) => {
     url,
   } = useLivePreviewContext()
 
+  const { mostRecentUpdate } = useDocumentEvents()
+
   const { breakpoint, fieldSchemaJSON } = useLivePreviewContext()
 
   const prevWindowType =
@@ -47,11 +51,12 @@ export const LivePreview: React.FC<EditViewProps> = (props) => {
 
       prevWindowType.current = previewWindowType
 
-      const message = JSON.stringify({
+      const message = {
         data: values,
+        externallyUpdatedRelationship: mostRecentUpdate,
         fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined,
         type: 'payload-live-preview',
-      })
+      }
 
       // Post message to external popup window
       if (previewWindowType === 'popup' && popupRef.current) {
@@ -73,6 +78,7 @@ export const LivePreview: React.FC<EditViewProps> = (props) => {
     iframeRef,
     setIframeHasLoaded,
     fieldSchemaJSON,
+    mostRecentUpdate,
   ])
 
   if (previewWindowType === 'iframe') {
@@ -89,7 +95,11 @@ export const LivePreview: React.FC<EditViewProps> = (props) => {
           <LivePreviewToolbar {...props} />
           <div className={`${baseClass}__main`}>
             <DeviceContainer>
-              <IFrame ref={iframeRef} setIframeHasLoaded={setIframeHasLoaded} url={url} />
+              {url ? (
+                <IFrame ref={iframeRef} setIframeHasLoaded={setIframeHasLoaded} url={url} />
+              ) : (
+                <ShimmerEffect height="100%" />
+              )}
             </DeviceContainer>
           </div>
         </div>

packages/payload/src/admin/components/views/LivePreview/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { SanitizedCollectionConfig } from '../../../../collections/config/types'
@@ -137,6 +137,7 @@ export const LivePreviewView: React.FC<
     fieldTypes: FieldTypes
   }
 > = (props) => {
+  const { data } = props
   const config = useConfig()
   const documentInfo = useDocumentInfo()
   const locale = useLocale()
@@ -157,14 +158,26 @@ export const LivePreviewView: React.FC<
     }
   }
 
-  const url =
-    typeof livePreviewConfig?.url === 'function'
-      ? livePreviewConfig?.url({
-          data: props?.data,
-          documentInfo,
-          locale,
-        })
-      : livePreviewConfig?.url
+  const [url, setURL] = React.useState<string | undefined>(() => {
+    if (typeof livePreviewConfig?.url === 'string') return livePreviewConfig?.url
+  })
+
+  useEffect(() => {
+    const getURL = async () => {
+      const newURL =
+        typeof livePreviewConfig?.url === 'function'
+          ? await livePreviewConfig.url({
+              data,
+              documentInfo,
+              locale,
+            })
+          : livePreviewConfig?.url
+
+      setURL(newURL)
+    }
+
+    getURL() // eslint-disable-line @typescript-eslint/no-floating-promises
+  }, [data, documentInfo, locale, livePreviewConfig])
 
   const breakpoints: LivePreviewConfig['breakpoints'] = [
     ...(livePreviewConfig?.breakpoints || []),

packages/payload/src/admin/components/views/collections/Edit/Default.tsx

@@ -9,6 +9,7 @@ import { DocumentHeader } from '../../../elements/DocumentHeader'
 import { FormLoadingOverlayToggle } from '../../../elements/Loading'
 import Form from '../../../forms/Form'
 import { useAuth } from '../../../utilities/Auth'
+import { useDocumentEvents } from '../../../utilities/DocumentEvents'
 import { OperationContext } from '../../../utilities/OperationProvider'
 import { CollectionRoutes } from './Routes'
 import { CustomCollectionComponent } from './Routes/CustomComponent'
@@ -42,12 +43,19 @@ const DefaultEditView: React.FC<DefaultEditViewProps> = (props) => {
     onSave: onSaveFromProps,
   } = props
 
+  const { reportUpdate } = useDocumentEvents()
+
   const { auth } = collection
 
   const classes = [baseClass, isEditing && `${baseClass}--is-editing`].filter(Boolean).join(' ')
 
   const onSave = useCallback(
     async (json) => {
+      reportUpdate({
+        id,
+        entitySlug: collection.slug,
+        updatedAt: json?.result?.updatedAt || new Date().toISOString(),
+      })
       if (auth && id === user.id) {
         await refreshCookieAsync()
       }
@@ -59,7 +67,7 @@ const DefaultEditView: React.FC<DefaultEditViewProps> = (props) => {
         })
       }
     },
-    [id, onSaveFromProps, auth, user, refreshCookieAsync],
+    [id, onSaveFromProps, auth, user, refreshCookieAsync, collection, reportUpdate],
   )
 
   const operation = isEditing ? 'update' : 'create'

packages/payload/src/admin/components/views/collections/List/Cell/field-types/Richtext/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import type { RichTextField } from '../../../../../../../../fields/config/types'
 import type { RichTextAdapter } from '../../../../../../forms/field-types/RichText/types'
@@ -8,6 +8,28 @@ const RichTextCell: React.FC<CellComponentProps<RichTextField>> = (props) => {
   // eslint-disable-next-line react/destructuring-assignment
   const editor: RichTextAdapter = props.field.editor
 
+  const isLazy = 'LazyCellComponent' in editor
+
+  const ImportedCellComponent: React.FC<any> = useMemo(() => {
+    return isLazy
+      ? React.lazy(() => {
+          return editor.LazyCellComponent().then((resolvedComponent) => ({
+            default: resolvedComponent,
+          }))
+        })
+      : null
+  }, [editor, isLazy])
+
+  if (isLazy) {
+    return (
+      ImportedCellComponent && (
+        <React.Suspense>
+          <ImportedCellComponent {...props} />
+        </React.Suspense>
+      )
+    )
+  }
+
   return <editor.CellComponent {...props} />
 }
 

packages/payload/src/auth/getExtractJWT.ts

@@ -1,4 +1,3 @@
-/* eslint-disable react/destructuring-assignment */
 import type { Request } from 'express'
 
 import type { SanitizedConfig } from '../config/types'
@@ -8,22 +7,31 @@ import parseCookies from '../utilities/parseCookies'
 const getExtractJWT =
   (config: SanitizedConfig) =>
   (req: Request): null | string => {
-    if (req && req.get) {
-      const jwtFromHeader = req.get('Authorization')
-      const origin = req.get('Origin')
+    if (!req?.get) {
+      return null
+    }
 
-      if (jwtFromHeader && jwtFromHeader.indexOf('JWT ') === 0) {
-        return jwtFromHeader.replace('JWT ', '')
-      }
+    const jwtFromHeader = req.get('Authorization')
+    const origin = req.get('Origin')
 
-      const cookies = parseCookies(req)
-      const tokenCookieName = `${config.cookiePrefix}-token`
+    if (jwtFromHeader?.indexOf('JWT ') === 0) {
+      return jwtFromHeader.replace('JWT ', '')
+    }
+    // allow RFC6750 OAuth 2.0 compliant Bearer tokens
+    // in addition to the payload default JWT format
+    if (jwtFromHeader?.indexOf('Bearer ') === 0) {
+      return jwtFromHeader.replace('Bearer ', '')
+    }
 
-      if (cookies && cookies[tokenCookieName]) {
-        if (!origin || config.csrf.length === 0 || config.csrf.indexOf(origin) > -1) {
-          return cookies[tokenCookieName]
-        }
-      }
+    const cookies = parseCookies(req)
+    const tokenCookieName = `${config.cookiePrefix}-token`
+
+    if (!cookies?.[tokenCookieName]) {
+      return null
+    }
+
+    if (!origin || config.csrf.length === 0 || config.csrf.indexOf(origin) > -1) {
+      return cookies[tokenCookieName]
     }
 
     return null

packages/payload/src/collections/operations/create.ts

@@ -170,14 +170,6 @@ async function create<TSlug extends keyof GeneratedTypes['collections']>(
       Promise.resolve(),
     )
 
-    // /////////////////////////////////////
-    // Write files to local storage
-    // /////////////////////////////////////
-
-    if (!collectionConfig.upload.disableLocalStorage) {
-      await uploadFiles(payload, filesToUpload, req.t)
-    }
-
     // /////////////////////////////////////
     // beforeChange - Collection
     // /////////////////////////////////////
@@ -211,6 +203,14 @@ async function create<TSlug extends keyof GeneratedTypes['collections']>(
       skipValidation: shouldSaveDraft,
     })
 
+    // /////////////////////////////////////
+    // Write files to local storage
+    // /////////////////////////////////////
+
+    if (!collectionConfig.upload.disableLocalStorage) {
+      await uploadFiles(payload, filesToUpload, req.t)
+    }
+
     // /////////////////////////////////////
     // Create
     // /////////////////////////////////////

packages/payload/src/config/schema.ts

@@ -1,7 +1,7 @@
 import joi from 'joi'
 
 import { adminViewSchema } from './shared/adminViewSchema'
-import { livePreviewSchema } from './shared/componentSchema'
+import { componentSchema, livePreviewSchema } from './shared/componentSchema'
 
 const component = joi.alternatives().try(joi.object().unknown(), joi.func())
 
@@ -94,10 +94,12 @@ export default joi.object({
     .object()
     .required()
     .keys({
-      CellComponent: component.required(),
-      FieldComponent: component.required(),
+      CellComponent: componentSchema.optional(),
+      FieldComponent: componentSchema.optional(),
+      LazyCellComponent: joi.func().optional(),
+      LazyFieldComponent: joi.func().optional(),
       afterReadPromise: joi.func().optional(),
-      outputSchema: joi.func().required(),
+      outputSchema: joi.func().optional(),
       populationPromise: joi.func().optional(),
       validate: joi.func().required(),
     })

packages/payload/src/config/types.ts

@@ -63,7 +63,11 @@ export type LivePreviewConfig = {
    Use the `useLivePreview` hook to get started in React applications.
    */
   url?:
-    | ((args: { data: Record<string, any>; documentInfo: ContextType; locale: Locale }) => string)
+    | ((args: {
+        data: Record<string, any>
+        documentInfo: ContextType
+        locale: Locale
+      }) => Promise<string> | string)
     | string
 }
 

packages/payload/src/database/migrations/readMigrationFiles.ts

@@ -13,22 +13,28 @@ export const readMigrationFiles = async ({
   payload: Payload
 }): Promise<Migration[]> => {
   if (!fs.existsSync(payload.db.migrationDir)) {
-    payload.logger.debug({
+    payload.logger.error({
       msg: `No migration directory found at ${payload.db.migrationDir}`,
     })
     return []
   }
 
+  payload.logger.info({
+    msg: `Reading migration files from ${payload.db.migrationDir}`,
+  })
+
   const files = fs
     .readdirSync(payload.db.migrationDir)
     .sort()
-    .filter((f) => f.endsWith('.ts'))
+    .filter((f) => {
+      return f.endsWith('.ts') || f.endsWith('.js')
+    })
     .map((file) => {
       return path.resolve(payload.db.migrationDir, file)
     })
 
   return files.map((filePath) => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-dynamic-require
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
     const migration = require(filePath) as Migration
     migration.name = path.basename(filePath).split('.')?.[0]
     return migration

packages/payload/src/database/queryValidation/validateQueryPaths.ts

@@ -33,7 +33,11 @@ type Args = {
 const flattenWhere = (query: Where): WhereField[] =>
   Object.entries(query).reduce((flattenedConstraints, [key, val]) => {
     if ((key === 'and' || key === 'or') && Array.isArray(val)) {
-      return [...flattenedConstraints, ...val.map((subVal) => flattenWhere(subVal))]
+      const subWhereConstraints: Where[] = val.reduce((acc, subVal) => {
+        const subWhere = flattenWhere(subVal)
+        return [...acc, ...subWhere]
+      }, [])
+      return [...flattenedConstraints, ...subWhereConstraints]
     }
 
     return [...flattenedConstraints, { [key]: val }]

packages/payload/src/database/queryValidation/validateSearchParams.ts

@@ -101,7 +101,6 @@ export async function validateSearchParam({
             errors.push({ path: incomingPath })
           }
         }
-        let fieldAccess
         let fieldPath = path
         // remove locale from end of path
         if (path.endsWith(`.${req.locale}`)) {
@@ -115,31 +114,29 @@ export async function validateSearchParam({
         const entitySlug = collectionSlug || globalConfig.slug
         const segments = fieldPath.split('.')
 
+        let fieldAccess
         if (versionFields) {
-          if (fieldPath === 'parent' || fieldPath === 'version') {
-            fieldAccess = policies[entityType][entitySlug].read.permission
-          } else if (segments[0] === 'parent' || segments[0] === 'version') {
-            fieldAccess = policies[entityType][entitySlug].read.permission
+          fieldAccess = policies[entityType][entitySlug]
+          if (segments[0] === 'parent' || segments[0] === 'version') {
             segments.shift()
           }
         } else {
           fieldAccess = policies[entityType][entitySlug].fields
-
-          if (['json', 'richText'].includes(field.type)) {
-            fieldAccess = fieldAccess[field.name]
-          } else {
-            segments.forEach((segment, pathIndex) => {
-              if (pathIndex === segments.length - 1) {
-                fieldAccess = fieldAccess[segment]
-              } else {
-                fieldAccess = fieldAccess[segment].fields
-              }
-            })
-          }
-
-          fieldAccess = fieldAccess.read.permission
         }
-        if (!fieldAccess) {
+
+        segments.forEach((segment) => {
+          if (fieldAccess[segment]) {
+            if ('fields' in fieldAccess[segment]) {
+              fieldAccess = fieldAccess[segment].fields
+            } else if ('blocks' in fieldAccess[segment]) {
+              fieldAccess = fieldAccess[segment]
+            } else {
+              fieldAccess = fieldAccess[segment]
+            }
+          }
+        })
+
+        if (!fieldAccess?.read?.permission) {
           errors.push({ path: fieldPath })
         }
       }

packages/payload/src/exports/README.md

@@ -0,0 +1,8 @@
+Important:
+
+When you export anything with a scss or svg, or any component with a hook, it should be exported from a file within payload/components
+
+
+
+
+

packages/payload/src/exports/components/elements.ts

@@ -22,3 +22,9 @@ export {
   formatListDrawerSlug,
   useListDrawer,
 } from '../../admin/components/elements/ListDrawer'
+
+export {
+  Description,
+  DescriptionComponent,
+  DescriptionFunction,
+} from '../../admin/components/forms/FieldDescription/types'

packages/payload/src/exports/components/hooks.ts

@@ -1,5 +1,6 @@
 export { useStepNav } from '../../admin/components/elements/StepNav'
 export { useTableColumns } from '../../admin/components/elements/TableColumns'
+export { useDocumentEvents } from '../../admin/components/utilities/DocumentEvents'
 export { default as useDebounce } from '../../admin/hooks/useDebounce'
 export { useDebouncedCallback } from '../../admin/hooks/useDebouncedCallback'
 export { useDelay } from '../../admin/hooks/useDelay'

packages/payload/src/exports/types.ts

@@ -80,6 +80,7 @@ export type {
   Option,
   OptionObject,
   PointField,
+  PolymorphicRelationshipField,
   RadioField,
   RelationshipField,
   RelationshipValue,
@@ -87,6 +88,7 @@ export type {
   RowAdmin,
   RowField,
   SelectField,
+  SingleRelationshipField,
   Tab,
   TabAsField,
   TabsAdmin,

packages/payload/src/exports/utilities.ts

@@ -1,21 +1,24 @@
 export { withMergedProps } from '../admin/components/utilities/WithMergedProps'
-export { extractTranslations } from '../translations/extractTranslations'
+export { promise as afterReadPromise } from '../fields/hooks/afterRead/promise'
+export { traverseFields as afterReadTraverseFields } from '../fields/hooks/afterRead/traverseFields'
 
+export { extractTranslations } from '../translations/extractTranslations'
 export { i18nInit } from '../translations/init'
 export { combineMerge } from '../utilities/combineMerge'
+
 export {
   configToJSONSchema,
   entityToJSONSchema,
   withNullableJSONSchemaType,
 } from '../utilities/configToJSONSchema'
-
 export { createArrayFromCommaDelineated } from '../utilities/createArrayFromCommaDelineated'
-export { deepCopyObject } from '../utilities/deepCopyObject'
 
+export { deepCopyObject } from '../utilities/deepCopyObject'
 export { deepMerge } from '../utilities/deepMerge'
 export { fieldSchemaToJSON } from '../utilities/fieldSchemaToJSON'
 export { default as flattenTopLevelFields } from '../utilities/flattenTopLevelFields'
 export { formatLabels, formatNames, toWords } from '../utilities/formatLabels'
 export { getIDType } from '../utilities/getIDType'
 export { getTranslation } from '../utilities/getTranslation'
+
 export { isValidID } from '../utilities/isValidID'

packages/payload/src/fields/config/schema.ts

@@ -366,6 +366,11 @@ export const relationship = baseField.keys({
       Label: componentSchema,
     }),
     isSortable: joi.boolean().default(false),
+    sortOptions: joi.alternatives().conditional(joi.ref('...relationTo'), {
+      is: joi.string(),
+      otherwise: joi.object().pattern(joi.string(), joi.string()),
+      then: joi.string(),
+    }),
   }),
   defaultValue: joi.alternatives().try(joi.func()),
   filterOptions: joi.alternatives().try(joi.object(), joi.func()),
@@ -431,10 +436,12 @@ export const richText = baseField.keys({
   editor: joi
     .object()
     .keys({
-      CellComponent: componentSchema.required(),
-      FieldComponent: componentSchema.required(),
+      CellComponent: componentSchema.optional(),
+      FieldComponent: componentSchema.optional(),
+      LazyCellComponent: joi.func().optional(),
+      LazyFieldComponent: joi.func().optional(),
       afterReadPromise: joi.func().optional(),
-      outputSchema: joi.func().required(),
+      outputSchema: joi.func().optional(),
       populationPromise: joi.func().optional(),
       validate: joi.func().required(),
     })

packages/payload/src/fields/config/types.ts

@@ -430,19 +430,10 @@ export type SelectField = FieldBase & {
   type: 'select'
 }
 
-export type RelationshipField = FieldBase & {
-  admin?: Admin & {
-    allowCreate?: boolean
-    components?: {
-      Error?: React.ComponentType<ErrorProps>
-      Label?: React.ComponentType<LabelProps>
-    }
-    isSortable?: boolean
-  }
+type SharedRelationshipProperties = FieldBase & {
   filterOptions?: FilterOptions
   hasMany?: boolean
   maxDepth?: number
-  relationTo: string | string[]
   type: 'relationship'
 } & (
     | {
@@ -473,6 +464,28 @@ export type RelationshipField = FieldBase & {
       }
   )
 
+type RelationshipAdmin = Admin & {
+  allowCreate?: boolean
+  components?: {
+    Error?: React.ComponentType<ErrorProps>
+    Label?: React.ComponentType<LabelProps>
+  }
+  isSortable?: boolean
+}
+export type PolymorphicRelationshipField = SharedRelationshipProperties & {
+  admin?: RelationshipAdmin & {
+    sortOptions?: { [collectionSlug: string]: string }
+  }
+  relationTo: string[]
+}
+export type SingleRelationshipField = SharedRelationshipProperties & {
+  admin?: RelationshipAdmin & {
+    sortOptions?: string
+  }
+  relationTo: string
+}
+export type RelationshipField = PolymorphicRelationshipField | SingleRelationshipField
+
 export type ValueWithRelation = {
   relationTo: string
   value: number | string

packages/payload/src/fields/hooks/afterRead/promise.ts

@@ -6,6 +6,7 @@ import type { SanitizedGlobalConfig } from '../../../globals/config/types'
 import type { Field, TabAsField } from '../../config/types'
 
 import { fieldAffectsData, tabHasName } from '../../config/types'
+import getValueWithDefault from '../../getDefaultValue'
 import relationshipPopulationPromise from './relationshipPopulationPromise'
 import { traverseFields } from './traverseFields'
 
@@ -25,12 +26,14 @@ type Args = {
   req: PayloadRequest
   showHiddenFields: boolean
   siblingDoc: Record<string, unknown>
+  triggerAccessControl?: boolean
+  triggerHooks?: boolean
 }
 
 // This function is responsible for the following actions, in order:
 // - Remove hidden fields from response
 // - Flatten locales into requested locale
-// - Sanitize outgoing data (point field, etc)
+// - Sanitize outgoing data (point field, etc.)
 // - Execute field hooks
 // - Execute read access control
 // - Populate relationships
@@ -51,6 +54,8 @@ export const promise = async ({
   req,
   showHiddenFields,
   siblingDoc,
+  triggerAccessControl = true,
+  triggerHooks = true,
 }: Args): Promise<void> => {
   if (
     fieldAffectsData(field) &&
@@ -138,10 +143,14 @@ export const promise = async ({
       // This is run here AND in the GraphQL Resolver
       if (editor?.populationPromise) {
         const populationPromise = editor.populationPromise({
+          context,
           currentDepth,
           depth,
           field,
+          findMany,
+          flattenLocales,
           overrideAccess,
+          populationPromises,
           req,
           showHiddenFields,
           siblingDoc,
@@ -186,7 +195,7 @@ export const promise = async ({
 
   if (fieldAffectsData(field)) {
     // Execute hooks
-    if (field.hooks?.afterRead) {
+    if (triggerHooks && field.hooks?.afterRead) {
       await field.hooks.afterRead.reduce(async (priorHook, currentHook) => {
         await priorHook
 
@@ -241,7 +250,7 @@ export const promise = async ({
     }
 
     // Execute access control
-    if (field.access && field.access.read) {
+    if (triggerAccessControl && field.access && field.access.read) {
       const result = overrideAccess
         ? true
         : await field.access.read({
@@ -257,6 +266,20 @@ export const promise = async ({
       }
     }
 
+    // Set defaultValue on the field for globals being returned without being first created
+    // or collection documents created prior to having a default
+    if (
+      typeof siblingDoc[field.name] === 'undefined' &&
+      typeof field.defaultValue !== 'undefined'
+    ) {
+      siblingDoc[field.name] = await getValueWithDefault({
+        defaultValue: field.defaultValue,
+        locale: req.locale,
+        user: req.user,
+        value: siblingDoc[field.name],
+      })
+    }
+
     if (field.type === 'relationship' || field.type === 'upload') {
       populationPromises.push(
         relationshipPopulationPromise({
@@ -293,6 +316,8 @@ export const promise = async ({
         req,
         showHiddenFields,
         siblingDoc: groupDoc,
+        triggerAccessControl,
+        triggerHooks,
       })
 
       break
@@ -319,6 +344,8 @@ export const promise = async ({
             req,
             showHiddenFields,
             siblingDoc: row || {},
+            triggerAccessControl,
+            triggerHooks,
           })
         })
       } else if (!shouldHoistLocalizedValue && typeof rows === 'object' && rows !== null) {
@@ -341,6 +368,8 @@ export const promise = async ({
                 req,
                 showHiddenFields,
                 siblingDoc: row || {},
+                triggerAccessControl,
+                triggerHooks,
               })
             })
           }
@@ -375,6 +404,8 @@ export const promise = async ({
               req,
               showHiddenFields,
               siblingDoc: row || {},
+              triggerAccessControl,
+              triggerHooks,
             })
           }
         })
@@ -401,6 +432,8 @@ export const promise = async ({
                   req,
                   showHiddenFields,
                   siblingDoc: row || {},
+                  triggerAccessControl,
+                  triggerHooks,
                 })
               }
             })
@@ -431,6 +464,8 @@ export const promise = async ({
         req,
         showHiddenFields,
         siblingDoc,
+        triggerAccessControl,
+        triggerHooks,
       })
 
       break
@@ -443,7 +478,7 @@ export const promise = async ({
         if (typeof siblingDoc[field.name] !== 'object') tabDoc = {}
       }
 
-      await traverseFields({
+      traverseFields({
         collection,
         context,
         currentDepth,
@@ -459,6 +494,8 @@ export const promise = async ({
         req,
         showHiddenFields,
         siblingDoc: tabDoc,
+        triggerAccessControl,
+        triggerHooks,
       })
 
       break
@@ -481,6 +518,8 @@ export const promise = async ({
         req,
         showHiddenFields,
         siblingDoc,
+        triggerAccessControl,
+        triggerHooks,
       })
       break
     }

packages/payload/src/fields/hooks/afterRead/traverseFields.ts

@@ -21,6 +21,8 @@ type Args = {
   req: PayloadRequest
   showHiddenFields: boolean
   siblingDoc: Record<string, unknown>
+  triggerAccessControl?: boolean
+  triggerHooks?: boolean
 }
 
 export const traverseFields = ({
@@ -39,6 +41,8 @@ export const traverseFields = ({
   req,
   showHiddenFields,
   siblingDoc,
+  triggerAccessControl = true,
+  triggerHooks = true,
 }: Args): void => {
   fields.forEach((field) => {
     fieldPromises.push(
@@ -58,6 +62,8 @@ export const traverseFields = ({
         req,
         showHiddenFields,
         siblingDoc,
+        triggerAccessControl,
+        triggerHooks,
       }),
     )
   })

packages/payload/src/fields/validations.spec.ts

@@ -413,6 +413,11 @@ describe('Field Validations', () => {
       const result = number(val, numberOptions)
       expect(result).toBe(true)
     })
+    it('should validate 0', () => {
+      const val = 0
+      const result = number(val, { ...numberOptions, required: true })
+      expect(result).toBe(true)
+    })
     it('should validate 2', () => {
       const val = 1.5
       const result = number(val, numberOptions)

packages/payload/src/fields/validations.ts

@@ -205,8 +205,11 @@ export const number: Validate<unknown, unknown, NumberField> = (
     if (typeof lengthValidationResult === 'string') return lengthValidationResult
   }
 
-  if (!value && required) return t('validation:required')
-  if (!value && !required) return true
+  if (!value && !isNumber(value)) {
+    // if no value is present, validate based on required
+    if (required) return t('validation:required')
+    if (!required) return true
+  }
 
   const numbersToValidate: number[] = Array.isArray(value) ? value : [value]
 

packages/payload/src/graphql/schema/buildObjectType.ts

@@ -436,8 +436,13 @@ function buildObjectType({
           // Effectively, this means that the populationPromise for GraphQL is only run here, and not in the find.ts resolver / normal population promise.
           if (editor?.populationPromise) {
             await editor?.populationPromise({
+              context,
               depth,
               field,
+              findMany: false,
+              flattenLocales: false,
+              overrideAccess: false,
+              populationPromises: [],
               req: context.req,
               showHiddenFields: false,
               siblingDoc: parent,

packages/payload/src/translations/en.json

@@ -69,6 +69,8 @@
     "invalidFileType": "Invalid file type",
     "invalidFileTypeValue": "Invalid file type: {{value}}",
     "loadingDocument": "There was a problem loading the document with ID of {{id}}.",
+    "localesNotSaved_one": "The following locale could not be saved:",
+    "localesNotSaved_other": "The following locales could not be saved:",
     "missingEmail": "Missing email.",
     "missingIDOfDocument": "Missing ID of document to update.",
     "missingIDOfVersion": "Missing ID of version.",

packages/payload/src/translations/index.ts

@@ -11,12 +11,15 @@ import hr from './hr.json'
 import hu from './hu.json'
 import it from './it.json'
 import ja from './ja.json'
+import ko from './ko.json'
 import my from './my.json'
 import nb from './nb.json'
 import nl from './nl.json'
 import pl from './pl.json'
 import pt from './pt.json'
 import ro from './ro.json'
+import rs from './rs.json'
+import rsLatin from './rs-latin.json'
 import ru from './ru.json'
 import sv from './sv.json'
 import th from './th.json'
@@ -24,6 +27,7 @@ import tr from './tr.json'
 import ua from './ua.json'
 import vi from './vi.json'
 import zh from './zh.json'
+import zhTw from './zh-tw.json'
 
 export default {
   ar,
@@ -39,12 +43,15 @@ export default {
   hu,
   it,
   ja,
+  ko,
   my,
   nb,
   nl,
   pl,
   pt,
   ro,
+  rs,
+  rsLatin,
   ru,
   sv,
   th,
@@ -52,4 +59,5 @@ export default {
   ua,
   vi,
   zh,
+  zhTw,
 }

packages/payload/src/translations/ko.json

@@ -0,0 +1,371 @@
+{
+  "authentication": {
+    "account": "계정",
+    "accountOfCurrentUser": "현재 사용자의 계정",
+    "alreadyActivated": "이미 활성화됨",
+    "alreadyLoggedIn": "이미 로그인됨",
+    "apiKey": "API 키",
+    "backToLogin": "로그인 화면으로 돌아가기",
+    "beginCreateFirstUser": "시작하려면 첫 번째 사용자를 생성하세요.",
+    "changePassword": "비밀번호 변경",
+    "checkYourEmailForPasswordReset": "비밀번호 재설정을 안전하게 수행할 수 있는 링크가 포함된 이메일을 확인하세요.",
+    "confirmGeneration": "생성 확인",
+    "confirmPassword": "비밀번호 확인",
+    "createFirstUser": "첫 번째 사용자 생성",
+    "emailNotValid": "입력한 이메일은 유효하지 않습니다.",
+    "emailSent": "이메일 전송됨",
+    "enableAPIKey": "API 키 활성화",
+    "failedToUnlock": "잠금 해제 실패",
+    "forceUnlock": "강제 잠금 해제",
+    "forgotPassword": "비밀번호를 잊으셨나요?",
+    "forgotPasswordEmailInstructions": "아래에 이메일을 입력하세요. 비밀번호를 재설정하는 방법에 대한 안내가 포함된 이메일 메시지를 받게 될 것입니다.",
+    "forgotPasswordQuestion": "비밀번호를 잊으셨나요?",
+    "generate": "생성",
+    "generateNewAPIKey": "새로운 API 키 생성",
+    "generatingNewAPIKeyWillInvalidate": "새로운 API 키를 생성하면 이전 키가 무효화됩니다. 계속하시겠습니까?",
+    "lockUntil": "잠금 시간",
+    "logBackIn": "다시 로그인",
+    "logOut": "로그아웃",
+    "loggedIn": "다른 사용자로 로그인하려면 먼저 <0>로그아웃</0>해야 합니다.",
+    "loggedInChangePassword": "비밀번호를 변경하려면 <0>계정 화면</0>으로 이동하여 비밀번호를 편집하세요.",
+    "loggedOutInactivity": "보안을 위해 일정 시간 동안 활동하지 않아 로그아웃되었습니다.",
+    "loggedOutSuccessfully": "로그아웃되었습니다.",
+    "login": "로그인",
+    "loginAttempts": "로그인 시도",
+    "loginUser": "현재 사용자 로그인",
+    "loginWithAnotherUser": "다른 사용자로 로그인하려면 먼저 <0>로그아웃</0>해야 합니다.",
+    "logout": "로그아웃",
+    "logoutUser": "현재 사용자 로그아웃",
+    "newAPIKeyGenerated": "새로운 API 키가 생성되었습니다.",
+    "newAccountCreated": "<a href=\"{{serverURL}}\">{{serverURL}}</a>에 접근할 수 있는 새로운 계정이 생성되었습니다. 다음 링크를 클릭하거나 브라우저에 URL을 붙여넣으세요: <a href=\"{{verificationURL}}\">{{verificationURL}}</a><br> 이메일을 확인한 후에 로그인할 수 있습니다.",
+    "newPassword": "새로운 비밀번호",
+    "resetPassword": "비밀번호 재설정",
+    "resetPasswordExpiration": "비밀번호 재설정 만료",
+    "resetPasswordToken": "비밀번호 재설정 토큰",
+    "resetYourPassword": "비밀번호 재설정",
+    "stayLoggedIn": "로그인 상태 유지",
+    "successfullyUnlocked": "잠금 해제 성공",
+    "unableToVerify": "확인할 수 없음",
+    "verified": "확인됨",
+    "verifiedSuccessfully": "성공적으로 확인됨",
+    "verify": "확인",
+    "verifyUser": "현재 사용자 확인",
+    "verifyYourEmail": "이메일을 확인해주세요",
+    "youAreInactive": "잠시 활동하지 않았으며 보안을 위해 곧 자동 로그아웃됩니다. 로그인 상태를 유지하시겠습니까?",
+    "youAreReceivingResetPassword": "당신(혹은 다른 사람)이 계정의 비밀번호 초기화를 요청했기 때문에 이 이메일을 받았습니다. 다음 링크를 클릭하거나 브라우저에 붙여넣어 비밀번호를 초기화하세요:",
+    "youDidNotRequestPassword": "비밀번호 초기화를 요청하지 않았다면 이 이메일을 무시하시고 비밀번호를 변경하지 마세요."
+  },
+  "error": {
+    "accountAlreadyActivated": "이 계정은 이미 활성화되었습니다.",
+    "autosaving": "이 문서를 자동 저장하는 중에 문제가 발생했습니다.",
+    "correctInvalidFields": "입력하신 내용을 확인해주세요.",
+    "deletingFile": "파일을 삭제하는 중에 오류가 발생했습니다.",
+    "deletingTitle": "{{title}} 삭제하는 중에 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도하세요.",
+    "emailOrPasswordIncorrect": "입력한 이메일 또는 비밀번호가 올바르지 않습니다.",
+    "followingFieldsInvalid_one": "다음 입력란이 유효하지 않습니다:",
+    "followingFieldsInvalid_other": "다음 입력란이 유효하지 않습니다:",
+    "incorrectCollection": "잘못된 컬렉션",
+    "invalidFileType": "잘못된 파일 형식",
+    "invalidFileTypeValue": "잘못된 파일 형식: {{value}}",
+    "loadingDocument": "ID가 {{id}}인 문서를 불러오는 중에 문제가 발생했습니다.",
+    "missingEmail": "이메일이 누락되었습니다.",
+    "missingIDOfDocument": "업데이트할 문서의 ID가 누락되었습니다.",
+    "missingIDOfVersion": "버전의 ID가 누락되었습니다.",
+    "missingRequiredData": "필수 데이터가 누락되었습니다.",
+    "noFilesUploaded": "파일이 업로드되지 않았습니다.",
+    "noMatchedField": "\"{{label}}\"에 대한 일치하는 입력란이 없습니다.",
+    "noUser": "사용자가 없습니다.",
+    "notAllowedToAccessPage": "이 페이지에 접근할 권한이 없습니다.",
+    "notAllowedToPerformAction": "이 작업을 수행할 권한이 없습니다.",
+    "notFound": "요청한 리소스를 찾을 수 없습니다.",
+    "previewing": "이 문서를 미리보는 중에 문제가 발생했습니다.",
+    "problemUploadingFile": "파일 업로드 중에 문제가 발생했습니다.",
+    "tokenInvalidOrExpired": "토큰이 유효하지 않거나 만료되었습니다.",
+    "unPublishingDocument": "이 문서의 게시 취소 중에 문제가 발생했습니다.",
+    "unableToDeleteCount": "총 {{total}}개 중 {{count}}개의 {{label}}을(를) 삭제할 수 없습니다.",
+    "unableToUpdateCount": "총 {{total}}개 중 {{count}}개의 {{label}}을(를) 업데이트할 수 없습니다.",
+    "unauthorized": "권한 없음, 이 요청을 수행하려면 로그인해야 합니다.",
+    "unknown": "알 수 없는 오류가 발생했습니다.",
+    "unspecific": "오류가 발생했습니다.",
+    "userLocked": "이 사용자는 로그인 실패 횟수가 너무 많아 잠겼습니다.",
+    "valueMustBeUnique": "값은 고유해야 합니다.",
+    "verificationTokenInvalid": "확인 토큰이 유효하지 않습니다."
+  },
+  "fields": {
+    "addLabel": "{{label}} 추가",
+    "addLink": "링크 추가",
+    "addNew": "새로 추가",
+    "addNewLabel": "새로운 {{label}} 추가",
+    "addRelationship": "관계 추가",
+    "addUpload": "업로드 추가",
+    "block": "블록",
+    "blockType": "블록 유형",
+    "blocks": "블록",
+    "chooseBetweenCustomTextOrDocument": "사용자 지정 텍스트 URL 또는 다른 문서에 링크 중 선택하세요.",
+    "chooseDocumentToLink": "연결할 문서 선택",
+    "chooseFromExisting": "기존 항목 중 선택",
+    "chooseLabel": "{{label}} 선택",
+    "collapseAll": "모두 접기",
+    "customURL": "사용자 지정 URL",
+    "editLabelData": "{{label}} 데이터 수정",
+    "editLink": "링크 수정",
+    "editRelationship": "관계 수정",
+    "enterURL": "URL 입력",
+    "internalLink": "내부 링크",
+    "itemsAndMore": "{{items}} 및 {{count}}개 더",
+    "labelRelationship": "{{label}} 관계",
+    "latitude": "위도",
+    "linkType": "링크 유형",
+    "linkedTo": "<0>{{label}}</0>에 연결됨",
+    "longitude": "경도",
+    "newLabel": "새로운 {{label}}",
+    "openInNewTab": "새 탭에서 열기",
+    "passwordsDoNotMatch": "비밀번호가 일치하지 않습니다.",
+    "relatedDocument": "관련 문서",
+    "relationTo": "관계",
+    "removeRelationship": "관계 제거",
+    "removeUpload": "제거",
+    "saveChanges": "변경 사항 저장",
+    "searchForBlock": "블록 검색",
+    "selectExistingLabel": "기존 {{label}} 선택",
+    "selectFieldsToEdit": "수정할 입력란 선택",
+    "showAll": "모두 표시",
+    "swapRelationship": "관계 교체",
+    "swapUpload": "업로드 교체",
+    "textToDisplay": "표시할 텍스트",
+    "toggleBlock": "블록 토글",
+    "uploadNewLabel": "새로운 {{label}} 업로드"
+  },
+  "general": {
+    "aboutToDelete": "{{label}} <1>{{title}}</1>를 삭제하려고 합니다. 계속하시겠습니까?",
+    "aboutToDeleteCount_many": "{{label}}를 {{count}}개 삭제하려고 합니다.",
+    "aboutToDeleteCount_one": "{{label}}를 {{count}}개 삭제하려고 합니다.",
+    "aboutToDeleteCount_other": "{{label}}를 {{count}}개 삭제하려고 합니다.",
+    "addBelow": "아래에 추가",
+    "addFilter": "필터 추가",
+    "adminTheme": "관리자 테마",
+    "and": "및",
+    "applyChanges": "변경 사항 적용",
+    "ascending": "오름차순",
+    "automatic": "자동 설정",
+    "backToDashboard": "대시보드로 돌아가기",
+    "cancel": "취소",
+    "changesNotSaved": "변경 사항이 저장되지 않았습니다. 지금 떠나면 변경 사항을 잃게 됩니다.",
+    "close": "닫기",
+    "collapse": "접기",
+    "collections": "컬렉션",
+    "columnToSort": "정렬할 열",
+    "columns": "열",
+    "confirm": "확인",
+    "confirmDeletion": "삭제하시겠습니까?",
+    "confirmDuplication": "복제하시겠습니까?",
+    "copied": "복사됨",
+    "copy": "복사",
+    "create": "생성",
+    "createNew": "새로 생성",
+    "createNewLabel": "새로운 {{label}} 생성",
+    "creatingNewLabel": "{{label}} 생성 중",
+    "created": "생성됨",
+    "createdAt": "생성 일시",
+    "creating": "생성 중",
+    "dark": "다크",
+    "dashboard": "대시보드",
+    "delete": "삭제",
+    "deletedCountSuccessfully": "{{count}}개의 {{label}}를 삭제했습니다.",
+    "deletedSuccessfully": "삭제되었습니다.",
+    "deleting": "삭제 중...",
+    "descending": "내림차순",
+    "deselectAllRows": "모든 행 선택 해제",
+    "duplicate": "복제",
+    "duplicateWithoutSaving": "변경 사항 저장 없이 복제",
+    "edit": "수정",
+    "editLabel": "{{label}} 수정",
+    "editing": "수정 중",
+    "editingLabel_many": "{{count}}개의 {{label}} 수정 중",
+    "editingLabel_one": "{{count}}개의 {{label}} 수정 중",
+    "editingLabel_other": "{{count}}개의 {{label}} 수정 중",
+    "email": "이메일",
+    "emailAddress": "이메일 주소",
+    "enterAValue": "값을 입력하세요",
+    "error": "오류",
+    "errors": "오류",
+    "fallbackToDefaultLocale": "기본 locale로 대체",
+    "filter": "필터",
+    "filterWhere": "{{label}} 필터링 조건",
+    "filters": "필터",
+    "globals": "글로벌",
+    "language": "언어",
+    "lastModified": "마지막 수정 일시",
+    "leaveAnyway": "그래도 나가시겠습니까?",
+    "leaveWithoutSaving": "저장하지 않고 나가기",
+    "light": "라이트",
+    "livePreview": "실시간 미리보기",
+    "loading": "불러오는 중",
+    "locale": "locale",
+    "locales": "locale",
+    "menu": "메뉴",
+    "moveDown": "아래로 이동",
+    "moveUp": "위로 이동",
+    "newPassword": "새 비밀번호",
+    "noFiltersSet": "설정된 필터 없음",
+    "noLabel": "<{{label}} 없음>",
+    "noOptions": "옵션 없음",
+    "noResults": "{{label}}를 찾을 수 없습니다. 아직 {{label}}이 없거나 설정한 필터와 일치하는 것이 없습니다.",
+    "noValue": "값 없음",
+    "none": "없음",
+    "notFound": "찾을 수 없음",
+    "nothingFound": "찾을 수 없습니다",
+    "of": "의",
+    "or": "또는",
+    "open": "열기",
+    "order": "순서",
+    "pageNotFound": "페이지를 찾을 수 없음",
+    "password": "비밀번호",
+    "payloadSettings": "Payload 설정",
+    "perPage": "페이지당 개수: {{limit}}",
+    "remove": "제거",
+    "reset": "초기화",
+    "row": "행",
+    "rows": "행",
+    "save": "저장",
+    "saving": "저장 중...",
+    "searchBy": "{{label}}로 검색",
+    "selectAll": "{{count}}개 {{label}} 모두 선택",
+    "selectAllRows": "모든 행 선택",
+    "selectValue": "값 선택",
+    "selectedCount": "{{count}}개의 {{label}} 선택됨",
+    "showAllLabel": "{{label}} 모두 표시",
+    "sorryNotFound": "죄송합니다. 요청과 일치하는 항목이 없습니다.",
+    "sort": "정렬",
+    "sortByLabelDirection": "{{label}} {{direction}}으로 정렬",
+    "stayOnThisPage": "이 페이지에 머무르기",
+    "submissionSuccessful": "제출이 완료되었습니다.",
+    "submit": "제출",
+    "successfullyCreated": "{{label}}이(가) 생성되었습니다.",
+    "successfullyDuplicated": "{{label}}이(가) 복제되었습니다.",
+    "thisLanguage": "한국어",
+    "titleDeleted": "{{label}} \"{{title}}\"을(를) 삭제했습니다.",
+    "unauthorized": "권한 없음",
+    "unsavedChangesDuplicate": "저장되지 않은 변경 사항이 있습니다. 복제를 계속하시겠습니까?",
+    "untitled": "제목 없음",
+    "updatedAt": "업데이트 일시",
+    "updatedCountSuccessfully": "{{count}}개의 {{label}}을(를) 업데이트했습니다.",
+    "updatedSuccessfully": "성공적으로 업데이트되었습니다.",
+    "updating": "업데이트 중",
+    "uploading": "업로드 중",
+    "user": "사용자",
+    "users": "사용자",
+    "value": "값",
+    "welcome": "환영합니다"
+  },
+  "operators": {
+    "contains": "포함",
+    "equals": "같음",
+    "exists": "존재",
+    "isGreaterThan": "보다 큼",
+    "isGreaterThanOrEqualTo": "보다 크거나 같음",
+    "isIn": "포함됨",
+    "isLessThan": "보다 작음",
+    "isLessThanOrEqualTo": "보다 작거나 같음",
+    "isLike": "유사",
+    "isNotEqualTo": "같지 않음",
+    "isNotIn": "포함되지 않음",
+    "near": "근처"
+  },
+  "upload": {
+    "crop": "자르기",
+    "cropToolDescription": "선택한 영역의 모퉁이를 드래그하거나 새로운 영역을 그리거나 아래의 값을 조정하세요.",
+    "dragAndDrop": "파일을 끌어다 놓으세요",
+    "dragAndDropHere": "또는 여기로 파일을 끌어다 놓으세요",
+    "editImage": "이미지 수정",
+    "focalPoint": "초점",
+    "focalPointDescription": "미리보기에서 초점을 직접 드래그하거나 아래의 값을 조정하세요.",
+    "fileName": "파일 이름",
+    "fileSize": "파일 크기",
+    "height": "높이",
+    "lessInfo": "정보 숨기기",
+    "moreInfo": "정보 더보기",
+    "previewSizes": "미리보기 크기",
+    "selectCollectionToBrowse": "찾을 컬렉션 선택",
+    "selectFile": "파일 선택",
+    "setCropArea": "자르기 영역 설정",
+    "setFocalPoint": "초점 설정",
+    "sizes": "크기",
+    "sizesFor": "{{label}} 크기",
+    "width": "너비"
+  },
+  "validation": {
+    "emailAddress": "유효한 이메일 주소를 입력하세요.",
+    "enterNumber": "유효한 숫자를 입력하세요.",
+    "fieldHasNo": "이 입력란에는 {{label}}이(가) 없습니다.",
+    "greaterThanMax": "{{value}}은(는) 최대 허용된 {{label}}인 {{max}}개보다 큽니다.",
+    "invalidInput": "이 입력란에는 유효하지 않은 입력이 있습니다.",
+    "invalidSelection": "이 입력란에는 유효하지 않은 선택이 있습니다.",
+    "invalidSelections": "이 입력란에는 다음과 같은 유효하지 않은 선택 사항이 있습니다:",
+    "lessThanMin": "{{value}}은(는) 최소 허용된 {{label}}인 {{min}}개보다 작습니다.",
+    "limitReached": "제한에 도달했습니다. {{max}}개 항목만 추가할 수 있습니다.",
+    "longerThanMin": "이 값은 최소 길이인 {{minLength}}자보다 길어야 합니다.",
+    "notValidDate": "\"{{value}}\"은(는) 유효한 날짜가 아닙니다.",
+    "required": "이 입력란은 필수입니다.",
+    "requiresAtLeast": "이 입력란운 최소한 {{count}} {{label}}이 필요합니다.",
+    "requiresNoMoreThan": "이 입력란은 최대 {{count}} {{label}} 이하이어야 합니다.",
+    "requiresTwoNumbers": "이 입력란은 두 개의 숫자가 필요합니다.",
+    "shorterThanMax": "이 값은 최대 길이인 {{maxLength}}자보다 짧아야 합니다.",
+    "trueOrFalse": "이 입력란은 true 또는 false만 가능합니다.",
+    "validUploadID": "이 입력란은 유효한 업로드 ID가 아닙니다."
+  },
+  "version": {
+    "aboutToPublishSelection": "선택한 {{label}}을(를) 게시하려고 합니다. 계속하시겠습니까?",
+    "aboutToRestore": "이 {{label}} 문서를 {{versionDate}}기준 버전으로 복원하려고 합니다.",
+    "aboutToRestoreGlobal": "글로벌 {{label}}을(를) {{versionDate}}기준 버전으로 복원하려고 합니다.",
+    "aboutToRevertToPublished": "이 문서의 변경 사항을 게시된 상태로 되돌리려고 합니다. 계속하시겠습니까?",
+    "aboutToUnpublish": "이 문서를 게시 해제하려고 합니다. 계속하시겠습니까?",
+    "aboutToUnpublishSelection": "선택한 {{label}}을(를) 게시 해제하려고 합니다. 계속하시겠습니까?",
+    "autosave": "자동 저장",
+    "autosavedSuccessfully": "자동 저장이 완료되었습니다.",
+    "autosavedVersion": "자동 저장된 버전",
+    "changed": "변경됨",
+    "compareVersion": "비교할 버전 선택:",
+    "confirmPublish": "게시하기",
+    "confirmRevertToSaved": "저장된 상태로 되돌리기",
+    "confirmUnpublish": "게시 해제하기",
+    "confirmVersionRestoration": "버전 복원하기",
+    "currentDocumentStatus": "현재 {{docStatus}} 문서",
+    "draft": "초안",
+    "draftSavedSuccessfully": "초안이 저장되었습니다.",
+    "lastSavedAgo": "마지막으로 저장한지 {{distance}} 전",
+    "noFurtherVersionsFound": "더 이상의 버전을 찾을 수 없습니다.",
+    "noRowsFound": "{{label}}을(를) 찾을 수 없음",
+    "preview": "미리보기",
+    "problemRestoringVersion": "이 버전을 복원하는 중 문제가 발생했습니다.",
+    "publish": "게시",
+    "publishChanges": "변경 사항 게시",
+    "published": "게시됨",
+    "restoreThisVersion": "이 버전 복원",
+    "restoredSuccessfully": "복원이 완료되었습니다.",
+    "restoring": "복원 중...",
+    "revertToPublished": "게시된 상태로 되돌리기",
+    "reverting": "되돌리는 중...",
+    "saveDraft": "초안 저장",
+    "selectLocales": "표시할 locale 선택",
+    "selectVersionToCompare": "비교할 버전 선택",
+    "showLocales": "locale 표시:",
+    "showingVersionsFor": "다음 버전 표시 중:",
+    "status": "상태",
+    "type": "유형",
+    "unpublish": "게시 해제",
+    "unpublishing": "게시 해제 중...",
+    "version": "버전",
+    "versionCount_many": "{{count}}개의 버전을 찾았습니다",
+    "versionCount_none": "버전을 찾을 수 없습니다",
+    "versionCount_one": "{{count}}개의 버전을 찾았습니다",
+    "versionCount_other": "{{count}}개의 버전을 찾았습니다",
+    "versionCreatedOn": "{{version}} 생성 날짜:",
+    "versionID": "버전 ID",
+    "versions": "버전",
+    "viewingVersion": "{{entityLabel}} {{documentTitle}}의 버전 보기",
+    "viewingVersionGlobal": "글로벌 {{entityLabel}}의 버전 보기",
+    "viewingVersions": "{{entityLabel}} {{documentTitle}}에 대한 버전 보기",
+    "viewingVersionsGlobal": "글로벌 {{entityLabel}}에 대한 버전 보기"
+  }
+}