feat(richtext-lexical)!: remove LexicalBlock, RichTextFieldRequiredEditor and FieldWithRichTextRequiredEditor types (#6279)

BREAKING:

`LexicalBlock`, `RichTextFieldRequiredEditor` and `FieldWithRichTextRequiredEditor` types have been removed. Instead of `LexicalBlock`, use `Block`. Instead of `RichTextFieldRequiredEditor`, use `RichTextField`. And instead of `FieldWithRichTextRequiredEditor`, use `Field`.

.github/workflows/release-canary.yml

@@ -1,4 +1,4 @@
-name: pr-title
+name: release-canary
 
 on:
   workflow_dispatch:
@@ -8,4 +8,4 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Echo
-        run: echo "Register pr-title workflow"
+        run: echo "Register release-canary workflow"

.vscode/launch.json

@@ -19,6 +19,13 @@
         "PAYLOAD_PUBLIC_CLOUD_STORAGE_ADAPTER": "s3"
       }
     },
+    {
+      "command": "pnpm run dev collections-graphql",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev GraphQL",
+      "request": "launch",
+      "type": "node-terminal"
+    },
     {
       "command": "pnpm run dev fields",
       "cwd": "${workspaceFolder}",

CHANGELOG.md

@@ -1,3 +1,53 @@
+## [2.16.1](https://github.com/payloadcms/payload/compare/v2.16.0...v2.16.1) (2024-05-07)
+
+
+### Features
+
+* **richtext-lexical:** add maxDepth property to various lexical features ([#6250](https://github.com/payloadcms/payload/issues/6250)) ([857b9a4](https://github.com/payloadcms/payload/commit/857b9a4ac3236c740458750f156a3a4274eda210)), closes [#6242](https://github.com/payloadcms/payload/issues/6242)
+
+
+### Bug Fixes
+
+* **richtext-lexical:** export missing HorizontalRuleFeature ([#6236](https://github.com/payloadcms/payload/issues/6236)) ([f829b08](https://github.com/payloadcms/payload/commit/f829b084ba9649ef596cce4a7bf6ae8c7ccf57e3))
+
+## [2.16.0](https://github.com/payloadcms/payload/compare/v2.15.0...v2.16.0) (2024-05-06)
+
+
+### Features
+
+* adds disableListColumn, disableListFilter to fields admin props ([#6188](https://github.com/payloadcms/payload/issues/6188)) ([db4aace](https://github.com/payloadcms/payload/commit/db4aacebb801f1cc11ef8732f9f3b78475256641))
+
+
+### Bug Fixes
+
+* graphql upload relations returning null ([#6233](https://github.com/payloadcms/payload/issues/6233)) ([cac52da](https://github.com/payloadcms/payload/commit/cac52da638a0df4356120a2f61c6aaf25641a5ad))
+* hide drag handles when `admin.isSortable: false` ([#6225](https://github.com/payloadcms/payload/issues/6225)) ([622cdb0](https://github.com/payloadcms/payload/commit/622cdb044002b2c3182c3b0432b51befbfb9b979))
+* **plugin-form-builder:** hook overrides not working as intended ([#6203](https://github.com/payloadcms/payload/issues/6203)) ([b735d6a](https://github.com/payloadcms/payload/commit/b735d6aa169acca8cb638859d2c8ba43e315f02c))
+
+## [2.15.0](https://github.com/payloadcms/payload/compare/v2.14.2...v2.15.0) (2024-05-03)
+
+
+### Features
+
+* add isSortable to arrays and blocks ([#5962](https://github.com/payloadcms/payload/issues/5962)) ([5c58bd3](https://github.com/payloadcms/payload/commit/5c58bd322da966fe610959df13dfd49add35a2ef))
+* use filterOptions in list relationship filter ([#6156](https://github.com/payloadcms/payload/issues/6156)) ([23f3eb1](https://github.com/payloadcms/payload/commit/23f3eb1cf0b75a4044319d7cd3e5000d5b4e42c4))
+
+
+### Bug Fixes
+
+* bulk publish from collection list ([#6063](https://github.com/payloadcms/payload/issues/6063)) ([84570e6](https://github.com/payloadcms/payload/commit/84570e6e3bbb81fcae80da92b01bc56d09906072))
+* cascade draft arg in nested GraphQL relationship queries ([#6141](https://github.com/payloadcms/payload/issues/6141)) ([a8ac8b4](https://github.com/payloadcms/payload/commit/a8ac8b463349664f3188ae77217f037da72f796b))
+* GraphQL nested relationships not respecting req locale ([#6117](https://github.com/payloadcms/payload/issues/6117)) ([3fccd34](https://github.com/payloadcms/payload/commit/3fccd34abe5a332f88f5e950b755cd1d21441fb6))
+* hide unusable fields from collection filter select ([#6135](https://github.com/payloadcms/payload/issues/6135)) ([2be5ad0](https://github.com/payloadcms/payload/commit/2be5ad0ebafd1d3c1c0567e2085ccfd593f18271))
+* incorrect `localesNotSaved` translation ([#5996](https://github.com/payloadcms/payload/issues/5996)) ([af67749](https://github.com/payloadcms/payload/commit/af67749e49db92e675b63b52190e562468894706))
+* **plugin-cloud:** purge cache for all sizes ([#5301](https://github.com/payloadcms/payload/issues/5301)) ([831f1ff](https://github.com/payloadcms/payload/commit/831f1ff5bed7e083cc076e9eb5ff9a2b2f1ed710))
+* properly adds `readonly` styles to disabled `radio` fields ([#6176](https://github.com/payloadcms/payload/issues/6176)) ([9b7e62d](https://github.com/payloadcms/payload/commit/9b7e62dc20dca7402c6c68dfb8a5995c211993af))
+* resets filter state when param state change within route ([#6169](https://github.com/payloadcms/payload/issues/6169)) ([6e38cc2](https://github.com/payloadcms/payload/commit/6e38cc2bcfb08b608abcb6aac4b4c1f6eea63428))
+* **richtext-lexical:** drag and add block handles disappear too quickly for smaller screen sizes. ([#6145](https://github.com/payloadcms/payload/issues/6145)) ([24f6972](https://github.com/payloadcms/payload/commit/24f697219b5071d91a5c37aafb50e2d823b68d4c))
+* **richtext-lexical:** floating toolbar caret positioned incorrectly for some line heights ([#6151](https://github.com/payloadcms/payload/issues/6151)) ([36b1f5a](https://github.com/payloadcms/payload/commit/36b1f5a763f782c140e62aa062b4077d6efd0738))
+* sanitizes fields in default edit view for drawer content ([#6175](https://github.com/payloadcms/payload/issues/6175)) ([43dab5c](https://github.com/payloadcms/payload/commit/43dab5c7053831a0c71f3a6860113f653cab674f))
+* version restoration ([#6039](https://github.com/payloadcms/payload/issues/6039)) ([91bac9c](https://github.com/payloadcms/payload/commit/91bac9c0aa1ff3da052b9c2ad83fa5ac23a16d1d))
+
 ## [2.14.2](https://github.com/payloadcms/payload/compare/v2.14.1...v2.14.2) (2024-04-26)
 
 

docs/authentication/config.mdx

@@ -216,7 +216,7 @@ Example:
 {
   slug: 'customers',
   auth: {
-    forgotPassword: {
+    verify: {
       // highlight-start
       generateEmailSubject: ({ req, user }) => {
         return `Hey ${user.email}, reset your password!`;

docs/configuration/localization.mdx

@@ -49,7 +49,8 @@ export default buildConfig({
       {
         label: 'Arabic',
         code: 'ar',
-        // opt-in to setting default text-alignment on Input fields to rtl (right-to-left) when current locale is rtl
+        // opt-in to setting default text-alignment on Input fields to rtl (right-to-left)
+        // when current locale is rtl
         rtl: true,
       },
     ],
@@ -134,13 +135,9 @@ to support localization, you need to specify each field that you would like to l
 ```js
 {
   name: 'title',
-    type
-:
-  'text',
-    // highlight-start
-    localized
-:
-  true,
+  type: 'text',
+  // highlight-start
+  localized: true,
   // highlight-end
 }
 ```

docs/database/transactions.mdx

@@ -20,7 +20,8 @@ The initial request made to Payload will begin a new transaction and attach it t
 
 ```ts
 const afterChange: CollectionAfterChangeHook = async ({ req }) => {
-  // because req.transactionID is assigned from Payload and passed through, my-slug will only persist if the entire request is successful
+  // because req.transactionID is assigned from Payload and passed through,
+  // my-slug will only persist if the entire request is successful
   await req.payload.create({
     req,
     collection: 'my-slug',
@@ -60,10 +61,44 @@ const afterChange: CollectionAfterChangeHook = async ({ req }) => {
 
 ### Direct Transaction Access
 
-When writing your own scripts or custom endpoints, you may wish to have direct control over transactions. This is useful for interacting with your database outside of Payload's local API.
+When writing your own scripts or custom endpoints, you may wish to have direct control over transactions. This is useful for interacting with your database in something like a background job, outside the normal request-response flow.
 
 The following functions can be used for managing transactions:
 
-`payload.db.beginTransaction` - Starts a new session and returns a transaction ID for use in other Payload Local API calls.
-`payload.db.commitTransaction` - Takes the identifier for the transaction, finalizes any changes.
-`payload.db.rollbackTransaction` - Takes the identifier for the transaction, discards any changes.
+`payload.db.beginTransaction` - Starts a new session and returns a transaction ID for use in other Payload Local API calls. Note that if your database does not support transactions, this will return `null`.\
+`payload.db.commitTransaction` - Takes the identifier for the transaction, finalizes any changes.\
+`payload.db.rollbackTransaction` - Takes the identifier for the transaction, discards any changes.
+
+You can then use the transaction ID with Payload's local API by passing it inside the `PayloadRequest` object.
+
+Here is an example for a "background job" function, which utilizes the direct transaction API to make sure it either succeeds completely or gets rolled back in case of an error.
+
+```ts
+async function allOrNothingJob() {
+    const req = {} as PayloadRequest;
+    req.transactionID = await payload.db.beginTransaction();
+    try {
+      await payload.create({
+        req, // use our manual transaction
+        collection: 'my-slug',
+        data: {
+          some: 'data'
+        }
+      });
+
+      await payload.create({
+        req, // use our manual transaction
+        collection: 'something-else',
+        data: {
+          some: 'data'
+        }
+      });
+      console.log('Everything done.');
+      if (req.transactionID) await payload.db.commitTransaction(req.transactionID);
+    } catch (e) {
+      console.error('Oh no, something went wrong!');
+      if (req.transactionID) await payload.db.rollbackTransaction(req.transactionID);
+    }
+
+}
+```

docs/fields/array.mdx

@@ -59,6 +59,7 @@ properties:
 | Option                    | Description                                                                                                          |
 |---------------------------|----------------------------------------------------------------------------------------------------------------------|
 | **`initCollapsed`**       | Set the initial collapsed state                                                                                      |
+| **`isSortable`**          | Disable array order sorting by setting this value to `false`                                                               |
 | **`components.RowLabel`** | Function or React component to be rendered as the label on the array row. Receives `({ data, index, path })` as args |
 
 ### Example
@@ -67,6 +68,7 @@ properties:
 
 ```ts
 import { CollectionConfig } from 'payload/types'
+import { RowLabelArgs } from 'payload/dist/admin/components/forms/RowLabel/types'
 
 export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
@@ -101,7 +103,7 @@ export const ExampleCollection: CollectionConfig = {
       ],
       admin: {
         components: {
-          RowLabel: ({ data, index }) => {
+          RowLabel: ({ data, index }: RowLabelArgs) => {
             return data?.title || `Slide ${String(index).padStart(2, '0')}`
           },
         },

docs/fields/blocks.mdx

@@ -58,6 +58,7 @@ properties:
 | Option              | Description                     |
 |---------------------|---------------------------------|
 | **`initCollapsed`** | Set the initial collapsed state |
+| **`isSortable`** | Disable block order sorting by setting this value to `false` |
 
 ### Block configs
 

docs/fields/overview.mdx

@@ -163,19 +163,21 @@ Example:
 
 In addition to each field's base configuration, you can define specific traits and properties for fields that only have effect on how they are rendered in the Admin panel. The following properties are available for all fields within the `admin` property:
 
-| Option            | Description                                                                                                                                                                                                                      |
-| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `condition`       | You can programmatically show / hide fields based on what other fields are doing. [Click here](#conditional-logic) for more info.                                                                                                |
-| `components`      | All field components can be completely and easily swapped out for custom components that you define. [Click here](#custom-components) for more info.                                                                             |
-| `description`     | Helper text to display with the field to provide more information for the editor user. [Click here](#description) for more info.                                                                                                 |
-| `position`        | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`.                                                                                                                                        |
-| `width`           | Restrict the width of a field. you can pass any string-based value here, be it pixels, percentages, etc. This property is especially useful when fields are nested within a `Row` type where they can be organized horizontally. |
-| `style`           | Attach raw CSS style properties to the root DOM element of a field.                                                                                                                                                              |
-| `className`       | Attach a CSS class name to the root DOM element of a field.                                                                                                                                                                      |
-| `readOnly`        | Setting a field to `readOnly` has no effect on the API whatsoever but disables the admin component's editability to prevent editors from modifying the field's value.                                                            |
-| `disabled`        | If a field is `disabled`, it is completely omitted from the Admin panel.                                                                                                                                                         |
-| `disableBulkEdit` | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents.                                                                                                 |
-| `hidden`          | Setting a field's `hidden` property on its `admin` config will transform it into a `hidden` input type. Its value will still submit with the Admin panel's requests, but the field itself will not be visible to editors.        |
+| Option              | Description                                                                                                                                                                                                                      |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `condition`         | You can programmatically show / hide fields based on what other fields are doing. [Click here](#conditional-logic) for more info.                                                                                                |
+| `components`        | All field components can be completely and easily swapped out for custom components that you define. [Click here](#custom-components) for more info.                                                                             |
+| `description`       | Helper text to display with the field to provide more information for the editor user. [Click here](#description) for more info.                                                                                                 |
+| `position`          | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`.                                                                                                                                        |
+| `width`             | Restrict the width of a field. you can pass any string-based value here, be it pixels, percentages, etc. This property is especially useful when fields are nested within a `Row` type where they can be organized horizontally. |
+| `style`             | Attach raw CSS style properties to the root DOM element of a field.                                                                                                                                                              |
+| `className`         | Attach a CSS class name to the root DOM element of a field.                                                                                                                                                                      |
+| `readOnly`          | Setting a field to `readOnly` has no effect on the API whatsoever but disables the admin component's editability to prevent editors from modifying the field's value.                                                            |
+| `disabled`          | If a field is `disabled`, it is completely omitted from the Admin panel.                                                                                                                                                         |
+| `disableBulkEdit`   | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents.                                                                                                 |
+| `disableListColumn` | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector.                                                                                                                             |
+| `disableListFilter` | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options.                                                                                                                              |
+| `hidden`            | Setting a field's `hidden` property on its `admin` config will transform it into a `hidden` input type. Its value will still submit with the Admin panel's requests, but the field itself will not be visible to editors.        |
 
 ### Custom components
 

docs/hooks/overview.mdx

@@ -36,7 +36,7 @@ If your Hook simply performs a side-effect, such as updating a CRM, it might be
 
 #### Server-only execution
 
-Payload Hooks are only triggered on the server. You can safely [remove your hooks](/docs/admin/webpack#aliasing-server-only-modules) from your Admin panel's client-side code by customizing the Webpack config, which not only keeps your Admin bundles' filesize small but also ensures that any server-side only code does not cause problems within browser environments.
+Payload Hooks are only triggered on the server. You can safely [remove your hooks](/docs/admin/excluding-server-code#aliasing-server-only-modules) from your Admin panel's client-side code by customizing the Webpack config, which not only keeps your Admin bundles' filesize small but also ensures that any server-side only code does not cause problems within browser environments.
 
 ## Hook Types
 

docs/plugins/build-your-own.mdx

@@ -247,7 +247,7 @@ In the template, we have stubbed out a basic `onInitExtension` file that you can
 
 ### Webpack
 
-If any of your files use server only packages such as fs, stripe, nodemailer, etc, they will need to be removed from the browser bundle. To do that, you can [alias the file imports with webpack](https://payloadcms.com/docs/admin/webpack#aliasing-server-only-modules).
+If any of your files use server only packages such as fs, stripe, nodemailer, etc, they will need to be removed from the browser bundle. To do that, you can [alias the file imports with webpack](https://payloadcms.com/docs/admin/excluding-server-code#aliasing-server-only-modules).
 
 When files are bundled for the browser, the import paths are essentially crawled to determine what files to include in the bundle. To prevent the server only files from making it into the bundle, we can alias their import paths to a file that can be included in the browser. This will short-circuit the import path crawling and ensure browser only code is bundled.
 

docs/rich-text/lexical.mdx

@@ -203,7 +203,8 @@ const Pages: CollectionConfig = {
       editor: lexicalEditor({
         features: ({ defaultFeatures }) => [
           ...defaultFeatures,
-          // 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.
+          // 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({}),
         ],
       }),

docs/rich-text/slate.mdx

@@ -270,6 +270,10 @@ const serialize = (children) =>
         text = <em key={i}>{text}</em>;
       }
 
+      if (node.text === '') {
+        text = <br />;
+      }
+
       // Handle other leaf types here...
 
       return <Fragment key={i}>{text}</Fragment>;

packages/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload",
-  "version": "2.14.2",
+  "version": "2.16.1",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "MIT",
   "main": "./dist/index.js",

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

@@ -19,6 +19,7 @@ export const ArrayAction: React.FC<Props> = ({
   duplicateRow,
   hasMaxRows,
   index,
+  isSortable,
   moveRow,
   removeRow,
   rowCount,
@@ -33,7 +34,7 @@ export const ArrayAction: React.FC<Props> = ({
       render={({ close }) => {
         return (
           <PopupList.ButtonGroup buttonSize="small">
-            {index !== 0 && (
+            {isSortable && index !== 0 && (
               <PopupList.Button
                 className={`${baseClass}__action ${baseClass}__move-up`}
                 onClick={() => {
@@ -47,7 +48,7 @@ export const ArrayAction: React.FC<Props> = ({
                 {t('moveUp')}
               </PopupList.Button>
             )}
-            {index < rowCount - 1 && (
+            {isSortable && index < rowCount - 1 && (
               <PopupList.Button
                 className={`${baseClass}__action`}
                 onClick={() => {

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

@@ -3,6 +3,7 @@ export type Props = {
   duplicateRow: (current: number) => void
   hasMaxRows: boolean
   index: number
+  isSortable: boolean
   moveRow: (from: number, to: number) => void
   removeRow: (index: number) => void
   rowCount: number

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

@@ -15,7 +15,7 @@ import './index.scss'
 const baseClass = 'column-selector'
 
 const ColumnSelector: React.FC<Props> = (props) => {
-  const { collection } = props
+  const { slug } = props
 
   const { columns, moveColumn, toggleColumn } = useTableColumns()
 
@@ -53,7 +53,7 @@ const ColumnSelector: React.FC<Props> = (props) => {
             draggable
             icon={active ? <X /> : <Plus />}
             id={accessor}
-            key={`${collection.slug}-${col.name || i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}
+            key={`${slug}-${col.name || i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}
             onClick={() => {
               toggleColumn(accessor)
             }}

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

@@ -1,5 +1,5 @@
 import type { SanitizedCollectionConfig } from '../../../../collections/config/types'
 
 export type Props = {
-  collection: SanitizedCollectionConfig
+  slug: SanitizedCollectionConfig['slug']
 }

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

@@ -139,7 +139,7 @@ const Duplicate: React.FC<Props> = ({ id, slug, collection }) => {
       if (localeErrors.length > 0) {
         toast.error(
           `
-          ${t('error:localesNotSaved', { count: localeErrors.length })}
+          ${t('error:localesNotSaved_other', { count: localeErrors.length })}
           ${localeErrors.join(', ')}
           `,
           { autoClose: 5000 },

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

@@ -9,7 +9,6 @@ import { fieldAffectsData } from '../../../../fields/config/types'
 import { getTranslation } from '../../../../utilities/getTranslation'
 import Chevron from '../../icons/Chevron'
 import { useSearchParams } from '../../utilities/SearchParams'
-import Button from '../Button'
 import ColumnSelector from '../ColumnSelector'
 import DeleteMany from '../DeleteMany'
 import EditMany from '../EditMany'
@@ -50,6 +49,8 @@ export const ListControls: React.FC<Props> = (props) => {
   const params = useSearchParams()
   const shouldInitializeWhereOpened = validateWhereQuery(params?.where)
 
+  const hasWhereParam = React.useRef(Boolean(params?.where))
+
   const [textFieldsToBeSearched, setFieldsToBeSearched] = useState(
     getTextFieldsToBeSearched(listSearchableFields, fields),
   )
@@ -65,6 +66,15 @@ export const ListControls: React.FC<Props> = (props) => {
     setFieldsToBeSearched(getTextFieldsToBeSearched(listSearchableFields, fields))
   }, [listSearchableFields, fields])
 
+  React.useEffect(() => {
+    if (hasWhereParam.current && !params?.where) {
+      setVisibleDrawer(undefined)
+      hasWhereParam.current = false
+    } else if (params?.where) {
+      hasWhereParam.current = true
+    }
+  }, [setVisibleDrawer, params?.where])
+
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__wrap`}>
@@ -136,7 +146,7 @@ export const ListControls: React.FC<Props> = (props) => {
           height={visibleDrawer === 'columns' ? 'auto' : 0}
           id={`${baseClass}-columns`}
         >
-          <ColumnSelector collection={collection} />
+          <ColumnSelector slug={collection.slug} />
         </AnimateHeight>
       )}
       <AnimateHeight
@@ -147,6 +157,7 @@ export const ListControls: React.FC<Props> = (props) => {
         <WhereBuilder
           collection={collection}
           handleChange={handleWhereChange}
+          key={String(hasWhereParam.current && !params?.where)}
           modifySearchQuery={modifySearchQuery}
         />
       </AnimateHeight>

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

@@ -18,7 +18,7 @@ import './index.scss'
 const baseClass = 'publish-many'
 
 const PublishMany: React.FC<Props> = (props) => {
-  const { collection: { labels: { plural }, slug, versions } = {}, resetParams } = props
+  const { collection: { slug, labels: { plural }, versions } = {}, resetParams } = props
 
   const {
     routes: { api },
@@ -27,7 +27,7 @@ const PublishMany: React.FC<Props> = (props) => {
   const { permissions } = useAuth()
   const { toggleModal } = useModal()
   const { i18n, t } = useTranslation('version')
-  const { count, getQueryParams, selectAll } = useSelection()
+  const { getQueryParams, selectAll } = useSelection()
   const [submitted, setSubmitted] = useState(false)
 
   const collectionPermissions = permissions?.collections?.[slug]
@@ -41,9 +41,11 @@ const PublishMany: React.FC<Props> = (props) => {
 
   const handlePublish = useCallback(() => {
     setSubmitted(true)
-    requests
+    void requests
       .patch(
-        `${serverURL}${api}/${slug}${getQueryParams({ _status: { not_equals: 'published' } })}`,
+        `${serverURL}${api}/${slug}${getQueryParams({
+          _status: { not_equals: 'published' },
+        })}&draft=true`,
         {
           body: JSON.stringify({
             _status: 'published',

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

@@ -33,6 +33,13 @@ export const TableColumnContext = createContext<ITableColumns>({} as ITableColum
 
 export const useTableColumns = (): ITableColumns => useContext(TableColumnContext)
 
+const filterTableFields = (fields: Field[]): Field[] => {
+  return fields.reduce((acc, field) => {
+    if (!field.admin?.disableListColumn) acc.push(field)
+    return acc
+  }, [])
+}
+
 export const TableColumnsProvider: React.FC<{
   cellProps?: Partial<CellProps>[]
   children: React.ReactNode
@@ -50,9 +57,10 @@ export const TableColumnsProvider: React.FC<{
   const hasInitialized = useRef(false)
   const { getPreference, setPreference } = usePreferences()
   const [formattedFields] = useState<Field[]>(() => formatFields(collection))
+  const filteredFields = filterTableFields(formattedFields)
 
   const [tableColumns, dispatchTableColumns] = useReducer(columnReducer, {}, () => {
-    const initialColumns = getInitialColumnState(formattedFields, useAsTitle, defaultColumns)
+    const initialColumns = getInitialColumnState(filteredFields, useAsTitle, defaultColumns)
 
     return buildColumns({
       cellProps,
@@ -77,13 +85,14 @@ export const TableColumnsProvider: React.FC<{
 
         const currentPreferences = await getPreference<ListPreferences>(preferenceKey)
         prevCollection.current = collection.slug
-        const initialColumns = getInitialColumnState(formattedFields, useAsTitle, defaultColumns)
+        const initialColumns = getInitialColumnState(filteredFields, useAsTitle, defaultColumns)
         const newCols = currentPreferences?.columns || initialColumns
 
         dispatchTableColumns({
+          type: 'set',
           payload: {
             cellProps,
-            collection: { ...collection, fields: formatFields(collection) },
+            collection: { ...collection, fields: filteredFields },
             columns: newCols.map((column) => {
               // 'string' is for backwards compatibility
               // the preference used to be stored as an array of strings
@@ -96,14 +105,13 @@ export const TableColumnsProvider: React.FC<{
               return column
             }),
           },
-          type: 'set',
         })
 
         hasInitialized.current = true
       }
     }
 
-    sync()
+    void sync()
   }, [
     preferenceKey,
     setPreference,
@@ -113,7 +121,7 @@ export const TableColumnsProvider: React.FC<{
     defaultColumns,
     collection,
     cellProps,
-    formattedFields,
+    filteredFields,
   ])
 
   // /////////////////////////////////////
@@ -133,6 +141,7 @@ export const TableColumnsProvider: React.FC<{
   const setActiveColumns = useCallback(
     (columns: string[]) => {
       dispatchTableColumns({
+        type: 'set',
         payload: {
           // onSelect,
           cellProps,
@@ -142,7 +151,6 @@ export const TableColumnsProvider: React.FC<{
             active: true,
           })),
         },
-        type: 'set',
       })
     },
     [collection, cellProps],
@@ -153,13 +161,13 @@ export const TableColumnsProvider: React.FC<{
       const { fromIndex, toIndex } = args
 
       dispatchTableColumns({
+        type: 'move',
         payload: {
           cellProps,
           collection: { ...collection, fields: formatFields(collection) },
           fromIndex,
           toIndex,
         },
-        type: 'move',
       })
     },
     [collection, cellProps],
@@ -168,12 +176,12 @@ export const TableColumnsProvider: React.FC<{
   const toggleColumn = useCallback(
     (column: string) => {
       dispatchTableColumns({
+        type: 'toggle',
         payload: {
           cellProps,
           collection: { ...collection, fields: formatFields(collection) },
           column,
         },
-        type: 'toggle',
       })
     },
     [collection, cellProps],

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

@@ -1,3 +1,6 @@
+import type { Where } from 'payload/types'
+
+import qs from 'qs'
 import React, { useCallback, useEffect, useReducer, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -6,6 +9,7 @@ import type { Option } from '../../../ReactSelect/types'
 import type { GetResults, Props, ValueWithRelation } from './types'
 
 import useDebounce from '../../../../../hooks/useDebounce'
+import { useAuth } from '../../../../utilities/Auth'
 import { useConfig } from '../../../../utilities/Config'
 import ReactSelect from '../../../ReactSelect'
 import './index.scss'
@@ -16,7 +20,15 @@ const baseClass = 'condition-value-relationship'
 const maxResultsPerRequest = 10
 
 const RelationshipField: React.FC<Props> = (props) => {
-  const { admin: { isSortable } = {}, disabled, hasMany, onChange, relationTo, value } = props
+  const {
+    admin: { isSortable } = {},
+    disabled,
+    filterOptions,
+    hasMany,
+    onChange,
+    relationTo,
+    value,
+  } = props
 
   const {
     collections,
@@ -33,11 +45,12 @@ const RelationshipField: React.FC<Props> = (props) => {
   const [hasLoadedFirstOptions, setHasLoadedFirstOptions] = useState(false)
   const debouncedSearch = useDebounce(search, 300)
   const { i18n, t } = useTranslation('general')
+  const { user } = useAuth()
 
   const addOptions = useCallback(
     (data, relation) => {
       const collection = collections.find((coll) => coll.slug === relation)
-      dispatchOptions({ collection, data, hasMultipleRelations, i18n, relation, type: 'ADD' })
+      dispatchOptions({ type: 'ADD', collection, data, hasMultipleRelations, i18n, relation })
     },
     [collections, hasMultipleRelations, i18n],
   )
@@ -61,23 +74,66 @@ const RelationshipField: React.FC<Props> = (props) => {
       let resultsFetched = 0
 
       if (!errorLoading) {
-        relationsToFetch.reduce(async (priorRelation, relation) => {
+        void relationsToFetch.reduce(async (priorRelation, relation) => {
           await priorRelation
-
           if (resultsFetched < 10) {
+            const search: Record<string, unknown> & { where: Where } = {
+              depth: 0,
+              limit: maxResultsPerRequest,
+              page: lastLoadedPageToUse,
+              where: { and: [] },
+            }
             const collection = collections.find((coll) => coll.slug === relation)
             const fieldToSearch = collection?.admin?.useAsTitle || 'id'
-            const searchParam = searchArg ? `&where[${fieldToSearch}][like]=${searchArg}` : ''
-
-            const response = await fetch(
-              `${serverURL}${api}/${relation}?limit=${maxResultsPerRequest}&page=${lastLoadedPageToUse}&depth=0${searchParam}`,
-              {
-                credentials: 'include',
-                headers: {
-                  'Accept-Language': i18n.language,
+            // add search arg to where object
+            if (searchArg) {
+              search.where.and.push({
+                [fieldToSearch]: {
+                  like: searchArg,
                 },
+              })
+            }
+            // call the filterOptions function if it exists passing in the collection
+            if (filterOptions) {
+              const optionFilter =
+                typeof filterOptions === 'function'
+                  ? await filterOptions({
+                      // data and siblingData are empty since we cannot fetch with the values covering the
+                      // entire list this limitation means that filterOptions functions using a document's
+                      //  data are unsupported in the whereBuilder
+                      id: undefined,
+                      data: {},
+                      relationTo: collection.slug,
+                      siblingData: {},
+                      user,
+                    })
+                  : filterOptions
+              if (typeof optionFilter === 'object') {
+                search.where.and.push(optionFilter)
+              }
+              if (optionFilter === false) {
+                // no options will be returned
+                setLastFullyLoadedRelation(relations.indexOf(relation))
+
+                // If there are more relations to search, need to reset lastLoadedPage to 1
+                // both locally within function and state
+                if (relations.indexOf(relation) + 1 < relations.length) {
+                  lastLoadedPageToUse = 1
+                }
+                return
+              }
+            }
+
+            if (search.where.and.length === 0) {
+              delete search.where
+            }
+
+            const response = await fetch(`${serverURL}${api}/${relation}?${qs.stringify(search)}`, {
+              credentials: 'include',
+              headers: {
+                'Accept-Language': i18n.language,
               },
-            )
+            })
 
             if (response.ok) {
               const data: PaginatedDocs = await response.json()
@@ -103,7 +159,18 @@ const RelationshipField: React.FC<Props> = (props) => {
         }, Promise.resolve())
       }
     },
-    [i18n, relationTo, errorLoading, collections, serverURL, api, addOptions, t],
+    [
+      relationTo,
+      errorLoading,
+      collections,
+      filterOptions,
+      serverURL,
+      api,
+      i18n.language,
+      user,
+      addOptions,
+      t,
+    ],
   )
 
   const findOptionsByValue = useCallback((): Option | Option[] => {

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

@@ -52,9 +52,9 @@ const Condition: React.FC<Props> = (props) => {
 
   useEffect(() => {
     dispatch({
+      type: 'update',
       andIndex,
       orIndex,
-      type: 'update',
       value: debouncedValue || '',
     })
   }, [debouncedValue, dispatch, orIndex, andIndex])
@@ -80,10 +80,10 @@ const Condition: React.FC<Props> = (props) => {
               isClearable={false}
               onChange={(field) => {
                 dispatch({
-                  andIndex: andIndex,
-                  field: field?.value,
-                  orIndex: orIndex,
                   type: 'update',
+                  andIndex,
+                  field: field?.value,
+                  orIndex,
                 })
               }}
               options={fields}
@@ -96,10 +96,10 @@ const Condition: React.FC<Props> = (props) => {
               isClearable={false}
               onChange={(operator) => {
                 dispatch({
+                  type: 'update',
                   andIndex,
                   operator: operator.value,
                   orIndex,
-                  type: 'update',
                 })
                 setInternalOperatorField(operator.value)
               }}
@@ -134,9 +134,9 @@ const Condition: React.FC<Props> = (props) => {
             iconStyle="with-border"
             onClick={() =>
               dispatch({
+                type: 'remove',
                 andIndex,
                 orIndex,
-                type: 'remove',
               })
             }
             round
@@ -148,11 +148,11 @@ const Condition: React.FC<Props> = (props) => {
             iconStyle="with-border"
             onClick={() =>
               dispatch({
+                type: 'add',
                 andIndex: andIndex + 1,
                 field: fields[0].value,
                 orIndex,
                 relation: 'and',
-                type: 'add',
               })
             }
             round

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

@@ -32,34 +32,38 @@ const reduceFields = (fields, i18n) =>
       } else {
         operators = fieldTypes[field.type].operators
       }
-    }
 
-    const operatorKeys = new Set()
-    const filteredOperators = operators.reduce((acc, operator) => {
-      if (!operatorKeys.has(operator.value)) {
-        operatorKeys.add(operator.value)
-        return [
-          ...acc,
-          {
-            ...operator,
-            label: i18n.t(`operators:${operator.label}`),
-          },
-        ]
+      const operatorKeys = new Set()
+      const filteredOperators = operators.reduce((acc, operator) => {
+        if (!operatorKeys.has(operator.value)) {
+          operatorKeys.add(operator.value)
+          return [
+            ...acc,
+            {
+              ...operator,
+              label: i18n.t(`operators:${operator.label}`),
+            },
+          ]
+        }
+        return acc
+      }, [])
+
+      const formattedField = {
+        label: getTranslation(field.label || field.name, i18n),
+        value: field.name,
+        ...fieldTypes[field.type],
+        operators: filteredOperators,
+        props: {
+          ...field,
+        },
       }
-      return acc
-    }, [])
 
-    const formattedField = {
-      label: getTranslation(field.label || field.name, i18n),
-      value: field.name,
-      ...fieldTypes[field.type],
-      operators: filteredOperators,
-      props: {
-        ...field,
-      },
+      if (field.admin?.disableListFilter) return reduced
+
+      return [...reduced, formattedField]
     }
 
-    return [...reduced, formattedField]
+    return reduced
   }, [])
 
 /**

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

@@ -26,6 +26,7 @@ type ArrayRowProps = UseDraggableSortableReturn &
     duplicateRow: (rowIndex: number) => void
     forceRender?: boolean
     hasMaxRows?: boolean
+    isSortable: boolean
     moveRow: (fromIndex: number, toIndex: number) => void
     readOnly?: boolean
     removeRow: (rowIndex: number) => void
@@ -44,6 +45,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
   forceRender = false,
   hasMaxRows,
   indexPath,
+  isSortable,
   labels,
   listeners,
   moveRow,
@@ -94,6 +96,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
               duplicateRow={duplicateRow}
               hasMaxRows={hasMaxRows}
               index={rowIndex}
+              isSortable={isSortable}
               moveRow={moveRow}
               removeRow={removeRow}
               rowCount={rowCount}
@@ -103,11 +106,15 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
         className={classNames}
         collapsed={row.collapsed}
         collapsibleStyle={fieldHasErrors ? 'error' : 'default'}
-        dragHandleProps={{
-          id: row.id,
-          attributes,
-          listeners,
-        }}
+        dragHandleProps={
+          isSortable
+            ? {
+                id: row.id,
+                attributes,
+                listeners,
+              }
+            : undefined
+        }
         header={
           <div className={`${baseClass}__row-header`}>
             <RowLabel

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

@@ -29,7 +29,7 @@ const baseClass = 'array-field'
 const ArrayFieldType: React.FC<Props> = (props) => {
   const {
     name,
-    admin: { className, components, condition, description, readOnly },
+    admin: { className, components, condition, description, isSortable = true, readOnly },
     fieldTypes,
     fields,
     forceRender = false,
@@ -113,7 +113,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
 
   const duplicateRow = useCallback(
     (rowIndex: number) => {
-      dispatchFields({ path, rowIndex, type: 'DUPLICATE_ROW' })
+      dispatchFields({ type: 'DUPLICATE_ROW', path, rowIndex })
       setModified(true)
 
       setTimeout(() => {
@@ -133,7 +133,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
 
   const moveRow = useCallback(
     (moveFromIndex: number, moveToIndex: number) => {
-      dispatchFields({ moveFromIndex, moveToIndex, path, type: 'MOVE_ROW' })
+      dispatchFields({ type: 'MOVE_ROW', moveFromIndex, moveToIndex, path })
       setModified(true)
     },
     [dispatchFields, path, setModified],
@@ -141,14 +141,14 @@ const ArrayFieldType: React.FC<Props> = (props) => {
 
   const toggleCollapseAll = useCallback(
     (collapsed: boolean) => {
-      dispatchFields({ collapsed, path, setDocFieldPreferences, type: 'SET_ALL_ROWS_COLLAPSED' })
+      dispatchFields({ type: 'SET_ALL_ROWS_COLLAPSED', collapsed, path, setDocFieldPreferences })
     },
     [dispatchFields, path, setDocFieldPreferences],
   )
 
   const setCollapse = useCallback(
     (rowID: string, collapsed: boolean) => {
-      dispatchFields({ collapsed, path, rowID, setDocFieldPreferences, type: 'SET_ROW_COLLAPSED' })
+      dispatchFields({ type: 'SET_ROW_COLLAPSED', collapsed, path, rowID, setDocFieldPreferences })
     },
     [dispatchFields, path, setDocFieldPreferences],
   )
@@ -227,7 +227,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
           onDragEnd={({ moveFromIndex, moveToIndex }) => moveRow(moveFromIndex, moveToIndex)}
         >
           {rows.map((row, i) => (
-            <DraggableSortableItem disabled={readOnly} id={row.id} key={row.id}>
+            <DraggableSortableItem disabled={readOnly || !isSortable} id={row.id} key={row.id}>
               {(draggableSortableItemProps) => (
                 <ArrayRow
                   {...draggableSortableItemProps}
@@ -239,6 +239,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
                   forceRender={forceRender}
                   hasMaxRows={hasMaxRows}
                   indexPath={indexPath}
+                  isSortable={isSortable}
                   labels={labels}
                   moveRow={moveRow}
                   path={path}

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

@@ -26,6 +26,7 @@ type BlockFieldProps = UseDraggableSortableReturn &
     duplicateRow: (rowIndex: number) => void
     forceRender?: boolean
     hasMaxRows?: boolean
+    isSortable?: boolean
     moveRow: (fromIndex: number, toIndex: number) => void
     readOnly: boolean
     removeRow: (rowIndex: number) => void
@@ -44,6 +45,7 @@ export const BlockRow: React.FC<BlockFieldProps> = ({
   forceRender,
   hasMaxRows,
   indexPath,
+  isSortable,
   labels,
   listeners,
   moveRow,
@@ -90,6 +92,7 @@ export const BlockRow: React.FC<BlockFieldProps> = ({
               blocks={blocks}
               duplicateRow={duplicateRow}
               hasMaxRows={hasMaxRows}
+              isSortable={isSortable}
               labels={labels}
               moveRow={moveRow}
               removeRow={removeRow}
@@ -101,11 +104,15 @@ export const BlockRow: React.FC<BlockFieldProps> = ({
         className={classNames}
         collapsed={row.collapsed}
         collapsibleStyle={fieldHasErrors ? 'error' : 'default'}
-        dragHandleProps={{
-          id: row.id,
-          attributes,
-          listeners,
-        }}
+        dragHandleProps={
+          isSortable
+            ? {
+                id: row.id,
+                attributes,
+                listeners,
+              }
+            : undefined
+        }
         header={
           <div className={`${baseClass}__block-header`}>
             <span className={`${baseClass}__block-number`}>

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

@@ -13,6 +13,7 @@ export const RowActions: React.FC<{
   blocks: Block[]
   duplicateRow: (rowIndex: number, blockType: string) => void
   hasMaxRows?: boolean
+  isSortable?: boolean
   labels: Labels
   moveRow: (fromIndex: number, toIndex: number) => void
   removeRow: (rowIndex: number) => void
@@ -25,6 +26,7 @@ export const RowActions: React.FC<{
     blocks,
     duplicateRow,
     hasMaxRows,
+    isSortable,
     labels,
     moveRow,
     removeRow,
@@ -59,6 +61,7 @@ export const RowActions: React.FC<{
         duplicateRow={() => duplicateRow(rowIndex, blockType)}
         hasMaxRows={hasMaxRows}
         index={rowIndex}
+        isSortable={isSortable}
         moveRow={moveRow}
         removeRow={removeRow}
         rowCount={rowCount}

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

@@ -34,7 +34,7 @@ const BlocksField: React.FC<Props> = (props) => {
 
   const {
     name,
-    admin: { className, condition, description, readOnly },
+    admin: { className, condition, description, isSortable = true, readOnly },
     blocks,
     fieldTypes,
     forceRender = false,
@@ -230,7 +230,7 @@ const BlocksField: React.FC<Props> = (props) => {
 
             if (blockToRender) {
               return (
-                <DraggableSortableItem disabled={readOnly} id={row.id} key={row.id}>
+                <DraggableSortableItem disabled={readOnly || !isSortable} id={row.id} key={row.id}>
                   {(draggableSortableItemProps) => (
                     <BlockRow
                       {...draggableSortableItemProps}
@@ -242,6 +242,7 @@ const BlocksField: React.FC<Props> = (props) => {
                       forceRender={forceRender}
                       hasMaxRows={hasMaxRows}
                       indexPath={indexPath}
+                      isSortable={isSortable}
                       labels={labels}
                       moveRow={moveRow}
                       path={path}

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

@@ -98,6 +98,7 @@ const RadioGroupInput: React.FC<RadioGroupInputProps> = (props) => {
                 onChange={readOnly ? undefined : onChange}
                 option={optionIsObject(option) ? option : { label: option, value: option }}
                 path={path}
+                readOnly={readOnly}
               />
             </li>
           )

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

@@ -70,31 +70,3 @@
     }
   }
 }
-
-.radio-group--read-only {
-  .radio-input {
-    cursor: default;
-
-    &__label {
-      color: var(--theme-elevation-800);
-    }
-
-    &--is-selected {
-      .radio-input__styled-radio {
-        &:before {
-          background-color: var(--theme-elevation-800);
-        }
-      }
-    }
-
-    &:not(.radio-input--is-selected) {
-      &:hover {
-        .radio-input__styled-radio {
-          &:before {
-            opacity: 0;
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -9,7 +9,7 @@ import './index.scss'
 const baseClass = 'radio-input'
 
 const RadioInput: React.FC<Props> = (props) => {
-  const { isSelected, onChange, option, path } = props
+  const { isSelected, onChange, option, path, readOnly } = props
   const { i18n } = useTranslation()
 
   const classes = [baseClass, isSelected && `${baseClass}--is-selected`].filter(Boolean).join(' ')
@@ -21,6 +21,7 @@ const RadioInput: React.FC<Props> = (props) => {
       <div className={classes}>
         <input
           checked={isSelected}
+          disabled={readOnly}
           id={id}
           onChange={() => (typeof onChange === 'function' ? onChange(option.value) : null)}
           type="radio"

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

@@ -8,4 +8,5 @@ export type Props = {
     value: string
   }
   path: string
+  readOnly?: boolean
 }

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

@@ -29,6 +29,34 @@
   }
 }
 
+.radio-group--read-only {
+  .radio-input {
+    cursor: default;
+
+    &__label {
+      color: var(--theme-elevation-400);
+    }
+
+    &--is-selected {
+      .radio-input__styled-radio {
+        &:before {
+          background-color: var(--theme-elevation-100);
+        }
+      }
+    }
+
+    &:not(.radio-input--is-selected) {
+      &:hover {
+        .radio-input__styled-radio {
+          &:before {
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
 html[data-theme='light'] {
   .radio-group {
     &.error {

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

@@ -55,6 +55,7 @@ const RadioGroup: React.FC<Props> = (props) => {
       onChange={readOnly ? undefined : setValue}
       options={options}
       path={path}
+      readOnly={readOnly}
       required={required}
       showError={showError}
       style={style}

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

@@ -51,6 +51,7 @@ type RichTextAdapterBase<
     context: RequestContext
     currentDepth?: number
     depth: number
+    draft: boolean
     field: RichTextField<Value, AdapterProps, ExtraFieldProperties>
     findMany: boolean
     flattenLocales: boolean

packages/payload/src/admin/components/views/Version/Restore/index.tsx

@@ -66,7 +66,9 @@ const Restore: React.FC<Props> = ({
     if (res.status === 200) {
       const json = await res.json()
       toast.success(json.message)
-      history.push(redirectURL)
+      history.push(redirectURL, {
+        refetchDocumentData: true,
+      })
     } else {
       toast.error(t('problemRestoringVersion'))
     }

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { FieldTypes } from '../../../../forms/field-types'
@@ -12,6 +12,7 @@ import Meta from '../../../../utilities/Meta'
 import Auth from '../Auth'
 import { SetStepNav } from '../SetStepNav'
 import { Upload } from '../Upload'
+import formatFields from '../formatFields'
 import './index.scss'
 
 const baseClass = 'collection-default-edit'
@@ -37,7 +38,9 @@ export const DefaultCollectionEdit: React.FC<
     permissions,
   } = props
 
-  const { auth, fields, upload } = collection
+  const { auth, upload } = collection
+
+  const [fields] = useState(() => formatFields(collection, isEditing))
 
   const operation = isEditing ? 'update' : 'create'
 

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

@@ -50,7 +50,8 @@ const EditView: React.FC<IndexProps> = (props) => {
   } = config
 
   const { params: { id } = {} } = useRouteMatch<Record<string, string>>()
-  const history = useHistory()
+  const history = useHistory<{ refetchDocumentData?: boolean }>()
+
   const [internalState, setInternalState] = useState<Fields>()
   const [updatedAt, setUpdatedAt] = useState<string>()
   const { permissions, user } = useAuth()
@@ -58,7 +59,7 @@ const EditView: React.FC<IndexProps> = (props) => {
   const { docPermissions, getDocPermissions, getDocPreferences, getVersions } = useDocumentInfo()
   const { t } = useTranslation('general')
 
-  const [{ data, isError, isLoading: isLoadingData }] = usePayloadAPI(
+  const [{ data, isError, isLoading: isLoadingData }, { refetchData }] = usePayloadAPI(
     isEditing ? `${serverURL}${api}/${collectionSlug}/${id}` : '',
     { initialData: null, initialParams: { depth: 0, draft: 'true', 'fallback-locale': 'null' } },
   )
@@ -128,10 +129,16 @@ const EditView: React.FC<IndexProps> = (props) => {
   useEffect(() => {
     setFormQueryParams((params) => ({
       ...params,
-      locale: locale,
+      locale,
     }))
   }, [locale])
 
+  useEffect(() => {
+    if (history.location.state?.refetchDocumentData) {
+      void refetchData()
+    }
+  }, [history.location.state?.refetchDocumentData, refetchData])
+
   if (isError) {
     return <NotFound marginTop="large" />
   }

packages/payload/src/admin/components/views/collections/List/formatFields.tsx

@@ -9,11 +9,11 @@ const formatFields = (config: SanitizedCollectionConfig): Field[] => {
 
   const defaultIDField: Field = {
     name: 'id',
+    type: 'text',
     admin: {
       disableBulkEdit: true,
     },
     label: 'ID',
-    type: 'text',
   }
 
   const shouldSkipField = (field: Field): boolean =>

packages/payload/src/admin/components/views/collections/List/index.tsx

@@ -47,13 +47,13 @@ const ListView: React.FC<ListIndexProps> = (props) => {
   const {
     collection,
     collection: {
+      slug,
       admin: {
         components: { views: { List: CustomList } = {} } = {},
         listSearchableFields,
         pagination: { defaultLimit },
       },
       labels: { plural },
-      slug,
     },
   } = props
 

packages/payload/src/admin/hooks/usePayloadAPI.tsx

@@ -1,5 +1,5 @@
 import queryString from 'qs'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { requests } from '../api'
@@ -12,6 +12,7 @@ type Result = [
     isLoading: boolean
   },
   {
+    refetchData: (abortController?: AbortController) => Promise<void>
     setParams: React.Dispatch<unknown>
   },
 ]
@@ -43,49 +44,53 @@ const usePayloadAPI: UsePayloadAPI = (url, options = {}) => {
     },
   )
 
+  const fetchData = useCallback(
+    async (abortController?: AbortController) => {
+      if (url) {
+        setIsError(false)
+        setIsLoading(true)
+        try {
+          const response = await requests.get(`${url}${search}`, {
+            headers: {
+              'Accept-Language': i18n.language,
+            },
+            signal: abortController ? abortController.signal : undefined,
+          })
+
+          if (response.status > 201) {
+            setIsError(true)
+          }
+
+          const json = await response.json()
+          setData(json)
+          setIsLoading(false)
+        } catch (error) {
+          if (!abortController || !abortController.signal.aborted) {
+            setIsError(true)
+            setIsLoading(false)
+          }
+        }
+      } else {
+        setIsError(false)
+        setIsLoading(false)
+      }
+    },
+    [url, search, i18n.language],
+  )
+
   useEffect(() => {
     const abortController = new AbortController()
-
-    const fetchData = async () => {
-      setIsError(false)
-      setIsLoading(true)
-
-      try {
-        const response = await requests.get(`${url}${search}`, {
-          headers: {
-            'Accept-Language': i18n.language,
-          },
-          signal: abortController.signal,
-        })
-
-        if (response.status > 201) {
-          setIsError(true)
-        }
-
-        const json = await response.json()
-        setData(json)
-        setIsLoading(false)
-      } catch (error) {
-        if (!abortController.signal.aborted) {
-          setIsError(true)
-          setIsLoading(false)
-        }
-      }
-    }
-
-    if (url) {
-      fetchData()
-    } else {
-      setIsError(false)
-      setIsLoading(false)
-    }
+    void fetchData(abortController)
 
     return () => {
       abortController.abort()
     }
-  }, [url, locale, search, i18n.language])
+  }, [url, search, fetchData])
 
-  return [{ data, isError, isLoading }, { setParams }]
+  return [
+    { data, isError, isLoading },
+    { refetchData: fetchData, setParams },
+  ]
 }
 
 export default usePayloadAPI

packages/payload/src/auth/operations/login.ts

@@ -205,6 +205,7 @@ async function login<TSlug extends keyof GeneratedTypes['collections']>(
       context: req.context,
       depth,
       doc: user,
+      draft: undefined,
       fallbackLocale,
       global: null,
       locale,

packages/payload/src/collections/dataloader.ts

@@ -54,6 +54,7 @@ const batchAndLoadDocs =
         fallbackLocale,
         overrideAccess,
         showHiddenFields,
+        draft,
       ] = JSON.parse(key)
 
       const batchKeyArray = [
@@ -65,6 +66,7 @@ const batchAndLoadDocs =
         fallbackLocale,
         overrideAccess,
         showHiddenFields,
+        draft,
       ]
 
       const batchKey = JSON.stringify(batchKeyArray)
@@ -100,6 +102,7 @@ const batchAndLoadDocs =
         fallbackLocale,
         overrideAccess,
         showHiddenFields,
+        draft,
       ] = JSON.parse(batchKey)
 
       req.transactionID = transactionID
@@ -109,6 +112,7 @@ const batchAndLoadDocs =
         currentDepth,
         depth,
         disableErrors: true,
+        draft,
         fallbackLocale,
         locale,
         overrideAccess: Boolean(overrideAccess),
@@ -136,6 +140,7 @@ const batchAndLoadDocs =
           fallbackLocale,
           overrideAccess,
           showHiddenFields,
+          draft,
         ])
         const docsIndex = keys.findIndex((key) => key === docKey)
 

packages/payload/src/collections/graphql/init.ts

@@ -54,6 +54,8 @@ function initCollectionsGraphQL(payload: Payload): void {
 
     if (!graphQL) return
 
+    const draftsEnabled = collection.config.versions?.drafts
+
     let singularName
     let pluralName
     const fromSlug = formatNames(collection.config.slug)
@@ -150,7 +152,11 @@ function initCollectionsGraphQL(payload: Payload): void {
       type: collection.graphQL.type,
       args: {
         id: { type: new GraphQLNonNull(idType) },
-        draft: { type: GraphQLBoolean },
+        ...(draftsEnabled
+          ? {
+              draft: { type: GraphQLBoolean },
+            }
+          : {}),
         ...(payload.config.localization
           ? {
               fallbackLocale: { type: payload.types.fallbackLocaleInputType },
@@ -164,7 +170,11 @@ function initCollectionsGraphQL(payload: Payload): void {
     payload.Query.fields[pluralName] = {
       type: buildPaginatedListType(pluralName, collection.graphQL.type),
       args: {
-        draft: { type: GraphQLBoolean },
+        ...(draftsEnabled
+          ? {
+              draft: { type: GraphQLBoolean },
+            }
+          : {}),
         where: { type: collection.graphQL.whereInputType },
         ...(payload.config.localization
           ? {
@@ -187,7 +197,11 @@ function initCollectionsGraphQL(payload: Payload): void {
         },
       }),
       args: {
-        draft: { type: GraphQLBoolean },
+        ...(draftsEnabled
+          ? {
+              draft: { type: GraphQLBoolean },
+            }
+          : {}),
         where: { type: collection.graphQL.whereInputType },
         ...(payload.config.localization
           ? {
@@ -217,7 +231,11 @@ function initCollectionsGraphQL(payload: Payload): void {
         ...(createMutationInputType
           ? { data: { type: collection.graphQL.mutationInputType } }
           : {}),
-        draft: { type: GraphQLBoolean },
+        ...(draftsEnabled
+          ? {
+              draft: { type: GraphQLBoolean },
+            }
+          : {}),
         ...(payload.config.localization
           ? {
               locale: { type: payload.types.localeInputType },
@@ -235,7 +253,11 @@ function initCollectionsGraphQL(payload: Payload): void {
         ...(updateMutationInputType
           ? { data: { type: collection.graphQL.updateMutationInputType } }
           : {}),
-        draft: { type: GraphQLBoolean },
+        ...(draftsEnabled
+          ? {
+              draft: { type: GraphQLBoolean },
+            }
+          : {}),
         ...(payload.config.localization
           ? {
               locale: { type: payload.types.localeInputType },

packages/payload/src/collections/graphql/resolvers/count.ts

@@ -28,6 +28,8 @@ export default function findResolver(collection: Collection): Resolver {
     req.locale = args.locale || locale
     req.fallbackLocale = fallbackLocale
 
+    context.req = req
+
     const options = {
       collection,
       req: isolateObjectProperty<PayloadRequest>(req, 'transactionID'),

packages/payload/src/collections/graphql/resolvers/create.ts

@@ -33,6 +33,17 @@ export default function createResolver<TSlug extends keyof GeneratedTypes['colle
     const locale = req.locale
     req = isolateObjectProperty(req, 'locale')
     req.locale = args.locale || locale
+    if (!req.query) req.query = {}
+
+    const draft: boolean =
+      args.draft ?? req.query?.draft === 'false'
+        ? false
+        : req.query?.draft === 'true'
+        ? true
+        : undefined
+    if (typeof draft === 'boolean') req.query.draft = String(draft)
+
+    context.req = req
 
     const options = {
       collection,

packages/payload/src/collections/graphql/resolvers/delete.ts

@@ -31,6 +31,17 @@ export default function getDeleteResolver<TSlug extends keyof GeneratedTypes['co
     req = isolateObjectProperty(req, 'fallbackLocale')
     req.locale = args.locale || locale
     req.fallbackLocale = args.fallbackLocale || fallbackLocale
+    if (!req.query) req.query = {}
+
+    const draft: boolean =
+      args.draft ?? req.query?.draft === 'false'
+        ? false
+        : req.query?.draft === 'true'
+        ? true
+        : undefined
+    if (typeof draft === 'boolean') req.query.draft = String(draft)
+
+    context.req = req
 
     const options = {
       id: args.id,

packages/payload/src/collections/graphql/resolvers/find.ts

@@ -35,6 +35,17 @@ export default function findResolver(collection: Collection): Resolver {
     req = isolateObjectProperty(req, 'fallbackLocale')
     req.locale = args.locale || locale
     req.fallbackLocale = args.fallbackLocale || fallbackLocale
+    if (!req.query) req.query = {}
+
+    const draft: boolean =
+      args.draft ?? req.query?.draft === 'false'
+        ? false
+        : req.query?.draft === 'true'
+        ? true
+        : undefined
+    if (typeof draft === 'boolean') req.query.draft = String(draft)
+
+    context.req = req
 
     const options = {
       collection,

packages/payload/src/collections/graphql/resolvers/findByID.ts

@@ -30,6 +30,17 @@ export default function findByIDResolver<T extends keyof GeneratedTypes['collect
     req = isolateObjectProperty(req, 'fallbackLocale')
     req.locale = args.locale || locale
     req.fallbackLocale = args.fallbackLocale || fallbackLocale
+    if (!req.query) req.query = {}
+
+    const draft: boolean =
+      args.draft ?? req.query?.draft === 'false'
+        ? false
+        : req.query?.draft === 'true'
+        ? true
+        : undefined
+    if (typeof draft === 'boolean') req.query.draft = String(draft)
+
+    context.req = req
 
     const options = {
       id: args.id,

packages/payload/src/collections/graphql/resolvers/findVersionByID.ts

@@ -11,7 +11,6 @@ import findVersionByID from '../../operations/findVersionByID'
 export type Resolver<T extends TypeWithID = any> = (
   _: unknown,
   args: {
-    draft: boolean
     fallbackLocale?: string
     id: number | string
     locale?: string
@@ -32,11 +31,12 @@ export default function findVersionByIDResolver(collection: Collection): Resolve
     req.locale = args.locale || locale
     req.fallbackLocale = args.fallbackLocale || fallbackLocale
 
+    context.req = req
+
     const options = {
       id: args.id,
       collection,
       depth: 0,
-      draft: args.draft,
       req: isolateObjectProperty<PayloadRequest>(req, 'transactionID'),
     }
 

packages/payload/src/collections/graphql/resolvers/findVersions.ts

@@ -35,6 +35,17 @@ export default function findVersionsResolver(collection: Collection): Resolver {
     req = isolateObjectProperty(req, 'fallbackLocale')
     req.locale = args.locale || locale
     req.fallbackLocale = args.fallbackLocale || fallbackLocale
+    if (!req.query) req.query = {}
+
+    const draft: boolean =
+      args.draft ?? req.query?.draft === 'false'
+        ? false
+        : req.query?.draft === 'true'
+        ? true
+        : undefined
+    if (typeof draft === 'boolean') req.query.draft = String(draft)
+
+    context.req = req
 
     const options = {
       collection,

packages/payload/src/collections/graphql/resolvers/update.ts

@@ -34,6 +34,17 @@ export default function updateResolver<TSlug extends keyof GeneratedTypes['colle
     req = isolateObjectProperty(req, 'fallbackLocale')
     req.locale = args.locale || locale
     req.fallbackLocale = args.fallbackLocale || fallbackLocale
+    if (!req.query) req.query = {}
+
+    const draft: boolean =
+      args.draft ?? req.query?.draft === 'false'
+        ? false
+        : req.query?.draft === 'true'
+        ? true
+        : undefined
+    if (typeof draft === 'boolean') req.query.draft = String(draft)
+
+    context.req = req
 
     const options = {
       id: args.id,

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

@@ -290,6 +290,7 @@ async function create<TSlug extends keyof GeneratedTypes['collections']>(
       context: req.context,
       depth,
       doc: result,
+      draft,
       fallbackLocale,
       global: null,
       locale,

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

@@ -179,6 +179,7 @@ async function deleteOperation<TSlug extends keyof GeneratedTypes['collections']
           context: req.context,
           depth,
           doc: result || doc,
+          draft: undefined,
           fallbackLocale,
           global: null,
           locale,

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

@@ -158,6 +158,7 @@ async function deleteByID<TSlug extends keyof GeneratedTypes['collections']>(
       context: req.context,
       depth,
       doc: result,
+      draft: undefined,
       fallbackLocale,
       global: null,
       locale,

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

@@ -196,6 +196,7 @@ async function find<T extends TypeWithID & Record<string, unknown>>(
             currentDepth,
             depth,
             doc,
+            draft: draftsEnabled,
             fallbackLocale,
             findMany: true,
             global: null,

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

@@ -139,6 +139,7 @@ async function findByID<T extends TypeWithID>(incomingArgs: Arguments): Promise<
       currentDepth,
       depth,
       doc: result,
+      draft: draftEnabled,
       fallbackLocale,
       global: null,
       locale,

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

@@ -112,6 +112,7 @@ async function findVersionByID<T extends TypeWithID = any>(
       currentDepth,
       depth,
       doc: result.version,
+      draft: undefined,
       fallbackLocale,
       global: null,
       locale,

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

@@ -125,6 +125,7 @@ async function findVersions<T extends TypeWithVersion<T>>(
             context: req.context,
             depth,
             doc: data.version,
+            draft: undefined,
             fallbackLocale,
             findMany: true,
             global: null,

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

@@ -140,6 +140,7 @@ async function restoreVersion<T extends TypeWithID = any>(args: Arguments): Prom
       context: req.context,
       depth,
       doc: result,
+      draft: undefined,
       fallbackLocale,
       global: null,
       locale,

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

@@ -177,6 +177,7 @@ async function update<TSlug extends keyof GeneratedTypes['collections']>(
           context: req.context,
           depth: 0,
           doc,
+          draft: draftArg,
           fallbackLocale,
           global: null,
           locale,
@@ -312,6 +313,7 @@ async function update<TSlug extends keyof GeneratedTypes['collections']>(
           context: req.context,
           depth,
           doc: result,
+          draft: draftArg,
           fallbackLocale: null,
           global: null,
           locale,

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

@@ -131,6 +131,7 @@ async function updateByID<TSlug extends keyof GeneratedTypes['collections']>(
       context: req.context,
       depth: 0,
       doc: docWithLocales,
+      draft: draftArg,
       fallbackLocale: null,
       global: null,
       locale,
@@ -300,6 +301,7 @@ async function updateByID<TSlug extends keyof GeneratedTypes['collections']>(
       context: req.context,
       depth,
       doc: result,
+      draft: draftArg,
       fallbackLocale,
       global: null,
       locale,

packages/payload/src/exports/types.ts

@@ -68,7 +68,6 @@ export type {
   FieldWithMany,
   FieldWithMaxDepth,
   FieldWithPath,
-  FieldWithRichTextRequiredEditor,
   FieldWithSubFields,
   FilterOptions,
   FilterOptionsProps,
@@ -87,7 +86,6 @@ export type {
   RelationshipField,
   RelationshipValue,
   RichTextField,
-  RichTextFieldRequiredEditor,
   RowAdmin,
   RowField,
   SelectField,

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

@@ -19,6 +19,8 @@ export const baseAdminFields = joi.object().keys({
     .alternatives()
     .try(joi.string(), joi.object().pattern(joi.string(), [joi.string()]), componentSchema),
   disableBulkEdit: joi.boolean().default(false),
+  disableListColumn: joi.boolean().default(false),
+  disableListFilter: joi.boolean().default(false),
   disabled: joi.boolean().default(false),
   hidden: joi.boolean().default(false),
   initCollapsed: joi.boolean().default(false),
@@ -311,6 +313,7 @@ export const array = baseField.keys({
           RowLabel: componentSchema,
         })
         .default({}),
+      isSortable: joi.boolean(),
     })
     .default({}),
   dbName: joi.alternatives().try(joi.string(), joi.func()),
@@ -408,6 +411,11 @@ export const relationship = baseField.keys({
 export const blocks = baseField.keys({
   name: joi.string().required(),
   type: joi.string().valid('blocks').required(),
+  admin: baseAdminFields
+    .keys({
+      isSortable: joi.boolean(),
+    })
+    .default({}),
   blocks: joi
     .array()
     .items(
@@ -469,6 +477,7 @@ export const richText = baseField.keys({
       validate: joi.func().required(),
     })
     .unknown(),
+  maxDepth: joi.number(),
 })
 
 export const date = baseField.keys({

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

@@ -113,6 +113,8 @@ type Admin = {
   condition?: Condition
   description?: Description
   disableBulkEdit?: boolean
+  disableListColumn?: boolean
+  disableListFilter?: boolean
   disabled?: boolean
   hidden?: boolean
   position?: 'sidebar'
@@ -387,6 +389,8 @@ export type UIField = {
     }
     condition?: Condition
     disableBulkEdit?: boolean
+    disableListColumn?: boolean
+    disableListFilter?: boolean
     position?: string
     width?: string
   }
@@ -547,23 +551,23 @@ export type RichTextField<
     }
   }
   editor?: RichTextAdapter<Value, AdapterProps, AdapterProps>
+  /**
+   * Sets a maximum population depth for this field, regardless of the remaining depth when this field is reached.
+   */
+  maxDepth?: number
   type: 'richText'
 } & ExtraProperties
 
-export type RichTextFieldRequiredEditor<
-  Value extends object = any,
-  AdapterProps = any,
-  ExtraProperties = object,
-> = Omit<RichTextField<Value, AdapterProps, ExtraProperties>, 'editor'> & {
-  editor: RichTextAdapter<Value, AdapterProps, ExtraProperties>
-}
-
 export type ArrayField = FieldBase & {
   admin?: Admin & {
     components?: {
       RowLabel?: RowLabel
     } & Admin['components']
     initCollapsed?: boolean | false
+    /**
+     * Disable drag and drop sorting
+     */
+    isSortable?: boolean
   }
   /**
    * Customize the SQL table name
@@ -631,6 +635,10 @@ export type Block = {
 export type BlockField = FieldBase & {
   admin?: Admin & {
     initCollapsed?: boolean | false
+    /**
+     * Disable drag and drop sorting
+     */
+    isSortable?: boolean
   }
   blocks: Block[]
   defaultValue?: unknown
@@ -667,10 +675,6 @@ export type Field =
   | UIField
   | UploadField
 
-export type FieldWithRichTextRequiredEditor =
-  | Exclude<Field, RichTextField>
-  | RichTextFieldRequiredEditor
-
 export type FieldAffectingData =
   | ArrayField
   | BlockField

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

@@ -11,6 +11,7 @@ type Args = {
   currentDepth?: number
   depth: number
   doc: Record<string, unknown>
+  draft: boolean
   fallbackLocale: null | string
   findMany?: boolean
   flattenLocales?: boolean
@@ -28,6 +29,7 @@ export async function afterRead<T = any>(args: Args): Promise<T> {
     currentDepth: incomingCurrentDepth,
     depth: incomingDepth,
     doc: incomingDoc,
+    draft,
     fallbackLocale,
     findMany,
     flattenLocales = true,
@@ -56,6 +58,7 @@ export async function afterRead<T = any>(args: Args): Promise<T> {
     currentDepth,
     depth,
     doc,
+    draft,
     fallbackLocale,
     fieldPromises,
     fields: collection?.fields || global?.fields,

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

@@ -16,6 +16,7 @@ type Args = {
   currentDepth: number
   depth: number
   doc: Record<string, unknown>
+  draft: boolean
   fallbackLocale: null | string
   field: Field | TabAsField
   fieldPromises: Promise<void>[]
@@ -46,6 +47,7 @@ export const promise = async ({
   currentDepth,
   depth,
   doc,
+  draft,
   fallbackLocale,
   field,
   fieldPromises,
@@ -141,10 +143,14 @@ export const promise = async ({
       const editor: RichTextAdapter = field?.editor
       // This is run here AND in the GraphQL Resolver
       if (editor?.populationPromise) {
+        const populateDepth =
+          field?.maxDepth !== undefined && field?.maxDepth < depth ? field?.maxDepth : depth
+
         const populationPromise = editor.populationPromise({
           context,
           currentDepth,
-          depth,
+          depth: populateDepth,
+          draft,
           field,
           findMany,
           flattenLocales,
@@ -287,6 +293,7 @@ export const promise = async ({
         relationshipPopulationPromise({
           currentDepth,
           depth,
+          draft,
           fallbackLocale,
           field,
           locale,
@@ -310,6 +317,7 @@ export const promise = async ({
         currentDepth,
         depth,
         doc,
+        draft,
         fallbackLocale,
         fieldPromises,
         fields: field.fields,
@@ -340,6 +348,7 @@ export const promise = async ({
             currentDepth,
             depth,
             doc,
+            draft,
             fallbackLocale,
             fieldPromises,
             fields: field.fields,
@@ -366,6 +375,7 @@ export const promise = async ({
                 currentDepth,
                 depth,
                 doc,
+                draft,
                 fallbackLocale,
                 fieldPromises,
                 fields: field.fields,
@@ -404,6 +414,7 @@ export const promise = async ({
               currentDepth,
               depth,
               doc,
+              draft,
               fallbackLocale,
               fieldPromises,
               fields: block.fields,
@@ -434,6 +445,7 @@ export const promise = async ({
                   currentDepth,
                   depth,
                   doc,
+                  draft,
                   fallbackLocale,
                   fieldPromises,
                   fields: block.fields,
@@ -468,6 +480,7 @@ export const promise = async ({
         currentDepth,
         depth,
         doc,
+        draft,
         fallbackLocale,
         fieldPromises,
         fields: field.fields,
@@ -500,6 +513,7 @@ export const promise = async ({
         currentDepth,
         depth,
         doc,
+        draft,
         fallbackLocale,
         fieldPromises,
         fields: field.fields,
@@ -526,6 +540,7 @@ export const promise = async ({
         currentDepth,
         depth,
         doc,
+        draft,
         fallbackLocale,
         fieldPromises,
         fields: field.tabs.map((tab) => ({ ...tab, type: 'tab' })),

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

@@ -8,6 +8,7 @@ type PopulateArgs = {
   data: Record<string, unknown>
   dataReference: Record<string, any>
   depth: number
+  draft: boolean
   fallbackLocale: null | string
   field: RelationshipField | UploadField
   index?: number
@@ -23,6 +24,7 @@ const populate = async ({
   data,
   dataReference,
   depth,
+  draft = false,
   fallbackLocale,
   field,
   index,
@@ -62,6 +64,7 @@ const populate = async ({
           fallbackLocale,
           overrideAccess,
           showHiddenFields,
+          draft,
         ]),
       )
     }
@@ -94,6 +97,7 @@ const populate = async ({
 type PromiseArgs = {
   currentDepth: number
   depth: number
+  draft: boolean
   fallbackLocale: null | string
   field: RelationshipField | UploadField
   locale: null | string
@@ -106,6 +110,7 @@ type PromiseArgs = {
 const relationshipPopulationPromise = async ({
   currentDepth,
   depth,
+  draft,
   fallbackLocale,
   field,
   locale,
@@ -133,6 +138,7 @@ const relationshipPopulationPromise = async ({
                 data: siblingDoc[field.name][key][index],
                 dataReference: resultingDoc,
                 depth: populateDepth,
+                draft,
                 fallbackLocale,
                 field,
                 index,
@@ -156,6 +162,7 @@ const relationshipPopulationPromise = async ({
               data: relatedDoc,
               dataReference: resultingDoc,
               depth: populateDepth,
+              draft,
               fallbackLocale,
               field,
               index,
@@ -182,6 +189,7 @@ const relationshipPopulationPromise = async ({
           data: siblingDoc[field.name][key],
           dataReference: resultingDoc,
           depth: populateDepth,
+          draft,
           fallbackLocale,
           field,
           key,
@@ -201,6 +209,7 @@ const relationshipPopulationPromise = async ({
       data: siblingDoc[field.name],
       dataReference: resultingDoc,
       depth: populateDepth,
+      draft,
       fallbackLocale,
       field,
       locale,

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

@@ -11,6 +11,7 @@ type Args = {
   currentDepth: number
   depth: number
   doc: Record<string, unknown>
+  draft: boolean
   fallbackLocale: null | string
   fieldPromises: Promise<void>[]
   fields: (Field | TabAsField)[]
@@ -33,6 +34,7 @@ export const traverseFields = ({
   currentDepth,
   depth,
   doc,
+  draft,
   fallbackLocale,
   fieldPromises,
   fields,
@@ -56,6 +58,7 @@ export const traverseFields = ({
         currentDepth,
         depth,
         doc,
+        draft,
         fallbackLocale,
         field,
         fieldPromises,

packages/payload/src/globals/operations/findOne.ts

@@ -100,6 +100,7 @@ async function findOne<T extends Record<string, unknown>>(args: Args): Promise<T
       context: req.context,
       depth,
       doc,
+      draft: draftEnabled,
       fallbackLocale,
       global: globalConfig,
       locale,

packages/payload/src/globals/operations/findVersionByID.ts

@@ -108,6 +108,7 @@ async function findVersionByID<T extends TypeWithVersion<T> = any>(args: Argumen
       currentDepth,
       depth,
       doc: result.version,
+      draft: undefined,
       fallbackLocale,
       global: globalConfig,
       locale,

packages/payload/src/globals/operations/findVersions.ts

@@ -97,6 +97,7 @@ async function findVersions<T extends TypeWithVersion<T>>(
               // Patch globalType onto version doc
               globalType: globalConfig.slug,
             },
+            draft: undefined,
             fallbackLocale,
             findMany: true,
             global: globalConfig,

packages/payload/src/globals/operations/restoreVersion.ts

@@ -105,6 +105,7 @@ async function restoreVersion<T extends TypeWithVersion<T> = any>(args: Argument
       context: req.context,
       depth,
       doc: result,
+      draft: undefined,
       fallbackLocale,
       global: globalConfig,
       locale,

packages/payload/src/globals/operations/update.ts

@@ -97,6 +97,7 @@ async function update<TSlug extends keyof GeneratedTypes['globals']>(
       context: req.context,
       depth: 0,
       doc: globalJSON,
+      draft: draftArg,
       fallbackLocale,
       global: globalConfig,
       locale,
@@ -220,6 +221,7 @@ async function update<TSlug extends keyof GeneratedTypes['globals']>(
       context: req.context,
       depth,
       doc: result,
+      draft: draftArg,
       fallbackLocale: null,
       global: globalConfig,
       locale,

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

@@ -312,6 +312,7 @@ function buildObjectType({
       type = type || newlyCreatedBlockType
 
       const relationshipArgs: {
+        draft?: unknown
         fallbackLocale?: unknown
         limit?: unknown
         locale?: unknown
@@ -319,6 +320,16 @@ function buildObjectType({
         where?: unknown
       } = {}
 
+      const relationsUseDrafts = (Array.isArray(relationTo) ? relationTo : [relationTo]).some(
+        (relation) => payload.collections[relation].config.versions?.drafts,
+      )
+
+      if (relationsUseDrafts) {
+        relationshipArgs.draft = {
+          type: GraphQLBoolean,
+        }
+      }
+
       if (payload.config.localization) {
         relationshipArgs.locale = {
           type: payload.types.localeInputType,
@@ -330,6 +341,11 @@ function buildObjectType({
       }
 
       const relationship = {
+        type: withNullableType(
+          field,
+          hasManyValues ? new GraphQLList(new GraphQLNonNull(type)) : type,
+          forceNullable,
+        ),
         args: relationshipArgs,
         extensions: { complexity: 10 },
         async resolve(parent, args, context) {
@@ -337,6 +353,7 @@ function buildObjectType({
           const locale = args.locale || context.req.locale
           const fallbackLocale = args.fallbackLocale || context.req.fallbackLocale
           let relatedCollectionSlug = field.relationTo
+          const draft = args.draft ?? context.req.query?.draft
 
           if (hasManyValues) {
             const results = []
@@ -362,6 +379,7 @@ function buildObjectType({
                   fallbackLocale,
                   false,
                   false,
+                  draft,
                 ]),
               )
 
@@ -408,6 +426,7 @@ function buildObjectType({
                 fallbackLocale,
                 false,
                 false,
+                draft,
               ]),
             )
 
@@ -430,11 +449,6 @@ function buildObjectType({
 
           return null
         },
-        type: withNullableType(
-          field,
-          hasManyValues ? new GraphQLList(new GraphQLNonNull(type)) : type,
-          forceNullable,
-        ),
       }
 
       return {
@@ -445,6 +459,7 @@ function buildObjectType({
     richText: (objectTypeConfig: ObjectTypeConfig, field: RichTextField) => ({
       ...objectTypeConfig,
       [field.name]: {
+        type: withNullableType(field, GraphQLJSON, forceNullable),
         args: {
           depth: {
             type: GraphQLInt,
@@ -461,9 +476,13 @@ function buildObjectType({
           // In the graphql find.ts resolver, the depth is then hard-coded to 0.
           // Effectively, this means that the populationPromise for GraphQL is only run here, and not in the find.ts resolver / normal population promise.
           if (editor?.populationPromise) {
+            const populateDepth =
+              field?.maxDepth !== undefined && field?.maxDepth < depth ? field?.maxDepth : depth
+
             await editor?.populationPromise({
               context,
-              depth,
+              depth: populateDepth,
+              draft: args.draft,
               field,
               findMany: false,
               flattenLocales: false,
@@ -477,7 +496,6 @@ function buildObjectType({
 
           return parent[field.name]
         },
-        type: withNullableType(field, GraphQLJSON, forceNullable),
       },
     }),
     row: (objectTypeConfig: ObjectTypeConfig, field: RowField) =>
@@ -586,6 +604,7 @@ function buildObjectType({
       const relatedCollectionSlug = field.relationTo
 
       const upload = {
+        type,
         args: uploadArgs,
         extensions: { complexity: 20 },
         async resolve(parent, args, context) {
@@ -593,6 +612,7 @@ function buildObjectType({
           const locale = args.locale || context.req.locale
           const fallbackLocale = args.fallbackLocale || context.req.fallbackLocale
           const id = value
+          const draft = args.draft ?? context.req.query?.draft
 
           if (id) {
             const relatedDocument = await context.req.payloadDataLoader.load(
@@ -606,6 +626,7 @@ function buildObjectType({
                 fallbackLocale,
                 false,
                 false,
+                Boolean(draft),
               ]),
             )
 
@@ -614,7 +635,6 @@ function buildObjectType({
 
           return null
         },
-        type,
       }
 
       const whereFields = payload.collections[relationTo].config.fields

packages/payload/src/translations/cs.json

@@ -5,7 +5,7 @@
     "accountOfCurrentUser": "Účet současného uživatele",
     "alreadyActivated": "Již aktivováno",
     "alreadyLoggedIn": "Již přihlášen",
-    "apiKey": "Klíč API",
+    "apiKey": "API klíč",
     "backToLogin": "Zpět na přihlášení",
     "beginCreateFirstUser": "Začněte vytvořením svého prvního uživatele.",
     "changePassword": "Změnit heslo",
@@ -15,15 +15,15 @@
     "createFirstUser": "Vytvořit prvního uživatele",
     "emailNotValid": "Zadaný email není platný",
     "emailSent": "Email odeslán",
-    "enableAPIKey": "Povolit klíč API",
+    "enableAPIKey": "Povolit API klíč",
     "failedToUnlock": "Nepodařilo se odemknout",
     "forceUnlock": "Vynutit odemčení",
     "forgotPassword": "Zapomněli jste heslo?",
     "forgotPasswordEmailInstructions": "Zadejte svůj email níže. Obdržíte email s instrukcemi, jak resetovat vaše heslo.",
     "forgotPasswordQuestion": "Zapomněli jste heslo?",
     "generate": "Generovat",
-    "generateNewAPIKey": "Generovat nový klíč API",
-    "generatingNewAPIKeyWillInvalidate": "Vytvoření nového klíče API <1>zneplatní</1> předchozí klíč. Opravdu chcete pokračovat?",
+    "generateNewAPIKey": "Generovat nový API klíč",
+    "generatingNewAPIKeyWillInvalidate": "Vytvoření nového API klíče <1>zneplatní</1> předchozí klíč. Opravdu chcete pokračovat?",
     "lockUntil": "Uzamknout do",
     "logBackIn": "Znovu se přihlásit",
     "logOut": "Odhlásit se",
@@ -37,7 +37,7 @@
     "loginWithAnotherUser": "Abyste se mohli přihlásit s jiným uživatelem, nejdříve se <0>odhlaste</0>.",
     "logout": "Odhlásit se",
     "logoutUser": "Odhlásit uživatele",
-    "newAPIKeyGenerated": "Byl vygenerován nový klíč API.",
+    "newAPIKeyGenerated": "Byl vygenerován nový API klíč.",
     "newAccountCreated": "Pro přístup k <a href=\"{{serverURL}}\">{{serverURL}}</a> byl pro vás vytvořen nový účet. Klepněte na následující odkaz nebo zkopírujte URL do svého prohlížeče pro ověření vašeho emailu: <a href=\"{{verificationURL}}\">{{verificationURL}}</a><br> Po ověření vašeho emailu se budete moci úspěšně přihlásit.",
     "newPassword": "Nové heslo",
     "resetPassword": "Resetovat heslo",
@@ -96,7 +96,7 @@
   },
   "fields": {
     "addLabel": "Přidat {{label}}",
-    "addLink": "Přidat Odkaz",
+    "addLink": "Přidat odkaz",
     "addNew": "Přidat nový",
     "addNewLabel": "Přidat nový {{label}}",
     "addRelationship": "Přidat vztah",
@@ -147,10 +147,10 @@
     "addBelow": "Přidat pod",
     "addFilter": "Přidat filtr",
     "adminTheme": "Motiv administračního rozhraní",
-    "and": "A",
+    "and": "a",
     "applyChanges": "Použít změny",
     "ascending": "Vzestupně",
-    "automatic": "Automatické",
+    "automatic": "Automatický",
     "backToDashboard": "Zpět na nástěnku",
     "cancel": "Zrušit",
     "changesNotSaved": "Vaše změny nebyly uloženy. Pokud teď odejdete, ztratíte své změny.",
@@ -171,7 +171,7 @@
     "createdAt": "Vytvořeno v",
     "creating": "Vytváření",
     "creatingNewLabel": "Vytváření nového {{label}}",
-    "dark": "Tmavé",
+    "dark": "Tmavý",
     "dashboard": "Nástěnka",
     "delete": "Odstranit",
     "deletedCountSuccessfully": "Úspěšně smazáno {{count}} {{label}}.",
@@ -185,7 +185,7 @@
     "duplicateWithoutSaving": "Duplikovat bez uložení změn",
     "edit": "Upravit",
     "editLabel": "Upravit {{label}}",
-    "editing": "Úpravy",
+    "editing": "Úprava",
     "editingLabel_many": "Úprava {{count}} {{label}}",
     "editingLabel_one": "Úprava {{count}} {{label}}",
     "editingLabel_other": "Úprava {{count}} {{label}}",
@@ -203,7 +203,7 @@
     "lastModified": "Naposledy změněno",
     "leaveAnyway": "Přesto odejít",
     "leaveWithoutSaving": "Odejít bez uložení",
-    "light": "Světlé",
+    "light": "Světlý",
     "livePreview": "Náhled",
     "loading": "Načítání",
     "locale": "Místní verze",
@@ -226,7 +226,7 @@
     "order": "Pořadí",
     "pageNotFound": "Stránka nenalezena",
     "password": "Heslo",
-    "payloadSettings": "Nastavení datového záběru",
+    "payloadSettings": "Nastavení Payload",
     "perPage": "Na stránku: {{limit}}",
     "remove": "Odstranit",
     "reset": "Resetovat",
@@ -274,19 +274,19 @@
     "isLessThanOrEqualTo": "je menší nebo rovno",
     "isLike": "je jako",
     "isNotEqualTo": "není rovno",
-    "isNotIn": "není in",
+    "isNotIn": "není v",
     "near": "blízko"
   },
   "upload": {
-    "crop": "Plodina",
-    "cropToolDescription": "Přetáhněte rohy vybrané oblasti, nakreslete novou oblast nebo upravte hodnoty níže.",
+    "crop": "Ořez",
+    "cropToolDescription": "Přetáhněte rohy vybrané oblasti, nakreslete novou oblast nebo upravte níže uvedené hodnoty.",
     "dragAndDrop": "Přetáhněte soubor",
     "dragAndDropHere": "nebo sem přetáhněte soubor",
     "editImage": "Upravit obrázek",
     "fileName": "Název souboru",
     "fileSize": "Velikost souboru",
     "focalPoint": "Středobod",
-    "focalPointDescription": "Přetáhněte bod zaměření přímo na náhled nebo upravte hodnoty níže.",
+    "focalPointDescription": "Přetáhněte bod zaměření přímo na náhled nebo upravte níže uvedené hodnoty.",
     "height": "Výška",
     "lessInfo": "Méně informací",
     "moreInfo": "Více informací",
@@ -294,7 +294,7 @@
     "selectCollectionToBrowse": "Vyberte kolekci pro procházení",
     "selectFile": "Vyberte soubor",
     "setCropArea": "Nastavit oblast ořezu",
-    "setFocalPoint": "Nastavit ohnisko",
+    "setFocalPoint": "Nastavit středobod",
     "sizes": "Velikosti",
     "sizesFor": "Velikosti pro {{label}}",
     "width": "Šířka"

packages/payload/src/versions/baseFields.ts

@@ -18,6 +18,7 @@ export const statuses = [
 const baseVersionFields: Field[] = [
   {
     name: '_status',
+    type: 'select',
     admin: {
       components: {
         Field: () => null,
@@ -25,9 +26,9 @@ const baseVersionFields: Field[] = [
       disableBulkEdit: true,
     },
     defaultValue: 'draft',
+    index: true,
     label: labels['version:status'],
     options: statuses,
-    type: 'select',
   },
 ]
 

packages/plugin-cloud-storage/README.md

@@ -188,7 +188,7 @@ If this does not apply to you (your upload collection has `read: () => true` or
 
 ## Local development
 
-For instructions regarding how to develop with this plugin locally, [click here](https://github.com/payloadcms/plugin-cloud-storage/blob/master/docs/local-dev.md).
+For instructions regarding how to develop with this plugin locally, [click here](https://github.com/payloadcms/payload/blob/main/packages/plugin-cloud-storage/docs/local-dev.md).
 
 ## Questions
 

packages/plugin-cloud/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@payloadcms/plugin-cloud",
   "description": "The official Payload Cloud plugin",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",

packages/plugin-cloud/src/hooks/uploadCache.ts

@@ -8,8 +8,14 @@ interface Args {
   endpoint: string
 }
 
+type GenericUpload = {
+  id: string
+  sizes?: Record<string, { url?: string }>
+  url?: string
+}
+
 export const getCacheUploadsAfterChangeHook =
-  ({ endpoint }: Args): CollectionAfterChangeHook =>
+  ({ endpoint }: Args): CollectionAfterChangeHook<GenericUpload> =>
   async ({ doc, operation, req }) => {
     if (!req || !process.env.PAYLOAD_CLOUD_CACHE_KEY) return doc
 
@@ -37,7 +43,7 @@ export const getCacheUploadsAfterDeleteHook =
   }
 
 type PurgeRequest = {
-  doc: any
+  doc: GenericUpload
   endpoint: string
   operation: string
   req: PayloadRequest
@@ -56,21 +62,30 @@ async function purge({ doc, endpoint, operation, req }: PurgeRequest) {
     return
   }
 
-  const body = {
-    cacheKey: process.env.PAYLOAD_CLOUD_CACHE_KEY,
-    filepath: doc.url,
-    projectID: process.env.PAYLOAD_CLOUD_PROJECT_ID,
-  }
-  req.payload.logger.debug({
-    filepath: doc.url,
-    msg: 'Attempting to purge cache',
-    operation,
-    project: {
-      id: process.env.PAYLOAD_CLOUD_PROJECT_ID,
-    },
-  })
-
+  const filepaths = [filePath]
   try {
+    if (doc.sizes && Object.keys(doc.sizes).length) {
+      const urls = Object.values(doc.sizes)
+        .map((size) => size?.url)
+        .filter(Boolean)
+      filepaths.push(...urls)
+    }
+
+    const body = {
+      cacheKey: process.env.PAYLOAD_CLOUD_CACHE_KEY,
+      filepaths,
+      projectID: process.env.PAYLOAD_CLOUD_PROJECT_ID,
+    }
+
+    req.payload.logger.debug({
+      filepaths,
+      msg: 'Purging cache for filepaths',
+      operation,
+      project: {
+        id: process.env.PAYLOAD_CLOUD_PROJECT_ID,
+      },
+    })
+
     const purgeRes = await fetch(`${endpoint}/api/purge-cache`, {
       body: JSON.stringify({
         ...body,
@@ -87,6 +102,10 @@ async function purge({ doc, endpoint, operation, req }: PurgeRequest) {
       statusCode: purgeRes.status,
     })
   } catch (err: unknown) {
-    req.payload.logger.error({ body, err, msg: '/purge-cache call failed' })
+    req.payload.logger.error({
+      data: { id: doc.id, filepaths },
+      err,
+      msg: '/purge-cache call failed',
+    })
   }
 }

packages/plugin-form-builder/src/collections/FormSubmissions/index.ts

@@ -91,12 +91,12 @@ export const generateSubmissionCollection = (formConfig: PluginConfig): Collecti
       ...(formConfig?.formSubmissionOverrides?.fields || []),
     ],
     hooks: {
+      ...(formConfig?.formSubmissionOverrides?.hooks || {}),
       beforeChange: [
         (data) => createCharge(data, formConfig),
         (data) => sendEmail(data, formConfig),
         ...(formConfig?.formSubmissionOverrides?.hooks?.beforeChange || []),
       ],
-      ...(formConfig?.formSubmissionOverrides?.hooks || {}),
     },
   }
 

packages/richtext-lexical/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/richtext-lexical",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "The officially supported Lexical richtext adapter for Payload",
   "repository": {
     "type": "git",

packages/richtext-lexical/src/field/features/Blocks/index.ts

@@ -1,4 +1,4 @@
-import type { Block, BlockField, FieldWithRichTextRequiredEditor } from 'payload/types'
+import type { Block, BlockField, Field } from 'payload/types'
 
 import { baseBlockFields, sanitizeFields } from 'payload/config'
 import { fieldsToJSONSchema, formatLabels, getTranslation } from 'payload/utilities'
@@ -12,12 +12,8 @@ import { INSERT_BLOCK_COMMAND } from './plugin/commands'
 import { blockPopulationPromiseHOC } from './populationPromise'
 import { blockValidationHOC } from './validate'
 
-export type LexicalBlock = Omit<Block, 'fields'> & {
-  fields: FieldWithRichTextRequiredEditor[]
-}
-
 export type BlocksFeatureProps = {
-  blocks: LexicalBlock[]
+  blocks: Block[]
 }
 
 export const BlocksFeature = (props?: BlocksFeatureProps): FeatureProvider => {
@@ -26,9 +22,7 @@ export const BlocksFeature = (props?: BlocksFeatureProps): FeatureProvider => {
     props.blocks = props.blocks.map((block) => {
       const blockCopy = cloneDeep(block)
 
-      blockCopy.fields = blockCopy.fields.concat(
-        baseBlockFields as FieldWithRichTextRequiredEditor[],
-      )
+      blockCopy.fields = blockCopy.fields.concat(baseBlockFields)
       blockCopy.labels = !blockCopy.labels ? formatLabels(blockCopy.slug) : blockCopy.labels
       return blockCopy
     })

packages/richtext-lexical/src/field/features/Blocks/populationPromise.ts

@@ -59,6 +59,7 @@ export const blockPopulationPromiseHOC = (
       currentDepth,
       data: blockFieldData,
       depth,
+      draft: false,
       editorPopulationPromises,
       fields: block.fields,
       findMany,

packages/richtext-lexical/src/field/features/Link/drawer/baseFields.ts

@@ -21,6 +21,7 @@ export const getBaseFields = (
   config: Config,
   enabledCollections: false | string[],
   disabledCollections: false | string[],
+  maxDepth?: number,
 ): Field[] => {
   let enabledRelations: string[]
 
@@ -48,12 +49,13 @@ export const getBaseFields = (
   const baseFields = [
     {
       name: 'text',
+      type: 'text',
       label: translations['fields:textToDisplay'],
       required: true,
-      type: 'text',
     },
     {
       name: 'fields',
+      type: 'group',
       admin: {
         style: {
           borderBottom: 0,
@@ -65,6 +67,7 @@ export const getBaseFields = (
       fields: [
         {
           name: 'linkType',
+          type: 'radio',
           admin: {
             description: translations['fields:chooseBetweenCustomTextOrDocument'],
           },
@@ -77,13 +80,12 @@ export const getBaseFields = (
             },
           ],
           required: true,
-          type: 'radio',
         },
         {
           name: 'url',
+          type: 'text',
           label: translations['fields:enterURL'],
           required: true,
-          type: 'text',
           validate: (value: string) => {
             if (value && !validateUrl(value)) {
               return 'Invalid URL'
@@ -91,7 +93,6 @@ export const getBaseFields = (
           },
         },
       ] as Field[],
-      type: 'group',
     },
   ]
 
@@ -113,6 +114,7 @@ export const getBaseFields = (
         },
       },
       // when admin.hidden is a function we need to dynamically call hidden with the user to know if the collection should be shown
+      type: 'relationship',
       filterOptions:
         !enabledCollections && !disabledCollections
           ? ({ relationTo, user }) => {
@@ -123,16 +125,16 @@ export const getBaseFields = (
             }
           : null,
       label: translations['fields:chooseDocumentToLink'],
+      maxDepth,
       relationTo: enabledRelations,
       required: true,
-      type: 'relationship',
     })
   }
 
   baseFields[1].fields.push({
     name: 'newTab',
-    label: translations['fields:openInNewTab'],
     type: 'checkbox',
+    label: translations['fields:openInNewTab'],
   })
 
   return baseFields as Field[]

packages/richtext-lexical/src/field/features/Link/index.ts

@@ -1,6 +1,6 @@
 import type { i18n } from 'i18next'
 import type { SanitizedConfig } from 'payload/config'
-import type { FieldWithRichTextRequiredEditor } from 'payload/types'
+import type { Field } from 'payload/types'
 
 import { $findMatchingParent } from '@lexical/utils'
 import { $getSelection, $isRangeSelection } from 'lexical'
@@ -46,12 +46,13 @@ export type LinkFeatureProps = ExclusiveLinkCollectionsProps & {
    * displayed in the link editor drawer.
    */
   fields?:
-    | ((args: {
-        config: SanitizedConfig
-        defaultFields: FieldWithRichTextRequiredEditor[]
-        i18n: i18n
-      }) => FieldWithRichTextRequiredEditor[])
-    | FieldWithRichTextRequiredEditor[]
+    | ((args: { config: SanitizedConfig; defaultFields: Field[]; i18n: i18n }) => Field[])
+    | Field[]
+  /**
+   * Sets a maximum population depth for the internal doc default field of link, regardless of the remaining depth when the field is reached.
+   * This behaves exactly like the maxDepth properties of relationship and upload fields.
+   */
+  maxDepth?: number
 }
 
 export const LinkFeature = (props: LinkFeatureProps): FeatureProvider => {

packages/richtext-lexical/src/field/features/Link/plugins/floatingLinkEditor/LinkEditor/index.tsx

@@ -45,6 +45,7 @@ export function LinkEditor({
   disabledCollections,
   enabledCollections,
   fields: customFieldSchema,
+  maxDepth,
 }: { anchorElem: HTMLElement } & LinkFeatureProps): JSX.Element {
   const [editor] = useLexicalComposerContext()
 
@@ -71,6 +72,7 @@ export function LinkEditor({
       i18n,
       enabledCollections,
       disabledCollections,
+      maxDepth,
     )
     // Sanitize custom fields here
     const validRelationships = config.collections.map((c) => c.slug) || []

packages/richtext-lexical/src/field/features/Link/plugins/floatingLinkEditor/utilities.ts

@@ -15,8 +15,14 @@ export function transformExtraFields(
   i18n: i18n,
   enabledCollections?: false | string[],
   disabledCollections?: false | string[],
+  maxDepth?: number,
 ): Field[] {
-  const baseFields: Field[] = getBaseFields(config, enabledCollections, disabledCollections)
+  const baseFields: Field[] = getBaseFields(
+    config,
+    enabledCollections,
+    disabledCollections,
+    maxDepth,
+  )
 
   const fields =
     typeof customFieldSchema === 'function'

packages/richtext-lexical/src/field/features/Link/populationPromise.ts

@@ -39,6 +39,7 @@ export const linkPopulationPromiseHOC = (
             currentDepth,
             data: node?.fields?.doc,
             depth,
+            draft: false,
             field,
             key: 'value',
             overrideAccess,
@@ -54,6 +55,7 @@ export const linkPopulationPromiseHOC = (
         currentDepth,
         data: node.fields || {},
         depth,
+        draft: false,
         editorPopulationPromises,
         fields: props.fields,
         findMany,

packages/richtext-lexical/src/field/features/Relationship/index.ts

@@ -3,9 +3,9 @@ import type { FeatureProvider } from '../types'
 import { SlashMenuOption } from '../../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types'
 import { INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND } from './drawer/commands'
 import { RelationshipNode } from './nodes/RelationshipNode'
-import { relationshipPopulationPromise } from './populationPromise'
+import { relationshipPopulationPromiseHOC } from './populationPromise'
 
-export type RelationshipFeatureProps =
+export type ExclusiveRelationshipFeatureProps =
   | {
       /**
        * The collections that should be disabled. Overrides the `enableRichTextRelationship` property in the collection config.
@@ -27,15 +27,23 @@ export type RelationshipFeatureProps =
       enabledCollections?: string[]
     }
 
+export type RelationshipFeatureProps = ExclusiveRelationshipFeatureProps & {
+  /**
+   * Sets a maximum population depth for this relationship, regardless of the remaining depth when the respective field is reached.
+   * This behaves exactly like the maxDepth properties of relationship and upload fields.
+   */
+  maxDepth?: number
+}
+
 export const RelationshipFeature = (props?: RelationshipFeatureProps): FeatureProvider => {
   return {
     feature: () => {
       return {
         nodes: [
           {
-            node: RelationshipNode,
-            populationPromises: [relationshipPopulationPromise],
             type: RelationshipNode.getType(),
+            node: RelationshipNode,
+            populationPromises: [relationshipPopulationPromiseHOC(props)],
             // TODO: Add validation similar to upload
           },
         ],
@@ -55,7 +63,7 @@ export const RelationshipFeature = (props?: RelationshipFeatureProps): FeaturePr
             position: 'normal',
           },
         ],
-        props: props,
+        props,
         slashMenu: {
           options: [
             {

packages/richtext-lexical/src/field/features/Relationship/populationPromise.ts

@@ -1,39 +1,50 @@
 import type { PopulationPromise } from '../types'
+import type { RelationshipFeatureProps } from './index'
 import type { SerializedRelationshipNode } from './nodes/RelationshipNode'
 
 import { populate } from '../../../populate/populate'
 
-export const relationshipPopulationPromise: PopulationPromise<SerializedRelationshipNode> = ({
-  currentDepth,
-  depth,
-  field,
-  node,
-  overrideAccess,
-  req,
-  showHiddenFields,
-}) => {
-  const promises: Promise<void>[] = []
+export const relationshipPopulationPromiseHOC = (
+  props: RelationshipFeatureProps,
+): PopulationPromise<SerializedRelationshipNode> => {
+  const relationshipPopulationPromise: PopulationPromise<SerializedRelationshipNode> = ({
+    currentDepth,
+    depth,
+    draft,
+    field,
+    node,
+    overrideAccess,
+    req,
+    showHiddenFields,
+  }) => {
+    const promises: Promise<void>[] = []
 
-  if (node?.value?.id) {
-    const collection = req.payload.collections[node?.relationTo]
+    if (node?.value?.id) {
+      const collection = req.payload.collections[node?.relationTo]
 
-    if (collection) {
-      promises.push(
-        populate({
-          id: node.value.id,
-          collection,
-          currentDepth,
-          data: node,
-          depth,
-          field,
-          key: 'value',
-          overrideAccess,
-          req,
-          showHiddenFields,
-        }),
-      )
+      if (collection) {
+        const populateDepth =
+          props?.maxDepth !== undefined && props?.maxDepth < depth ? props?.maxDepth : depth
+
+        promises.push(
+          populate({
+            id: node.value.id,
+            collection,
+            currentDepth,
+            data: node,
+            depth: populateDepth,
+            draft,
+            field,
+            key: 'value',
+            overrideAccess,
+            req,
+            showHiddenFields,
+          }),
+        )
+      }
     }
-  }
 
-  return promises
+    return promises
+  }
+  return relationshipPopulationPromise
 }

packages/richtext-lexical/src/field/features/Upload/index.ts

@@ -1,4 +1,4 @@
-import type { FieldWithRichTextRequiredEditor } from 'payload/types'
+import type { Field } from 'payload/types'
 
 import payload from 'payload'
 
@@ -15,9 +15,14 @@ import { uploadValidation } from './validate'
 export type UploadFeatureProps = {
   collections: {
     [collection: string]: {
-      fields: FieldWithRichTextRequiredEditor[]
+      fields: Field[]
     }
   }
+  /**
+   * Sets a maximum population depth for this upload (not the fields for this upload), regardless of the remaining depth when the respective field is reached.
+   * This behaves exactly like the maxDepth properties of relationship and upload fields.
+   */
+  maxDepth?: number
 }
 
 /**

packages/richtext-lexical/src/field/features/Upload/populationPromise.ts

@@ -29,13 +29,17 @@ export const uploadPopulationPromiseHOC = (
       const collection = req.payload.collections[node?.relationTo]
 
       if (collection) {
+        const populateDepth =
+          props?.maxDepth !== undefined && props?.maxDepth < depth ? props?.maxDepth : depth
+
         promises.push(
           populate({
             id: node?.value?.id,
             collection,
             currentDepth,
             data: node,
-            depth,
+            depth: populateDepth,
+            draft: false,
             field,
             key: 'value',
             overrideAccess,
@@ -50,6 +54,7 @@ export const uploadPopulationPromiseHOC = (
           currentDepth,
           data: node.fields || {},
           depth,
+          draft: false,
           editorPopulationPromises,
           fields: props?.collections?.[node?.relationTo]?.fields,
           findMany,

packages/richtext-lexical/src/field/features/types.ts

@@ -32,6 +32,7 @@ export type PopulationPromise<T extends SerializedLexicalNode = SerializedLexica
   context: RequestContext
   currentDepth: number
   depth: number
+  draft: boolean
   /**
    * This maps all population promises to the node type
    */

packages/richtext-lexical/src/field/lexical/LexicalEditor.tsx

@@ -36,7 +36,7 @@ export const LexicalEditor: React.FC<Pick<LexicalProviderProps, 'editorConfig' |
 
   useEffect(() => {
     const updateViewPortWidth = () => {
-      const isNextSmallWidthViewport = window.matchMedia('(max-width: 1025px)').matches
+      const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches
 
       if (isNextSmallWidthViewport !== isSmallWidthViewport) {
         setIsSmallWidthViewport(isNextSmallWidthViewport)

packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/index.tsx

@@ -147,36 +147,36 @@ function FloatingSelectToolbar({
   anchorElem: HTMLElement
   editor: LexicalEditor
 }): JSX.Element {
-  const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null)
+  const floatingToolbarRef = useRef<HTMLDivElement | null>(null)
   const caretRef = useRef<HTMLDivElement | null>(null)
 
   const { editorConfig } = useEditorConfigContext()
 
   const closeFloatingToolbar = useCallback(() => {
-    if (popupCharStylesEditorRef?.current) {
-      const isOpacityZero = popupCharStylesEditorRef.current.style.opacity === '0'
-      const isPointerEventsNone = popupCharStylesEditorRef.current.style.pointerEvents === 'none'
+    if (floatingToolbarRef?.current) {
+      const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'
+      const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'
 
       if (!isOpacityZero) {
-        popupCharStylesEditorRef.current.style.opacity = '0'
+        floatingToolbarRef.current.style.opacity = '0'
       }
       if (!isPointerEventsNone) {
-        popupCharStylesEditorRef.current.style.pointerEvents = 'none'
+        floatingToolbarRef.current.style.pointerEvents = 'none'
       }
     }
-  }, [popupCharStylesEditorRef])
+  }, [floatingToolbarRef])
 
   const mouseMoveListener = useCallback(
     (e: MouseEvent) => {
-      if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {
-        const isOpacityZero = popupCharStylesEditorRef.current.style.opacity === '0'
-        const isPointerEventsNone = popupCharStylesEditorRef.current.style.pointerEvents === 'none'
+      if (floatingToolbarRef?.current && (e.buttons === 1 || e.buttons === 3)) {
+        const isOpacityZero = floatingToolbarRef.current.style.opacity === '0'
+        const isPointerEventsNone = floatingToolbarRef.current.style.pointerEvents === 'none'
         if (!isOpacityZero || !isPointerEventsNone) {
           // Check if the mouse is not over the popup
           const x = e.clientX
           const y = e.clientY
           const elementUnderMouse = document.elementFromPoint(x, y)
-          if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
+          if (!floatingToolbarRef.current.contains(elementUnderMouse)) {
             // Mouse is not over the target element => not a normal click, but probably a drag
             closeFloatingToolbar()
           }
@@ -187,15 +187,15 @@ function FloatingSelectToolbar({
   )
 
   const mouseUpListener = useCallback(() => {
-    if (popupCharStylesEditorRef?.current) {
-      if (popupCharStylesEditorRef.current.style.opacity !== '1') {
-        popupCharStylesEditorRef.current.style.opacity = '1'
+    if (floatingToolbarRef?.current) {
+      if (floatingToolbarRef.current.style.opacity !== '1') {
+        floatingToolbarRef.current.style.opacity = '1'
       }
-      if (popupCharStylesEditorRef.current.style.pointerEvents !== 'auto') {
-        popupCharStylesEditorRef.current.style.pointerEvents = 'auto'
+      if (floatingToolbarRef.current.style.pointerEvents !== 'auto') {
+        floatingToolbarRef.current.style.pointerEvents = 'auto'
       }
     }
-  }, [popupCharStylesEditorRef])
+  }, [floatingToolbarRef])
 
   useEffect(() => {
     document.addEventListener('mousemove', mouseMoveListener)
@@ -205,15 +205,14 @@ function FloatingSelectToolbar({
       document.removeEventListener('mousemove', mouseMoveListener)
       document.removeEventListener('mouseup', mouseUpListener)
     }
-  }, [popupCharStylesEditorRef, mouseMoveListener, mouseUpListener])
+  }, [floatingToolbarRef, mouseMoveListener, mouseUpListener])
 
   const updateTextFormatFloatingToolbar = useCallback(() => {
     const selection = $getSelection()
 
-    const popupCharStylesEditorElem = popupCharStylesEditorRef.current
     const nativeSelection = window.getSelection()
 
-    if (popupCharStylesEditorElem === null) {
+    if (floatingToolbarRef.current === null) {
       return
     }
 
@@ -227,17 +226,25 @@ function FloatingSelectToolbar({
     ) {
       const rangeRect = getDOMRangeRect(nativeSelection, rootElement)
 
-      setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem, 'center')
+      // Position floating toolbar
+      const offsetIfFlipped = setFloatingElemPosition(
+        rangeRect, // selection to position around
+        floatingToolbarRef.current, // what to position
+        anchorElem, // anchor elem
+        'center',
+      )
 
+      // Position caret
       if (caretRef.current) {
         setFloatingElemPosition(
           rangeRect, // selection to position around
           caretRef.current, // what to position
-          popupCharStylesEditorElem, // anchor elem
+          floatingToolbarRef.current, // anchor elem
           'center',
           10,
           5,
           true,
+          offsetIfFlipped,
         )
       }
     }
@@ -288,7 +295,7 @@ function FloatingSelectToolbar({
   }, [editor, updateTextFormatFloatingToolbar])
 
   return (
-    <div className="floating-select-toolbar-popup" ref={popupCharStylesEditorRef}>
+    <div className="floating-select-toolbar-popup" ref={floatingToolbarRef}>
       <div className="caret" ref={caretRef} />
       {editor.isEditable() && (
         <React.Fragment>

packages/richtext-lexical/src/field/lexical/utils/setFloatingElemPosition.ts

@@ -1,9 +1,10 @@
 const VERTICAL_GAP = 10
 const HORIZONTAL_OFFSET = 5
 
-// TODO: This works fine with some dirty fixes (looking at you, specialHandlingForCaret). But this definitely needs refactoring and documentation, to be easier to understand and maintain.
+// TODO: needs refactoring
 // This is supposed to position the floatingElem based on the parent (anchorElem) and the target (targetRect) which is usually the selected text.
 // So basically, it positions the floatingElem either below or above the target (targetRect) and aligns it to the left or center of the target (targetRect).
+// This is used for positioning the floating toolbar (anchor: richtext editor) and its caret (anchor: floating toolbar)
 export function setFloatingElemPosition(
   targetRect: ClientRect | null,
   floatingElem: HTMLElement,
@@ -12,7 +13,9 @@ export function setFloatingElemPosition(
   verticalGap: number = VERTICAL_GAP,
   horizontalOffset: number = HORIZONTAL_OFFSET,
   specialHandlingForCaret = false,
-): void {
+  anchorFlippedOffset = 0, // Offset which was added to the anchor (for caret, floating toolbar) if it was flipped
+): number {
+  // Returns the top offset if the target was flipped
   const scrollerElem = anchorElem.parentElement
 
   if (targetRect === null || scrollerElem == null) {
@@ -33,8 +36,11 @@ export function setFloatingElemPosition(
     left = targetRect.left + targetRect.width / 2 - floatingElemRect.width / 2
   }
 
-  if (top < editorScrollerRect.top) {
-    top += floatingElemRect.height + targetRect.height + verticalGap * 2
+  let addedToTop = 0
+  if (top < editorScrollerRect.top && !specialHandlingForCaret) {
+    addedToTop = floatingElemRect.height + targetRect.height + verticalGap * 2
+
+    top += addedToTop
   }
 
   if (horizontalPosition === 'center') {
@@ -49,22 +55,21 @@ export function setFloatingElemPosition(
     }
   }
 
-  top -= anchorElementRect.top
   left -= anchorElementRect.left
 
   floatingElem.style.opacity = '1'
 
-  if (specialHandlingForCaret && top == 0 /* 0 Happens when selecting 1st line */) {
-    top -= 44 // Especially this arbitrary number needs refactoring (this is for the caret)
-    // rotate too
-    floatingElem.style.transform = `translate(${left}px, ${top}px) rotate(180deg)`
-  } else if (
-    specialHandlingForCaret &&
-    top === -63 /* -63 Happens when selecting 2nd line in multi-line paragraph */
-  ) {
-    top += 18 // Especially this arbitrary number needs refactoring (this is for the caret)
+  if (specialHandlingForCaret && anchorFlippedOffset !== 0) {
+    // Floating select toolbar was flipped (positioned below text rather than above). Thus, the caret now needs to be positioned
+    // on the other side and rotated.
+    top -= anchorElementRect.bottom - anchorFlippedOffset + floatingElemRect.height - 3
+    // top += anchorFlippedOffset - anchorElementRect.height - floatingElemRect.height + 2
     floatingElem.style.transform = `translate(${left}px, ${top}px) rotate(180deg)`
   } else {
+    top -= anchorElementRect.top
+
     floatingElem.style.transform = `translate(${left}px, ${top}px)`
   }
+
+  return addedToTop
 }

packages/richtext-lexical/src/index.ts

@@ -182,6 +182,7 @@ export function lexicalEditor(props?: LexicalEditorProps): LexicalRichTextAdapte
       context,
       currentDepth,
       depth,
+      draft,
       field,
       findMany,
       flattenLocales,
@@ -197,6 +198,7 @@ export function lexicalEditor(props?: LexicalEditorProps): LexicalRichTextAdapte
           context,
           currentDepth,
           depth,
+          draft,
           editorPopulationPromises: finalSanitizedEditorConfig.features.populationPromises,
           field,
           findMany,
@@ -218,7 +220,7 @@ export function lexicalEditor(props?: LexicalEditorProps): LexicalRichTextAdapte
 }
 
 export { BlockQuoteFeature } from './field/features/BlockQuote'
-export { BlocksFeature, type BlocksFeatureProps, type LexicalBlock } from './field/features/Blocks'
+export { BlocksFeature, type BlocksFeatureProps } from './field/features/Blocks'
 export {
   $createBlockNode,
   $isBlockNode,
@@ -247,6 +249,7 @@ export {
 
 export { ParagraphFeature } from './field/features/Paragraph'
 export { RelationshipFeature } from './field/features/Relationship'
+
 export {
   $createRelationshipNode,
   $isRelationshipNode,
@@ -281,11 +284,11 @@ export { defaultHTMLConverters } from './field/features/converters/html/converte
 export type { HTMLConverter } from './field/features/converters/html/converter/types'
 export { consolidateHTMLConverters } from './field/features/converters/html/field'
 export { lexicalHTML } from './field/features/converters/html/field'
-
 export { TestRecorderFeature } from './field/features/debug/TestRecorder'
-export { TreeViewFeature } from './field/features/debug/TreeView'
 
+export { TreeViewFeature } from './field/features/debug/TreeView'
 export { BoldTextFeature } from './field/features/format/Bold'
+
 export { InlineCodeTextFeature } from './field/features/format/InlineCode'
 export { ItalicTextFeature } from './field/features/format/Italic'
 export { SectionWithEntries as FormatSectionWithEntries } from './field/features/format/common/floatingSelectToolbarSection'
@@ -293,6 +296,7 @@ export { StrikethroughTextFeature } from './field/features/format/strikethrough'
 export { SubscriptTextFeature } from './field/features/format/subscript'
 export { SuperscriptTextFeature } from './field/features/format/superscript'
 export { UnderlineTextFeature } from './field/features/format/underline'
+export { HorizontalRuleFeature } from './field/features/horizontalrule'
 export { IndentFeature } from './field/features/indent'
 export { CheckListFeature } from './field/features/lists/CheckList'
 export { OrderedListFeature } from './field/features/lists/OrderedList'