chore(release): plugin-nested-docs/1.0.9 [skip ci]

Co-authored-by: James <james@trbl.design>

.editorconfig

@@ -23,3 +23,7 @@ indent_size = 2
 [*.json]
 indent_style = space
 indent_size = 2
+
+[*.md]
+indent_style = space
+indent_size = 2

.github/CODEOWNERS

@@ -0,0 +1,50 @@
+# Order matters. The last matching pattern takes precedence.
+
+### Catch-all ###
+* @denolfe @jmikrut @DanRibbens
+.* @denolfe @jmikrut @DanRibbens
+
+### Core ###
+/packages/payload/ @denolfe @jmikrut @DanRibbens
+/packages/payload/src/uploads/ @denolfe
+/packages/payload/src/admin/ @jmikrut @jacobsfletch @JarrodMFlesch
+
+### Adapters ###
+/packages/bundler-*/ @denolfe @jmikrut @DanRibbens @JarrodMFlesch
+/packages/db-*/ @denolfe @jmikrut @DanRibbens
+/packages/richtext-*/ @denolfe @jmikrut @DanRibbens @AlessioGr
+
+### Plugins ###
+/packages/plugin-*/ @denolfe @jmikrut @DanRibbens @jacobsfletch @JarrodMFlesch @AlessioGr
+/packages/plugin-cloud*/ @denolfe
+/packages/plugin-form-builder/ @jacobsfletch
+/packages/plugin-live-preview*/ @jacobsfletch
+/packages/plugin-nested-docs/ @jacobsfletch
+/packages/plugin-password-protection/ @jmikrut
+/packages/plugin-redirects/ @jacobsfletch
+/packages/plugin-search/ @jacobsfletch
+/packages/plugin-sentry/ @JessChowdhury
+/packages/plugin-seo/ @jacobsfletch
+/packages/plugin-stripe/ @jacobsfletch
+/packages/plugin-zapier/ @JarrodMFlesch
+
+### Examples ###
+/examples/ @jacobsfletch
+/examples/testing/ @JarrodMFlesch
+/examples/email/ @JessChowdhury
+/examples/whitelabel/ @JessChowdhury
+
+### Templates ###
+/templates/ @jacobsfletch
+/templates/blank/ @denolfe
+
+### Misc ###
+/packages/create-payload-app/ @denolfe
+/packages/eslint-config-payload/ @denolfe
+/packages/payload-admin-bar/ @jacobsfletch
+
+### Root ###
+/package.json @denolfe
+/scripts/ @denolfe
+/.github/ @denolfe
+/.github/CODEOWNERS @denolfe

.github/workflows/main.yml

@@ -23,6 +23,7 @@ jobs:
       with:
         filters: |
           needs_build:
+            - '.github/workflows/**'
             - 'packages/**'
             - 'test/**'
             - 'pnpm-lock.yaml'
@@ -131,6 +132,7 @@ jobs:
       - name: Integration Tests
         run: pnpm test:int
         env:
+          NODE_OPTIONS: --max-old-space-size=8096
           PAYLOAD_DATABASE: ${{ matrix.database }}
           POSTGRES_URL: ${{ env.POSTGRES_URL }}
 
@@ -140,7 +142,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        part: [1/4, 2/4, 3/4, 4/4]
+        part: [1/8, 2/8, 3/8, 4/8, 5/8, 6/8, 7/8, 8/8]
 
     steps:
       - name: Use Node.js 18
@@ -253,6 +255,7 @@ jobs:
           - plugin-form-builder
           - plugin-nested-docs
           - plugin-search
+          - plugin-sentry
 
     steps:
       - name: Use Node.js 18

.vscode/launch.json

@@ -47,6 +47,13 @@
       "request": "launch",
       "type": "node-terminal"
     },
+    {
+      "command": "pnpm run dev uploads",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev Uploads",
+      "request": "launch",
+      "type": "node-terminal"
+    },
     {
       "command": "PAYLOAD_BUNDLER=vite pnpm run dev fields",
       "cwd": "${workspaceFolder}",
@@ -57,6 +64,13 @@
         "NODE_ENV": "production"
       }
     },
+    {
+      "command": "pnpm run test:int live-preview",
+      "cwd": "${workspaceFolder}",
+      "name": "Live Preview Integration",
+      "request": "launch",
+      "type": "node-terminal"
+    },
     {
       "command": "ts-node ./packages/payload/src/bin/index.ts build",
       "env": {

CHANGELOG.md

@@ -1,86 +1,128 @@
-## [2.0.14](https://github.com/payloadcms/payload/compare/v2.0.13...v2.0.14) (2023-10-30)
+## [2.2.0](https://github.com/payloadcms/payload/compare/v2.1.1...v2.2.0) (2023-11-20)
 
 
 ### Features
 
-* add textarea field ([474436e](https://github.com/payloadcms/payload/commit/474436e9ab70374a2cfdc1bede06f21052fb78c9))
-* adds basePrice to payment field ([12c85d7](https://github.com/payloadcms/payload/commit/12c85d7707ab85cc7a28b43bad1b5085b93fb3bf))
-* adds cc field to email ([2c8ea53](https://github.com/payloadcms/payload/commit/2c8ea533afd98d27ee9787d8f0fc03d2cb4a7198))
-* adds email-from-name & reply-to-name fields to Emails ([3816431](https://github.com/payloadcms/payload/commit/38164318932a10bc483f0860c5294c863f83bf7a))
-* adds image and video elements to sticky list and content grid rich text ([c2c2bb7](https://github.com/payloadcms/payload/commit/c2c2bb7f2d1c54e923b79a91a7fcb72128a4034c))
-* adds indentation option to richText ([67df834](https://github.com/payloadcms/payload/commit/67df834f314b4b243c2dea45a3c9a6c88975761d))
-* adds payment fields to form builder [#43](https://github.com/payloadcms/payload/issues/43) ([2f00aef](https://github.com/payloadcms/payload/commit/2f00aef66c8c635c1ab579205c1967eec1a4bd12))
-* adds title to forms ([6e2f433](https://github.com/payloadcms/payload/commit/6e2f43394d6b2dfb6134ddc4976913689ce9273d))
-* builds breadcrumbs plugin ([2a2a2e3](https://github.com/payloadcms/payload/commit/2a2a2e3a2f90350bfd41a12d1d7fc05766128606))
-* builds demo ([f05462e](https://github.com/payloadcms/payload/commit/f05462efd348b07aba55f7f2f4b78e1fe34bd4a9))
-* builds form builder plugin ([eeecbbe](https://github.com/payloadcms/payload/commit/eeecbbedb616c44490f364d5d29cd29d1f3d8370))
-* builds getPaymentTotal utility ([65a53c7](https://github.com/payloadcms/payload/commit/65a53c7d76927aea204234189f67c57a59785275))
-* configures tsc and fixes types ([8b69625](https://github.com/payloadcms/payload/commit/8b69625b57895f14e73e26d3d564ea804877667c))
-* dynamic pricing and payment handling [#43](https://github.com/payloadcms/payload/issues/43) ([b749f89](https://github.com/payloadcms/payload/commit/b749f89c307cf34497bd453bee70ca607684ebab))
-* explicitly exports fields for reuse [#35](https://github.com/payloadcms/payload/issues/35) ([#39](https://github.com/payloadcms/payload/issues/39)) ([f8da32a](https://github.com/payloadcms/payload/commit/f8da32a9bd12694db5fb02c579c6d38d94883913))
-* extends form builder plugin ([3c58e51](https://github.com/payloadcms/payload/commit/3c58e51d17c7a5b89ae28649c2b61920f5bf6f8d))
-* field localization ([b4d1eaf](https://github.com/payloadcms/payload/commit/b4d1eaf1fb02053a3b7d65fe0ec4f36828c6c146))
-* form submission emails ([db29b07](https://github.com/payloadcms/payload/commit/db29b07b82214d73423b17f5bcc0377731225238))
-* integrates stripe api into form builder [#43](https://github.com/payloadcms/payload/issues/43) ([ec60147](https://github.com/payloadcms/payload/commit/ec60147aff2b165943e957cd59c0b68282e3b5f4))
-* modifies form builder api ([24a4bc6](https://github.com/payloadcms/payload/commit/24a4bc6f190340f1d1268ba3931c40fcab1430dd))
-* omits irrelevant collections from rich text relationships ([2ccaa82](https://github.com/payloadcms/payload/commit/2ccaa823e4aef4fc254fcec2254bf7e8a13b43ee))
-* restructures form builder [#43](https://github.com/payloadcms/payload/issues/43) ([3b1b8dd](https://github.com/payloadcms/payload/commit/3b1b8ddc30f06c8abb8996fa95f2f291d4474e9f))
-* spreads overrides into configs [#25](https://github.com/payloadcms/payload/issues/25) ([#29](https://github.com/payloadcms/payload/issues/29)) ([da4d901](https://github.com/payloadcms/payload/commit/da4d9018c1e73524993637ce4775517d9d311c68))
-* supports form email variables and prepares for send ([3207202](https://github.com/payloadcms/payload/commit/3207202808b848b8b0bac74bf0175f3ba19e6ac8))
-* types payment field ([4a31090](https://github.com/payloadcms/payload/commit/4a310903882fdf6347781985077aab280dd2c1bc))
-* utilizes unused replyTo ([4938602](https://github.com/payloadcms/payload/commit/4938602ee0a3872e1cb3b7fc6ec9558570825767))
+* allow richtext adapters to control type generation, improve generated lexical types ([#4036](https://github.com/payloadcms/payload/issues/4036)) ([989c10e](https://github.com/payloadcms/payload/commit/989c10e0e0b36a8c34822263b19f5cb4b9ed6e72))
+* hide publish button based on permissions ([#4203](https://github.com/payloadcms/payload/issues/4203)) ([de02490](https://github.com/payloadcms/payload/commit/de02490231fbc8936973c1b81ac87add39878d8b))
+* **richtext-lexical:** Add new position: 'top' property for plugins ([eed4f43](https://github.com/payloadcms/payload/commit/eed4f4361cd012adf4e777820adbe7ad330ffef6))
+
+
+### Bug Fixes
+
+* fully define the define property for esbuild string replacement ([#4099](https://github.com/payloadcms/payload/issues/4099)) ([e22b95b](https://github.com/payloadcms/payload/commit/e22b95bdf3b2911ae67a07a76ec109c76416ea56))
+* **i18n:** polish translations ([#4134](https://github.com/payloadcms/payload/issues/4134)) ([782e118](https://github.com/payloadcms/payload/commit/782e1185698abb2fff3556052fd16d2b725611b9))
+* improves live preview breakpoints and zoom options in dark mode ([#4090](https://github.com/payloadcms/payload/issues/4090)) ([b91711a](https://github.com/payloadcms/payload/commit/b91711a74ad9379ed820b6675060209626b1c2d0))
+* **plugin-nested-docs:** await populate breadcrumbs on resaveChildren ([#4226](https://github.com/payloadcms/payload/issues/4226)) ([4e41dd1](https://github.com/payloadcms/payload/commit/4e41dd1bf2706001fa03130adb1c69403795ac96))
+* rename tab button classname to prevent unintentional styling ([#4121](https://github.com/payloadcms/payload/issues/4121)) ([967eff1](https://github.com/payloadcms/payload/commit/967eff1aabcc9ba7f29573fc2706538d691edfdd))
+* **richtext-lexical:** add missing 'use client' to TestRecorder feature plugin ([fc26275](https://github.com/payloadcms/payload/commit/fc26275b7a85fd34f424f7693b8383ad4efe0121))
+* **richtext-lexical:** Blocks: Array row data is not removed ([#4209](https://github.com/payloadcms/payload/issues/4209)) ([0af9c4d](https://github.com/payloadcms/payload/commit/0af9c4d3985a6c46a071ef5ac28c8359cb320571))
+* **richtext-lexical:** Blocks: fields without fulfilled condition are now skipped for validation ([50fab90](https://github.com/payloadcms/payload/commit/50fab902bd7baa1702ae0d995b4f58c1f5fca374))
+* **richtext-lexical:** Blocks: make sure fields are wrapped in a uniquely-named group, change block node data format, fix react key error ([#3995](https://github.com/payloadcms/payload/issues/3995)) ([c068a87](https://github.com/payloadcms/payload/commit/c068a8784ec5780dbdca5416b25ba654afd05458))
+* **richtext-lexical:** Blocks: z-index issue, e.g. select field dropdown in blocks hidden behind blocks below, or slash menu inside nested editor hidden behind blocks below ([09f17f4](https://github.com/payloadcms/payload/commit/09f17f44508539cfcb8722f7f462ef40d9ed54fd))
+* **richtext-lexical:** Floating Select Toolbar: Buttons and Dropdown Buttons not clickable in nested editors ([615702b](https://github.com/payloadcms/payload/commit/615702b858e76994a174159cb69f034ef811e016)), closes [#4025](https://github.com/payloadcms/payload/issues/4025)
+* **richtext-lexical:** HTMLConverter: cannot find nested lexical fields ([#4103](https://github.com/payloadcms/payload/issues/4103)) ([a6d5f2e](https://github.com/payloadcms/payload/commit/a6d5f2e3dea178e1fbde90c0d6a5ce254a8db0d1)), closes [#4034](https://github.com/payloadcms/payload/issues/4034)
+* **richtext-lexical:** incorrect caret positioning when selecting second line of multi-line paragraph ([#4165](https://github.com/payloadcms/payload/issues/4165)) ([b210af4](https://github.com/payloadcms/payload/commit/b210af46968b77d96ffd6ef60adc3b8d8bdc9376))
+* **richtext-lexical:** make lexicalHTML() function work for globals ([dbfc835](https://github.com/payloadcms/payload/commit/dbfc83520ca8b5e55198a3c4b517ae3a80f9cac6))
+* **richtext-lexical:** nested editor may lose focus when writing ([#4139](https://github.com/payloadcms/payload/issues/4139)) ([859c2f4](https://github.com/payloadcms/payload/commit/859c2f4a6d299a42e572133502b3841a74a11002))
+* **richtext-lexical:** remove optional chaining after `this` as transpilers are not handling it well ([#4145](https://github.com/payloadcms/payload/issues/4145)) ([2c8d34d](https://github.com/payloadcms/payload/commit/2c8d34d2aadf2fcaf0655c0abef233f341d9945f))
+* **richtext-lexical:** visual bug after rearranging blocks ([a6b4860](https://github.com/payloadcms/payload/commit/a6b486007dc26195adc5d576d937e35471c2868f))
+* simplifies block/array/hasMany-number field validations  ([#4052](https://github.com/payloadcms/payload/issues/4052)) ([803a37e](https://github.com/payloadcms/payload/commit/803a37eaa947397fa0a93b9f4f7d702c6b94ceaa))
+* synchronous transaction errors ([#4164](https://github.com/payloadcms/payload/issues/4164)) ([1510baf](https://github.com/payloadcms/payload/commit/1510baf46e33540c72784f2d3f98330a8ff90923))
+* thread locale through to access routes from admin panel ([#4183](https://github.com/payloadcms/payload/issues/4183)) ([05f3169](https://github.com/payloadcms/payload/commit/05f3169a75b3b62962e7fe7842fbb6df6699433d))
+* transactionID isolation for GraphQL ([#4095](https://github.com/payloadcms/payload/issues/4095)) ([195a952](https://github.com/payloadcms/payload/commit/195a952c4314e0d53fd579517035373b49d6ccae))
+* upload fit not accounted for when editing focal point or crop ([#4142](https://github.com/payloadcms/payload/issues/4142)) ([45e9a55](https://github.com/payloadcms/payload/commit/45e9a559bbb16b2171465c8a439044011cebf102))
+
+## [2.1.1](https://github.com/payloadcms/payload/compare/v2.1.0...v2.1.1) (2023-11-10)
+
+
+### Bug Fixes
+
+* conditionally hide dot menu in DocumentControls ([#4075](https://github.com/payloadcms/payload/issues/4075)) ([cef4cbb](https://github.com/payloadcms/payload/commit/cef4cbb0ee59e1b0b806808d79b402dce114755f))
+* disable editing option for svg image types ([#4071](https://github.com/payloadcms/payload/issues/4071)) ([949e265](https://github.com/payloadcms/payload/commit/949e265cd9c95b7d4063336dde86177008d54839))
+* fixes creation of related documents within a transaction if filterOptions is used ([#4087](https://github.com/payloadcms/payload/issues/4087)) ([acad288](https://github.com/payloadcms/payload/commit/acad2888cd9a13d5fb9e4c686b2267ea69454eaf))
+* hide empty image sizes from the preview drawer ([#3946](https://github.com/payloadcms/payload/issues/3946)) ([687f485](https://github.com/payloadcms/payload/commit/687f4850acf073df0a649ef6182bfc8387857173))
+* **live-preview:** ensures field schema exists before traversing fields ([#4074](https://github.com/payloadcms/payload/issues/4074)) ([7059a71](https://github.com/payloadcms/payload/commit/7059a71243a8f98dcc89af0bfe502247db9e4123))
+* **live-preview:** field recursion and relationship population ([#4045](https://github.com/payloadcms/payload/issues/4045)) ([2ad7340](https://github.com/payloadcms/payload/commit/2ad73401546ef6608fd67d1f00b537f149640d6a))
+* **live-preview:** properly handles apiRoute ([#4076](https://github.com/payloadcms/payload/issues/4076)) ([1f851f2](https://github.com/payloadcms/payload/commit/1f851f21b18c9a5076d9afc9a31abc7a97fcb0df))
+* **plugin-nested-docs:** sync write transaction errors ([#4084](https://github.com/payloadcms/payload/issues/4084)) ([47efd3b](https://github.com/payloadcms/payload/commit/47efd3b92e99594dd5b61f0017f4eb76e1d36eb7))
+* possible issue with access control not using req ([#4086](https://github.com/payloadcms/payload/issues/4086)) ([348a70c](https://github.com/payloadcms/payload/commit/348a70cc33409b0b48aff3acd2b94c2df5d88f3b))
+* **richtext-lexical:** Blocks: unnecessary saving node value when initially opening a document & new lexical tests ([#4059](https://github.com/payloadcms/payload/issues/4059)) ([fff377a](https://github.com/payloadcms/payload/commit/fff377ad22cce3b26142cde8f4125fcee95aa072))
+* **richtext-lexical:** floating select toolbar caret not positioned correctly if first line is selected ([#4062](https://github.com/payloadcms/payload/issues/4062)) ([c462df3](https://github.com/payloadcms/payload/commit/c462df38f65b155e131e6a7b46b2bb16cd090e45))
+
+## [2.1.0](https://github.com/payloadcms/payload/compare/v2.0.15...v2.1.0) (2023-11-08)
+
+
+### Features
+
+* add internationalization (i18n) to locales ([#4005](https://github.com/payloadcms/payload/issues/4005)) ([6a0a859](https://github.com/payloadcms/payload/commit/6a0a859563ed9e742260ea51a1839a1ef0f61fce))
+* Custom Error, Label, and before/after field components ([#3747](https://github.com/payloadcms/payload/issues/3747)) ([266c327](https://github.com/payloadcms/payload/commit/266c3274d03e4fd52c692eeef1ee9248dcf66189))
+
+
+### Bug Fixes
+
+* error on graphql multiple queries ([#3985](https://github.com/payloadcms/payload/issues/3985)) ([57da3c9](https://github.com/payloadcms/payload/commit/57da3c99a7e4ce5d3d1e17315e3691815f363704))
+* focal and cropping issues, adds test ([#4039](https://github.com/payloadcms/payload/issues/4039)) ([acba5e4](https://github.com/payloadcms/payload/commit/acba5e482b7ddc6e3dc6ba9b7736022770d69a55))
+* handle invalid tokens in refresh token operation ([#3647](https://github.com/payloadcms/payload/issues/3647)) ([131d89c](https://github.com/payloadcms/payload/commit/131d89c3f50c237e1ab2d7cd32d7a8226a9f8ce3))
+* hasMany number and select fields unable to save within arrays ([#4047](https://github.com/payloadcms/payload/issues/4047)) ([182c57b](https://github.com/payloadcms/payload/commit/182c57b191010ce3dcf659f39c1dc2f7cf80662e))
+* injects array and block ids into fieldSchemaToJSON ([#4043](https://github.com/payloadcms/payload/issues/4043)) ([d068ef7](https://github.com/payloadcms/payload/commit/d068ef7e2483d49dc41bdd7735042ddcaa0a684c))
+* parse predefined migrations via file arg or name prefix ([#4001](https://github.com/payloadcms/payload/issues/4001)) ([eb42c03](https://github.com/payloadcms/payload/commit/eb42c031ef980558ed051d4163925aa28d6ab090))
+* polymorphic hasMany relationships missing in postgres admin ([#4053](https://github.com/payloadcms/payload/issues/4053)) ([7a9af44](https://github.com/payloadcms/payload/commit/7a9af4417a56c621f01195f9a2904b9adffaad7a))
+* resets list filter row when the filter on field is changed ([#3956](https://github.com/payloadcms/payload/issues/3956)) ([8d14c21](https://github.com/payloadcms/payload/commit/8d14c213c878a1afda2b3bf03431fed5aa2a44e3))
+* Update API Views ([b008b6c](https://github.com/payloadcms/payload/commit/b008b6c6463c9dc3d8e61eaa0a9210aa1a189442))
+* vite not replacing env vars correctly when building ([67b3baa](https://github.com/payloadcms/payload/commit/67b3baaa445a13246be8178d57eaeba92888bef1))
+
+## [2.0.15](https://github.com/payloadcms/payload/compare/v2.0.14...v2.0.15) (2023-11-03)
+
+
+### Bug Fixes
+
+* autosave updating data in unrelated docs ([b722f20](https://github.com/payloadcms/payload/commit/b722f202af39a1429298b700cac686ecbbd4b46b))
+* better error handling within parseCookies ([#3720](https://github.com/payloadcms/payload/issues/3720)) ([6b1b4ff](https://github.com/payloadcms/payload/commit/6b1b4ffd27cc9a84e22ef2f3a8e389e5b72d41bc))
+* block row removal w/ db-postgres adapter ([#3951](https://github.com/payloadcms/payload/issues/3951)) ([5ea88bb](https://github.com/payloadcms/payload/commit/5ea88bb47d9ed6457331ceab7d7c82b0face8311))
+* deeply merges view configs ([#3954](https://github.com/payloadcms/payload/issues/3954)) ([a5b2333](https://github.com/payloadcms/payload/commit/a5b2333140447b12dbafd68592108ac342af4ea7))
+* do not display field if read permission is false - admin panel ui ([#3949](https://github.com/payloadcms/payload/issues/3949)) ([cdc10be](https://github.com/payloadcms/payload/commit/cdc10be1a241c6a9ac09feab77bcd58d23ff3dd9))
+* ensures dataloader does not run requests in parallel ([4607dbf](https://github.com/payloadcms/payload/commit/4607dbf97694bc899e597e9c7df50b6c878874f5))
+* exclude files from dev bundle if aliased ([#3957](https://github.com/payloadcms/payload/issues/3957)) ([7966692](https://github.com/payloadcms/payload/commit/796669279afb8fe23723ce36e6e47a44b7088b09))
+* field paths being mutated if they ended with the req.locale ([#3936](https://github.com/payloadcms/payload/issues/3936)) ([36576f1](https://github.com/payloadcms/payload/commit/36576f152ace41edd8b353703db2598d04deae44))
+* findVersions pagination ([#3906](https://github.com/payloadcms/payload/issues/3906)) ([1f8f173](https://github.com/payloadcms/payload/commit/1f8f173741fd524c7c2f11cc104672854f625da9))
+* global autosave and relevant e2e test ([a9d96b1](https://github.com/payloadcms/payload/commit/a9d96b10376fe1a4731b2ddb4d26ce38e333d5cb))
+* **i18n:** polish translations ([#3934](https://github.com/payloadcms/payload/issues/3934)) ([e4881bb](https://github.com/payloadcms/payload/commit/e4881bb02f7c1e8f96d5b405c57e0fdc01a2e7fe))
+* passes correct data to buildStateFromSchema on account page ([#3984](https://github.com/payloadcms/payload/issues/3984)) ([c7a315a](https://github.com/payloadcms/payload/commit/c7a315a7d1075361a7ee432a449769397c12185e))
+* prevent sort from saving a new version in version list view ([#3944](https://github.com/payloadcms/payload/issues/3944)) ([900a9ea](https://github.com/payloadcms/payload/commit/900a9eafeb51b1e5130518d4f71034a2bf9e4c5b))
+* properly load temp files into buffer ([#3996](https://github.com/payloadcms/payload/issues/3996)) ([d1a0822](https://github.com/payloadcms/payload/commit/d1a0822f8044a3f65416f4fe608e91a4ceea6b56))
+* sort document tabs by order ([#3968](https://github.com/payloadcms/payload/issues/3968)) ([06cd52b](https://github.com/payloadcms/payload/commit/06cd52b622723503896af6262907d31b258d0a5e))
+* vertical alignment in step nav when using larger logos ([#3955](https://github.com/payloadcms/payload/issues/3955)) ([b6d9a20](https://github.com/payloadcms/payload/commit/b6d9a2021fafea594353329fd304553bf7f2d091))
+
+## [2.0.14](https://github.com/payloadcms/payload/compare/v2.0.13...v2.0.14) (2023-10-30)
 
 
 ### Bug Fixes
 
 * adds null to non-required field unions ([#3870](https://github.com/payloadcms/payload/issues/3870)) ([7e919aa](https://github.com/payloadcms/payload/commit/7e919aa87c0116c41bf41d75dcd91ff96576a46f))
-* allows form fields to be properly overridden ([c880a61](https://github.com/payloadcms/payload/commit/c880a61f13e4c034e269466abffedbf7d644d272))
-* build errors ([9f5ec17](https://github.com/payloadcms/payload/commit/9f5ec1784c674279ee5aa861cc7a6e0b6f5cbf47))
 * checks for user before accessing properties in preferences update operation([#3844](https://github.com/payloadcms/payload/issues/3844)) ([24eab3a](https://github.com/payloadcms/payload/commit/24eab3af1da3b08debe0580cce8ece08a86039a4))
-* correctly types width fields [#37](https://github.com/payloadcms/payload/issues/37) ([#41](https://github.com/payloadcms/payload/issues/41)) ([76c9704](https://github.com/payloadcms/payload/commit/76c97048502655516ece4f6680868a23a172ff2c))
-* custom form fields ([ba0651c](https://github.com/payloadcms/payload/commit/ba0651cecf2aed50a9176218237181a4ce092bc0))
 * **db-mongodb:** improve find query performance ([#3836](https://github.com/payloadcms/payload/issues/3836)) ([56e58e9](https://github.com/payloadcms/payload/commit/56e58e9ec732f8365f53f214a9e950fbc2a7d8b9)), closes [#3904](https://github.com/payloadcms/payload/issues/3904)
 * **db-mongodb:** versions pagination ([#3875](https://github.com/payloadcms/payload/issues/3875)) ([4f2b080](https://github.com/payloadcms/payload/commit/4f2b080d1cb5f9d4ab80aa106650307c11e8811b))
-* declares payload as a peer dependency ([e15e00b](https://github.com/payloadcms/payload/commit/e15e00b5f173041635221490006e4e8347518253))
 * disable webpack hot reload on production ([#3891](https://github.com/payloadcms/payload/issues/3891)) ([422c803](https://github.com/payloadcms/payload/commit/422c803da67982a063a028508c44009b9577646e))
 * duplicate document copying to incorrect locale ([#3874](https://github.com/payloadcms/payload/issues/3874)) ([89f273b](https://github.com/payloadcms/payload/commit/89f273bf894512b69e8647be4cf4496bff37c99b))
-* dynamic field selector option values ([f0cc05a](https://github.com/payloadcms/payload/commit/f0cc05ab912fd07dcee8bd77c6c2bdc40607f80f))
-* dynamic price selector ([a8d432f](https://github.com/payloadcms/payload/commit/a8d432f7b3da2ca36a3a1c0a378af44be82da357))
 * enables nested AND/OR queries ([#3834](https://github.com/payloadcms/payload/issues/3834)) ([237eebd](https://github.com/payloadcms/payload/commit/237eebdf87b7d33baa9baaa54946f4ebb4276bfb))
 * ensure serverURL has string value for getBaseUploadFields function ([#3900](https://github.com/payloadcms/payload/issues/3900)) ([c564a83](https://github.com/payloadcms/payload/commit/c564a83ab61b672d9a2bcc875ab890b0fede5462))
 * ensures compare-version select field cannot be cleared ([#3901](https://github.com/payloadcms/payload/issues/3901)) ([42d8d11](https://github.com/payloadcms/payload/commit/42d8d11fd7e5792b119f69f17dc1100c85cfa491))
 * error handling when duplicating documents fails ([#3873](https://github.com/payloadcms/payload/issues/3873)) ([435eb62](https://github.com/payloadcms/payload/commit/435eb6204e550e898a81033f794fcf568e3b017c))
-* fieldToUse options ([a7780b1](https://github.com/payloadcms/payload/commit/a7780b10d974f91bea441c5c86c475181c6adc4a))
-* form builder rich text serialization ([8f0d85f](https://github.com/payloadcms/payload/commit/8f0d85fe13591ce8186b623f6165626e79714430))
-* form builder types ([32a69f8](https://github.com/payloadcms/payload/commit/32a69f8f368aa1917761b7585549dae2f8b2cb12))
 * generate new block ids on create ([#3871](https://github.com/payloadcms/payload/issues/3871)) ([3404bab](https://github.com/payloadcms/payload/commit/3404bab83f1112713675eb504870a4a1786c3822))
 * global permissions for live preview ([#3854](https://github.com/payloadcms/payload/issues/3854)) ([3032e0b](https://github.com/payloadcms/payload/commit/3032e0b5a239db0762abd120b2db95f30ed5ca65))
 * handles null & undefined relationship field values in versions view ([#3609](https://github.com/payloadcms/payload/issues/3609)) ([115e592](https://github.com/payloadcms/payload/commit/115e592b54d9174f316daa3cff31bcc801eaf92f))
 * incorrect duplication of data in admin ui ([#3907](https://github.com/payloadcms/payload/issues/3907)) ([46fc41c](https://github.com/payloadcms/payload/commit/46fc41cbd9615c58248b4d2c44d24905dd676171))
-* misc bugs with data safety ([3fdf23a](https://github.com/payloadcms/payload/commit/3fdf23a1a0287673a190cfd3c7bc55d64cff37ba))
 * only apply focal manipulation when necessary ([#3902](https://github.com/payloadcms/payload/issues/3902)) ([a4f36aa](https://github.com/payloadcms/payload/commit/a4f36aa8a009e9c0156924320bbcf1d04b697223))
-* only populates redirect references if passed via config ([2bbe428](https://github.com/payloadcms/payload/commit/2bbe4286f6c89092a8133938d0fec2cc31c0cb16))
-* overwrites incoming config arrays within field overrides ([3ca632b](https://github.com/payloadcms/payload/commit/3ca632bcbd49aeaafa86946a595307a95535a300))
-* **payload:** graphql query errors transaction race condition ([#3795](https://github.com/payloadcms/payload/issues/3795)) ([dc13b10](https://github.com/payloadcms/payload/commit/dc13b101f7351f7bae60a4a4bbc25907ed82210f))
-* payment form submissions ([36a8dc4](https://github.com/payloadcms/payload/commit/36a8dc49b34d75993fa981e3426db85536bf5f26))
-* properly exports types ([856962c](https://github.com/payloadcms/payload/commit/856962c6c621ab366e7c0b9089f3204389f3d322))
-* properly overrides form submission relationTo [#19](https://github.com/payloadcms/payload/issues/19) ([#27](https://github.com/payloadcms/payload/issues/27)) ([5b6705b](https://github.com/payloadcms/payload/commit/5b6705b4f62c8dfda87f1ceb5585e59277e22542))
-* reduces richtext indent padding ([b4610a3](https://github.com/payloadcms/payload/commit/b4610a3faef02cc7f6d440bb908a4623ed94fee8))
+* graphql query errors transaction race condition ([#3795](https://github.com/payloadcms/payload/issues/3795)) ([dc13b10](https://github.com/payloadcms/payload/commit/dc13b101f7351f7bae60a4a4bbc25907ed82210f))
 * removes conditional return of formattedEmails in sendEmail hook [#26](https://github.com/payloadcms/payload/issues/26) ([#28](https://github.com/payloadcms/payload/issues/28)) ([e8458f8](https://github.com/payloadcms/payload/commit/e8458f84bcd5bad74b189479931fbb7faea74900))
 * resize image if no aspect ratio change ([#3859](https://github.com/payloadcms/payload/issues/3859)) ([f53b713](https://github.com/payloadcms/payload/commit/f53b7131548dbe9071c65ba110f7f0d206bb33b5))
 * **richtext-*:** type issues with typescript strict mode enabled ([dac9514](https://github.com/payloadcms/payload/commit/dac9514eb00b99a3caeb9f217695b2b89368f7c9))
 * **richtext-lexical:** Blocks node incorrectly marked as client module ([35f00fa](https://github.com/payloadcms/payload/commit/35f00fa83d2a90967e0707ca0fd960c5608a3bf3))
 * **richtext-lexical:** remove unnecessary dependencies (fixes [#3889](https://github.com/payloadcms/payload/issues/3889)) ([760565f](https://github.com/payloadcms/payload/commit/760565f1e96e4cb1f6bce8663ad3fa8a16a2601c))
 * set date to 12UTC for default, dayOnly and monthOnly fields ([#3887](https://github.com/payloadcms/payload/issues/3887)) ([d393225](https://github.com/payloadcms/payload/commit/d3932252891bb8721a5abc97e204dbb6a7f3fda2))
-* skip following code if form.emails list is empty ([#54](https://github.com/payloadcms/payload/issues/54)) ([e13d8da](https://github.com/payloadcms/payload/commit/e13d8da7c229d7aa1caa487f20c4158e8ec0aeb5))
 * store resized image on req or tempFilePath ([#3883](https://github.com/payloadcms/payload/issues/3883)) ([6c5d525](https://github.com/payloadcms/payload/commit/6c5d525d8e1267eebdffeb9f31b2ef3a4df1132d))
-* thread through collection admin config properties - [#5](https://github.com/payloadcms/payload/issues/5) ([175d44b](https://github.com/payloadcms/payload/commit/175d44b0aeaec872421e0269c4b7d643f9cb8456))
-* threads locale through findByID ([#31](https://github.com/payloadcms/payload/issues/31)) ([a12240b](https://github.com/payloadcms/payload/commit/a12240b71e677c9b46f47117dec79e40a7de3564))
 * unique field error handling ([#3888](https://github.com/payloadcms/payload/issues/3888)) ([4d8d4c2](https://github.com/payloadcms/payload/commit/4d8d4c214ab12571e9dc71e406117c4b19f63c6b))
-* updates payload ([6940f2c](https://github.com/payloadcms/payload/commit/6940f2c0b7d36ad25fdc09ba93e23f5c6a095d6c))
-* updates richtext indentation within formbuilder ([ea22da4](https://github.com/payloadcms/payload/commit/ea22da4fc7285e4eab975e916d7627394eb4bb26))
-* uses form slug from config in form relationship field [#19](https://github.com/payloadcms/payload/issues/19) ([#23](https://github.com/payloadcms/payload/issues/23)) ([35e14cf](https://github.com/payloadcms/payload/commit/35e14cf044698acabe3a0902897ea276e4aef803))
-* who can say ([b398a92](https://github.com/payloadcms/payload/commit/b398a92db4f2402089fd03e803fefb337964d432))
 
 ## [2.0.13](https://github.com/payloadcms/payload/compare/v2.0.12...v2.0.13) (2023-10-24)
 

CONTRIBUTING.md

@@ -89,3 +89,14 @@ If you are committing to [templates](./templates) or [examples](./examples), use
 ## Pull Requests
 
 For all Pull Requests, you should be extremely descriptive about both your problem and proposed solution. If there are any affected open or closed issues, please leave the issue number in your PR message.
+
+## Previewing docs
+
+This is how you can preview changes you made locally to the docs:
+
+1. Clone our [website repository](https://github.com/payloadcms/website)
+2. Run `yarn install`
+3. Duplicate the `.env.example` file and rename it to `.env`
+4. Add a `DOCS_DIR` environment variable to the `.env` file which points to the absolute path of your modified docs folder. For example `DOCS_DIR=/Users/yourname/Documents/GitHub/payload/docs`
+5. Run `yarn run fetchDocs:local`. If this was successful, you should see no error messages and the following output: *Docs successfully written to /.../website/src/app/docs.json*. There could be error messages if you have incorrect markdown in your local docs folder. In this case, it will tell you how you can fix it
+6. You're done! Now you can start the website locally using `yarn run dev` and preview the docs under [http://localhost:3000/docs/](http://localhost:3000/docs/)

README.md

@@ -1,24 +1,14 @@
-<a href="https://payloadcms.com">
-  <img width="100%" src="https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/assets/images/github-banner-alt.jpg?raw=true" alt="Payload headless CMS Admin panel built with React" />
-</a>
+<a href="https://payloadcms.com"><img width="100%" src="https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/assets/images/github-banner-alt.jpg?raw=true" alt="Payload headless CMS Admin panel built with React" /></a>
 <br />
 <br />
 <p align="left">
-  <a href="https://github.com/payloadcms/payload/actions">
-    <img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/payloadcms/payload/main.yml?style=flat-square">
-  </a>
+  <a href="https://github.com/payloadcms/payload/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/payloadcms/payload/main.yml?style=flat-square"></a>
   &nbsp;
-  <a href="https://discord.gg/payload">
-    <img alt="Discord" src="https://img.shields.io/discord/967097582721572934?label=Discord&color=7289da&style=flat-square" />
-  </a>
+  <a href="https://discord.gg/payload"><img alt="Discord" src="https://img.shields.io/discord/967097582721572934?label=Discord&color=7289da&style=flat-square" /></a>
   &nbsp;
-  <a href="https://www.npmjs.com/package/payload">
-    <img alt="npm" src="https://img.shields.io/npm/v/payload?style=flat-square" />
-  </a>
+  <a href="https://www.npmjs.com/package/payload"><img alt="npm" src="https://img.shields.io/npm/v/payload?style=flat-square" /></a>
   &nbsp;
-  <a href="https://twitter.com/payloadcms">
-    <img src="https://img.shields.io/badge/follow-payloadcms-1DA1F2?logo=twitter&style=flat-square" alt="Payload Twitter" />
-  </a>
+  <a href="https://twitter.com/payloadcms"><img src="https://img.shields.io/badge/follow-payloadcms-1DA1F2?logo=twitter&style=flat-square" alt="Payload Twitter" /></a>
 </p>
 <hr/>
 <h4>
@@ -27,7 +17,7 @@
 <hr/>
 
 > [!IMPORTANT]
-> 🎉 <strong>Payload 2.0 is now available!<strong> Read more in the <a target="_blank" href="https://payloadcms.com/blog/payload-2-0" rel="dofollow"><strong>announcement post</strong></a>.
+> 🎉 <strong>Payload 2.0 is now available!</strong> Read more in the <a target="_blank" href="https://payloadcms.com/blog/payload-2-0" rel="dofollow"><strong>announcement post</strong></a>.
 
 <h3>Benefits over a regular CMS</h3>
 <ul>
@@ -51,7 +41,7 @@ Create a cloud account, connect your GitHub, and [deploy in minutes](https://pay
 Before beginning to work with Payload, make sure you have all of the [required software](https://payloadcms.com/docs/getting-started/installation).
 
 ```text
-npx create-payload-app
+npx create-payload-app@latest
 ```
 
 Alternatively, it only takes about five minutes to [create an app from scratch](https://payloadcms.com/docs/getting-started/installation#from-scratch).

docs/admin/components.mdx

@@ -96,7 +96,7 @@ To swap out any of these views, simply pass in your custom component to the `adm
 }
 ```
 
-For more granular control, pass a configuration object instead. Payload exposes all of the properties of `<Route />` component in [React Router v5](https://v5.reactrouter.com):
+For more granular control, pass a configuration object instead. Each view corresponds to its own `<Route />` component in [React Router v5](https://v5.reactrouter.com). Payload exposes all of the properties of React Router:
 
 | Property           | Description                                                                                                                  |
 | ------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
@@ -129,13 +129,19 @@ To add a _new_ view to the Admin Panel, simply add another key to the `views` ob
 }
 ```
 
+<Banner type="warning">
+  <strong>Note:</strong>
+  <br />
+  Routes are cascading. This means that unless explicitly given the `exact` property, they will match on URLs that simply _start_ with the route's path. This is helpful when creating catch-all routes in your application. Alternatively, you could define your nested route _before_ your parent route.
+</Banner>
+
 _For more examples regarding how to customize components, look at the following [examples](https://github.com/payloadcms/payload/tree/main/test/admin/components)._
 
 For help on how to build your own custom view components, see [building a custom view component](#building-a-custom-view-component).
 
 ### Collections
 
-You can override components on a collection-by-collection basis via their `admin` property.
+You can override components on a collection-by-collection basis via the `admin.components` property.
 
 | Path                       | Description                                                                                                            |
 | -------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
@@ -259,15 +265,15 @@ You can also add _new_ tabs to the `Edit` view by adding another key to the `com
 
 ### Globals
 
-As with Collections, you can override components on a global-by-global basis via their `admin` property.
+As with Collections, you can override components on a global-by-global basis via the `admin.components` property.
 
-| Path                       | Description                                                                                                            |
-| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| **`edit.SaveButton`**      | Replace the default `Save` button with a custom component. Drafts must be disabled                                     |
-| **`edit.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. |
-| **`edit.PublishButton`**   | Replace the default `Publish` button with a custom component. Drafts must be enabled.                                  |
-| **`edit.PreviewButton`**   | Replace the default `Preview` button with a custom component.                                                          |
-| **`views`**                | Override or create new views within the Payload Admin UI. [More](#global-views)                                        |
+| Path                           | Description                                                                                                            |
+| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| **`elements.SaveButton`**      | Replace the default `Save` button with a custom component. Drafts must be disabled                                     |
+| **`elements.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. |
+| **`elements.PublishButton`**   | Replace the default `Publish` button with a custom component. Drafts must be enabled.                                  |
+| **`elements.PreviewButton`**   | Replace the default `Preview` button with a custom component.                                                          |
+| **`views`**                    | Override or create new views within the Payload Admin UI. [More](#global-views)                                        |
 
 #### Global views
 
@@ -426,6 +432,15 @@ All Payload fields support the ability to swap in your own React components. So,
 | **`Cell`**   | Used in the `List` view's table to represent a table-based preview of the data stored in the field. [More](#cell-component) |
 | **`Field`**  | Swap out the field itself within all `Edit` views. [More](#field-component)                                                 |
 
+As an alternative to replacing the entire Field component, you may want to keep the majority of the default Field component and only swap components within. This allows you to replace the **`Label`** or **`Error`** within a field component or add additional components inside the field with **`beforeInput`** or **`afterInput`**. **`beforeInput`** and **`afterInput`** are allowed in any fields that don't contain other fields, except [UI](/docs/fields/ui) and [Rich Text](/docs/fields/rich-text).
+
+| Component         | Description                                                                                                     |
+| ----------------- | --------------------------------------------------------------------------------------------------------------- |
+| **`Label`**       | Override the default Label in the Field Component. [More](#label-component)                                     |
+| **`Error`**       | Override the default Label in the Field Component. [More](#error-component)                                     |
+| **`beforeInput`** | An array of elements that will be added before `input`/`textarea` elements. [More](#afterinput-and-beforeinput) |
+| **`afterInput`**  | An array of elements that will be added after `input`/`textarea` elements. [More](#afterinput-and-beforeinput)  |
+
 ## Cell Component
 
 These are the props that will be passed to your custom Cell to use in your own components.
@@ -481,6 +496,101 @@ const CustomTextField: React.FC<Props> = ({ path }) => {
   components, including the <strong>useField</strong> hook, [click here](/docs/admin/hooks).
 </Banner>
 
+## Label Component
+
+These are the props that will be passed to your custom Label.
+
+| Property         | Description                                                      |
+| ---------------- | ---------------------------------------------------------------- |
+| **`htmlFor`**    | Property used to set `for` attribute for label.                  |
+| **`label`**      | Label value provided in field, it can be used with i18n.         |
+| **`required`**   | A boolean value that represents if the field is required or not. |
+
+#### Example
+
+```tsx
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { getTranslation } from 'payload/utilities/getTranslation'
+
+type Props = {
+  htmlFor?: string
+  label?: Record<string, string> | false | string
+  required?: boolean
+}
+
+const CustomLabel: React.FC<Props> = (props) => {
+  const { htmlFor, label, required = false } = props
+
+  const { i18n } = useTranslation()
+
+  if (label) {
+    return (<span>
+      {getTranslation(label, i18n)}
+      {required && <span className="required">*</span>}
+    </span>);
+  }
+
+  return null
+}
+```
+
+## Error Component
+
+These are the props that will be passed to your custom Error.
+
+| Property         | Description                                                   |
+| ---------------- | ------------------------------------------------------------- |
+| **`message`**    | The error message.                                            |
+| **`showError`**  | A boolean value that represents if the error should be shown. |
+
+#### Example
+
+```tsx
+import React from 'react'
+
+type Props = {
+  message: string
+  showError?: boolean
+}
+
+const CustomError: React.FC<Props> = (props) => {
+  const { message, showError } = props
+
+  if (showError) {
+    return <p style={{color: 'red'}}>{message}</p>
+  } else return null;
+}
+```
+
+## afterInput and beforeInput
+
+With these properties you can add multiple components before and after the input element. For example, you can add an absolutely positioned button to clear the current field value.
+
+#### Example
+
+```tsx
+import React from 'react'
+import './style.scss'
+
+const ClearButton: React.FC = () => {
+  return <button onClick={() => {/* ... */}}>X</button>
+}
+
+const fieldField: Field = {
+  name: 'title',
+  type: 'text',
+  admin: {
+    components: {
+      afterInput: [ClearButton]
+    }
+  }
+}
+
+export default titleField;
+```
+
 ## Custom providers
 
 As your admin customizations gets more complex you may want to share state between fields or other components. You can add custom providers to do add your own context to any Payload app for use in other custom components within the admin panel. Within your config add `admin.components.providers`, these can be used to share context or provide other custom functionality. Read the [React context](https://reactjs.org/docs/context.html) docs to learn more.

docs/admin/excluding-server-code.mdx

@@ -91,14 +91,34 @@ This way when your bundler goes to import a file that contains server-only modul
 
 To remove files that contain server-only modules from your bundle, you can use an `alias`.
 
-First create new file that exports an empty object:
-```js
-// mocks/emptyObject.js
+In the Subscriptions config file above, we are importing the hook like so:
 
-export default {}
+```ts
+// collections/Subscriptions/index.ts
+
+import createStripeSubscription from './hooks/createStripeSubscription'
 ```
 
-Then, in your Payload config, you can alias the file containing the server-only module to the mock module. For example, here's how you'd do this in Webpack:
+By default the browser bundle will now include all the code from that file and any files down the tree. We know that the file imports `stripe`.
+
+To fix this, we need to alias the `createStripeSubscription` file to a different file that can safely be included in the browser bundle.
+
+First, we will create a mock file to replace the server-only file when bundling:
+```js
+// mocks/modules.js
+
+export default {}
+
+/**
+ * NOTE: if you are destructuring an import
+ * the mock file will need to export matching
+ * variables as the destructured object.
+ *
+ * export const namedExport = {}
+ */
+```
+
+Aliasing with [Webpack](/docs/admin/webpack) can be done by:
 
 ```ts
 // payload.config.ts
@@ -106,10 +126,16 @@ Then, in your Payload config, you can alias the file containing the server-only
 import { buildConfig } from 'payload/config'
 import { webpackBundler } from '@payloadcms/bundler-webpack'
 
+import { Subscriptions } from './collections/Subscriptions'
+
 const mockModulePath = path.resolve(__dirname, 'mocks/emptyObject.js')
-const pathToFileWithServerOnlyModule = path.resolve(__dirname, 'hooks/syncStripeCustomer.ts')
+const fullFilePath = path.resolve(
+  __dirname,
+  'collections/Subscriptions/hooks/createStripeSubscription'
+)
 
 export default buildConfig({
+  collections: [Subscriptions],
   admin: {
     bundler: webpackBundler(),
     webpack: (config) => {
@@ -120,7 +146,42 @@ export default buildConfig({
           // highlight-start
           alias: {
             ...config.resolve.alias,
-            [pathToFileWithServerOnlyModule]: mockModulePath,
+            [fullFilePath]: mockModulePath,
+          },
+          // highlight-end
+        },
+      }
+    },
+  },
+})
+```
+
+Aliasing with [Vite](/docs/admin/vite) can be done by:
+
+```ts
+// payload.config.ts
+
+import { buildConfig } from 'payload/config'
+import { viteBundler } from '@payloadcms/bundler-vite'
+
+import { Subscriptions } from './collections/Subscriptions'
+
+const mockModulePath = path.resolve(__dirname, 'mocks/emptyObject.js')
+
+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
         },

docs/admin/hooks.mdx

@@ -758,3 +758,29 @@ const MyComponent: React.FC = () => {
 ### usePreferences
 
 Returns methods to set and get user preferences. More info can be found [here](https://payloadcms.com/docs/admin/preferences).
+
+### useTableColumns
+
+Returns methods to manipulate table columns
+
+```tsx
+import { useTableColumns } from 'payload/components/hooks'
+
+const MyComponent: React.FC = () => {
+  // highlight-start
+  const { setActiveColumns } = useTableColumns()
+
+  const resetColumns = () => {
+    setActiveColumns(['id', 'createdAt', 'updatedAt'])
+  }
+  // highlight-end
+
+  return (
+    <button
+      type="button"
+      onClick={resetColumns}
+    >
+      Reset columns
+    </button>
+  )
+}

docs/admin/vite.mdx

@@ -5,6 +5,10 @@ order: 90
 desc: NEEDS TO BE WRITTEN
 ---
 
+<Banner type="info">
+  The Vite bundler is currently in beta. If you would like to help us test this package, we'd love to hear from you if you find any [bugs or issues](https://github.com/payloadcms/payload/issues/)!
+</Banner>
+
 Payload has a Vite bundler that you can install and bundle the Admin Panel with. This is an alternative to the [Webpack](/docs/admin/webpack) bundler and might give some performance boosts to your development workflow.
 
 To use Vite as your bundler, first you need to install the package:
@@ -13,9 +17,19 @@ To use Vite as your bundler, first you need to install the package:
 yarn add @payloadcms/bundler-vite
 ```
 
-<Banner>
-  The Vite bundler is currently in beta. If you would like to help us test this package, we'd love to hear if you find any bugs or issues!
-</Banner>
+Then you will need to add the [bundler](/docs/admin/bundlers) to your Payload config:
+
+```ts
+import { buildConfig } from '@payloadcms/config'
+import viteBundler from '@payloadcms/bundler-vite'
+
+export default buildConfig({
+  collections: [],
+  admin: {
+    bundler: viteBundler(),
+  }
+})
+```
 
 Vite works fundamentally differently than Webpack. In development mode, it will first pre-bundle any of your dependencies that are CommonJS-only, and then it'll leverage ESM directly in your browser for a better HMR experience.
 
@@ -29,10 +43,37 @@ This is because Vite aliases work fundamentally differently than Webpack aliases
 
 Here are the main differences between how Vite aliases work and how Webpack aliases work.
 
-**Vite aliases do not work with absolute paths.** 
+**Vite aliases do not work with absolute paths.**
 
-In Vite, an alias will only match if the `find` property _exactly matches_ how you are importing your server-only file. So if you are importing a file with a relative path, i.e. `'../../my-module'`, and your alias is absolute, your alias will not work.
+In Vite, alias keys must <strong>exactly match</strong> a import paths. If you have 2 files that import the same server-only module, but have different import paths, you would need to add 2 aliases to support both import paths.
 
+```ts
+// File A
+import serverOnlyModule from '../server-only-module'
+
+// File B
+import serverOnlyModule from '../../server-only-module'
+
+// payload.config.ts
+// You would need to add 2 aliases to support both import paths
+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 aliases do not get applied to pre-bundled dependencies.**
 
@@ -58,7 +99,7 @@ This will effectively alias the entire plugin and work with Vite. If the plugin
 
 ### Extending the Vite config
 
-The Payload config supports a new property for plugins to be able to extend the Vite config specifically. That property exists on the main Payload config under `admin.vite`. 
+The Payload config supports a new property for plugins to be able to extend the Vite config specifically. That property exists on the main Payload config under `admin.vite`. You can check out the [Vite docs](https://vitejs.dev/config/shared-options.html) for more information on what you can do with the Vite config.
 
 It's a function that takes a Vite config, and returns an updated Vite config. Here's an example:
 
@@ -66,17 +107,24 @@ It's a function that takes a Vite config, and returns an updated Vite config. He
 export const buildConfig({
   collections: [],
   admin: {
+    bundler: viteBundler(),
     vite: (incomingViteConfig) => ({
       ...incomingViteConfig,
       resolve: {
-        ...incomingViteConfig.resolve,
-        // Do whatever you need here 
+        ...(incomingViteConfig?.resolve || {}),
+        alias: {
+          ...(incomingViteConfig?.resolve?.alias || {}),
+          // custom aliases go here
+          '../server-only-module': path.resolve(__dirname, './path/to/browser-safe-module.js'),
+        }
       }
     })
   }
 })
 ```
 
+Learn more about [aliasing server-only modules](http://localhost:3000/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.
 
-If your config specifies Webpack aliases, we attempt to leverage them automatically within the Vite config. They are merged into the Vite alias configuration seamlessly and may work out-of-the-box.
+If your config specifies Webpack aliases, we attempt to leverage them automatically within the Vite config. They are merged into the Vite alias configuration seamlessly and may work out-of-the-box.

docs/configuration/localization.mdx

@@ -57,6 +57,38 @@ export default buildConfig({
 })
 ```
 
+**Example Payload config set up for localization with full locales objects (including [internationalization](/docs/configuration/i18n) support):**
+
+```ts
+import { buildConfig } from 'payload/config'
+
+export default buildConfig({
+  collections: [
+    // collections go here
+  ],
+  localization: {
+    locales: [
+      {
+        label: {
+          en: 'English', // English label
+          nb: 'Engelsk', // Norwegian label
+        },
+        code: 'en',
+      },
+      {
+        label: {
+          en: 'Norwegian', // English label
+          nb: 'Norsk', // Norwegian label
+        },
+        code: 'nb',
+      },
+    ],
+    defaultLocale: 'en',
+    fallback: true,
+  },
+})
+```
+
 **Here is a brief explanation of each of the options available within the `localization` property:**
 
 **`locales`**

docs/configuration/overview.mdx

@@ -108,7 +108,7 @@ export default buildConfig({
 
 #### Full example config
 
-You can see a full [example config](https://github.com/payloadcms/public-demo/blob/master/src/payload.config.ts) in the Public Demo source code on GitHub.
+You can see a full [example config](https://github.com/payloadcms/public-demo/blob/master/src/payload/payload.config.ts) in the Public Demo source code on GitHub.
 
 ### Using environment variables in your config
 

docs/database/mongodb.mdx

@@ -33,6 +33,7 @@ export default buildConfig({
 | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `autoPluralization`   | Tell Mongoose to auto-pluralize any collection names if it encounters any singular words used as collection `slug`s.  |
 | `connectOptions`      | Customize MongoDB connection options. Payload will connect to your MongoDB database using default options which you can override and extend to include all the [options](https://mongoosejs.com/docs/connections.html#options) available to mongoose. |
+| `disableIndexHints`      | Set to true to disable hinting to MongoDB to use 'id' as index. This is currently done when counting documents for pagination, as it increases the speed of the count function used in that query. Disabling this optimization might fix some problems with AWS DocumentDB. Defaults to false |
 | `migrationDir`        | Customize the directory that migrations are stored. |
 
 ### Access to Mongoose models
@@ -43,4 +44,4 @@ You can access Mongoose models as follows:
 
 - Collection models - `payload.db.collections[myCollectionSlug]`
 - Globals model - `payload.db.globals`
-- Versions model (both collections and globals) - `payload.db.versions[myEntitySlug]`
+- Versions model (both collections and globals) - `payload.db.versions[myEntitySlug]`

docs/fields/date.mdx

@@ -55,6 +55,7 @@ In addition to the default [field admin config](/docs/fields/overview#admin-conf
 | **`date.maxDate`** \*          | Max date value to allow.                                                                    |
 | **`date.minTime`** \*          | Min time value to allow.                                                                    |
 | **`date.maxTime`** \*          | Max date value to allow.                                                                    |
+| **`date.overrides`** \*        | Pass any valid props directly to the [react-datepicker](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md)     |
 | **`date.timeIntervals`** \*    | Time intervals to display. Defaults to 30 minutes.                                          |
 | **`date.timeFormat`** \*       | Determines time format. Defaults to `'h:mm aa'`.                                            |
 

docs/fields/overview.mdx

@@ -53,6 +53,7 @@ export const Page: CollectionConfig = {
 - [Rich Text](/docs/fields/rich-text) - fully extensible Rich Text editor
 - [Row](/docs/fields/row) - used for admin field layout, no effect on data shape
 - [Select](/docs/fields/select) - dropdown / picklist style value selector
+- [Tabs](/docs/fields/tabs) - used for admin layout, nest fields within tabs
 - [Text](/docs/fields/text) - simple text input
 - [Textarea](/docs/fields/textarea) - allows a bit larger of a text editor
 - [Upload](/docs/fields/upload) - allows local file and image upload

docs/fields/relationship.mdx

@@ -267,3 +267,27 @@ Relationship fields with `hasMany` set to more than one kind of collections save
 Querying is done in the same way as the earlier Polymorphic example:
 
 `?where[owners.value][equals]=6031ac9e1289176380734024`.
+
+
+#### Querying and Filtering Polymorphic Relationships
+
+Polymorphic and non-polymorphic relationships must be queried differently because of how the related data is stored and may be inconsistent across different collections. Because of this, filtering polymorphic relationship fields from the Collection List admin UI is limited to the `id` value.
+
+For a polymorphic relationship, the response will always be an array of objects. Each object will contain the `relationTo` and `value` properties.
+
+The data can be queried by the related document ID:
+
+`?where[field.value][equals]=6031ac9e1289176380734024`.
+
+Or by the related document Collection slug:
+
+`?where[field.relationTo][equals]=your-collection-slug`.
+
+However, you **cannot** query on any field values within the related document.
+Since we are referencing multiple collections, the field you are querying on may not exist and break the query.
+
+<Banner type="warning">
+  <strong>Note:</strong>
+  <br />
+  You <strong>cannot</strong> query on a field within a polymorphic relationship as you would with a non-polymorphic relationship.
+</Banner>

docs/getting-started/installation.mdx

@@ -23,7 +23,7 @@ Payload requires the following software:
 To quickly scaffold a new Payload app in the fastest way possible, you can use [create-payload-app](https://npmjs.com/package/create-payload-app). To do so, run the following command:
 
 ```
-npx create-payload-app
+npx create-payload-app@latest
 ```
 
 Then just follow the prompts! You'll get set up with a new folder and a functioning Payload app inside.

docs/live-preview/frontend.mdx

@@ -10,13 +10,14 @@ While using Live Preview, the Admin panel emits a new `window.postMessage` event
 
 Wiring your front-end into Live Preview is easy. If your front-end application is built with React or Next.js, use the [`useLivePreview`](#react) React hook that Payload provides. In the future, all other major frameworks like Vue, Svelte, etc will be officially supported. If you are using any of these frameworks today, you can still integrate with Live Preview yourself using the underlying tooling that Payload provides. See [building your own hook](#building-your-own-hook) for more information.
 
-By default, all hooks require the following args:
+By default, all hooks accept the following args:
 
 | Path                  | Description                                                                                                                                                                                 |
 | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`serverURL`** \*    | The URL of your Payload server.                                                                                                                                                             |
 | **`initialData`**     | The initial data of the document. The live data will be merged in as changes are made.                                                                                                      |
 | **`depth`**           | The depth of the relationships to fetch. Defaults to `0`.                                                                                                                                   |
+| **`apiRoute`**        | The path of your API route as defined in `routes.api`. Defaults to `/api`.                                                                                                                              |
 
 _\* An asterisk denotes that a property is required._
 

docs/local-api/overview.mdx

@@ -400,6 +400,70 @@ 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.
+
+As a workaround, we recommend leveraging the following pattern to determine and ensure Payload is initalized:
+
+```
+import dotenv from 'dotenv'
+import path from 'path'
+import type { Payload } from 'payload'
+import payload from 'payload'
+import type { InitOptions } from 'payload/config'
+import { seed as seedData } from './seed'
+
+dotenv.config({
+  path: path.resolve(__dirname, '../.env'),
+})
+
+let cached = (global as any).payload
+
+if (!cached) {
+  cached = (global as any).payload = { client: null, promise: null }
+}
+
+interface Args {
+  initOptions?: Partial<InitOptions>
+  seed?: boolean
+}
+
+export const getPayloadClient = async ({ initOptions, seed }: Args = {}): Promise<Payload> => {
+  if (!process.env.DATABASE_URI) {
+    throw new Error('DATABASE_URI environment variable is missing')
+  }
+  if (!process.env.PAYLOAD_SECRET) {
+    throw new Error('PAYLOAD_SECRET environment variable is missing')
+  }
+  if (cached.client) {
+    return cached.client
+  }
+  if (!cached.promise) {
+    cached.promise = payload.init({
+      mongoURL: process.env.DATABASE_URI,
+      secret: process.env.PAYLOAD_SECRET,
+      local: initOptions?.express ? false : true,
+      ...(initOptions || {}),
+    })
+  }
+  try {
+    process.env.PAYLOAD_DROP_DATABASE = seed ? 'true' : 'false'
+    cached.client = await cached.promise
+    if (seed) {
+      payload.logger.info('---- SEEDING DATABASE ----')
+      await seedData(payload)
+    }
+  } catch (e: unknown) {
+    cached.promise = null
+    throw e
+  }
+  return cached.client
+}
+```
+
+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
 
 The Local API is especially useful for running scripts

docs/plugins/build-your-own.mdx

@@ -84,7 +84,7 @@ If you're starting from scratch, you can easily setup a dev environment lik
 ```
 mkdir dev
 cd dev
-npx create-payload-app
+npx create-payload-app@latest
 ```
 
 If you're using the plugin template, the dev folder is built out for you and the `samplePlugin` has already been installed in `dev/payload.config()`.

docs/production/deployment.mdx

@@ -158,6 +158,17 @@ DigitalOcean provides extremely helpful documentation that can walk you through
 1. [Create a new MongoDB and user](https://medium.com/@mhagemann/how-to-add-a-new-user-to-a-mongodb-database-d896776b5362)
 1. [Set up Node for production](https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-20-04)
 
+### 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.
+
+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).
+
 ## 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.

docs/rich-text/lexical.mdx

@@ -2,7 +2,7 @@
 title: Lexical Rich Text
 label: Lexical
 order: 30
-desc: Built by Meta, Lexical is an incredibly powerful rich text editor and it works beautifully within Payload.
+desc: Built by Meta, Lexical is an incredibly powerful rich text editor, and it works beautifully within Payload.
 keywords: lexical, rich text, editor, headless cms
 ---
 
@@ -45,7 +45,39 @@ export default buildConfig({
 You can also override Lexical settings on a field-by-field basis as follows:
 
 ```ts
-import { CollectionConfig } from 'payload/types'
+import type { CollectionConfig } from 'payload/types'
+import {
+  lexicalEditor
+} from '@payloadcms/richtext-lexical'
+
+export const Pages: CollectionConfig = {
+  slug: 'pages',
+  fields: [
+    {
+      name: 'content',
+      type: 'richText',
+      // Pass the Lexical editor here and override base settings as necessary
+      editor: lexicalEditor({})
+    }
+  ]
+}
+```
+
+## Extending the lexical editor with Features
+
+Lexical has been designed with extensibility in mind. Whether you're aiming to introduce new functionalities or tweak the existing ones, Lexical makes it seamless for you to bring those changes to life.
+
+### Features: The Building Blocks
+
+At the heart of Lexical's customization potential are "features". While Lexical ships with a set of default features we believe are essential for most use cases, the true power lies in your ability to redefine, expand, or prune these as needed.
+
+If you remove all the default features, you're left with a blank editor. You can then add in only the features you need, or you can build your own custom features from scratch.
+
+### Integrating New Features
+
+To weave in your custom features, utilize the `features` prop when initializing the Lexical Editor. Here's a basic example of how this is done:
+
+```ts
 import {
   BlocksFeature,
   LinkFeature,
@@ -55,62 +87,557 @@ import {
 import { Banner } from '../blocks/Banner'
 import { CallToAction } from '../blocks/CallToAction'
 
-export const Pages: CollectionConfig = {
+{
+  editor: lexicalEditor({
+    features: ({ defaultFeatures }) => [
+      ...defaultFeatures,
+      LinkFeature({
+        // Example showing how to customize the built-in fields
+        // of the Link feature
+        fields: [
+          {
+            name: 'rel',
+            label: 'Rel Attribute',
+            type: 'select',
+            hasMany: true,
+            options: ['noopener', 'noreferrer', 'nofollow'],
+            admin: {
+              description:
+                'The rel attribute defines the relationship between a linked resource and the current document. This is a custom link field.',
+            },
+          },
+        ],
+      }),
+      UploadFeature({
+        collections: {
+          uploads: {
+            // Example showing how to customize the built-in fields
+            // of the Upload feature
+            fields: [
+              {
+                name: 'caption',
+                type: 'richText',
+                editor: lexicalEditor(),
+              },
+            ],
+          },
+        },
+      }),
+      // This is incredibly powerful. You can re-use your Payload blocks
+      // directly in the Lexical editor as follows:
+      BlocksFeature({
+        blocks: [
+          Banner,
+          CallToAction,
+        ],
+      }),
+    ]
+  })
+}
+```
+
+## Features overview
+
+Here's an overview of all the included features:
+
+| Feature Name                   | Included by default | Description                                                                                                                                                                            |
+|--------------------------------|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **`BoldTextFeature`**          | Yes                 | Handles the bold text format                                                                                                                                                           |
+| **`ItalicTextFeature`**        | Yes                 | Handles the italic text format                                                                                                                                                         |
+| **`UnderlineTextFeature`**     | Yes                 | Handles the underline text format                                                                                                                                                      |
+| **`StrikethroughTextFeature`** | Yes                 | Handles the strikethrough text format                                                                                                                                                  |
+| **`SubscriptTextFeature`**     | Yes                 | Handles the subscript text format                                                                                                                                                      |
+| **`SuperscriptTextFeature`**   | Yes                 | Handles the superscript text format                                                                                                                                                    |
+| **`InlineCodeTextFeature`**    | Yes                 | Handles the inline-code text format                                                                                                                                                    |
+| **`ParagraphFeature`**         | Yes                 | Handles paragraphs. Since they are already a key feature of lexical itself, this Feature mainly handles the Slash and Add-Block menu entries for paragraphs                            |
+| **`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)                                                                                                                                                                |
+| **`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                                                                                                         |
+| **`BlockQuoteFeature`**        | Yes                 | Allows you to create block-level quotes                                                                                                                                                |
+| **`UploadFeature`**            | Yes                 | Allows you to create block-level upload nodes - this supports all kinds of uploads, not just images                                                                                    |
+| **`BlocksFeature`**            | No                  | Allows you to use Payload's [Blocks Field](/docs/fields/blocks) directly inside your editor. In the feature props, you can specify the allowed blocks - just like in the Blocks field. |
+| **`TreeViewFeature`**          | No                  | Adds a debug box under the editor, which allows you to see the current editor state live, the dom, as well as time travel. Very useful for debugging                                   |
+
+## Creating your own, custom Feature
+
+Creating your own custom feature requires deep knowledge of the Lexical editor. We recommend you take a look at the [Lexical documentation](https://lexical.dev/docs/intro) first - especially the "concepts" section.
+
+Next, take a look at the [features we've already built](https://github.com/payloadcms/payload/tree/main/packages/richtext-lexical/src/field/features) - understanding how they work will help you understand how to create your own. There is no difference between the features included by default and the ones you create yourself - since those features are all isolated from the "core", you have access to the same APIs, whether the feature is part of payload or not!
+
+## Converters
+
+### Lexical => HTML
+
+Lexical saves data in JSON, but can also generate its HTML representation via two main methods:
+
+1. **Outputting HTML from the Collection:** Create a new field in your collection to convert saved JSON content to HTML. Payload generates and outputs the HTML for use in your frontend.
+2. **Generating HTML on the Frontend:** Convert JSON to HTML on-demand, either in your frontend or elsewhere.
+
+The editor comes with built-in HTML serializers, simplifying the process of converting JSON to HTML.
+
+#### Outputting HTML from the Collection
+
+To add HTML generation directly within the collection, follow the example below:
+
+```ts
+import type { CollectionConfig } from 'payload/types'
+
+import {
+  HTMLConverterFeature,
+  lexicalEditor,
+  lexicalHTML
+} from '@payloadcms/richtext-lexical'
+
+const Pages: CollectionConfig = {
   slug: 'pages',
   fields: [
     {
-      name: 'content',
+      name: 'nameOfYourRichTextField',
       type: 'richText',
-      // Pass the Lexical editor here and override base settings as necessary
       editor: lexicalEditor({
         features: ({ defaultFeatures }) => [
           ...defaultFeatures,
-          LinkFeature({
-            // Example showing how to customize the built-in fields
-            // of the Link feature
-            fields: [
-              {
-                name: 'rel',
-                label: 'Rel Attribute',
-                type: 'select',
-                hasMany: true,
-                options: ['noopener', 'noreferrer', 'nofollow'],
-                admin: {
-                  description:
-                    'The rel attribute defines the relationship between a linked resource and the current document. This is a custom link field.',
-                },
-              },
-            ],
-          }),
-          UploadFeature({
-            collections: {
-              uploads: {
-                // Example showing how to customize the built-in fields
-                // of the Upload feature
-                fields: [
-                  {
-                    name: 'caption',
-                    type: 'richText',
-                    editor: lexicalEditor(),
-                  },
-                ],
-              },
-            },
-          }),
-          // This is incredibly powerful. You can re-use your Payload blocks
-          // directly in the Lexical editor as follows:
-          BlocksFeature({
-            blocks: [
-              Banner,
-              CallToAction,
-            ],
-          }),
-        ]
-      })
-    }
-  ]
+          // The HTMLConverter Feature is the feature which manages the HTML serializers. If you do not pass any arguments to it, it will use the default serializers.
+          HTMLConverterFeature({}),
+        ],
+      }),
+    },
+    lexicalHTML('nameOfYourRichTextField', { name: 'nameOfYourRichTextField_html' }),
+  ],
 }
 ```
+The `lexicalHTML()` function creates a new field that automatically converts the referenced lexical richText field into HTML through an afterRead hook.
+
+#### Generating HTML in the Frontend:
+
+If you wish to convert JSON to HTML ad-hoc, use this code snippet:
+
+```ts
+import type { SerializedEditorState } from 'lexical'
+import {
+  type SanitizedEditorConfig,
+  convertLexicalToHTML,
+  consolidateHTMLConverters,
+} from '@payloadcms/richtext-lexical'
+
+async function lexicalToHTML(editorData: SerializedEditorState, editorConfig: SanitizedEditorConfig) {
+  return await convertLexicalToHTML({
+    converters: consolidateHTMLConverters({ editorConfig }),
+    data: editorData,
+  })
+}
+```
+This method employs `convertLexicalToHTML` from `@payloadcms/richtext-lexical`, which converts the serialized editor state into HTML.
+
+Because every `Feature` is able to provide html converters, and because the `htmlFeature` can modify those or provide their own, we need to consolidate them with the default html Converters using the `consolidateHTMLConverters` function.
+
+#### Creating your own HTML Converter
+
+HTML Converters are typed as `HTMLConverter`, which contains the node type it should handle, and a function that accepts the serialized node from the lexical editor, and outputs the HTML string. Here's the HTML Converter of the Upload node as an example:
+
+```ts
+import type { HTMLConverter } from '@payloadcms/richtext-lexical'
+import payload from 'payload'
+
+const UploadHTMLConverter: HTMLConverter<SerializedUploadNode> = {
+  converter: async ({ node }) => {
+    const uploadDocument = await payload.findByID({
+      id: node.value.id,
+      collection: node.relationTo,
+    })
+    const url = (payload?.config?.serverURL || '') + uploadDocument?.url
+
+    if (!(uploadDocument?.mimeType as string)?.startsWith('image')) {
+      // Only images can be serialized as HTML
+      return ``
+    }
+
+    return `<img src="${url}" alt="${uploadDocument?.filename}" width="${uploadDocument?.width}"  height="${uploadDocument?.height}"/>`
+  },
+  nodeTypes: [UploadNode.getType()], // This is the type of the lexical node that this converter can handle. Instead of hardcoding 'upload' we can get the node type directly from the UploadNode, since it's static.
+}
+```
+
+As you can see, we have access to all the information saved in the node (for the Upload node, this is `value`and `relationTo`) and we can use that to generate the HTML.
+
+The `convertLexicalToHTML` is part of `@payloadcms/richtext-lexical` automatically handles traversing the editor state and calling the correct converter for each node.
+
+#### Embedding the HTML Converter in your Feature
+
+You can embed your HTML Converter directly within your custom `Feature`, allowing it to be handled automatically by the `consolidateHTMLConverters` function. Here is an example:
+
+```ts
+export const UploadFeature = (props?: UploadFeatureProps): FeatureProvider => {
+  return {
+    feature: () => {
+      return {
+        nodes: [
+          {
+            converters: {
+              html: yourHTMLConverter, // <= This is where you define your HTML Converter
+            },
+            node: UploadNode,
+            type: UploadNode.getType(),
+            //...
+          },
+        ],
+        plugins: [/*...*/],
+        props: props,
+        slashMenu: {/*...*/},
+      }
+    },
+    key: 'upload',
+  }
+}
+```
+
+### Headless Editor
+
+Lexical provides a seamless way to perform conversions between various other formats:
+- HTML to Lexical (or, importing HTML into the lexical editor)
+- Markdown to Lexical (or, importing Markdown into the lexical editor)
+- Lexical to Markdown
+
+A headless editor can perform such conversions outside of the main editor instance. Follow this method to initiate a headless editor:
+
+```ts
+import { createHeadlessEditor } from '@lexical/headless' // <= make sure this package is installed
+import {
+  getEnabledNodes,
+  sanitizeEditorConfig,
+} from '@payloadcms/richtext-lexical'
+
+const yourEditorConfig; // <= your editor config here
+
+const headlessEditor = createHeadlessEditor({
+  nodes: getEnabledNodes({
+    editorConfig: sanitizeEditorConfig(yourEditorConfig),
+  }),
+})
+```
+
+### Getting the editor config
+
+As you can see, you need to provide an editor config in order to create a headless editor. This is because the editor config is used to determine which nodes & features are enabled, and which converters are used.
+
+To get the editor config, simply import the default editor config and adjust it - just like you did inside of the `editor: lexicalEditor({})` property:
+
+```ts
+import { defaultEditorConfig, defaultEditorFeatures } from '@payloadcms/richtext-lexical' // <= make sure this package is installed
+
+const yourEditorConfig = defaultEditorConfig
+
+// If you made changes to the features of the field's editor config, you should also make those changes here:
+yourEditorConfig.features = [
+  ...defaultEditorFeatures,
+  // Add your custom features here
+]
+```
+
+### HTML => Lexical
+
+Once you have your headless editor instance, you can use it to convert HTML to Lexical:
+
+```ts
+import { $generateNodesFromDOM } from '@lexical/html'
+import { $getRoot,$getSelection } from 'lexical'
+import JSDOM from 'jsdom'
+
+headlessEditor.update(() => {
+  // In a headless environment you can use a package such as JSDom to parse the HTML string.
+  const dom = new JSDOM(htmlString)
+
+  // Once you have the DOM instance it's easy to generate LexicalNodes.
+  const nodes = $generateNodesFromDOM(headlessEditor, dom.window.document)
+
+  // Select the root
+  $getRoot().select()
+
+  // Insert them at a selection.
+  const selection = $getSelection()
+  selection.insertNodes(nodes)
+}, { discrete: true })
+
+// Do this if you then want to get the editor JSON
+const editorJSON = headlessEditor.getEditorState().toJSON()
+```
+
+Functions prefixed with a `$` can only be run inside of an `editor.update()` or `editorState.read()` callback.
+
+This has been taken from the [lexical serialization & deserialization docs](https://lexical.dev/docs/concepts/serialization#html---lexical).
+
+<Banner type="success">
+  <strong>Note:</strong>
+  <br />
+  Using the <code>discrete: true</code> flag ensures instant updates to the editor state. If immediate reading of the updated state isn't necessary, you can omit the flag.
+</Banner>
+
+### Markdown => Lexical
+
+Convert markdown content to the Lexical editor format with the following:
+
+```ts
+import { $convertFromMarkdownString } from '@lexical/markdown'
+import { sanitizeEditorConfig } from '@payloadcms/richtext-lexical'
+
+const yourSanitizedEditorConfig = sanitizeEditorConfig(yourEditorConfig) // <= your editor config here
+const markdown = `# Hello World`
+
+headlessEditor.update(() => { $convertFromMarkdownString(markdown, yourSanitizedEditorConfig.features.markdownTransformers) }, { discrete: true })
+
+// Do this if you then want to get the editor JSON
+const editorJSON = headlessEditor.getEditorState().toJSON()
+```
+
+### Lexical => Markdown
+
+Export content from the Lexical editor into Markdown format using these steps:
+
+1. Import your current editor state into the headless editor.
+2. Convert and fetch the resulting markdown string.
+
+Here's the code for it:
+
+```ts
+import { $convertToMarkdownString } from '@lexical/markdown'
+import { sanitizeEditorConfig } from '@payloadcms/richtext-lexical'
+import type { SerializedEditorState } from "lexical"
+
+const yourSanitizedEditorConfig = sanitizeEditorConfig(yourEditorConfig) // <= your editor config here
+const yourEditorState: SerializedEditorState // <= your current editor state here
+
+// Import editor state into your headless editor
+try {
+  headlessEditor.setEditorState(headlessEditor.parseEditorState(yourEditorState)) // This should commit the editor state immediately
+} catch (e) {
+  logger.error({ err: e }, 'ERROR parsing editor state')
+}
+
+// Export to markdown
+let markdown: string
+headlessEditor.getEditorState().read(() => {
+  markdown = $convertToMarkdownString(yourSanitizedEditorConfig?.features?.markdownTransformers)
+})
+```
+
+The `.setEditorState()` function immediately updates your editor state. Thus, there's no need for the `discrete: true` flag when reading the state afterward.
+
+
+### Lexical => Plain Text
+
+Export content from the Lexical editor into plain text using these steps:
+
+1. Import your current editor state into the headless editor.
+2. Convert and fetch the resulting plain text string.
+
+Here's the code for it:
+
+```ts
+import type { SerializedEditorState } from "lexical"
+import { $getRoot } from "lexical"
+
+const yourEditorState: SerializedEditorState // <= your current editor state here
+
+// Import editor state into your headless editor
+try {
+  headlessEditor.setEditorState(headlessEditor.parseEditorState(yourEditorState)) // This should commit the editor state immediately
+} catch (e) {
+  logger.error({ err: e }, 'ERROR parsing editor state')
+}
+
+// Export to plain text
+const plainTextContent = headlessEditor.getEditorState().read(() => {
+  return $getRoot().getTextContent()
+}) || ''
+```
+
+## Migrating from Slate
+
+While both Slate and Lexical save the editor state in JSON, the structure of the JSON is different.
+
+### Migration via SlateToLexicalFeature
+
+One way to handle this is to just give your lexical editor the ability to read the slate JSON.
+
+Simply add the `SlateToLexicalFeature` to your editor:
+
+```ts
+import type { CollectionConfig } from 'payload/types'
+
+import {
+  SlateToLexicalFeature,
+  lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+const Pages: CollectionConfig = {
+  slug: 'pages',
+  fields: [
+    {
+      name: 'nameOfYourRichTextField',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: ({ defaultFeatures }) => [
+          ...defaultFeatures,
+          SlateToLexicalFeature({})
+        ],
+      }),
+    },
+  ],
+}
+```
+
+and done! Now, everytime this lexical editor is initialized, it converts the slate date to lexical on-the-fly. If the data is already in lexical format, it will just pass it through.
+
+This is by far the easiest way to migrate from Slate to Lexical, although it does come with a few caveats:
+- There is a performance hit when initializing the lexical editor
+- The editor will still output the Slate data in the output JSON, as the on-the-fly converter only runs for the admin panel
+
+The easy way to solve this: Just save the document! This overrides the slate data with the lexical data, and the next time the document is loaded, the lexical data will be used. This solves both the performance and the output issue for that specific document.
+
+### Migration via migration script
+
+The method described above does not solve the issue for all documents, though. If you want to convert all your documents to lexical, you can use a migration script. Here's a simple example:
+
+```ts
+import type { Payload } from 'payload'
+import type { YourDocumentType } from 'payload/generated-types'
+
+import {
+  cloneDeep,
+  convertSlateToLexical,
+  defaultSlateConverters,
+} from '@payloadcms/richtext-lexical'
+
+import { AnotherCustomConverter } from './lexicalFeatures/converters/AnotherCustomConverter'
+
+export async function convertAll(payload: Payload, collectionName: string, fieldName: string) {
+  const docs: YourDocumentType[] = await payload.db.collections[collectionName].find({}).exec() // Use MongoDB models directly to query all documents at once
+  console.log(`Found ${docs.length} ${collectionName} docs`)
+
+  const converters = cloneDeep([...defaultSlateConverters, AnotherCustomConverter])
+
+  // Split docs into batches of 20.
+  const batchSize = 20
+  const batches = []
+  for (let i = 0; i < docs.length; i += batchSize) {
+    batches.push(docs.slice(i, i + batchSize))
+  }
+
+  let processed = 0 // Number of processed docs
+
+  for (const batch of batches) {
+    // Process each batch asynchronously
+    const promises = batch.map(async (doc: YourDocumentType) => {
+      const richText = doc[fieldName]
+
+      if (richText && Array.isArray(richText) && !('root' in richText)) { // It's Slate data - skip already-converted data
+        const converted = convertSlateToLexical({
+          converters: converters,
+          slateData: richText,
+        })
+
+        await payload.update({
+          id: doc.id,
+          collection: collectionName as any,
+          data: {
+            [fieldName]: converted,
+          },
+        })
+      }
+    })
+
+    // Wait for all promises in the batch to complete. Resolving batches of 20 asynchronously is faster than waiting for each doc to update individually
+    await Promise.all(promises)
+
+    // Update the count of processed docs
+    processed += batch.length
+    console.log(`Converted ${processed} of ${docs.length}`)
+  }
+}
+```
+
+The `convertSlateToLexical` is the same method used in the `SlateToLexicalFeature` - it handles traversing the Slate JSON for you.
+
+Do note that this script might require adjustment depending on your document structure, especially if you have nested richText fields or localization enabled.
+
+### Converting custom Slate nodes
+
+If you have custom Slate nodes, create a custom converter for them. Here's the Upload converter as an example:
+
+```ts
+import type { SerializedUploadNode } from '../uploadNode.'
+import type { SlateNodeConverter } from '@payloadcms/richtext-lexical'
+
+export const SlateUploadConverter: SlateNodeConverter = {
+  converter({ slateNode }) {
+    return {
+      fields: {
+        ...slateNode.fields,
+      },
+      format: '',
+      relationTo: slateNode.relationTo,
+      type: 'upload',
+      value: {
+        id: slateNode.value?.id || '',
+      },
+      version: 1,
+    } as const as SerializedUploadNode
+  },
+  nodeTypes: ['upload'],
+}
+```
+
+It's pretty simple: You get a Slate node as input, and you return the lexical node. The `nodeTypes` array is used to determine which Slate nodes this converter can handle.
+
+When using a migration script, you can add your custom converters to the `converters` property of the `convertSlateToLexical` props, as seen in the example above
+
+When using the `SlateToLexicalFeature`, you can add your custom converters to the `converters` property of the `SlateToLexicalFeature` props:
+
+```ts
+import type { CollectionConfig } from 'payload/types'
+
+import {
+  SlateToLexicalFeature,
+  lexicalEditor,
+  defaultSlateConverters
+} from '@payloadcms/richtext-lexical'
+
+import { YourCustomConverter } from '../converters/YourCustomConverter'
+
+const Pages: CollectionConfig = {
+  slug: 'pages',
+  fields: [
+    {
+      name: 'nameOfYourRichTextField',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: ({ defaultFeatures }) => [
+          ...defaultFeatures,
+          SlateToLexicalFeature({
+            converters: [
+              ...defaultSlateConverters,
+              YourCustomConverter
+            ]
+          }),
+        ],
+      }),
+    },
+  ],
+}
+```
+
+## Migrating from payload-plugin-lexical
+
+Migrating from [payload-plugin-lexical](https://github.com/AlessioGr/payload-plugin-lexical) works similar to migrating from Slate.
+
+Instead of a `SlateToLexicalFeature` there is a `LexicalPluginToLexicalFeature` you can use. And instead of `convertSlateToLexical` you can use `convertLexicalPluginToLexical`.
+
+## Coming Soon
 
 Lots more documentation will be coming soon, which will show in detail how to create your own custom features within Lexical.
 

docs/typescript/overview.mdx

@@ -9,7 +9,7 @@ keywords: headless cms, typescript, documentation, Content Management System, cm
 Payload supports TypeScript natively, and not only that, the entirety of the CMS is built with TypeScript. To get started developing with Payload and TypeScript, you can use one of Payload's built-in boilerplates in one line via `create-payload-app`:
 
 ```
-npx create-payload-app
+npx create-payload-app@latest
 ```
 
 Pick a TypeScript project type to get started easily.

docs/upload/overview.mdx

@@ -38,7 +38,7 @@ Every Payload Collection can opt-in to supporting Uploads by specifying the `upl
   </strong> on that collection.
 </Banner>
 
-#### Collection Upload Options
+### Collection Upload Options
 
 | Option                      | Description                                                                                                                                                                             |
 | -------------------------   | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -47,14 +47,14 @@ Every Payload Collection can opt-in to supporting Uploads by specifying the `upl
 | **`adminThumbnail`**        | Set the way that the Admin panel will display thumbnails for this Collection. [More](#admin-thumbnails)                                                                                 |
 | **`crop`**                  | Set to `false` to disable the cropping tool in the Admin panel. Crop is enabled by default. [More](#crop-and-focal-point-selector)                                                      |
 | **`disableLocalStorage`**   | Completely disable uploading files to disk locally. [More](#disabling-local-upload-storage)                                                                                             |
-| **`focalPoint`**            | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector)                                |
+| **`focalPoint`**            | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector) |
 | **`formatOptions`**         | An object with `format` and `options` that are used with the Sharp image library to format the upload file. [More](https://sharp.pixelplumbing.com/api-output#toformat)                 |
 | **`handlers`**              | Array of Express request handlers to execute before the built-in Payload static middleware executes.                                                                                    |
 | **`imageSizes`**            | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes)                                                                      |
 | **`mimeTypes`**             | Restrict mimeTypes in the file picker. Array of valid mimetypes or mimetype wildcards [More](#mimetypes)                                                                                |
-| **`staticOptions`**         | Set options for `express.static` to use while serving your static files. [More](http://expressjs.com/en/resources/middleware/serve-static.html)  format)                                |
-| **`resizeOptions`**         | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize)                                                                                                                |
-| **`filesRequiredOnCreate`** | Mandate file data on creation, default is true.                                                                                                               |
+| **`staticOptions`**         | Set options for `express.static` to use while serving your static files. [More](http://expressjs.com/en/resources/middleware/serve-static.html)                                         |
+| **`resizeOptions`**         | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize)                                                         |
+| **`filesRequiredOnCreate`** | Mandate file data on creation, default is true.                                                                                                                                         |
 
 _An asterisk denotes that a property above is required._
 
@@ -148,6 +148,23 @@ All auto-resized images are exposed to be re-used in hooks and similar via an ob
 
 The object will have keys for each size generated, and each key will be set equal to a buffer containing the file data.
 
+##### Handling Image Enlargement
+
+When an uploaded image is smaller than the defined image size, we have 3 options:
+
+`withoutEnlargement: undefined | false | true`
+
+1.`undefined` [default]: uploading images with smaller width AND height than the image size will return null
+2. `false`: always enlarge images to the image size
+3. `true`: if the image is smaller than the image size, return the original image
+
+<Banner type="error">
+  <strong>Note:</strong>
+  <br />
+  By default, the image size will return NULL when the uploaded image is smaller than the defined image size.
+  Use the `withoutEnlargement` prop to change this.
+</Banner>
+
 ### Crop and Focal Point Selector
 
 This feature is only available for image file types.

docs/versions/autosave.mdx

@@ -21,7 +21,7 @@ Collections and Globals both support the same options for configuring autosave.
 
 | Drafts Autosave Options | Description                                                                                                                                                            |
 | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `interval`              | Define an `interval` in milliseconds to automatically save progress while documents are edited. Document updates are "debounced" at this interval. Defaults to `2000`. |
+| `interval`              | Define an `interval` in milliseconds to automatically save progress while documents are edited. Document updates are "debounced" at this interval. Defaults to `800`. |
 
 **Example config with versions, drafts, and autosave enabled:**
 
@@ -66,7 +66,7 @@ When `autosave` is enabled, all `update` operations within Payload expose a new
 
 #### How autosaves are stored
 
-If we created a new version for each autosave, you'd quickly find a ton of autosaves that clutter up your `_versions` collection within the database. That would be messy quick because `autosave` is typically set to save a document every ~2000ms or so.
+If we created a new version for each autosave, you'd quickly find a ton of autosaves that clutter up your `_versions` collection within the database. That would be messy quick because `autosave` is typically set to save a document at ~800ms intervals.
 
 <Banner type="success">
   Instead of creating a new version each time a document is autosaved, Payload smartly only creates{' '}

examples/form-builder/next-pages/components/Blocks/Form/Country/index.tsx

@@ -21,7 +21,7 @@ export const Country: React.FC<
   return (
     <Width width={width}>
       <div className={classes.select}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <Controller
@@ -37,6 +37,7 @@ export const Country: React.FC<
               onChange={val => onChange(val.value)}
               className={classes.reactSelect}
               classNamePrefix="rs"
+              inputId={name}
             />
           )}
         />

examples/form-builder/next-pages/components/Blocks/Form/Email/index.tsx

@@ -19,13 +19,14 @@ export const Email: React.FC<
   return (
     <Width width={width}>
       <div className={classes.wrap}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <input
           type="text"
           placeholder="Email"
           className={classes.input}
+          id={name}
           {...register(name, { required: requiredFromProps, pattern: /^\S+@\S+$/i })}
         />
         {requiredFromProps && errors[name] && <Error />}

examples/form-builder/next-pages/components/Blocks/Form/Number/index.tsx

@@ -19,12 +19,13 @@ export const Number: React.FC<
   return (
     <Width width={width}>
       <div className={classes.wrap}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <input
           type="number"
           className={classes.input}
+          id={name}
           {...register(name, { required: requiredFromProps })}
         />
         {requiredFromProps && errors[name] && <Error />}

examples/form-builder/next-pages/components/Blocks/Form/Select/index.tsx

@@ -20,7 +20,7 @@ export const Select: React.FC<
   return (
     <Width width={width}>
       <div className={classes.select}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <Controller
@@ -36,6 +36,7 @@ export const Select: React.FC<
               onChange={val => onChange(val.value)}
               className={classes.reactSelect}
               classNamePrefix="rs"
+              inputId={name}
             />
           )}
         />

examples/form-builder/next-pages/components/Blocks/Form/State/index.tsx

@@ -21,7 +21,7 @@ export const State: React.FC<
   return (
     <Width width={width}>
       <div className={classes.select}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <Controller
@@ -37,6 +37,7 @@ export const State: React.FC<
               onChange={val => onChange(val.value)}
               className={classes.reactSelect}
               classNamePrefix="rs"
+              id={name}
             />
           )}
         />

examples/form-builder/next-pages/components/Blocks/Form/Text/index.tsx

@@ -19,12 +19,13 @@ export const Text: React.FC<
   return (
     <Width width={width}>
       <div className={classes.wrap}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <input
           type="text"
           className={classes.input}
+          id={name}
           {...register(name, { required: requiredFromProps })}
         />
         {requiredFromProps && errors[name] && <Error />}

examples/form-builder/next-pages/components/Blocks/Form/Textarea/index.tsx

@@ -20,12 +20,13 @@ export const Textarea: React.FC<
   return (
     <Width width={width}>
       <div className={classes.wrap}>
-        <label htmlFor="name" className={classes.label}>
+        <label htmlFor={name} className={classes.label}>
           {label}
         </label>
         <textarea
           rows={rows}
           className={classes.textarea}
+          id={name}
           {...register(name, { required: requiredFromProps })}
         />
         {requiredFromProps && errors[name] && <Error />}

package.json

@@ -24,7 +24,7 @@
     "script:release": "tsx ./scripts/release.ts",
     "test": "pnpm test:int && pnpm test:components && pnpm test:e2e",
     "test:components": "cross-env jest --config=jest.components.config.js",
-    "test:e2e": "npx playwright install --with-deps && ts-node -T ./test/runE2E.ts",
+    "test:e2e": "npx playwright install --with-deps chromium && ts-node -T ./test/runE2E.ts",
     "test:e2e:debug": "cross-env PWDEBUG=1 DISABLE_LOGGING=true playwright test",
     "test:e2e:headed": "cross-env DISABLE_LOGGING=true playwright test --headed",
     "test:int:postgres": "cross-env PAYLOAD_DATABASE=postgres DISABLE_LOGGING=true jest --forceExit --detectOpenHandles",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",
-    "@playwright/test": "1.38.1",
+    "@playwright/test": "1.39.0",
     "@swc/cli": "^0.1.62",
     "@swc/jest": "0.2.29",
     "@swc/register": "0.1.10",
@@ -45,7 +45,7 @@
     "@types/conventional-changelog-core": "^4.2.5",
     "@types/conventional-changelog-preset-loader": "^2.3.4",
     "@types/fs-extra": "^11.0.2",
-    "@types/jest": "29.5.4",
+    "@types/jest": "29.5.7",
     "@types/minimist": "1.2.2",
     "@types/node": "20.5.7",
     "@types/prompts": "^2.4.5",
@@ -64,6 +64,7 @@
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "dotenv": "8.6.0",
+    "drizzle-orm": "0.28.5",
     "express": "4.18.2",
     "form-data": "3.0.1",
     "fs-extra": "10.1.0",
@@ -73,9 +74,10 @@
     "graphql-request": "6.1.0",
     "husky": "^8.0.3",
     "isomorphic-fetch": "3.0.0",
-    "jest": "29.6.4",
-    "jest-environment-jsdom": "29.6.4",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "jwt-decode": "3.1.2",
+    "lexical": "0.12.2",
     "lint-staged": "^14.0.1",
     "minimist": "1.2.8",
     "mongodb-memory-server": "8.12.2",
@@ -111,5 +113,8 @@
     "*.{js,jsx,ts,tsx}": [
       "prettier --write"
     ]
+  },
+  "dependencies": {
+    "@sentry/react": "^7.77.0"
   }
 }

packages/bundler-vite/package.json

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

packages/bundler-vite/src/config.ts

@@ -63,13 +63,14 @@ export const getViteConfig = async (payloadConfig: SanitizedConfig): Promise<Inl
     'module.hot': 'undefined',
     'process.argv': '[]',
     'process.cwd': 'function () { return "/" }',
-    'process.env': '{}',
     'process?.cwd': 'function () { return "/" }',
   }
 
   Object.entries(process.env).forEach(([key, val]) => {
     if (key.indexOf('PAYLOAD_PUBLIC_') === 0) {
       define[`process.env.${key}`] = `'${val}'`
+    } else {
+      define[`process.env.${key}`] = `''`
     }
   })
 
@@ -91,6 +92,7 @@ export const getViteConfig = async (payloadConfig: SanitizedConfig): Promise<Inl
         // Dependencies that need aliases should be excluded
         // from pre-bundling
         '@payloadcms/bundler-vite',
+        ...(Object.keys(absoluteAliases) || []),
       ],
       include: ['payload/components/root', 'react-dom/client'],
     },

packages/bundler-webpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/bundler-webpack",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "The officially supported Webpack bundler adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/db-mongodb/package.json

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

packages/db-mongodb/src/createMigration.ts

@@ -30,8 +30,11 @@ export const createMigration: CreateMigration = async function createMigration({
 
   let migrationFileContent: string | undefined
 
-  // Check for predefined migration
-  if (file) {
+  // Check for predefined migration.
+  // Either passed in via --file or prefixed with @payloadcms/db-mongodb/
+  if (file || migrationName.startsWith('@payloadcms/db-mongodb/')) {
+    if (!file) file = migrationName
+
     const predefinedMigrationName = file.replace('@payloadcms/db-mongodb/', '')
     migrationName = predefinedMigrationName
     const cleanPath = path.join(__dirname, `../predefinedMigrations/${predefinedMigrationName}.js`)

packages/db-mongodb/src/find.ts

@@ -55,7 +55,7 @@ export const find: Find = async function find(
     useEstimatedCount,
   }
 
-  if (!useEstimatedCount) {
+  if (!useEstimatedCount && this.disableIndexHints !== true) {
     // Improve the performance of the countDocuments query which is used if useEstimatedCount is set to false by adding a hint.
     paginationOptions.useCustomCountFn = () => {
       return Promise.resolve(

packages/db-mongodb/src/findGlobalVersions.ts

@@ -74,7 +74,7 @@ export const findGlobalVersions: FindGlobalVersions = async function findGlobalV
     useEstimatedCount,
   }
 
-  if (!useEstimatedCount) {
+  if (!useEstimatedCount && this.disableIndexHints !== true) {
     // Improve the performance of the countDocuments query which is used if useEstimatedCount is set to false by adding a hint.
     paginationOptions.useCustomCountFn = () => {
       return Promise.resolve(

packages/db-mongodb/src/findVersions.ts

@@ -71,7 +71,7 @@ export const findVersions: FindVersions = async function findVersions(
     useEstimatedCount,
   }
 
-  if (!useEstimatedCount) {
+  if (!useEstimatedCount && this.disableIndexHints !== true) {
     // Improve the performance of the countDocuments query which is used if useEstimatedCount is set to false by adding a hint.
     paginationOptions.useCustomCountFn = () => {
       return Promise.resolve(

packages/db-mongodb/src/index.ts

@@ -46,6 +46,8 @@ export interface Args {
     /** Set false to disable $facet aggregation in non-supporting databases, Defaults to true */
     useFacet?: boolean
   }
+  /** Set to true to disable hinting to MongoDB to use 'id' as index. This is currently done when counting documents for pagination. Disabling this optimization might fix some problems with AWS DocumentDB. Defaults to false */
+  disableIndexHints?: boolean
   migrationDir?: string
   /** The URL to connect to MongoDB or false to start payload and prevent connecting */
   url: false | string
@@ -87,6 +89,7 @@ declare module 'payload' {
 export function mongooseAdapter({
   autoPluralization = true,
   connectOptions,
+  disableIndexHints = false,
   migrationDir: migrationDirArg,
   url,
 }: Args): MongooseAdapterResult {
@@ -105,6 +108,7 @@ export function mongooseAdapter({
       collections: {},
       connectOptions: connectOptions || {},
       connection: undefined,
+      disableIndexHints,
       globals: undefined,
       mongoMemoryServer: undefined,
       sessions: {},

packages/db-mongodb/src/queryDrafts.ts

@@ -58,7 +58,7 @@ export const queryDrafts: QueryDrafts = async function queryDrafts(
     useEstimatedCount,
   }
 
-  if (!useEstimatedCount) {
+  if (!useEstimatedCount && this.disableIndexHints !== true) {
     // Improve the performance of the countDocuments query which is used if useEstimatedCount is set to false by adding a hint.
     paginationOptions.useCustomCountFn = () => {
       return Promise.resolve(

packages/db-mongodb/src/transactions/commitTransaction.ts

@@ -4,6 +4,7 @@ export const commitTransaction: CommitTransaction = async function commitTransac
   if (!this.sessions[id]?.inTransaction()) {
     return
   }
+
   await this.sessions[id].commitTransaction()
   await this.sessions[id].endSession()
   delete this.sessions[id]

packages/db-mongodb/src/transactions/rollbackTransaction.ts

@@ -3,10 +3,20 @@ import type { RollbackTransaction } from 'payload/database'
 export const rollbackTransaction: RollbackTransaction = async function rollbackTransaction(
   id = '',
 ) {
-  if (!this.sessions[id]?.inTransaction()) {
-    this.payload.logger.warn('rollbackTransaction called when no transaction exists')
+  // if multiple operations are using the same transaction, the first will flow through and delete the session.
+  // subsequent calls should be ignored.
+  if (!this.sessions[id]) {
     return
   }
+
+  // when session exists but is not inTransaction something unexpected is happening to the session
+  if (!this.sessions[id].inTransaction()) {
+    this.payload.logger.warn('rollbackTransaction called when no transaction exists')
+    delete this.sessions[id]
+    return
+  }
+
+  // the first call for rollback should be aborted and deleted causing any other operations with the same transaction to fail
   await this.sessions[id].abortTransaction()
   await this.sessions[id].endSession()
   delete this.sessions[id]

packages/db-mongodb/src/updateGlobalVersion.ts

@@ -7,9 +7,17 @@ import { withSession } from './withSession'
 
 export async function updateGlobalVersion<T extends TypeWithID>(
   this: MongooseAdapter,
-  { global, locale, req = {} as PayloadRequest, versionData, where }: UpdateGlobalVersionArgs<T>,
+  {
+    id,
+    global,
+    locale,
+    req = {} as PayloadRequest,
+    versionData,
+    where,
+  }: UpdateGlobalVersionArgs<T>,
 ) {
   const VersionModel = this.versions[global]
+  const whereToUse = where || { id: { equals: id } }
   const options = {
     ...withSession(this, req.transactionID),
     lean: true,
@@ -19,7 +27,7 @@ export async function updateGlobalVersion<T extends TypeWithID>(
   const query = await VersionModel.buildQuery({
     locale,
     payload: this.payload,
-    where,
+    where: whereToUse,
   })
 
   const doc = await VersionModel.findOneAndUpdate(query, versionData, options)

packages/db-mongodb/src/updateVersion.ts

@@ -7,9 +7,10 @@ import { withSession } from './withSession'
 
 export const updateVersion: UpdateVersion = async function updateVersion(
   this: MongooseAdapter,
-  { collection, locale, req = {} as PayloadRequest, versionData, where },
+  { id, collection, locale, req = {} as PayloadRequest, versionData, where },
 ) {
   const VersionModel = this.versions[collection]
+  const whereToUse = where || { id: { equals: id } }
   const options = {
     ...withSession(this, req.transactionID),
     lean: true,
@@ -19,7 +20,7 @@ export const updateVersion: UpdateVersion = async function updateVersion(
   const query = await VersionModel.buildQuery({
     locale,
     payload: this.payload,
-    where,
+    where: whereToUse,
   })
 
   const doc = await VersionModel.findOneAndUpdate(query, versionData, options)

packages/db-postgres/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-postgres",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "The officially supported Postgres database adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/db-postgres/src/init.ts

@@ -23,6 +23,7 @@ export const init: Init = async function init(this: PostgresAdapter) {
 
     buildTable({
       adapter: this,
+      buildNumbers: true,
       buildRelationships: true,
       disableNotNull: !!collection?.versions?.drafts,
       disableUnique: false,
@@ -37,6 +38,7 @@ export const init: Init = async function init(this: PostgresAdapter) {
 
       buildTable({
         adapter: this,
+        buildNumbers: true,
         buildRelationships: true,
         disableNotNull: !!collection.versions?.drafts,
         disableUnique: true,
@@ -52,6 +54,7 @@ export const init: Init = async function init(this: PostgresAdapter) {
 
     buildTable({
       adapter: this,
+      buildNumbers: true,
       buildRelationships: true,
       disableNotNull: !!global?.versions?.drafts,
       disableUnique: false,
@@ -66,6 +69,7 @@ export const init: Init = async function init(this: PostgresAdapter) {
 
       buildTable({
         adapter: this,
+        buildNumbers: true,
         buildRelationships: true,
         disableNotNull: !!global.versions?.drafts,
         disableUnique: true,

packages/db-postgres/src/schema/build.ts

@@ -26,6 +26,7 @@ type Args = {
   adapter: PostgresAdapter
   baseColumns?: Record<string, PgColumnBuilder>
   baseExtraConfig?: Record<string, (cols: GenericColumns) => IndexBuilder | UniqueConstraintBuilder>
+  buildNumbers?: boolean
   buildRelationships?: boolean
   disableNotNull: boolean
   disableUnique: boolean
@@ -39,6 +40,7 @@ type Args = {
 }
 
 type Result = {
+  hasManyNumberField: 'index' | boolean
   relationsToBuild: Map<string, string>
 }
 
@@ -46,6 +48,7 @@ export const buildTable = ({
   adapter,
   baseColumns = {},
   baseExtraConfig = {},
+  buildNumbers,
   buildRelationships,
   disableNotNull,
   disableUnique = false,
@@ -53,10 +56,11 @@ export const buildTable = ({
   rootRelationsToBuild,
   rootRelationships,
   rootTableIDColType,
-  rootTableName,
+  rootTableName: incomingRootTableName,
   tableName,
   timestamps,
 }: Args): Result => {
+  const rootTableName = incomingRootTableName || tableName
   const columns: Record<string, PgColumnBuilder> = baseColumns
   const indexes: Record<string, (cols: GenericColumns) => IndexBuilder> = {}
 
@@ -102,6 +106,7 @@ export const buildTable = ({
     hasManyNumberField,
   } = traverseFields({
     adapter,
+    buildNumbers,
     buildRelationships,
     columns,
     disableNotNull,
@@ -116,7 +121,7 @@ export const buildTable = ({
     relationships,
     rootRelationsToBuild: rootRelationsToBuild || relationsToBuild,
     rootTableIDColType: rootTableIDColType || idColType,
-    rootTableName: rootTableName || tableName,
+    rootTableName,
   }))
 
   if (timestamps) {
@@ -185,8 +190,8 @@ export const buildTable = ({
     adapter.relations[`relations_${localeTableName}`] = localesTableRelations
   }
 
-  if (hasManyNumberField) {
-    const numbersTableName = `${tableName}_numbers`
+  if (hasManyNumberField && buildNumbers) {
+    const numbersTableName = `${rootTableName}_numbers`
     const columns: Record<string, PgColumnBuilder> = {
       id: serial('id').primaryKey(),
       number: numeric('number'),
@@ -327,5 +332,5 @@ export const buildTable = ({
 
   adapter.relations[`relations_${tableName}`] = tableRelations
 
-  return { relationsToBuild }
+  return { hasManyNumberField, relationsToBuild }
 }

packages/db-postgres/src/schema/traverseFields.ts

@@ -1,23 +1,24 @@
 /* eslint-disable no-param-reassign */
 import type { Relation } from 'drizzle-orm'
-import { relations } from 'drizzle-orm'
 import type { IndexBuilder, PgColumnBuilder, UniqueConstraintBuilder } from 'drizzle-orm/pg-core'
+import type { Field, TabAsField } from 'payload/types'
+
+import { relations } from 'drizzle-orm'
 import {
+  PgNumericBuilder,
+  PgVarcharBuilder,
   boolean,
   index,
   integer,
   jsonb,
   numeric,
   pgEnum,
-  PgNumericBuilder,
-  PgVarcharBuilder,
   text,
   timestamp,
   varchar,
 } from 'drizzle-orm/pg-core'
-import type { Field, TabAsField } from 'payload/types'
-import { fieldAffectsData, optionIsObject } from 'payload/types'
 import { InvalidConfiguration } from 'payload/errors'
+import { fieldAffectsData, optionIsObject } from 'payload/types'
 import toSnakeCase from 'to-snake-case'
 
 import type { GenericColumns, PostgresAdapter } from '../types'
@@ -31,6 +32,7 @@ import { validateExistingBlockIsIdentical } from './validateExistingBlockIsIdent
 
 type Args = {
   adapter: PostgresAdapter
+  buildNumbers: boolean
   buildRelationships: boolean
   columnPrefix?: string
   columns: Record<string, PgColumnBuilder>
@@ -60,6 +62,7 @@ type Result = {
 
 export const traverseFields = ({
   adapter,
+  buildNumbers,
   buildRelationships,
   columnPrefix,
   columns,
@@ -283,19 +286,25 @@ export const traverseFields = ({
           baseExtraConfig._localeIdx = (cols) => index('_locale_idx').on(cols._locale)
         }
 
-        const { relationsToBuild: subRelationsToBuild } = buildTable({
-          adapter,
-          baseColumns,
-          baseExtraConfig,
-          disableNotNull: disableNotNullFromHere,
-          disableUnique,
-          fields: disableUnique ? idToUUID(field.fields) : field.fields,
-          rootRelationsToBuild,
-          rootRelationships: relationships,
-          rootTableIDColType,
-          rootTableName,
-          tableName: arrayTableName,
-        })
+        const { hasManyNumberField: subHasManyNumberField, relationsToBuild: subRelationsToBuild } =
+          buildTable({
+            adapter,
+            baseColumns,
+            baseExtraConfig,
+            disableNotNull: disableNotNullFromHere,
+            disableUnique,
+            fields: disableUnique ? idToUUID(field.fields) : field.fields,
+            rootRelationsToBuild,
+            rootRelationships: relationships,
+            rootTableIDColType,
+            rootTableName,
+            tableName: arrayTableName,
+          })
+
+        if (subHasManyNumberField) {
+          if (!hasManyNumberField || subHasManyNumberField === 'index')
+            hasManyNumberField = subHasManyNumberField
+        }
 
         relationsToBuild.set(fieldName, arrayTableName)
 
@@ -351,7 +360,10 @@ export const traverseFields = ({
               baseExtraConfig._localeIdx = (cols) => index('locale_idx').on(cols._locale)
             }
 
-            const { relationsToBuild: subRelationsToBuild } = buildTable({
+            const {
+              hasManyNumberField: subHasManyNumberField,
+              relationsToBuild: subRelationsToBuild,
+            } = buildTable({
               adapter,
               baseColumns,
               baseExtraConfig,
@@ -365,6 +377,11 @@ export const traverseFields = ({
               tableName: blockTableName,
             })
 
+            if (subHasManyNumberField) {
+              if (!hasManyNumberField || subHasManyNumberField === 'index')
+                hasManyNumberField = subHasManyNumberField
+            }
+
             const blockTableRelations = relations(
               adapter.tables[blockTableName],
               ({ many, one }) => {
@@ -413,6 +430,7 @@ export const traverseFields = ({
             hasManyNumberField: groupHasManyNumberField,
           } = traverseFields({
             adapter,
+            buildNumbers,
             buildRelationships,
             columnPrefix,
             columns,
@@ -449,6 +467,7 @@ export const traverseFields = ({
           hasManyNumberField: groupHasManyNumberField,
         } = traverseFields({
           adapter,
+          buildNumbers,
           buildRelationships,
           columnPrefix: `${columnName}_`,
           columns,
@@ -486,6 +505,7 @@ export const traverseFields = ({
           hasManyNumberField: tabHasManyNumberField,
         } = traverseFields({
           adapter,
+          buildNumbers,
           buildRelationships,
           columnPrefix,
           columns,
@@ -524,6 +544,7 @@ export const traverseFields = ({
           hasManyNumberField: rowHasManyNumberField,
         } = traverseFields({
           adapter,
+          buildNumbers,
           buildRelationships,
           columnPrefix,
           columns,

packages/db-postgres/src/transactions/commitTransaction.ts

@@ -1,6 +1,7 @@
 import type { CommitTransaction } from 'payload/database'
 
 export const commitTransaction: CommitTransaction = async function commitTransaction(id) {
+  // if the session was deleted it has already been aborted
   if (!this.sessions[id]) {
     return
   }

packages/db-postgres/src/transactions/rollbackTransaction.ts

@@ -3,12 +3,15 @@ import type { RollbackTransaction } from 'payload/database'
 export const rollbackTransaction: RollbackTransaction = async function rollbackTransaction(
   id = '',
 ) {
+  // if multiple operations are using the same transaction, the first will flow through and delete the session.
+  // subsequent calls should be ignored.
   if (!this.sessions[id]) {
-    this.payload.logger.warn('rollbackTransaction called when no transaction exists')
     return
   }
 
+  // end the session promise in failure by calling reject
   await this.sessions[id].reject()
 
+  // delete the session causing any other operations with the same transaction to fail
   delete this.sessions[id]
 }

packages/db-postgres/src/transform/write/array.ts

@@ -14,6 +14,7 @@ type Args = {
   blocks: {
     [blockType: string]: BlockRowToInsert[]
   }
+  blocksToDelete: Set<string>
   data: unknown
   field: ArrayField
   locale?: string
@@ -31,6 +32,7 @@ export const transformArray = ({
   arrayTableName,
   baseTableName,
   blocks,
+  blocksToDelete,
   data,
   field,
   locale,
@@ -78,6 +80,7 @@ export const transformArray = ({
         arrays: newRow.arrays,
         baseTableName,
         blocks,
+        blocksToDelete,
         columnPrefix: '',
         data: arrayRow,
         fieldPrefix: '',

packages/db-postgres/src/transform/write/blocks.ts

@@ -14,6 +14,7 @@ type Args = {
   blocks: {
     [blockType: string]: BlockRowToInsert[]
   }
+  blocksToDelete: Set<string>
   data: Record<string, unknown>[]
   field: BlockField
   locale?: string
@@ -29,6 +30,7 @@ export const transformBlocks = ({
   adapter,
   baseTableName,
   blocks,
+  blocksToDelete,
   data,
   field,
   locale,
@@ -76,6 +78,7 @@ export const transformBlocks = ({
       arrays: newRow.arrays,
       baseTableName,
       blocks,
+      blocksToDelete,
       columnPrefix: '',
       data: blockRow,
       fieldPrefix: '',

packages/db-postgres/src/transform/write/index.ts

@@ -25,6 +25,7 @@ export const transformForWrite = ({
   const rowToInsert: RowToInsert = {
     arrays: {},
     blocks: {},
+    blocksToDelete: new Set(),
     locales: {},
     numbers: [],
     relationships: [],
@@ -40,6 +41,7 @@ export const transformForWrite = ({
     arrays: rowToInsert.arrays,
     baseTableName: tableName,
     blocks: rowToInsert.blocks,
+    blocksToDelete: rowToInsert.blocksToDelete,
     columnPrefix: '',
     data,
     fieldPrefix: '',

packages/db-postgres/src/transform/write/selects.ts

@@ -3,16 +3,18 @@ import { isArrayOfRows } from '../../utilities/isArrayOfRows'
 
 type Args = {
   data: unknown
+  id?: unknown
   locale?: string
 }
 
-export const transformSelects = ({ data, locale }: Args) => {
+export const transformSelects = ({ id, data, locale }: Args) => {
   const newRows: Record<string, unknown>[] = []
 
   if (isArrayOfRows(data)) {
     data.forEach((value, i) => {
       const newRow: Record<string, unknown> = {
         order: i + 1,
+        parent: id,
         value,
       }
 

packages/db-postgres/src/transform/write/traverseFields.ts

@@ -26,6 +26,7 @@ type Args = {
   blocks: {
     [blockType: string]: BlockRowToInsert[]
   }
+  blocksToDelete: Set<string>
   /**
    * A snake-case field prefix, representing prior fields
    * Ex: my_group_my_named_tab_
@@ -62,6 +63,7 @@ export const traverseFields = ({
   arrays,
   baseTableName,
   blocks,
+  blocksToDelete,
   columnPrefix,
   data,
   existingLocales,
@@ -102,6 +104,7 @@ export const traverseFields = ({
                 arrayTableName,
                 baseTableName,
                 blocks,
+                blocksToDelete,
                 data: localeData,
                 field,
                 locale: localeKey,
@@ -122,6 +125,7 @@ export const traverseFields = ({
           arrayTableName,
           baseTableName,
           blocks,
+          blocksToDelete,
           data: data[field.name],
           field,
           numbers,
@@ -138,6 +142,10 @@ export const traverseFields = ({
     }
 
     if (field.type === 'blocks') {
+      field.blocks.forEach(({ slug }) => {
+        blocksToDelete.add(toSnakeCase(slug))
+      })
+
       if (field.localized) {
         if (typeof data[field.name] === 'object' && data[field.name] !== null) {
           Object.entries(data[field.name]).forEach(([localeKey, localeData]) => {
@@ -146,6 +154,7 @@ export const traverseFields = ({
                 adapter,
                 baseTableName,
                 blocks,
+                blocksToDelete,
                 data: localeData,
                 field,
                 locale: localeKey,
@@ -163,6 +172,7 @@ export const traverseFields = ({
           adapter,
           baseTableName,
           blocks,
+          blocksToDelete,
           data: fieldData,
           field,
           numbers,
@@ -185,6 +195,7 @@ export const traverseFields = ({
               arrays,
               baseTableName,
               blocks,
+              blocksToDelete,
               columnPrefix: `${columnName}_`,
               data: localeData as Record<string, unknown>,
               existingLocales,
@@ -207,6 +218,7 @@ export const traverseFields = ({
             arrays,
             baseTableName,
             blocks,
+            blocksToDelete,
             columnPrefix: `${columnName}_`,
             data: data[field.name] as Record<string, unknown>,
             existingLocales,
@@ -238,6 +250,7 @@ export const traverseFields = ({
                   arrays,
                   baseTableName,
                   blocks,
+                  blocksToDelete,
                   columnPrefix: `${columnPrefix || ''}${toSnakeCase(tab.name)}_`,
                   data: localeData as Record<string, unknown>,
                   existingLocales,
@@ -260,6 +273,7 @@ export const traverseFields = ({
                 arrays,
                 baseTableName,
                 blocks,
+                blocksToDelete,
                 columnPrefix: `${columnPrefix || ''}${toSnakeCase(tab.name)}_`,
                 data: data[tab.name] as Record<string, unknown>,
                 existingLocales,
@@ -282,6 +296,7 @@ export const traverseFields = ({
             arrays,
             baseTableName,
             blocks,
+            blocksToDelete,
             columnPrefix,
             data,
             existingLocales,
@@ -306,6 +321,7 @@ export const traverseFields = ({
         arrays,
         baseTableName,
         blocks,
+        blocksToDelete,
         columnPrefix,
         data,
         existingLocales,
@@ -406,6 +422,7 @@ export const traverseFields = ({
           Object.entries(data[field.name]).forEach(([localeKey, localeData]) => {
             if (Array.isArray(localeData)) {
               const newRows = transformSelects({
+                id: data._uuid || data.id,
                 data: localeData,
                 locale: localeKey,
               })
@@ -416,6 +433,7 @@ export const traverseFields = ({
         }
       } else if (Array.isArray(data[field.name])) {
         const newRows = transformSelects({
+          id: data._uuid || data.id,
           data: data[field.name],
         })
 

packages/db-postgres/src/transform/write/types.ts

@@ -30,6 +30,7 @@ export type RowToInsert = {
   blocks: {
     [blockType: string]: BlockRowToInsert[]
   }
+  blocksToDelete: Set<string>
   locales: {
     [locale: string]: Record<string, unknown>
   }

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

@@ -2,6 +2,8 @@
 import type { TypeWithID } from 'payload/types'
 
 import { eq } from 'drizzle-orm'
+import { ValidationError } from 'payload/errors'
+import { i18nInit } from 'payload/utilities'
 
 import type { BlockRowToInsert } from '../transform/write/types'
 import type { Args } from './types'
@@ -12,8 +14,6 @@ import { transformForWrite } from '../transform/write'
 import { deleteExistingArrayRows } from './deleteExistingArrayRows'
 import { deleteExistingRowsByPath } from './deleteExistingRowsByPath'
 import { insertArrays } from './insertArrays'
-import { ValidationError } from 'payload/errors'
-import { i18nInit } from 'payload/utilities'
 
 export const upsertRow = async <T extends TypeWithID>({
   id,
@@ -102,7 +102,9 @@ export const upsertRow = async <T extends TypeWithID>({
     if (Object.keys(rowToInsert.selects).length > 0) {
       Object.entries(rowToInsert.selects).forEach(([selectTableName, selectRows]) => {
         selectRows.forEach((row) => {
-          row.parent = insertedRow.id
+          if (typeof row.parent === 'undefined') {
+            row.parent = insertedRow.id
+          }
           if (!selectsToInsert[selectTableName]) selectsToInsert[selectTableName] = []
           selectsToInsert[selectTableName].push(row)
         })
@@ -188,18 +190,15 @@ export const upsertRow = async <T extends TypeWithID>({
 
     const insertedBlockRows: Record<string, Record<string, unknown>[]> = {}
 
-    for (const [blockName, blockRows] of Object.entries(blocksToInsert)) {
-      if (operation === 'update') {
-        await deleteExistingRowsByPath({
-          adapter,
-          db,
-          parentID: insertedRow.id,
-          pathColumnName: '_path',
-          rows: blockRows.map(({ row }) => row),
-          tableName: `${tableName}_blocks_${blockName}`,
-        })
+    if (operation === 'update') {
+      for (const blockName of rowToInsert.blocksToDelete) {
+        const blockTableName = `${tableName}_blocks_${blockName}`
+        const blockTable = adapter.tables[blockTableName]
+        await db.delete(blockTable).where(eq(blockTable._parentID, insertedRow.id))
       }
+    }
 
+    for (const [blockName, blockRows] of Object.entries(blocksToInsert)) {
       insertedBlockRows[blockName] = await db
         .insert(adapter.tables[`${tableName}_blocks_${blockName}`])
         .values(blockRows.map(({ row }) => row))

packages/live-preview-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/live-preview-react",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "The official live preview React SDK for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/live-preview-react/src/index.ts

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 // you can conditionally render loading UI based on the `isLoading` state
 
 export const useLivePreview = <T extends any>(props: {
+  apiRoute?: string
   depth?: number
   initialData: T
   serverURL: string
@@ -14,7 +15,7 @@ export const useLivePreview = <T extends any>(props: {
   data: T
   isLoading: boolean
 } => {
-  const { depth = 0, initialData, serverURL } = props
+  const { apiRoute, depth, initialData, serverURL } = props
   const [data, setData] = useState<T>(initialData)
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const hasSentReadyMessage = useRef<boolean>(false)
@@ -26,6 +27,7 @@ export const useLivePreview = <T extends any>(props: {
 
   useEffect(() => {
     const subscription = subscribe({
+      apiRoute,
       callback: onChange,
       depth,
       initialData,
@@ -43,7 +45,7 @@ export const useLivePreview = <T extends any>(props: {
     return () => {
       unsubscribe(subscription)
     }
-  }, [serverURL, onChange, depth, initialData])
+  }, [serverURL, onChange, depth, initialData, apiRoute])
 
   return {
     data,

packages/live-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/live-preview",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "The official live preview JavaScript SDK for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/live-preview/src/handleMessage.ts

@@ -7,12 +7,14 @@ import { mergeData } from '.'
 let payloadLivePreviewFieldSchema = undefined // TODO: type this from `fieldSchemaToJSON` return type
 
 export const handleMessage = async <T>(args: {
-  depth: number
+  apiRoute?: string
+  depth?: number
   event: MessageEvent
   initialData: T
   serverURL: string
 }): Promise<T> => {
-  const { depth, event, initialData, serverURL } = args
+  const { apiRoute, depth, event, initialData, serverURL } = args
+
   if (event.origin === serverURL && event.data) {
     const eventData = JSON.parse(event?.data)
 
@@ -21,7 +23,17 @@ export const handleMessage = async <T>(args: {
         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,

packages/live-preview/src/mergeData.ts

@@ -2,23 +2,29 @@ import type { fieldSchemaToJSON } from 'payload/utilities'
 
 import { traverseFields } from './traverseFields'
 
-export type MergeLiveDataArgs<T> = {
+export const mergeData = async <T>(args: {
   apiRoute?: string
-  depth: number
+  depth?: number
   fieldSchema: ReturnType<typeof fieldSchemaToJSON>
   incomingData: Partial<T>
   initialData: T
+  returnNumberOfRequests?: boolean
   serverURL: string
-}
+}): Promise<
+  T & {
+    _numberOfRequests?: number
+  }
+> => {
+  const {
+    apiRoute,
+    depth,
+    fieldSchema,
+    incomingData,
+    initialData,
+    returnNumberOfRequests,
+    serverURL,
+  } = args
 
-export const mergeData = async <T>({
-  apiRoute,
-  depth,
-  fieldSchema,
-  incomingData,
-  initialData,
-  serverURL,
-}: MergeLiveDataArgs<T>): Promise<T> => {
   const result = { ...initialData }
 
   const populationPromises: Promise<void>[] = []
@@ -35,5 +41,8 @@ export const mergeData = async <T>({
 
   await Promise.all(populationPromises)
 
-  return result
+  return {
+    ...result,
+    ...(returnNumberOfRequests ? { _numberOfRequests: populationPromises.length } : {}),
+  }
 }

packages/live-preview/src/promise.ts

@@ -1,4 +1,4 @@
-type Args = {
+export const promise = async (args: {
   accessor: number | string
   apiRoute?: string
   collection: string
@@ -6,20 +6,23 @@ type Args = {
   id: number | string
   ref: Record<string, unknown>
   serverURL: string
-}
+}): Promise<void> => {
+  const { id, accessor, apiRoute, collection, depth, ref, serverURL } = args
 
-export const promise = async ({
-  id,
-  accessor,
-  apiRoute,
-  collection,
-  depth,
-  ref,
-  serverURL,
-}: Args): Promise<void> => {
-  const res: any = await fetch(
-    `${serverURL}${apiRoute || '/api'}/${collection}/${id}?depth=${depth}`,
-  ).then((res) => res.json())
+  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/subscribe.ts

@@ -1,15 +1,16 @@
 import { handleMessage } from '.'
 
 export const subscribe = <T>(args: {
+  apiRoute?: string
   callback: (data: T) => void
-  depth: number
+  depth?: number
   initialData: T
   serverURL: string
 }): ((event: MessageEvent) => void) => {
-  const { callback, depth, initialData, serverURL } = args
+  const { apiRoute, callback, depth, initialData, serverURL } = args
 
   const onMessage = async (event: MessageEvent) => {
-    const mergedData = await handleMessage<T>({ depth, event, initialData, serverURL })
+    const mergedData = await handleMessage<T>({ apiRoute, depth, event, initialData, serverURL })
     callback(mergedData)
   }
 

packages/live-preview/src/traverseFields.ts

@@ -2,51 +2,52 @@ import type { fieldSchemaToJSON } from 'payload/utilities'
 
 import { promise } from './promise'
 
-type Args<T> = {
+export const traverseFields = <T>(args: {
   apiRoute?: string
-  depth: number
+  depth?: number
   fieldSchema: ReturnType<typeof fieldSchemaToJSON>
   incomingData: T
   populationPromises: Promise<void>[]
   result: T
   serverURL: string
-}
+}): void => {
+  const {
+    apiRoute,
+    depth,
+    fieldSchema: fieldSchemas,
+    incomingData,
+    populationPromises,
+    result,
+    serverURL,
+  } = args
 
-export const traverseFields = <T>({
-  apiRoute,
-  depth,
-  fieldSchema,
-  incomingData,
-  populationPromises,
-  result,
-  serverURL,
-}: Args<T>): void => {
-  fieldSchema.forEach((fieldJSON) => {
-    if ('name' in fieldJSON && typeof fieldJSON.name === 'string') {
-      const fieldName = fieldJSON.name
+  fieldSchemas.forEach((fieldSchema) => {
+    if ('name' in fieldSchema && typeof fieldSchema.name === 'string') {
+      const fieldName = fieldSchema.name
 
-      switch (fieldJSON.type) {
+      switch (fieldSchema.type) {
         case 'array':
           if (Array.isArray(incomingData[fieldName])) {
-            result[fieldName] = incomingData[fieldName].map((row, i) => {
-              const hasExistingRow =
-                Array.isArray(result[fieldName]) &&
-                typeof result[fieldName][i] === 'object' &&
-                result[fieldName][i] !== null
+            result[fieldName] = incomingData[fieldName].map((incomingRow, i) => {
+              if (!result[fieldName]) {
+                result[fieldName] = []
+              }
 
-              const newRow = hasExistingRow ? { ...result[fieldName][i] } : {}
+              if (!result[fieldName][i]) {
+                result[fieldName][i] = {}
+              }
 
               traverseFields({
                 apiRoute,
                 depth,
-                fieldSchema: fieldJSON.fields,
-                incomingData: row,
+                fieldSchema: fieldSchema.fields,
+                incomingData: incomingRow,
                 populationPromises,
-                result: newRow,
+                result: result[fieldName][i],
                 serverURL,
               })
 
-              return newRow
+              return result[fieldName][i]
             })
           }
           break
@@ -54,18 +55,21 @@ export const traverseFields = <T>({
         case 'blocks':
           if (Array.isArray(incomingData[fieldName])) {
             result[fieldName] = incomingData[fieldName].map((incomingBlock, i) => {
-              const incomingBlockJSON = fieldJSON.blocks[incomingBlock.blockType]
+              const incomingBlockJSON = fieldSchema.blocks[incomingBlock.blockType]
 
-              // Compare the index and id to determine if this block already exists in the result
-              // If so, we want to use the existing block as the base, otherwise take the incoming block
-              // Either way, we will traverse the fields of the block to populate relationships
-              const isExistingBlock =
-                Array.isArray(result[fieldName]) &&
-                typeof result[fieldName][i] === 'object' &&
-                result[fieldName][i] !== null &&
-                result[fieldName][i].id === incomingBlock.id
+              if (!result[fieldName]) {
+                result[fieldName] = []
+              }
 
-              const block = isExistingBlock ? result[fieldName][i] : incomingBlock
+              if (
+                !result[fieldName][i] ||
+                result[fieldName][i].id !== incomingBlock.id ||
+                result[fieldName][i].blockType !== incomingBlock.blockType
+              ) {
+                result[fieldName][i] = {
+                  blockType: incomingBlock.blockType,
+                }
+              }
 
               traverseFields({
                 apiRoute,
@@ -73,11 +77,11 @@ export const traverseFields = <T>({
                 fieldSchema: incomingBlockJSON.fields,
                 incomingData: incomingBlock,
                 populationPromises,
-                result: block,
+                result: result[fieldName][i],
                 serverURL,
               })
 
-              return block
+              return result[fieldName][i]
             })
           } else {
             result[fieldName] = []
@@ -94,7 +98,7 @@ export const traverseFields = <T>({
           traverseFields({
             apiRoute,
             depth,
-            fieldSchema: fieldJSON.fields,
+            fieldSchema: fieldSchema.fields,
             incomingData: incomingData[fieldName] || {},
             populationPromises,
             result: result[fieldName],
@@ -105,31 +109,35 @@ export const traverseFields = <T>({
 
         case 'upload':
         case 'relationship':
-          if (fieldJSON.hasMany && Array.isArray(incomingData[fieldName])) {
-            const existingValue = Array.isArray(result[fieldName]) ? [...result[fieldName]] : []
-            result[fieldName] = Array.isArray(result[fieldName])
-              ? [...result[fieldName]].slice(0, incomingData[fieldName].length)
-              : []
+          // Handle `hasMany` relationships
+          if (fieldSchema.hasMany && Array.isArray(incomingData[fieldName])) {
+            if (!result[fieldName]) {
+              result[fieldName] = []
+            }
 
-            incomingData[fieldName].forEach((relation, i) => {
+            incomingData[fieldName].forEach((incomingRelation, i) => {
               // Handle `hasMany` polymorphic
-              if (Array.isArray(fieldJSON.relationTo)) {
-                const existingID = existingValue[i]?.value?.id
-
-                if (
-                  existingID !== relation.value ||
-                  existingValue[i]?.relationTo !== relation.relationTo
-                ) {
+              if (Array.isArray(fieldSchema.relationTo)) {
+                // if the field doesn't exist on the result, create it
+                // the value will be populated later
+                if (!result[fieldName][i]) {
                   result[fieldName][i] = {
-                    relationTo: relation.relationTo,
+                    relationTo: incomingRelation.relationTo,
                   }
+                }
 
+                const oldID = result[fieldName][i]?.value?.id
+                const oldRelation = result[fieldName][i]?.relationTo
+                const newID = incomingRelation.value
+                const newRelation = incomingRelation.relationTo
+
+                if (oldID !== newID || oldRelation !== newRelation) {
                   populationPromises.push(
                     promise({
-                      id: relation.value,
+                      id: incomingRelation.value,
                       accessor: 'value',
                       apiRoute,
-                      collection: relation.relationTo,
+                      collection: newRelation,
                       depth,
                       ref: result[fieldName][i],
                       serverURL,
@@ -138,15 +146,13 @@ export const traverseFields = <T>({
                 }
               } else {
                 // Handle `hasMany` monomorphic
-                const existingID = existingValue[i]?.id
-
-                if (existingID !== relation) {
+                if (result[fieldName][i]?.id !== incomingRelation) {
                   populationPromises.push(
                     promise({
-                      id: relation,
+                      id: incomingRelation,
                       accessor: i,
                       apiRoute,
-                      collection: String(fieldJSON.relationTo),
+                      collection: String(fieldSchema.relationTo),
                       depth,
                       ref: result[fieldName],
                       serverURL,
@@ -157,29 +163,49 @@ export const traverseFields = <T>({
             })
           } else {
             // Handle `hasOne` polymorphic
-            if (Array.isArray(fieldJSON.relationTo)) {
+            if (Array.isArray(fieldSchema.relationTo)) {
+              // if the field doesn't exist on the result, create it
+              // the value will be populated later
+              if (!result[fieldName]) {
+                result[fieldName] = {
+                  relationTo: incomingData[fieldName]?.relationTo,
+                }
+              }
+
               const hasNewValue =
-                typeof incomingData[fieldName] === 'object' && incomingData[fieldName] !== null
+                incomingData[fieldName] &&
+                typeof incomingData[fieldName] === 'object' &&
+                incomingData[fieldName] !== null
+
               const hasOldValue =
-                typeof result[fieldName] === 'object' && result[fieldName] !== null
+                result[fieldName] &&
+                typeof result[fieldName] === 'object' &&
+                result[fieldName] !== null
+
+              const newID = hasNewValue
+                ? typeof incomingData[fieldName].value === 'object'
+                  ? incomingData[fieldName].value.id
+                  : incomingData[fieldName].value
+                : ''
+
+              const oldID = hasOldValue
+                ? typeof result[fieldName].value === 'object'
+                  ? result[fieldName].value.id
+                  : result[fieldName].value
+                : ''
 
-              const newValue = hasNewValue ? incomingData[fieldName].value : ''
               const newRelation = hasNewValue ? incomingData[fieldName].relationTo : ''
-
-              const oldValue = hasOldValue ? result[fieldName].value : ''
               const oldRelation = hasOldValue ? result[fieldName].relationTo : ''
 
-              if (newValue !== oldValue || newRelation !== oldRelation) {
-                if (newValue) {
-                  if (!result[fieldName]) {
-                    result[fieldName] = {
-                      relationTo: newRelation,
-                    }
-                  }
-
+              // 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 the new value is not empty, populate it
+                // otherwise set the value to null
+                if (newID) {
                   populationPromises.push(
                     promise({
-                      id: newValue,
+                      id: newID,
                       accessor: 'value',
                       apiRoute,
                       collection: newRelation,
@@ -188,34 +214,36 @@ export const traverseFields = <T>({
                       serverURL,
                     }),
                   )
+                } else {
+                  result[fieldName] = null
                 }
-              } else {
-                result[fieldName] = null
               }
             } else {
               // Handle `hasOne` monomorphic
-              const newID: string =
-                (typeof incomingData[fieldName] === 'string' && incomingData[fieldName]) ||
-                (typeof incomingData[fieldName] === 'object' &&
-                  incomingData[fieldName] !== null &&
+              const newID: number | string | undefined =
+                (incomingData[fieldName] &&
+                  typeof incomingData[fieldName] === 'object' &&
                   incomingData[fieldName].id) ||
-                ''
+                incomingData[fieldName]
 
-              const oldID: string =
-                (typeof result[fieldName] === 'string' && result[fieldName]) ||
-                (typeof result[fieldName] === 'object' &&
-                  result[fieldName] !== null &&
+              const oldID: number | string | undefined =
+                (result[fieldName] &&
+                  typeof result[fieldName] === 'object' &&
                   result[fieldName].id) ||
-                ''
+                result[fieldName]
 
+              // if the new value is different from the old value
+              // populate the new value, otherwise leave it alone
               if (newID !== oldID) {
+                // 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(fieldJSON.relationTo),
+                      collection: String(fieldSchema.relationTo),
                       depth,
                       ref: result as Record<string, unknown>,
                       serverURL,
@@ -235,6 +263,4 @@ export const traverseFields = <T>({
       }
     }
   })
-
-  return null
 }

packages/payload/README.md

@@ -26,9 +26,8 @@
 </h4>
 <hr/>
 
-<h3>
-  🎉 Payload 2.0 is now available! Read more in the <a target="_blank" href="https://payloadcms.com/blog/payload-2-0" rel="dofollow"><strong>announcement post</strong></a>
-</h3>
+> [!IMPORTANT]
+> 🎉 <strong>Payload 2.0 is now available!</strong> Read more in the <a target="_blank" href="https://payloadcms.com/blog/payload-2-0" rel="dofollow"><strong>announcement post</strong></a>.
 
 <h3>Benefits over a regular CMS</h3>
 <ul>
@@ -52,7 +51,7 @@ Create a cloud account, connect your GitHub, and [deploy in minutes](https://pay
 Before beginning to work with Payload, make sure you have all of the [required software](https://payloadcms.com/docs/getting-started/installation).
 
 ```text
-npx create-payload-app
+npx create-payload-app@latest
 ```
 
 Alternatively, it only takes about five minutes to [create an app from scratch](https://payloadcms.com/docs/getting-started/installation#from-scratch).

packages/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload",
-  "version": "2.0.14",
+  "version": "2.2.0",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -135,7 +135,7 @@
     "terser-webpack-plugin": "5.3.9",
     "ts-essentials": "7.0.3",
     "use-context-selector": "1.4.1",
-    "uuid": "8.3.2"
+    "uuid": "9.0.1"
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",

packages/payload/src/admin/components/elements/DatePicker/DatePicker.tsx

@@ -22,6 +22,7 @@ const DateTime: React.FC<Props> = (props) => {
     minTime,
     monthsToShow = 1,
     onChange: onChangeFromProps,
+    overrides,
     pickerAppearance = 'default',
     placeholder: placeholderText,
     readOnly,
@@ -77,6 +78,7 @@ const DateTime: React.FC<Props> = (props) => {
     showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',
     timeFormat,
     timeIntervals,
+    ...overrides,
   }
 
   const classes = [baseClass, `${baseClass}__appearance--${pickerAppearance}`]

packages/payload/src/admin/components/elements/DatePicker/types.ts

@@ -1,5 +1,8 @@
+import type { ReactDatePickerProps } from 'react-datepicker'
+
 type SharedProps = {
   displayFormat?: string
+  overrides?: ReactDatePickerProps
   pickerAppearance?: 'dayAndTime' | 'dayOnly' | 'default' | 'monthOnly' | 'timeOnly'
 }
 

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

@@ -56,7 +56,12 @@ export const DocumentControls: React.FC<{
 
   const { i18n, t } = useTranslation('general')
 
-  const showDotMenu = Boolean(collection && id && !disableActions)
+  const hasCreatePermission = 'create' in permissions && permissions.create?.permission
+  const hasDeletePermission = 'delete' in permissions && permissions.delete?.permission
+
+  const showDotMenu = Boolean(
+    collection && id && !disableActions && (hasCreatePermission || hasDeletePermission),
+  )
 
   return (
     <Gutter className={baseClass}>
@@ -203,7 +208,7 @@ export const DocumentControls: React.FC<{
               verticalAlign="bottom"
             >
               <PopupList.ButtonGroup>
-                {'create' in permissions && permissions?.create?.permission && (
+                {hasCreatePermission && (
                   <React.Fragment>
                     <PopupList.Button
                       id="action-create"
@@ -217,7 +222,7 @@ export const DocumentControls: React.FC<{
                     )}
                   </React.Fragment>
                 )}
-                {'delete' in permissions && permissions?.delete?.permission && id && (
+                {hasDeletePermission && (
                   <DeleteDocument buttonId="action-delete" collection={collection} id={id} />
                 )}
               </PopupList.ButtonGroup>

packages/payload/src/admin/components/elements/DocumentDrawer/DrawerContent.tsx

@@ -62,7 +62,9 @@ const Content: React.FC<DocumentDrawerProps> = ({
       ? Edit
       : typeof Edit === 'object' && typeof Edit.Default === 'function'
       ? Edit.Default
-      : typeof Edit?.Default === 'object' && typeof Edit.Default.Component === 'function'
+      : typeof Edit?.Default === 'object' &&
+        'Component' in Edit.Default &&
+        typeof Edit.Default.Component === 'function'
       ? Edit.Default.Component
       : undefined
 

packages/payload/src/admin/components/elements/DocumentHeader/Tabs/getCustomViews.ts

@@ -1,5 +1,6 @@
-import type { EditViewConfig } from '../../../../../exports/config'
-import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from '../../../../../exports/types'
+import type { SanitizedCollectionConfig } from '../../../../../collections/config/types'
+import type { EditViewConfig } from '../../../../../config/types'
+import type { SanitizedGlobalConfig } from '../../../../../globals/config/types'
 
 import { defaultGlobalViews } from '../../../views/Global/Routes/CustomComponent'
 import { defaultCollectionViews } from '../../../views/collections/Edit/Routes/CustomComponent'

packages/payload/src/admin/components/elements/DocumentHeader/Tabs/getViewConfig.ts

@@ -0,0 +1,33 @@
+import type { SanitizedCollectionConfig } from '../../../../../collections/config/types'
+import type { EditViewConfig } from '../../../../../config/types'
+import type { SanitizedGlobalConfig } from '../../../../../globals/config/types'
+
+export const getViewConfig = (args: {
+  collection: SanitizedCollectionConfig
+  global: SanitizedGlobalConfig
+  name: string
+}): EditViewConfig => {
+  const { name, collection, global } = args
+
+  if (collection) {
+    const collectionViewsConfig =
+      typeof collection?.admin?.components?.views?.Edit === 'object' &&
+      typeof collection?.admin?.components?.views?.Edit !== 'function'
+        ? collection?.admin?.components?.views?.Edit
+        : undefined
+
+    return collectionViewsConfig?.[name]
+  }
+
+  if (global) {
+    const globalViewsConfig =
+      typeof global?.admin?.components?.views?.Edit === 'object' &&
+      typeof global?.admin?.components?.views?.Edit !== 'function'
+        ? global?.admin?.components?.views?.Edit
+        : undefined
+
+    return globalViewsConfig?.[name]
+  }
+
+  return null
+}

packages/payload/src/admin/components/elements/DocumentHeader/Tabs/index.tsx

@@ -4,8 +4,9 @@ import type { DocumentTabProps } from './types'
 
 import { DocumentTab } from './Tab'
 import { getCustomViews } from './getCustomViews'
+import { getViewConfig } from './getViewConfig'
 import './index.scss'
-import { tabs } from './tabs'
+import { tabs as defaultViews } from './tabs'
 
 const baseClass = 'doc-tabs'
 
@@ -19,17 +20,50 @@ export const DocumentTabs: React.FC<DocumentTabProps> = (props) => {
       <div className={baseClass}>
         <div className={`${baseClass}__tabs-container`}>
           <ul className={`${baseClass}__tabs`}>
-            {tabs?.map((Tab, index) => {
-              return <DocumentTab {...props} {...Tab} key={`tab-${index}`} />
-            })}
+            {Object.entries(defaultViews)
+              // sort `defaultViews` based on `order` property from smallest to largest
+              // if no `order`, append the view to the end
+              // TODO: open `order` to the config and merge `defaultViews` with `customViews`
+              ?.sort(([, a], [, b]) => {
+                if (a.order === undefined && b.order === undefined) return 0
+                else if (a.order === undefined) return 1
+                else if (b.order === undefined) return -1
+                return a.order - b.order
+              })
+              ?.map(([name, Tab], index) => {
+                const viewConfig = getViewConfig({ name, collection, global })
+                const tabOverrides = viewConfig && 'Tab' in viewConfig ? viewConfig.Tab : undefined
+
+                return (
+                  <DocumentTab
+                    {...{
+                      ...props,
+                      ...(Tab || {}),
+                      ...(tabOverrides || {}),
+                    }}
+                    key={`tab-${index}`}
+                  />
+                )
+              })}
             {customViews?.map((CustomView, index) => {
-              const { Tab, path } = CustomView
+              if ('Tab' in CustomView) {
+                const { Tab, path } = CustomView
 
-              if (typeof Tab === 'function') {
-                return <Tab path={path} {...props} key={`tab-custom-${index}`} />
+                if (typeof Tab === 'function') {
+                  return <Tab path={path} {...props} key={`tab-custom-${index}`} />
+                }
+
+                return (
+                  <DocumentTab
+                    {...{
+                      ...props,
+                      ...Tab,
+                    }}
+                    key={`tab-custom-${index}`}
+                  />
+                )
               }
-
-              return <DocumentTab {...props} {...Tab} key={`tab-custom-${index}`} />
+              return null
             })}
           </ul>
         </div>

packages/payload/src/admin/components/elements/DocumentHeader/Tabs/tabs.ts

@@ -1,15 +1,27 @@
+import type { collectionViewType } from '../../../views/collections/Edit/Routes/CustomComponent'
 import type { DocumentTabConfig } from './types'
 
-export const tabs: DocumentTabConfig[] = [
-  // Default
-  {
+export const tabs: Record<
+  collectionViewType,
+  DocumentTabConfig & {
+    order?: number // TODO: expose this to the global config
+  }
+> = {
+  API: {
+    condition: ({ collection, global }) =>
+      (collection && !collection?.admin?.hideAPIURL) || (global && !global?.admin?.hideAPIURL),
+    href: '/api',
+    label: 'API',
+    order: 1000,
+  },
+  Default: {
     href: '',
     isActive: ({ href, location }) =>
       location.pathname === href || location.pathname === `${href}/create`,
     label: ({ t }) => t('edit'),
+    order: 0,
   },
-  // Live Preview
-  {
+  LivePreview: {
     condition: ({ collection, config, global }) => {
       if (collection) {
         return Boolean(
@@ -29,22 +41,25 @@ export const tabs: DocumentTabConfig[] = [
     href: ({ match }) => `${match.url}/preview`,
     isActive: ({ href, location }) => location.pathname === href,
     label: ({ t }) => t('livePreview'),
+    order: 100,
   },
-  // Versions
-  {
+  References: {
+    condition: () => false,
+  },
+  Relationships: {
+    condition: () => false,
+  },
+  Version: {
+    condition: () => false,
+  },
+  Versions: {
     condition: ({ collection, global }) => Boolean(collection?.versions || global?.versions),
     href: '/versions',
     label: ({ t }) => t('version:versions'),
+    order: 200,
     pillLabel: ({ versions }) =>
       typeof versions?.totalDocs === 'number' && versions?.totalDocs > 0
         ? versions?.totalDocs.toString()
         : '',
   },
-  // API
-  {
-    condition: ({ collection, global }) =>
-      (collection && !collection?.admin?.hideAPIURL) || (global && !global?.admin?.hideAPIURL),
-    href: '/api',
-    label: 'API',
-  },
-]
+}

packages/payload/src/admin/components/elements/DocumentHeader/Tabs/types.ts

@@ -21,9 +21,11 @@ export type DocumentTabCondition = (args: {
   global: SanitizedGlobalConfig
 }) => boolean
 
+// Everything is optional because we merge in the defaults
+// i.e. the config may override the `Default` view with a `label` but not an `href`
 export type DocumentTabConfig = {
   condition?: DocumentTabCondition
-  href:
+  href?:
     | ((args: {
         apiURL: string
         collection: SanitizedCollectionConfig
@@ -40,7 +42,7 @@ export type DocumentTabConfig = {
         match: ReturnType<typeof useRouteMatch>
       }) => boolean)
     | boolean
-  label: ((args: { t: (key: string) => string }) => string) | string
+  label?: ((args: { t: (key: string) => string }) => string) | string
   newTab?: boolean
   pillLabel?:
     | ((args: { versions: ReturnType<typeof useDocumentInfo>['versions'] }) => string)

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

@@ -1,107 +1,109 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import Button from '../Button';
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../Button'
 
-import './index.scss';
+import './index.scss'
 
 const handleDragOver = (e: DragEvent) => {
-  e.preventDefault();
-  e.stopPropagation();
-};
+  e.preventDefault()
+  e.stopPropagation()
+}
 
-const baseClass = 'dropzone';
+const baseClass = 'dropzone'
 
 type Props = {
-  onChange: (e: FileList) => void;
-  className?: string;
-  mimeTypes?: string[];
+  onChange: (e: FileList) => void
+  className?: string
+  mimeTypes?: string[]
 }
 
 export const Dropzone: React.FC<Props> = ({ onChange, className, mimeTypes }) => {
-  const dropRef = React.useRef<HTMLDivElement>(null);
-  const [dragging, setDragging] = React.useState(false);
-  const inputRef = React.useRef(null);
+  const dropRef = React.useRef<HTMLDivElement>(null)
+  const [dragging, setDragging] = React.useState(false)
+  const inputRef = React.useRef(null)
 
-  const { t } = useTranslation(['upload', 'general']);
+  const { t } = useTranslation(['upload', 'general'])
 
-  const handlePaste = React.useCallback((e: ClipboardEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handlePaste = React.useCallback(
+    (e: ClipboardEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
 
-    if (e.clipboardData.files && e.clipboardData.files.length > 0) {
-      onChange(e.clipboardData.files);
-    }
-  }, [onChange]);
+      if (e.clipboardData.files && e.clipboardData.files.length > 0) {
+        onChange(e.clipboardData.files)
+      }
+    },
+    [onChange],
+  )
 
   const handleDragEnter = React.useCallback((e: DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragging(true);
-  }, []);
+    e.preventDefault()
+    e.stopPropagation()
+    setDragging(true)
+  }, [])
 
   const handleDragLeave = React.useCallback((e: DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragging(false);
-  }, []);
+    e.preventDefault()
+    e.stopPropagation()
+    setDragging(false)
+  }, [])
 
-  const handleDrop = React.useCallback((e: DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragging(false);
+  const handleDrop = React.useCallback(
+    (e: DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setDragging(false)
 
-    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      onChange(e.dataTransfer.files);
-      setDragging(false);
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        onChange(e.dataTransfer.files)
+        setDragging(false)
 
-      e.dataTransfer.clearData();
-    }
-  }, [onChange]);
+        e.dataTransfer.clearData()
+      }
+    },
+    [onChange],
+  )
 
-  const handleFileSelection = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files.length > 0) {
-      onChange(e.target.files);
-    }
-  }, [onChange]);
+  const handleFileSelection = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && e.target.files.length > 0) {
+        onChange(e.target.files)
+      }
+    },
+    [onChange],
+  )
 
   React.useEffect(() => {
-    const div = dropRef.current;
+    const div = dropRef.current
 
     if (div) {
-      div.addEventListener('dragenter', handleDragEnter);
-      div.addEventListener('dragleave', handleDragLeave);
-      div.addEventListener('dragover', handleDragOver);
-      div.addEventListener('drop', handleDrop);
-      div.addEventListener('paste', handlePaste);
+      div.addEventListener('dragenter', handleDragEnter)
+      div.addEventListener('dragleave', handleDragLeave)
+      div.addEventListener('dragover', handleDragOver)
+      div.addEventListener('drop', handleDrop)
+      div.addEventListener('paste', handlePaste)
 
       return () => {
-        div.removeEventListener('dragenter', handleDragEnter);
-        div.removeEventListener('dragleave', handleDragLeave);
-        div.removeEventListener('dragover', handleDragOver);
-        div.removeEventListener('drop', handleDrop);
-        div.removeEventListener('paste', handlePaste);
-      };
+        div.removeEventListener('dragenter', handleDragEnter)
+        div.removeEventListener('dragleave', handleDragLeave)
+        div.removeEventListener('dragover', handleDragOver)
+        div.removeEventListener('drop', handleDrop)
+        div.removeEventListener('paste', handlePaste)
+      }
     }
 
-    return () => null;
-  }, [handleDragEnter, handleDragLeave, handleDrop, handlePaste]);
+    return () => null
+  }, [handleDragEnter, handleDragLeave, handleDrop, handlePaste])
 
-  const classes = [
-    baseClass,
-    className,
-    dragging ? 'dragging' : '',
-  ].filter(Boolean).join(' ');
+  const classes = [baseClass, className, dragging ? 'dragging' : ''].filter(Boolean).join(' ')
 
   return (
-    <div
-      ref={dropRef}
-      className={classes}
-    >
+    <div ref={dropRef} className={classes}>
       <Button
         size="small"
         buttonStyle="secondary"
         onClick={() => {
-          inputRef.current.click();
+          inputRef.current.click()
         }}
         className={`${baseClass}__file-button`}
       >
@@ -117,10 +119,8 @@ export const Dropzone: React.FC<Props> = ({ onChange, className, mimeTypes }) =>
       />
 
       <p className={`${baseClass}__label`}>
-        {t('or')}
-        {' '}
-        {t('dragAndDrop')}
+        {t('general:or')} {t('dragAndDrop')}
       </p>
     </div>
-  );
-};
+  )
+}

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

@@ -70,6 +70,11 @@ $header-height: base(5);
     }
   }
 
+  &__draggable {
+    @include btn-reset;
+    position: absolute;
+  }
+
   &__focalPoint {
     position: absolute;
     top: 50%;

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

@@ -83,7 +83,7 @@ export const EditUpload: React.FC<{
     setFormQueryParams({
       ...formQueryParams,
       uploadEdits: {
-        crop: crop ? crop : undefined,
+        crop: crop || undefined,
         focalPoint: pointPosition ? pointPosition : undefined,
       },
     })
@@ -164,7 +164,15 @@ export const EditUpload: React.FC<{
                 />
               </ReactCrop>
             ) : (
-              <img alt={t('upload:setFocalPoint')} ref={imageRef} src={fileSrcToUse} />
+              <img
+                alt={t('upload:setFocalPoint')}
+                onLoad={(e) => {
+                  setOriginalHeight(e.currentTarget.naturalHeight)
+                  setOriginalWidth(e.currentTarget.naturalWidth)
+                }}
+                ref={imageRef}
+                src={fileSrcToUse}
+              />
             )}
             {showFocalPoint && (
               <DraggableElement
@@ -273,7 +281,7 @@ const DraggableElement = ({
 }) => {
   const [position, setPosition] = useState({ x: initialPosition.x, y: initialPosition.y })
   const [isDragging, setIsDragging] = useState(false)
-  const dragRef = useRef<HTMLDivElement | undefined>()
+  const dragRef = useRef<HTMLButtonElement | undefined>()
 
   const getCoordinates = React.useCallback(
     (mouseXArg?: number, mouseYArg?: number, recenter?: boolean) => {
@@ -319,7 +327,7 @@ const DraggableElement = ({
 
       return { x, y }
     },
-    [],
+    [boundsRef, containerRef],
   )
 
   const handleMouseDown = (event) => {
@@ -349,7 +357,7 @@ const DraggableElement = ({
       setCheckBounds(false)
       return
     }
-  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y])
+  }, [getCoordinates, isDragging, checkBounds, setCheckBounds, position.x, position.y, onDragEnd])
 
   React.useEffect(() => {
     setPosition({ x: initialPosition.x, y: initialPosition.y })
@@ -365,15 +373,16 @@ const DraggableElement = ({
         .join(' ')}
       onMouseMove={handleMouseMove}
     >
-      <div
+      <button
         className={[`${baseClass}__draggable`, className].filter(Boolean).join(' ')}
         onMouseDown={handleMouseDown}
         onMouseUp={onDrop}
         ref={dragRef}
-        style={{ left: `${position.x}%`, position: 'absolute', top: `${position.y}%` }}
+        style={{ left: `${position.x}%`, top: `${position.y}%` }}
+        type="button"
       >
         {children}
-      </div>
+      </button>
       <div />
     </div>
   )

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

@@ -1,7 +1,7 @@
 @import '../../../scss/styles.scss';
 
 .file-details {
-  background-color: var(--theme-elevation-100);
+  background-color: var(--theme-elevation-50);
 
   header {
     display: flex;

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

@@ -38,7 +38,7 @@ const FileDetails: React.FC<Props> = (props) => {
             width={width as number}
           />
 
-          {isImage(mimeType as string) && (
+          {isImage(mimeType as string) && mimeType !== 'image/svg+xml' && (
             <UploadActions canEdit={canEdit} showSizePreviews={hasImageSizes && doc.filename} />
           )}
         </div>

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

@@ -28,14 +28,11 @@
       margin-left: base(0.5);
     }
 
-    .btn {
-      background-color: var(--theme-elevation-100);
-      cursor: pointer;
-      padding: 0 base(0.25);
-      border-radius: $style-radius-s;
+    .pill {
+      background-color: var(--theme-elevation-200);
 
       &:hover {
-        background-color: var(--theme-elevation-200);
+        background-color: var(--theme-elevation-150);
       }
     }
   }

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

@@ -116,17 +116,16 @@ export const ListControls: React.FC<Props> = (props) => {
               {t('filters')}
             </Pill>
             {enableSort && (
-              <Button
+              <Pill
                 aria-controls={`${baseClass}-sort`}
                 aria-expanded={visibleDrawer === 'sort'}
-                buttonStyle={visibleDrawer === 'sort' ? undefined : 'secondary'}
                 className={`${baseClass}__toggle-sort`}
-                icon="chevron"
-                iconStyle="none"
+                icon={<Chevron />}
                 onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}
+                pillStyle="light"
               >
                 {t('sort')}
-              </Button>
+              </Pill>
             )}
           </div>
         </div>

packages/payload/src/admin/components/elements/Localizer/LocalizerLabel/index.tsx

@@ -1,28 +1,33 @@
 import React from 'react'
-import { Chevron } from '../../..'
-import { useLocale } from '../../../utilities/Locale'
 import { useTranslation } from 'react-i18next'
 
+import { Chevron } from '../../..'
+import { getTranslation } from '../../../../../utilities/getTranslation'
+import { useLocale } from '../../../utilities/Locale'
 import './index.scss'
 
 const baseClass = 'localizer-button'
 
 export const LocalizerLabel: React.FC<{
-  className?: string
   ariaLabel?: string
+  className?: string
 }> = (props) => {
-  const { className, ariaLabel } = props
+  const { ariaLabel, className } = props
   const locale = useLocale()
   const { t } = useTranslation('general')
+  const { i18n } = useTranslation()
 
   return (
     <div
-      className={[baseClass, className].filter(Boolean).join(' ')}
       aria-label={ariaLabel || t('locale')}
+      className={[baseClass, className].filter(Boolean).join(' ')}
     >
       <div className={`${baseClass}__label`}>{`${t('locale')}:`}</div>
       &nbsp;&nbsp;
-      <span className={`${baseClass}__current-label`}>{`${locale.label}`}</span>
+      <span className={`${baseClass}__current-label`}>{`${getTranslation(
+        locale.label,
+        i18n,
+      )}`}</span>
       &nbsp;
       <Chevron className={`${baseClass}__chevron`} />
     </div>

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

@@ -1,6 +1,8 @@
 import qs from 'qs'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
+import { getTranslation } from '../../../../utilities/getTranslation'
 import { useConfig } from '../../utilities/Config'
 import { useLocale } from '../../utilities/Locale'
 import { useSearchParams } from '../../utilities/SearchParams'
@@ -18,9 +20,12 @@ const Localizer: React.FC<{
   const config = useConfig()
   const { localization } = config
 
+  const { i18n } = useTranslation()
   const locale = useLocale()
   const searchParams = useSearchParams()
 
+  const localeLabel = getTranslation(locale.label, i18n)
+
   if (localization) {
     const { locales } = localization
 
@@ -44,8 +49,8 @@ const Localizer: React.FC<{
                       }),
                     }}
                   >
-                    {locale.label}
-                    {locale.label !== locale.code && ` (${locale.code})`}
+                    {localeLabel}
+                    {localeLabel !== locale.code && ` (${locale.code})`}
                   </PopupList.Button>
                 ) : null}
 
@@ -57,11 +62,12 @@ const Localizer: React.FC<{
                     locale: localeOption.code,
                   }
                   const search = qs.stringify(newParams)
+                  const localeOptionLabel = getTranslation(localeOption.label, i18n)
 
                   return (
                     <PopupList.Button key={localeOption.code} onClick={close} to={{ search }}>
-                      {localeOption.label}
-                      {localeOption.label !== localeOption.code && ` (${localeOption.code})`}
+                      {localeOptionLabel}
+                      {localeOptionLabel !== localeOption.code && ` (${localeOption.code})`}
                     </PopupList.Button>
                   )
                 })}

packages/payload/src/admin/components/elements/Nav/NavToggler/index.tsx

@@ -28,7 +28,7 @@ export const NavToggler: React.FC<{
 
   return (
     <button
-      aria-label={t('menu')}
+      aria-label={`${navOpen ? t('close') : t('open')} ${t('menu')}`}
       className={[baseClass, navOpen && `${baseClass}--is-open`, className]
         .filter(Boolean)
         .join(' ')}

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

@@ -77,7 +77,6 @@
   &__sizeOption {
     padding: base(0.5);
     display: flex;
-    flex-direction: row;
     gap: base(1);
     cursor: pointer;
     transition: background-color 0.2s ease-in-out;

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
 import type { SanitizedCollectionConfig } from '../../../../exports/types'
 import type { FileSizes, Upload } from '../../../../uploads/types'
@@ -23,9 +23,49 @@ const sortSizes = (sizes: FileSizes, imageSizes: Upload['imageSizes']) => {
   return orderedSizes
 }
 
+type PreviewSizeCardProps = {
+  active: boolean
+  baseURL: string
+  meta: FileSizes[0]
+  name: string
+  onClick?: () => void
+  previewSrc: string
+}
+const PreviewSizeCard: React.FC<PreviewSizeCardProps> = ({
+  name,
+  active,
+  baseURL,
+  meta,
+  onClick,
+  previewSrc,
+}) => {
+  return (
+    <div
+      className={[`${baseClass}__sizeOption`, active && `${baseClass}--selected`]
+        .filter(Boolean)
+        .join(' ')}
+      onClick={typeof onClick === 'function' ? onClick : undefined}
+      onKeyDown={(e) => {
+        if (typeof onClick !== 'function') return
+        if (e.key === 'Enter') onClick()
+      }}
+      role="button"
+      tabIndex={0}
+    >
+      <div className={`${baseClass}__image`}>
+        <img alt={meta.filename} src={previewSrc} />
+      </div>
+      <div className={`${baseClass}__sizeMeta`}>
+        <div className={`${baseClass}__sizeName`}>{name}</div>
+        <Meta {...meta} staticURL={baseURL} />
+      </div>
+    </div>
+  )
+}
+
 const PreviewSizes: React.FC<{
   collection: SanitizedCollectionConfig
-  doc?: Data & {
+  doc: Data & {
     sizes?: FileSizes
   }
   imageCacheTag?: string
@@ -36,9 +76,7 @@ const PreviewSizes: React.FC<{
   const { sizes } = doc
 
   const [orderedSizes, setOrderedSizes] = useState<FileSizes>(() => sortSizes(sizes, imageSizes))
-  const [selectedSize, setSelectedSize] = useState<null | string>(
-    orderedSizes?.[imageSizes[0]?.name]?.filename ? imageSizes[0]?.name : null,
-  )
+  const [selectedSize, setSelectedSize] = useState<null | string>(null)
 
   const generateImageUrl = (filename) => {
     return `${staticURL}/${filename}${imageCacheTag ? `?${imageCacheTag}` : ''}`
@@ -47,47 +85,60 @@ const PreviewSizes: React.FC<{
     setOrderedSizes(sortSizes(sizes, imageSizes))
   }, [sizes, imageSizes, imageCacheTag])
 
-  const mainPreviewSrc = generateImageUrl(`${orderedSizes[selectedSize]?.filename}`)
+  const mainPreviewSrc = selectedSize
+    ? generateImageUrl(`${orderedSizes[selectedSize]?.filename}`)
+    : generateImageUrl(doc.filename)
+
+  const originalImage = useMemo(
+    (): FileSizes[0] => ({
+      filename: doc.filename,
+      filesize: doc.filesize,
+      height: doc.height,
+      mimeType: doc.mimeType,
+      width: doc.width,
+    }),
+    [doc],
+  )
+  const originalFilename = 'Original'
 
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__imageWrap`}>
         <div className={`${baseClass}__meta`}>
-          <div className={`${baseClass}__sizeName`}>{selectedSize}</div>
-          <Meta {...(selectedSize && orderedSizes[selectedSize])} staticURL={staticURL} />
+          <div className={`${baseClass}__sizeName`}>{selectedSize || originalFilename}</div>
+          <Meta
+            {...(selectedSize ? orderedSizes[selectedSize] : originalImage)}
+            staticURL={staticURL}
+          />
         </div>
         <img alt={doc.filename} className={`${baseClass}__preview`} src={mainPreviewSrc} />
       </div>
       <div className={`${baseClass}__listWrap`}>
         <div className={`${baseClass}__list`}>
+          <PreviewSizeCard
+            active={!selectedSize}
+            baseURL={staticURL}
+            meta={originalImage}
+            name={originalFilename}
+            onClick={() => setSelectedSize(null)}
+            previewSrc={generateImageUrl(doc.filename)}
+          />
+
           {Object.entries(orderedSizes).map(([key, val]) => {
             const selected = selectedSize === key
-            const previewSrc = generateImageUrl(val.filename)
+            const previewSrc = val.filename ? generateImageUrl(val.filename) : undefined
 
             if (previewSrc) {
               return (
-                <div
-                  className={[`${baseClass}__sizeOption`, selected && `${baseClass}--selected`]
-                    .filter(Boolean)
-                    .join(' ')}
+                <PreviewSizeCard
+                  active={selected}
+                  baseURL={staticURL}
                   key={key}
+                  meta={val}
+                  name={key}
                   onClick={() => setSelectedSize(key)}
-                  onKeyDown={(e) => {
-                    if (e.keyCode === 13) {
-                      setSelectedSize(key)
-                    }
-                  }}
-                  role="button"
-                  tabIndex={0}
-                >
-                  <div className={`${baseClass}__image`}>
-                    <img alt={val.filename} src={previewSrc} />
-                  </div>
-                  <div className={`${baseClass}__sizeMeta`}>
-                    <div className={`${baseClass}__sizeName`}>{key}</div>
-                    <Meta {...val} staticURL={staticURL} />
-                  </div>
-                </div>
+                  previewSrc={previewSrc}
+                />
               )
             }
 

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

@@ -1,9 +1,12 @@
+import qs from 'qs'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useForm, useFormModified } from '../../forms/Form/context'
 import FormSubmit from '../../forms/Submit'
+import { useConfig } from '../../utilities/Config'
 import { useDocumentInfo } from '../../utilities/DocumentInfo'
+import { useLocale } from '../../utilities/Locale'
 import RenderCustomComponent from '../../utilities/RenderCustomComponent'
 
 export type CustomPublishButtonProps = React.ComponentType<
@@ -12,6 +15,7 @@ export type CustomPublishButtonProps = React.ComponentType<
   }
 >
 export type DefaultPublishButtonProps = {
+  canPublish: boolean
   disabled: boolean
   id?: string
   label: string
@@ -19,10 +23,13 @@ export type DefaultPublishButtonProps = {
 }
 const DefaultPublishButton: React.FC<DefaultPublishButtonProps> = ({
   id,
+  canPublish,
   disabled,
   label,
   publish,
 }) => {
+  if (!canPublish) return null
+
   return (
     <FormSubmit buttonId={id} disabled={disabled} onClick={publish} size="small" type="button">
       {label}
@@ -35,22 +42,68 @@ type Props = {
 }
 
 export const Publish: React.FC<Props> = ({ CustomComponent }) => {
-  const { publishedDoc, unpublishedVersions } = useDocumentInfo()
-  const { submit } = useForm()
+  const { code } = useLocale()
+  const { id, collection, global, publishedDoc, unpublishedVersions } = useDocumentInfo()
+  const [hasPublishPermission, setHasPublishPermission] = React.useState(false)
+  const { getData, submit } = useForm()
   const modified = useFormModified()
+  const {
+    routes: { api },
+    serverURL,
+  } = useConfig()
   const { t } = useTranslation('version')
 
   const hasNewerVersions = unpublishedVersions?.totalDocs > 0
   const canPublish = modified || hasNewerVersions || !publishedDoc
 
   const publish = useCallback(() => {
-    submit({
+    void submit({
       overrides: {
         _status: 'published',
       },
     })
   }, [submit])
 
+  React.useEffect(() => {
+    const fetchPublishAccess = async () => {
+      let docAccessURL: string
+      let operation = 'update'
+
+      const params = {
+        locale: code || undefined,
+      }
+      if (global) {
+        docAccessURL = `/globals/${global.slug}/access`
+      } else if (collection) {
+        if (!id) operation = 'create'
+        docAccessURL = `/${collection.slug}/access${id ? `/${id}` : ''}`
+      }
+
+      if (docAccessURL) {
+        const data = getData()
+
+        const res = await fetch(`${serverURL}${api}${docAccessURL}?${qs.stringify(params)}`, {
+          body: JSON.stringify({
+            ...data,
+            _status: 'published',
+          }),
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          method: 'post',
+        })
+        const json = await res.json()
+        const result = Boolean(json?.[operation]?.permission)
+        setHasPublishPermission(result)
+      } else {
+        setHasPublishPermission(true)
+      }
+    }
+
+    void fetchPublishAccess()
+  }, [api, code, collection, getData, global, id, serverURL])
+
   return (
     <RenderCustomComponent
       CustomComponent={CustomComponent}
@@ -58,6 +111,7 @@ export const Publish: React.FC<Props> = ({ CustomComponent }) => {
       componentProps={{
         id: 'action-save',
         DefaultButton: DefaultPublishButton,
+        canPublish: hasPublishPermission,
         disabled: !canPublish,
         label: t('publishChanges'),
         publish,

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

@@ -54,8 +54,9 @@ const SortColumn: React.FC<Props> = (props) => {
               direction: t('ascending'),
               label: getTranslation(label, i18n),
             })}
-            className={[ascClasses, `${baseClass}__button`].filter(Boolean).join(' ')}
+            className={[...ascClasses, `${baseClass}__button`].filter(Boolean).join(' ')}
             onClick={() => setSort(asc)}
+            type="button"
           >
             <Chevron direction="up" />
           </button>
@@ -64,8 +65,9 @@ const SortColumn: React.FC<Props> = (props) => {
               direction: t('descending'),
               label: getTranslation(label, i18n),
             })}
-            className={[descClasses, `${baseClass}__button`].filter(Boolean).join(' ')}
+            className={[...descClasses, `${baseClass}__button`].filter(Boolean).join(' ')}
             onClick={() => setSort(desc)}
+            type="button"
           >
             <Chevron />
           </button>

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

@@ -56,6 +56,8 @@
   }
 
   span {
+    display: flex;
+    align-items: center;
     max-width: base(8);
     text-overflow: ellipsis;
     overflow: hidden;

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

@@ -51,16 +51,25 @@ const StepNav: React.FC<{
           </Link>
           <span>/</span>
           {stepNav.map((item, i) => {
-            const StepLabel = <span key={i}>{getTranslation(item.label, i18n)}</span>
-            const Step =
-              stepNav.length === i + 1 ? (
-                StepLabel
-              ) : (
-                <Fragment key={i}>
-                  {item.url ? <Link to={item.url}>{StepLabel}</Link> : StepLabel}
-                  <span>/</span>
-                </Fragment>
-              )
+            const StepLabel = getTranslation(item.label, i18n)
+            const isLast = stepNav.length === i + 1
+
+            const Step = isLast ? (
+              <span className={`${baseClass}__last`} key={i}>
+                {StepLabel}
+              </span>
+            ) : (
+              <Fragment key={i}>
+                {item.url ? (
+                  <Link to={item.url}>
+                    <span key={i}>{StepLabel}</span>
+                  </Link>
+                ) : (
+                  <span key={i}>{StepLabel}</span>
+                )}
+                <span>/</span>
+              </Fragment>
+            )
 
             return Step
           })}

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

@@ -20,7 +20,6 @@
     content: ' ';
     display: block;
     position: absolute;
-    left: 50%;
     transform: translate3d(-50%, 100%, 0);
     width: 0;
     height: 0;
@@ -35,6 +34,24 @@
     cursor: default;
   }
 
+  &--caret-center {
+    &::after {
+      left: 50%;
+    }
+  }
+
+  &--caret-left {
+    &::after {
+      left: calc(var(--base) * 0.5);
+    }
+  }
+
+  &--caret-right {
+    &::after {
+      right: calc(var(--base) * 0.5);
+    }
+  }
+
   &--position-top {
     bottom: 100%;
     transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
@@ -55,6 +72,12 @@
     }
   }
 
+  .tooltip-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+
   @include mid-break {
     display: none;
   }

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

@@ -6,11 +6,20 @@ import useIntersect from '../../../hooks/useIntersect'
 import './index.scss'
 
 const Tooltip: React.FC<Props> = (props) => {
-  const { boundingRef, children, className, delay = 350, show: showFromProps = true } = props
+  const {
+    alignCaret = 'center',
+    boundingRef,
+    children,
+    className,
+    delay = 350,
+    show: showFromProps = true,
+  } = props
 
   const [show, setShow] = React.useState(showFromProps)
   const [position, setPosition] = React.useState<'bottom' | 'top'>('top')
 
+  const getTitleAttribute = (content) => (typeof content === 'string' ? content : '')
+
   const [ref, intersectionEntry] = useIntersect({
     root: boundingRef?.current || null,
     rootMargin: '-145px 0px 0px 100px',
@@ -42,18 +51,28 @@ const Tooltip: React.FC<Props> = (props) => {
     <React.Fragment>
       <aside
         aria-hidden="true"
-        className={['tooltip', className, 'tooltip--position-top'].filter(Boolean).join(' ')}
+        className={['tooltip', className, `tooltip--caret-${alignCaret}`, 'tooltip--position-top']
+          .filter(Boolean)
+          .join(' ')}
         ref={ref}
+        title={getTitleAttribute(children)}
       >
-        {children}
+        <div className="tooltip-content">{children}</div>
       </aside>
 
       <aside
-        className={['tooltip', className, show && 'tooltip--show', `tooltip--position-${position}`]
+        className={[
+          'tooltip',
+          className,
+          show && 'tooltip--show',
+          `tooltip--caret-${alignCaret}`,
+          `tooltip--position-${position}`,
+        ]
           .filter(Boolean)
           .join(' ')}
+        title={getTitleAttribute(children)}
       >
-        {children}
+        <div className="tooltip-content">{children}</div>
       </aside>
     </React.Fragment>
   )

packages/payload/src/admin/components/elements/Tooltip/types.ts

@@ -1,4 +1,5 @@
 export type Props = {
+  alignCaret?: 'center' | 'left' | 'right'
   boundingRef?: React.RefObject<HTMLElement>
   children: React.ReactNode
   className?: string