fix(alpha): copy formData for re-use like we do for the json property

Fix/alpha/admin e2e

.eslintignore

@@ -8,3 +8,6 @@
 **/dist/**
 **/node_modules
 **/temp
+playwright.config.ts
+jest.config.js
+test/live-preview/next-app

.eslintrc.cjs

@@ -0,0 +1,64 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ['@payloadcms'],
+  ignorePatterns: ['README.md', 'packages/**/*.spec.ts'],
+  overrides: [
+    {
+      files: ['packages/**'],
+      plugins: ['payload'],
+      rules: {
+        'payload/no-jsx-import-statements': 'warn',
+      },
+    },
+    {
+      files: ['scripts/**'],
+      rules: {
+        '@typescript-eslint/no-unused-vars': 'off',
+        'no-console': 'off',
+        'perfectionist/sort-object-types': 'off',
+        'perfectionist/sort-objects': 'off',
+      },
+    },
+    {
+      extends: ['plugin:@typescript-eslint/disable-type-checked'],
+      files: ['*.js', '*.cjs', '*.json', '*.md', '*.yml', '*.yaml'],
+    },
+    {
+      files: ['packages/eslint-config-payload/**'],
+      rules: {
+        'perfectionist/sort-objects': 'off',
+      },
+    },
+    {
+      files: ['package.json', 'tsconfig.json'],
+      rules: {
+        'perfectionist/sort-array-includes': 'off',
+        'perfectionist/sort-astro-attributes': 'off',
+        'perfectionist/sort-classes': 'off',
+        'perfectionist/sort-enums': 'off',
+        'perfectionist/sort-exports': 'off',
+        'perfectionist/sort-imports': 'off',
+        'perfectionist/sort-interfaces': 'off',
+        'perfectionist/sort-jsx-props': 'off',
+        'perfectionist/sort-keys': 'off',
+        'perfectionist/sort-maps': 'off',
+        'perfectionist/sort-named-exports': 'off',
+        'perfectionist/sort-named-imports': 'off',
+        'perfectionist/sort-object-types': 'off',
+        'perfectionist/sort-objects': 'off',
+        'perfectionist/sort-svelte-attributes': 'off',
+        'perfectionist/sort-union-types': 'off',
+        'perfectionist/sort-vue-attributes': 'off',
+      },
+    },
+  ],
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+    EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
+    EXPERIMENTAL_useProjectService: true,
+    sourceType: 'module',
+    ecmaVersion: 'latest',
+  },
+  root: true,
+}

.eslintrc.js

@@ -1,38 +0,0 @@
-module.exports = {
-  extends: ['@payloadcms'],
-  overrides: [
-    {
-      extends: ['plugin:@typescript-eslint/disable-type-checked'],
-      files: ['*.js', '*.cjs', '*.json', '*.md', '*.yml', '*.yaml'],
-    },
-    {
-      files: ['packages/eslint-config-payload/**'],
-      rules: {
-        'perfectionist/sort-objects': 'off',
-      },
-    },
-    {
-      files: ['package.json', 'tsconfig.json'],
-      rules: {
-        'perfectionist/sort-array-includes': 'off',
-        'perfectionist/sort-astro-attributes': 'off',
-        'perfectionist/sort-classes': 'off',
-        'perfectionist/sort-enums': 'off',
-        'perfectionist/sort-exports': 'off',
-        'perfectionist/sort-imports': 'off',
-        'perfectionist/sort-interfaces': 'off',
-        'perfectionist/sort-jsx-props': 'off',
-        'perfectionist/sort-keys': 'off',
-        'perfectionist/sort-maps': 'off',
-        'perfectionist/sort-named-exports': 'off',
-        'perfectionist/sort-named-imports': 'off',
-        'perfectionist/sort-object-types': 'off',
-        'perfectionist/sort-objects': 'off',
-        'perfectionist/sort-svelte-attributes': 'off',
-        'perfectionist/sort-union-types': 'off',
-        'perfectionist/sort-vue-attributes': 'off',
-      },
-    },
-  ],
-  root: true,
-}

.git-blame-ignore-revs

@@ -16,3 +16,6 @@ fb7d1be2f3325d076b7c967b1730afcef37922c2
 
 # lint and format create-payload-app
 5fd3d430001efe86515262ded5e26f00c1451181
+
+# 3.0 prettier & lint everywhere
+6789e61488a1d3de56f472ac3214faf344030005

.github/CODEOWNERS

@@ -1,32 +1,24 @@
 # Order matters. The last matching pattern takes precedence.
 
-### Catch-all ###
-* @denolfe @jmikrut @DanRibbens
-.* @denolfe @jmikrut @DanRibbens
-
 ### Core ###
-/packages/payload/ @denolfe @jmikrut @DanRibbens
 /packages/payload/src/uploads/ @denolfe
 /packages/payload/src/admin/ @jmikrut @jacobsfletch @JarrodMFlesch
 
 ### Adapters ###
-/packages/bundler-*/ @denolfe @jmikrut @DanRibbens @JarrodMFlesch
 /packages/db-*/ @denolfe @jmikrut @DanRibbens
 /packages/richtext-*/ @denolfe @jmikrut @DanRibbens @AlessioGr
 
 ### Plugins ###
-/packages/plugin-*/ @denolfe @jmikrut @DanRibbens @jacobsfletch @JarrodMFlesch @AlessioGr
+/packages/plugin-*/ @denolfe @jmikrut @DanRibbens
 /packages/plugin-cloud*/ @denolfe
 /packages/plugin-form-builder/ @jacobsfletch
 /packages/plugin-live-preview*/ @jacobsfletch
 /packages/plugin-nested-docs/ @jacobsfletch
-/packages/plugin-password-protection/ @jmikrut
 /packages/plugin-redirects/ @jacobsfletch
 /packages/plugin-search/ @jacobsfletch
 /packages/plugin-sentry/ @JessChowdhury
 /packages/plugin-seo/ @jacobsfletch
 /packages/plugin-stripe/ @jacobsfletch
-/packages/plugin-zapier/ @JarrodMFlesch
 
 ### Examples ###
 /examples/ @jacobsfletch
@@ -35,8 +27,7 @@
 /examples/whitelabel/ @JessChowdhury
 
 ### Templates ###
-/templates/ @jacobsfletch
-/templates/blank/ @denolfe
+/templates/ @jacobsfletch @denolfe
 
 ### Misc ###
 /packages/create-payload-app/ @denolfe

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -1,6 +1,6 @@
 name: Bug Report
 description: Create a bug report for Payload
-labels: ['possible-bug']
+labels: ['[possible-bug]']
 body:
   - type: markdown
     attributes:

.github/reproduction-guide.md

@@ -61,4 +61,4 @@ Once they are installed you can open the `testing` tab in vscode sidebar and dri
 
 #### Notes
 
-- It is recommended to add the test credentials (located in `test/credentials.ts`) to your autofill for `localhost:3000/admin` as this will be required on every nodemon restart. The default credentials are `dev@payloadcms.com` as email and `test` as password.
+The default credentials are `dev@payloadcms.com` as email and `test` as password. They can be found in `test/credentials.ts`. By default, these will be autofilled, so no log-in is required.

.github/workflows/main.yml

@@ -4,7 +4,7 @@ on:
   pull_request:
     types: [opened, reopened, synchronize]
   push:
-    branches: ['main']
+    branches: ['main', 'alpha']
 
 jobs:
   changes:
@@ -15,25 +15,25 @@ jobs:
       needs_build: ${{ steps.filter.outputs.needs_build }}
       templates: ${{ steps.filter.outputs.templates }}
     steps:
-    - uses: actions/checkout@v4
-      with:
-        fetch-depth: 25
-    - uses: dorny/paths-filter@v2
-      id: filter
-      with:
-        filters: |
-          needs_build:
-            - '.github/workflows/**'
-            - 'packages/**'
-            - 'test/**'
-            - 'pnpm-lock.yaml'
-            - 'package.json'
-          templates:
-            - 'templates/**'
-    - name: Log all filter results
-      run: |
-        echo "needs_build: ${{ steps.filter.outputs.needs_build }}"
-        echo "templates: ${{ steps.filter.outputs.templates }}"
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 25
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            needs_build:
+              - '.github/workflows/**'
+              - 'packages/**'
+              - 'test/**'
+              - 'pnpm-lock.yaml'
+              - 'package.json'
+            templates:
+              - 'templates/**'
+      - name: Log all filter results
+        run: |
+          echo "needs_build: ${{ steps.filter.outputs.needs_build }}"
+          echo "templates: ${{ steps.filter.outputs.templates }}"
 
   core-build:
     needs: changes
@@ -46,12 +46,12 @@ jobs:
           fetch-depth: 25
 
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8
           run_install: false
@@ -61,7 +61,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
@@ -71,63 +71,163 @@ jobs:
             ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
 
       - run: pnpm install
-      - run: pnpm run build
+      - run: pnpm run build:core
 
       - name: Cache build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
 
-  tests:
+  plugins-build:
+    needs: changes
+    if: ${{ needs.changes.outputs.needs_build == 'true' }}
     runs-on: ubuntu-latest
-    needs: core-build
-    strategy:
-      fail-fast: false
-      matrix:
-        database: [mongoose, postgres]
-    env:
-      POSTGRES_USER: postgres
-      POSTGRES_PASSWORD: postgres
-      POSTGRES_DB: payloadtests
 
     steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 25
+
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+            ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - run: pnpm install
+      - run: pnpm run build:plugins
+
+  tests-unit:
+    runs-on: ubuntu-latest
+    needs: core-build
+    if: false # Disable until tests are updated for 3.0
+
+    steps:
+      - name: Use Node.js 18
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
         with:
           version: 8
           run_install: false
 
       - name: Restore build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
 
+      - name: Unit Tests
+        run: pnpm test:unit
+        env:
+          NODE_OPTIONS: --max-old-space-size=8096
+
+  tests-int:
+    runs-on: ubuntu-latest
+    needs: core-build
+    strategy:
+      fail-fast: false
+      matrix:
+        database:
+          - mongodb
+          - postgres
+        #  - postgres-custom-schema
+        #  - postgres-uuid
+        #  - supabase
+    env:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: payloadtests
+      AWS_ENDPOINT_URL: http://127.0.0.1:4566
+      AWS_ACCESS_KEY_ID: localstack
+      AWS_SECRET_ACCESS_KEY: localstack
+      AWS_REGION: us-east-1
+
+    steps:
+      - name: Use Node.js 18
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+          run_install: false
+
+      - name: Restore build
+        uses: actions/cache@v4
+        with:
+          path: ./*
+          key: ${{ github.sha }}-${{ github.run_number }}
+
+      - name: Start LocalStack
+        run: pnpm docker:start
+
       - name: Start PostgreSQL
         uses: CasperWA/postgresql-action@v1.2
         with:
-          postgresql version: '14'  # See https://hub.docker.com/_/postgres for available versions
+          postgresql version: '14' # See https://hub.docker.com/_/postgres for available versions
           postgresql db: ${{ env.POSTGRES_DB }}
           postgresql user: ${{ env.POSTGRES_USER }}
           postgresql password: ${{ env.POSTGRES_PASSWORD }}
-        if: matrix.database == 'postgres'
+        if: startsWith(matrix.database, 'postgres')
+
+      - name: Install Supabase CLI
+        uses: supabase/setup-cli@v1
+        with:
+          version: latest
+        if: matrix.database == 'supabase'
+
+      - name: Initialize Supabase
+        run: |
+          supabase init
+          supabase start
+        if: matrix.database == 'supabase'
+
+      - name: Wait for PostgreSQL
+        run: sleep 30
+        if: startsWith(matrix.database, 'postgres')
 
-      - run: sleep 30
       - name: Configure PostgreSQL
         run: |
           psql "postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" -c "CREATE ROLE runner SUPERUSER LOGIN;"
           psql "postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" -c "SELECT version();"
           echo "POSTGRES_URL=postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" >> $GITHUB_ENV
-        if: matrix.database == 'postgres'
+        if: startsWith(matrix.database, 'postgres')
 
-      - name: Component Tests
-        run: pnpm test:components
+      - name: Configure PostgreSQL with custom schema
+        run: |
+          psql "postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" -c "CREATE SCHEMA custom;"
+        if: matrix.database == 'postgres-custom-schema'
+
+      - name: Configure Supabase
+        run: |
+          echo "POSTGRES_URL=postgresql://postgres:postgres@127.0.0.1:54322/postgres" >> $GITHUB_ENV
+        if: matrix.database == 'supabase'
 
       - name: Integration Tests
         run: pnpm test:int
@@ -142,59 +242,74 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        part: [1/8, 2/8, 3/8, 4/8, 5/8, 6/8, 7/8, 8/8]
+        # find test -type f -name 'e2e.spec.ts' | sort | xargs dirname | xargs -I {} basename {}
+        suite:
+          - _community
+          - access-control
+          # - admin
+          - auth
+          - field-error-states
+          - fields-relationship
+          # - fields
+          - fields/lexical
+          - live-preview
+          - localization
+          - plugin-form-builder
+          - plugin-nested-docs
+          - plugin-seo
+          - versions
+          - uploads
 
     steps:
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8
           run_install: false
 
       - name: Restore build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
 
-      - name: E2E Tests
-        uses: nick-fields/retry@v2
-        with:
-          retry_on: error
-          max_attempts: 2
-          timeout_minutes: 15
-          command: pnpm test:e2e --part ${{ matrix.part }} --bail
+      - name: Install Playwright
+        run: pnpm exec playwright install --with-deps
 
-      - uses: actions/upload-artifact@v3
+      - name: E2E Tests
+        run: pnpm test:e2e ${{ matrix.suite }}
+
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
-          name: test-results
-          path: test-results/
+          name: test-results-${{ matrix.suite }}
+          path: test/test-results/
           retention-days: 1
 
   tests-type-generation:
+    if: false # This should be replaced with gen on a real Payload project
     runs-on: ubuntu-latest
     needs: core-build
 
     steps:
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8
           run_install: false
 
       - name: Restore build
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
@@ -205,86 +320,9 @@ jobs:
       - name: Generate GraphQL schema file
         run: pnpm dev:generate-graphql-schema graphql-schema-gen
 
-  build-packages:
-    runs-on: ubuntu-latest
-    needs: core-build
-    strategy:
-      fail-fast: false
-      matrix:
-        pkg:
-          - db-mongodb
-          - db-postgres
-          - bundler-webpack
-          - bundler-vite
-          - richtext-slate
-          - richtext-lexical
-          - live-preview
-          - live-preview-react
-
-    steps:
-      - name: Use Node.js 18
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v3
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Build ${{ matrix.pkg }}
-        run: pnpm turbo run build --filter=${{ matrix.pkg }}
-
-  plugins:
-    runs-on: ubuntu-latest
-    needs: core-build
-    strategy:
-      fail-fast: false
-      matrix:
-        pkg:
-          - create-payload-app
-          - plugin-cloud
-          - plugin-cloud-storage
-          - plugin-form-builder
-          - plugin-nested-docs
-          - plugin-search
-          - plugin-sentry
-
-    steps:
-      - name: Use Node.js 18
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v3
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Build ${{ matrix.pkg }}
-        run: pnpm turbo run build --filter=${{ matrix.pkg }}
-
-      - name: Test ${{ matrix.pkg }}
-        run: pnpm --filter ${{ matrix.pkg }} run test
-        if: matrix.pkg != 'create-payload-app' # degit doesn't work within GitHub Actions
-
   templates:
     needs: changes
-    if: ${{ needs.changes.outputs.templates == 'true' }}
+    if: false # Disable until templates are updated for 3.0
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
@@ -297,7 +335,7 @@ jobs:
           fetch-depth: 25
 
       - name: Use Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 
@@ -306,9 +344,10 @@ jobs:
         with:
           mongodb-version: 6.0
 
-      - name: Build Website
+      - name: Build Template
         run: |
           cd templates/${{ matrix.template }}
           cp .env.example .env
           yarn install
           yarn build
+          yarn generate:types

.gitignore

@@ -1,10 +1,23 @@
 coverage
 package-lock.json
 dist
-.idea
+/.idea/*
+!/.idea/runConfigurations
+!/.idea/payload.iml
+
 test-results
 .devcontainer
+.localstack
 /migrations
+.localstack
+.turbo
+
+.turbo
+
+# Ignore test directory media folder/files
+/media
+test/media
+/versions
 
 # Created by https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 # Edit at https://www.toptal.com/developers/gitignore?templates=node,macos,windows,webstorm,sublimetext,visualstudiocode
@@ -230,119 +243,24 @@ GitHub.sublime-settings
 .history
 .ionide
 
-### WebStorm ###
-# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
-# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
-
-# User-specific stuff
-.idea/**/workspace.xml
-.idea/**/tasks.xml
-.idea/**/usage.statistics.xml
-.idea/**/dictionaries
-.idea/**/shelf
-
-# AWS User-specific
-.idea/**/aws.xml
-
-# Generated files
-.idea/**/contentModel.xml
-
-# Sensitive or high-churn files
-.idea/**/dataSources/
-.idea/**/dataSources.ids
-.idea/**/dataSources.local.xml
-.idea/**/sqlDataSources.xml
-.idea/**/dynamic.xml
-.idea/**/uiDesigner.xml
-.idea/**/dbnavigator.xml
-
-# Gradle
-.idea/**/gradle.xml
-.idea/**/libraries
-
-# Gradle and Maven with auto-import
-# When using Gradle or Maven with auto-import, you should exclude module files,
-# since they will be recreated, and may cause churn.  Uncomment if using
-# auto-import.
-# .idea/artifacts
-# .idea/compiler.xml
-# .idea/jarRepositories.xml
-# .idea/modules.xml
-# .idea/*.iml
-# .idea/modules
-# *.iml
-# *.ipr
-
 # CMake
 cmake-build-*/
 
-# Mongo Explorer plugin
-.idea/**/mongoSettings.xml
-
 # File-based project format
 *.iws
 
 # IntelliJ
 out/
 
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
 # JIRA plugin
 atlassian-ide-plugin.xml
 
-# Cursive Clojure plugin
-.idea/replstate.xml
-
-# SonarLint plugin
-.idea/sonarlint/
-
 # Crashlytics plugin (for Android Studio and IntelliJ)
 com_crashlytics_export_strings.xml
 crashlytics.properties
 crashlytics-build.properties
 fabric.properties
 
-# Editor-based Rest Client
-.idea/httpRequests
-
-# Android studio 3.1+ serialized cache file
-.idea/caches/build_file_checksums.ser
-
-### WebStorm Patch ###
-# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
-
-# *.iml
-# modules.xml
-# .idea/misc.xml
-# *.ipr
-
-# Sonarlint plugin
-# https://plugins.jetbrains.com/plugin/7973-sonarlint
-.idea/**/sonarlint/
-
-# SonarQube Plugin
-# https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin
-.idea/**/sonarIssues.xml
-
-# Markdown Navigator plugin
-# https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced
-.idea/**/markdown-navigator.xml
-.idea/**/markdown-navigator-enh.xml
-.idea/**/markdown-navigator/
-
-# Cache file creation bug
-# See https://youtrack.jetbrains.com/issue/JBR-2257
-.idea/$CACHE_FILE$
-
-# CodeStream plugin
-# https://plugins.jetbrains.com/plugin/12206-codestream
-.idea/codestream.xml
-
-# Azure Toolkit for IntelliJ plugin
-# https://plugins.jetbrains.com/plugin/8053-azure-toolkit-for-intellij
-.idea/**/azureSettings.xml
-
 ### Windows ###
 # Windows thumbnail cache files
 Thumbs.db
@@ -371,4 +289,5 @@ $RECYCLE.BIN/
 
 # End of https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 
-/build
+/build
+.swc

.idea/payload.iml

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/payload/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/payload/components" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/payload/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/.swc" />
+      <excludeFolder url="file://$MODULE_DIR$/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/examples" />
+      <excludeFolder url="file://$MODULE_DIR$/media" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/create-payload-app/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/create-payload-app/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/db-mongodb/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/db-mongodb/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/db-postgres/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/db-postgres/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/graphql/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/graphql/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-react/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-react/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/next/.swc" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/next/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/payload/fields" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud-storage/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud-storage/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-form-builder/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-nested-docs/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-nested-docs/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-redirects/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-redirects/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-search/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-search/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-sentry/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-seo/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-seo/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-stripe/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-lexical/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-lexical/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/templates" />
+      <excludeFolder url="file://$MODULE_DIR$/test/.swc" />
+      <excludeFolder url="file://$MODULE_DIR$/versions" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/runConfigurations/Run_Dev_Fields.xml

@@ -0,0 +1,8 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Run Dev Fields" type="NodeJSConfigurationType" application-parameters="--no-deprecation fields" path-to-js-file="test/dev.js" working-dir="$PROJECT_DIR$">
+    <envs>
+      <env name="NODE_OPTIONS" value="--no-deprecation" />
+    </envs>
+    <method v="2" />
+  </configuration>
+</component>

.idea/runConfigurations/Run_Dev__community.xml

@@ -0,0 +1,8 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Run Dev _community" type="NodeJSConfigurationType" application-parameters="--no-deprecation _community" path-to-js-file="test/dev.js" working-dir="$PROJECT_DIR$">
+    <envs>
+      <env name="NODE_OPTIONS" value="--no-deprecation" />
+    </envs>
+    <method v="2" />
+  </configuration>
+</component>

.node-version

@@ -1 +1 @@
-v18.17.1
+v18.19.1

.nvmrc

@@ -1 +1 @@
-v18.17.1
+v18.19.1

.prettierignore

@@ -9,3 +9,4 @@
 **/node_modules
 **/temp
 **/docs/**
+tsconfig.json

.release-it.pre.js

@@ -1,16 +0,0 @@
-module.exports = {
-  verbose: true,
-  git: {
-    requireCleanWorkingDir: false,
-    commit: false,
-    push: false,
-    tag: false,
-  },
-  npm: {
-    skipChecks: true,
-    tag: 'beta',
-  },
-  hooks: {
-    'before:init': ['pnpm install', 'pnpm clean', 'pnpm build'],
-  },
-}

.swcrc

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": "inline",
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    }
+  },
+  "module": {
+    "type": "es6"
+  }
+}

.vscode/extensions.json

@@ -1,3 +1,8 @@
 {
-  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "firsttris.vscode-jest-runner",
+    "ms-playwright.playwright"
+  ]
 }

.vscode/launch.json

@@ -3,12 +3,33 @@
   // Hover to view descriptions of existing attributes.
   "configurations": [
     {
-      "command": "pnpm run dev _community",
+      "command": "pnpm generate:types",
+      "name": "Generate Types CLI",
+      "request": "launch",
+      "type": "node-terminal",
+      "cwd": "${workspaceFolder}"
+    },
+    {
+      "command": "node --no-deprecation test/dev.js _community",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Community",
       "request": "launch",
       "type": "node-terminal"
     },
+    {
+      "command": "node --no-deprecation test/dev.js live-preview",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev Live Preview",
+      "request": "launch",
+      "type": "node-terminal"
+    },
+    {
+      "command": "node --no-deprecation test/dev.js admin",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev Admin",
+      "request": "launch",
+      "type": "node-terminal"
+    },
     {
       "command": "pnpm run dev plugin-cloud-storage",
       "cwd": "${workspaceFolder}",
@@ -20,18 +41,21 @@
       }
     },
     {
-      "command": "pnpm run dev fields",
+      "command": "node --no-deprecation test/dev.js fields",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Fields",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "pnpm run dev:postgres fields",
+      "command": "node --no-deprecation test/dev.js versions",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Postgres",
       "request": "launch",
-      "type": "node-terminal"
+      "type": "node-terminal",
+      "env": {
+        "PAYLOAD_DATABASE": "postgres"
+      }
     },
     {
       "command": "pnpm run dev versions",
@@ -67,7 +91,14 @@
     {
       "command": "pnpm run test:int live-preview",
       "cwd": "${workspaceFolder}",
-      "name": "Live Preview Integration",
+      "name": "Live Preview Int Tests",
+      "request": "launch",
+      "type": "node-terminal"
+    },
+    {
+      "command": "pnpm run test:int plugin-search",
+      "cwd": "${workspaceFolder}",
+      "name": "Search Plugin Int Tests",
       "request": "launch",
       "type": "node-terminal"
     },
@@ -95,17 +126,6 @@
       "request": "launch",
       "type": "node-terminal"
     },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts generate:types",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/_community/config.ts",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-      },
-      "name": "Generate Types CLI",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
     {
       "command": "ts-node ./packages/payload/src/bin/index.ts migrate:status",
       "env": {

.vscode/settings.json

@@ -5,21 +5,21 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     }
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     }
   },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     }
   },
   "[json]": {
@@ -35,5 +35,10 @@
   "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
   "typescript.tsdk": "node_modules/typescript/lib",
   // Load .git-blame-ignore-revs file
-  "gitlens.advanced.blame.customArguments": ["--ignore-revs-file", ".git-blame-ignore-revs"]
+  "gitlens.advanced.blame.customArguments": ["--ignore-revs-file", ".git-blame-ignore-revs"],
+  "[javascript][typescript][typescriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+  }
 }

CHANGELOG.md

@@ -1,3 +1,363 @@
+## [2.11.2](https://github.com/payloadcms/payload/compare/v2.11.1...v2.11.2) (2024-02-23)
+
+
+### Features
+
+* **db-postgres:** configurable custom schema to use ([#5047](https://github.com/payloadcms/payload/issues/5047)) ([e8f2ca4](https://github.com/payloadcms/payload/commit/e8f2ca484ee56cd7767d5111e46ebd24752ff8de))
+
+
+### Bug Fixes
+
+* Add Context Provider in EditMany Component ([#5005](https://github.com/payloadcms/payload/issues/5005)) ([70e57fe](https://github.com/payloadcms/payload/commit/70e57fef184f7fcf56344ea755465f246f2253a5))
+* **db-mongodb:** unique sparse for not required fields ([#5114](https://github.com/payloadcms/payload/issues/5114)) ([815bdfa](https://github.com/payloadcms/payload/commit/815bdfac0b0afbff2a20e54d5aee64b90f6b3a77))
+* **db-postgres:** set _parentID for array nested localized fields ([#5117](https://github.com/payloadcms/payload/issues/5117)) ([ceca5c4](https://github.com/payloadcms/payload/commit/ceca5c4e97f53f1346797a31b6abfc0375e98215))
+* disabling API Key does not remove the key ([#5145](https://github.com/payloadcms/payload/issues/5145)) ([7a7f0ed](https://github.com/payloadcms/payload/commit/7a7f0ed7e8132253be607c111c160163b84bd770))
+* handle thrown errors in config-level afterError hook ([#5147](https://github.com/payloadcms/payload/issues/5147)) ([32ed95e](https://github.com/payloadcms/payload/commit/32ed95e1ee87409db234f1b7bd6d2e462fd9ed5d))
+* only replace the drawer content with full edit component if it exists ([#5144](https://github.com/payloadcms/payload/issues/5144)) ([0a07f60](https://github.com/payloadcms/payload/commit/0a07f607b9fb1217ad956cd05b2a84a4042a19ca))
+* transaction error from access endpoint ([#5156](https://github.com/payloadcms/payload/issues/5156)) ([ad42d54](https://github.com/payloadcms/payload/commit/ad42d541b342ed56463b81cee6d6307df6f06d7f))
+
+## [2.11.1](https://github.com/payloadcms/payload/compare/v2.11.0...v2.11.1) (2024-02-16)
+
+
+### Features
+
+* **db-postgres:** adds idType to use uuid or serial id columns ([#3864](https://github.com/payloadcms/payload/issues/3864)) ([d6c2578](https://github.com/payloadcms/payload/commit/d6c25783cfa97983bf9db27ceb5ccd39a62c62f1))
+* **db-postgres:** reconnect after disconnection from database ([#5086](https://github.com/payloadcms/payload/issues/5086)) ([bf942fd](https://github.com/payloadcms/payload/commit/bf942fdfa6ea9c26cf05295cc9db646bf31fa622))
+* **plugin-search:** add req to beforeSync args for transactions ([#5068](https://github.com/payloadcms/payload/issues/5068)) ([98b87e2](https://github.com/payloadcms/payload/commit/98b87e22782c0a788f79326f22be05a6b176ad74))
+* **richtext-lexical:** add justify aligment to AlignFeature ([#4035](https://github.com/payloadcms/payload/issues/4035)) ([#4868](https://github.com/payloadcms/payload/issues/4868)) ([6d6823c](https://github.com/payloadcms/payload/commit/6d6823c3e5609a58eeeeb8d043945a762f9463df))
+* **richtext-lexical:** AddBlock handle for all nodes, even if they aren't empty paragraphs ([#5063](https://github.com/payloadcms/payload/issues/5063)) ([00fc034](https://github.com/payloadcms/payload/commit/00fc0343dabf184d5bab418d47c403b3ad11698f))
+* **richtext-lexical:** Update lexical from 0.12.6 to 0.13.1, port over all useful changes from playground ([#5066](https://github.com/payloadcms/payload/issues/5066)) ([0d18822](https://github.com/payloadcms/payload/commit/0d18822062275c1826c8e2c3da2571a2b3483310))
+
+
+### Bug Fixes
+
+* **db-mongodb:** find versions pagination ([#5091](https://github.com/payloadcms/payload/issues/5091)) ([5d4022f](https://github.com/payloadcms/payload/commit/5d4022f1445e2809c01cb1dd599280f0a56cdc6e))
+* **db-postgres:** query using blockType ([#5044](https://github.com/payloadcms/payload/issues/5044)) ([35c2a08](https://github.com/payloadcms/payload/commit/35c2a085efa6d5ad59779960874bc9728a17e3a0))
+* filterOptions errors cause transaction to abort ([#5079](https://github.com/payloadcms/payload/issues/5079)) ([5f3d016](https://github.com/payloadcms/payload/commit/5f3d0169bee21e1c0963dbd7ede9fe5f1c46a5a5))
+* **plugin-form-builder:** hooks do not respect transactions ([#5069](https://github.com/payloadcms/payload/issues/5069)) ([82e9d31](https://github.com/payloadcms/payload/commit/82e9d31127c8df83c5bed92a5ffdab76d331900f))
+* remove collection findByID caching ([#5034](https://github.com/payloadcms/payload/issues/5034)) ([1ac943e](https://github.com/payloadcms/payload/commit/1ac943ed5e8416883b863147fdf3c23380955559))
+* **richtext-lexical:** do not remove adjacent paragraph node when inserting certain nodes in empty editor ([#5061](https://github.com/payloadcms/payload/issues/5061)) ([6323965](https://github.com/payloadcms/payload/commit/6323965c652ea68dffeb716957b124d165b9ce96))
+* **uploads:** account for serverURL when retrieving external file ([#5102](https://github.com/payloadcms/payload/issues/5102)) ([25cee8b](https://github.com/payloadcms/payload/commit/25cee8bb102bf80b3a4bfb4b4e46712722cc7f0d))
+
+
+### ⚠ BREAKING CHANGES: @payloadcms/richtext-lexical
+
+* **richtext-lexical:** Update lexical from 0.12.6 to 0.13.1, port over all useful changes from playground (#5066)
+
+- You HAVE to make sure that any versions of the lexical packages (IF you have any installed) match the lexical version which richtext-lexical uses: v0.13.1. If you do not do this, you may be plagued by React useContext / "cannot find active editor state" errors
+- Updates to lexical's API, e.g. the removal of INTERNAL_isPointSelection, could be breaking depending on your code. Please consult the [lexical changelog](https://github.com/facebook/lexical/blob/main/CHANGELOG.md).
+
+## [2.11.0](https://github.com/payloadcms/payload/compare/v2.10.1...v2.11.0) (2024-02-09)
+
+
+### Features
+
+* exposes collapsible provider with more functionality ([#5043](https://github.com/payloadcms/payload/issues/5043)) ([df39602](https://github.com/payloadcms/payload/commit/df39602758ae8dc3765bb48e51f7a657babfa559))
+
+## [2.10.1](https://github.com/payloadcms/payload/compare/v2.10.0...v2.10.1) (2024-02-09)
+
+
+### Bug Fixes
+
+* clearable cells handle null values ([#5038](https://github.com/payloadcms/payload/issues/5038)) ([f6d7da7](https://github.com/payloadcms/payload/commit/f6d7da751039df25066b51bb91d6453e1a4efd82))
+* **db-mongodb:** handle null values with exists ([#5037](https://github.com/payloadcms/payload/issues/5037)) ([cdc4cb9](https://github.com/payloadcms/payload/commit/cdc4cb971b9180ba2ed09741f5af1a3c18292828))
+* **db-postgres:** handle nested docs with drafts ([#5012](https://github.com/payloadcms/payload/issues/5012)) ([da184d4](https://github.com/payloadcms/payload/commit/da184d40ece74bffb224002eb5df8f6987d65043))
+* ensures docs with the same id are shown in relationship field select ([#4859](https://github.com/payloadcms/payload/issues/4859)) ([e1813fb](https://github.com/payloadcms/payload/commit/e1813fb884e0dc84203fcbab87527a99a4d3a5d7))
+* query relationships by explicit id field ([#5022](https://github.com/payloadcms/payload/issues/5022)) ([a0a58e7](https://github.com/payloadcms/payload/commit/a0a58e7fd20dff54d210c968f4d5defd67441bdd))
+* **richtext-lexical:** make editor reactive to initialValue changes ([#5010](https://github.com/payloadcms/payload/issues/5010)) ([2315781](https://github.com/payloadcms/payload/commit/2315781f1891ddde4b4c5f2f0cfa1c17af85b7a9))
+
+## [2.10.0](https://github.com/payloadcms/payload/compare/v2.9.0...v2.10.0) (2024-02-06)
+
+
+### Features
+
+* add more options to addFieldStatePromise so that it can be used for field flattening ([#4799](https://github.com/payloadcms/payload/issues/4799)) ([8725d41](https://github.com/payloadcms/payload/commit/8725d411645bb0270376e235669f46be2227ecc0))
+* extend transactions to cover after and beforeOperation hooks ([#4960](https://github.com/payloadcms/payload/issues/4960)) ([1e8a6b7](https://github.com/payloadcms/payload/commit/1e8a6b7899f7b1e6451cc4d777602208478b483c))
+* previousValue and previousSiblingDoc args added to beforeChange field hooks ([#4958](https://github.com/payloadcms/payload/issues/4958)) ([5d934ba](https://github.com/payloadcms/payload/commit/5d934ba02d07d98f781ce983228858ee5ce5c226))
+* re-use existing logger instance passed to payload.init ([#3124](https://github.com/payloadcms/payload/issues/3124)) ([471d211](https://github.com/payloadcms/payload/commit/471d2113a790dc0d54b2f8ed84e6899310efd600))
+* **richtext-lexical:** Blocks: generate type definitions for blocks fields ([#4529](https://github.com/payloadcms/payload/issues/4529)) ([90d7ee3](https://github.com/payloadcms/payload/commit/90d7ee3e6535d51290fc734b284ff3811dbda1f8))
+* use deletion success message from server if provided ([#4966](https://github.com/payloadcms/payload/issues/4966)) ([e3c8105](https://github.com/payloadcms/payload/commit/e3c8105cc2ed6fdf8007d97cd7b5556fc71ed724))
+
+
+### Bug Fixes
+
+* **db-postgres:** filtering relationships with drafts enabled ([#4998](https://github.com/payloadcms/payload/issues/4998)) ([c3a3942](https://github.com/payloadcms/payload/commit/c3a39429697e9d335e9be199e7caafb82eb26219))
+* **db-postgres:** handle schema changes with supabase ([#4968](https://github.com/payloadcms/payload/issues/4968)) ([5d3659d](https://github.com/payloadcms/payload/commit/5d3659d48ad8bbf5d96fbcd80434d2287cab97e0))
+* **db-postgres:** indexes not created for non unique field names ([#4967](https://github.com/payloadcms/payload/issues/4967)) ([64f705c](https://github.com/payloadcms/payload/commit/64f705c3c94148972f67e8175e718015760d6430))
+* **db-postgres:** indexes not creating for relationships, arrays, hasmany and blocks ([#4976](https://github.com/payloadcms/payload/issues/4976)) ([47106d5](https://github.com/payloadcms/payload/commit/47106d5a1af2ebd073fbbc6e474174c3d3835e5c))
+* **db-postgres:** localized field sort count ([#4997](https://github.com/payloadcms/payload/issues/4997)) ([f3876c2](https://github.com/payloadcms/payload/commit/f3876c2a39efe19a1864213306725aadcc14f130))
+* ensures docPermissions fallback to collection permissions on create ([#4969](https://github.com/payloadcms/payload/issues/4969)) ([afa2b94](https://github.com/payloadcms/payload/commit/afa2b942e0aad90c55744ae13e0ffe1cefa4585d))
+* **migrations:** safely create migration file when no name passed ([#4995](https://github.com/payloadcms/payload/issues/4995)) ([0740d50](https://github.com/payloadcms/payload/commit/0740d5095ee1aef13e4e37f6b174d529f0f2d993))
+* **plugin-seo:** tabbedUI with email field causes duplicate field ([#4944](https://github.com/payloadcms/payload/issues/4944)) ([db22cbd](https://github.com/payloadcms/payload/commit/db22cbdf21a39ed0604ab96c57ca4242eac82ce7))
+
+## [2.9.0](https://github.com/payloadcms/payload/compare/v2.8.2...v2.9.0) (2024-01-26)
+
+
+### Features
+
+* forceAcceptWarning migration arg added to accept prompts ([#4874](https://github.com/payloadcms/payload/issues/4874)) ([eba53ba](https://github.com/payloadcms/payload/commit/eba53ba60afd7c5d37389377ed06a9b556058d49))
+
+### Bug Fixes
+
+* afterLogin hook write conflicts ([#4904](https://github.com/payloadcms/payload/issues/4904)) ([3eb681e](https://github.com/payloadcms/payload/commit/3eb681e847e9c55eaaa69c22bea4f4e66c7eac36))
+* **db-postgres:** migrate down error ([#4861](https://github.com/payloadcms/payload/issues/4861)) ([dfba522](https://github.com/payloadcms/payload/commit/dfba5222f3abf3f236dc9212a28e1aec7d7214d5))
+* **db-postgres:** query unset relation ([#4862](https://github.com/payloadcms/payload/issues/4862)) ([8ce15c8](https://github.com/payloadcms/payload/commit/8ce15c8b07800397a50dcf790c263ed5b3cfad53))
+* migrate down missing filter for latest batch ([#4860](https://github.com/payloadcms/payload/issues/4860)) ([b99d24f](https://github.com/payloadcms/payload/commit/b99d24fcfa698c493ea01c41621201abe18fabe3))
+* **plugin-cloud-storage:** slow get file performance large collections ([#4927](https://github.com/payloadcms/payload/issues/4927)) ([f73d503](https://github.com/payloadcms/payload/commit/f73d503fecdfa5cefdc26ab9aad60b00563f881e))
+* remove No Options dropdown from hasMany fields ([#4899](https://github.com/payloadcms/payload/issues/4899)) ([e5a7907](https://github.com/payloadcms/payload/commit/e5a7907a72c1371447ac2f71fce213ed22246092))
+* upload input drawer does not show draft versions ([#4903](https://github.com/payloadcms/payload/issues/4903)) ([6930c4e](https://github.com/payloadcms/payload/commit/6930c4e9f2200853121391ad8f8df48ea66c40a4))
+
+## [2.8.2](https://github.com/payloadcms/payload/compare/v2.8.1...v2.8.2) (2024-01-16)
+
+
+### Features
+
+* **db-postgres:** support drizzle logging config ([#4809](https://github.com/payloadcms/payload/issues/4809)) ([371353f](https://github.com/payloadcms/payload/commit/371353f1535fbab4ebd9f56fc14fd10a30eec289))
+* **plugin-form-builder:** add validation for form ID when creating a submission ([#4730](https://github.com/payloadcms/payload/pull/4730))
+* **plugin-seo:** add support for interfaceName and fieldOverrides ([#4695](https://github.com/payloadcms/payload/pull/4695))
+
+### Bug Fixes
+
+* **db-mongodb:** mongodb versions creating duplicates ([#4825](https://github.com/payloadcms/payload/issues/4825)) ([a861311](https://github.com/payloadcms/payload/commit/a861311c5a98126700f98f9a2ab380782e754717))
+* **db-mongodb:** transactionOptions=false typeErrors ([82383a5](https://github.com/payloadcms/payload/commit/82383a5b5f52785115c0feb970da70e91971b7ca))
+* **db-postgres:** Remove duplicate keys from response ([#4747](https://github.com/payloadcms/payload/issues/4747)) ([eb9e771](https://github.com/payloadcms/payload/commit/eb9e771a9ca03636486d36654f215b73435574cb))
+* **db-postgres:** validateExistingBlockIsIdentical with arrays ([3b88adc](https://github.com/payloadcms/payload/commit/3b88adc7d0594af63ce190c40c9ee3905df67a31))
+* **db-postgres:** validateExistingBlockIsIdentical with other tables ([0647c87](https://github.com/payloadcms/payload/commit/0647c870f15dc1b122734b678c2abeb6f56377d4))
+* **plugin-seo:** fix missing spread operator in URL generator function ([#4723](https://github.com/payloadcms/payload/pull/4723))
+* removes max-width from field-types class & correctly sets it on uploads ([#4829](https://github.com/payloadcms/payload/issues/4829)) ([ee5390a](https://github.com/payloadcms/payload/commit/ee5390aaca37a4154cde8392b60f091ec3e5175c))
+
+## [2.8.1](https://github.com/payloadcms/payload/compare/v2.8.0...v2.8.1) (2024-01-12)
+
+
+### Bug Fixes
+
+* corrects config usage in build bin script ([#4796](https://github.com/payloadcms/payload/issues/4796)) ([775502b](https://github.com/payloadcms/payload/commit/775502b1616c1bd35a3044438e253a0e84219f99))
+
+## [2.8.0](https://github.com/payloadcms/payload/compare/v2.7.0...v2.8.0) (2024-01-12)
+
+
+### Features
+
+* allow custom config properties in blocks ([#4766](https://github.com/payloadcms/payload/issues/4766)) ([d92af29](https://github.com/payloadcms/payload/commit/d92af295ebe253160ac4c8fb788a1fb143ab85ae))
+* **logger:** show local time ([#4663](https://github.com/payloadcms/payload/issues/4663)) ([493fde5](https://github.com/payloadcms/payload/commit/493fde5ccceb9a95d0b950a028a1d2f8888b4e64))
+* **plugin-cloud:** use resend smtp instead of custom transport ([#4746](https://github.com/payloadcms/payload/issues/4746)) ([5cfde54](https://github.com/payloadcms/payload/commit/5cfde542b19988985746e220829d429a84ba3976))
+* **plugin-seo:** add fr translations ([#4774](https://github.com/payloadcms/payload/issues/4774)) ([4319fe1](https://github.com/payloadcms/payload/commit/4319fe1c6e332d35124356ce5d5d0fb48fe199e7))
+* **plugin-seo:** remove support for payload <2.7.0 ([#4765](https://github.com/payloadcms/payload/issues/4765)) ([5e08368](https://github.com/payloadcms/payload/commit/5e083689d016fbff6c83419336e920f248932993))
+
+
+### Bug Fixes
+
+* allow a custom ID field to be nested inside unnamed tabs and rows ([#4701](https://github.com/payloadcms/payload/issues/4701)) ([6d5ac1d](https://github.com/payloadcms/payload/commit/6d5ac1de1ef55c4d51b253b4cf959bb703316c49))
+* build payload without initializing ([#4028](https://github.com/payloadcms/payload/issues/4028)) ([1115387](https://github.com/payloadcms/payload/commit/11153877447af68389dde80fff2f9ee869468acb))
+* **db-mongodb:** limit=0 returns unpaginated ([63e5c43](https://github.com/payloadcms/payload/commit/63e5c43fe620458936e2ebc4f5468aff9cb23e02))
+* **db-postgres:** totalPages value when limit=0 ([5702b83](https://github.com/payloadcms/payload/commit/5702b83e829b5b1a3d95ce4a1c1967c3ec630373))
+* migration regression ([#4777](https://github.com/payloadcms/payload/issues/4777)) ([fa3b3dd](https://github.com/payloadcms/payload/commit/fa3b3dd62d0a060f7419fd21d69eafff9bf99a61))
+* **db-mongodb:** migration regression ([#4777](https://github.com/payloadcms/payload/issues/4777)) ([fa3b3dd](https://github.com/payloadcms/payload/commit/fa3b3dd62d0a060f7419fd21d69eafff9bf99a61))
+* **db-postgres:**migration regression ([#4777](https://github.com/payloadcms/payload/issues/4777)) ([fa3b3dd](https://github.com/payloadcms/payload/commit/fa3b3dd62d0a060f7419fd21d69eafff9bf99a61))
+* passes `draft=true` in fetch for relationships ([#4784](https://github.com/payloadcms/payload/issues/4784)) ([0a259d2](https://github.com/payloadcms/payload/commit/0a259d27b5ef0d632ca54cd0a9ab99629f94c2a0))
+* **plugin-form-builder:** replaces curly brackets with lexical editor ([#4753](https://github.com/payloadcms/payload/issues/4753)) ([8481846](https://github.com/payloadcms/payload/commit/84818469ea50d43276915d36bd92769422eadeb0))
+* prioritizes `value` key when filtering / querying for relationships ([#4727](https://github.com/payloadcms/payload/issues/4727)) ([d0f7677](https://github.com/payloadcms/payload/commit/d0f7677d5ff2e0109fc348260d87e2606fdbd293))
+* text hasMany validation ([#4789](https://github.com/payloadcms/payload/issues/4789)) ([e2e56a4](https://github.com/payloadcms/payload/commit/e2e56a4d58a9e1c31c05a0624f35642f58da162b))
+
+### ⚠ BREAKING CHANGES
+
+#### @payloadcms/plugin-seo
+
+* remove support for payload <2.7.0 ([#4765](https://github.com/payloadcms/payload/pull/4765))
+
+## [2.7.0](https://github.com/payloadcms/payload/compare/v2.6.0...v2.7.0) (2024-01-09)
+
+
+### Features
+
+* **db-mongodb:** improve transaction support by passing req to migrations ([682eca2](https://github.com/payloadcms/payload/commit/682eca21860a4e2b2ab0bfd85613818790247224))
+* **db-postgres:** improve transaction support by passing req to migrations ([555d027](https://github.com/payloadcms/payload/commit/555d02769a8731aeebbff9b67f9b0e1022904ade))
+* hasMany property for text fields ([#4605](https://github.com/payloadcms/payload/issues/4605)) ([f43cf18](https://github.com/payloadcms/payload/commit/f43cf185d45b3c75fa0d78acd91e6cb60d87f166))
+* improve transaction support by passing req to migrations ([1d14d9f](https://github.com/payloadcms/payload/commit/1d14d9f8b8ed077691175030182f094bb300ed17))
+* **plugin-seo:** add i18n ([#4665](https://github.com/payloadcms/payload/issues/4665)) ([3027a03](https://github.com/payloadcms/payload/commit/3027a03ad11ecd679278e44a013e4dea4aa42b8d))
+* provide document info to ActionsProvider ([#4696](https://github.com/payloadcms/payload/issues/4696)) ([6a8a6e4](https://github.com/payloadcms/payload/commit/6a8a6e4ef4913e0889e4d2eac82b28b9e4e8db22))
+
+
+### Bug Fixes
+
+* adds objectID validation to isValidID if of type `text` ([#4689](https://github.com/payloadcms/payload/issues/4689)) ([d419275](https://github.com/payloadcms/payload/commit/d419275fb50f0922307f2d3b4c0fcf80ac5ec98b))
+* allow json field to be saved empty and reflect value changes ([#4687](https://github.com/payloadcms/payload/issues/4687)) ([0fb3a9c](https://github.com/payloadcms/payload/commit/0fb3a9ca89d1b63faea179bfa9b5b3d0a69c9398))
+* custom ids in versions ([#4680](https://github.com/payloadcms/payload/issues/4680)) ([5d15955](https://github.com/payloadcms/payload/commit/5d15955f839d3f0cc557d8a8d7cc3a9e52e2f6b1))
+* custom overrides of breadcrumb and parent fields ([7db58b4](https://github.com/payloadcms/payload/commit/7db58b482bba7e715c5be23cfe1a84295e95da29))
+* **db-mongodb:** migration error calling beginTransaction with transactionOptions false ([21b9453](https://github.com/payloadcms/payload/commit/21b9453cf4e6eebf145d89a0190942015658413d))
+* **db-mongodb:** querying plan for collections ignoring indexes ([#4655](https://github.com/payloadcms/payload/issues/4655)) ([63bc4ca](https://github.com/payloadcms/payload/commit/63bc4cabe1dea5f233aa1d9d4e64f3af93a8e081))
+* **db-postgres:** incorrect results querying json field using exists operator ([9d9ac0e](https://github.com/payloadcms/payload/commit/9d9ac0ec28c97281bfdc7d6fb78c52baea492380))
+* **db-postgres:** migrate down only runs latest batch size ([6acfae8](https://github.com/payloadcms/payload/commit/6acfae8ee7614746797e1fa91e1fd41c0240fdcd))
+* **db-postgres:** query on json properties ([ec4d2f9](https://github.com/payloadcms/payload/commit/ec4d2f97cbf1c89d837372059bf3bb77f3ea6594))
+* **db-postgres:** validation prevents group fields in blocks ([#4699](https://github.com/payloadcms/payload/issues/4699)) ([cab6bab](https://github.com/payloadcms/payload/commit/cab6babd608daeaabf9b63b1b446fded6804b60f))
+* non-boolean condition result causes infinite looping ([#4579](https://github.com/payloadcms/payload/issues/4579)) ([a3e7816](https://github.com/payloadcms/payload/commit/a3e78161b551e8286063a173645a1d3dee162ad1))
+* **plugin-form-builder:** slate serializer should replace curly braces in links ([#4703](https://github.com/payloadcms/payload/issues/4703)) ([28a3012](https://github.com/payloadcms/payload/commit/28a30120dd1aa3279fb2133aa0a0b1638d144be4))
+* **plugin-nested-docs:** breadcrumbsFieldSlug used in resaveSelfAfterCreate hook ([a5a91c0](https://github.com/payloadcms/payload/commit/a5a91c08a9ade1482c512d3fa4c4f519ad85cf74))
+* **plugin-nested-docs:** children wrongly publishing draft data ([#4692](https://github.com/payloadcms/payload/issues/4692)) ([5539942](https://github.com/payloadcms/payload/commit/55399424a13b1e0532d9eeefd09d442c107c3eda))
+* **plugin-nested-docs:** custom parent field slug ([635e7c2](https://github.com/payloadcms/payload/commit/635e7c26e8b3b5138cf5a9bcb29e8ddd4b1e69b6))
+* **plugin-nested-docs:** parent filterOptions errors when specifying breadcrumbsFieldSlug ([c4a4678](https://github.com/payloadcms/payload/commit/c4a4678afb097cf94c682595a78e416767a1fea8))
+* prevents row overflow ([#4704](https://github.com/payloadcms/payload/issues/4704)) ([9828772](https://github.com/payloadcms/payload/commit/98287728900cb88fa6a465899f030f81df28fc69))
+* relations with number based ids (postgres) show untitled ID: x ([1b91408](https://github.com/payloadcms/payload/commit/1b914083c8ee0c1b1d64fa7d4471ede0a24cfdb7))
+* sidebar fields not disabled by access permissions ([#4682](https://github.com/payloadcms/payload/issues/4682)) ([85e38b7](https://github.com/payloadcms/payload/commit/85e38b7cfd5c0772344c4a8fb5100f7c48eb508f))
+* unlock user condition always passes due to seconds conversion ([#4610](https://github.com/payloadcms/payload/issues/4610)) ([d543665](https://github.com/payloadcms/payload/commit/d543665995410256f77fe136173339aee6dcc7da))
+
+## [2.6.0](https://github.com/payloadcms/payload/compare/v2.5.0...v2.6.0) (2024-01-03)
+
+
+### Features
+
+* **db-mongodb:** add transactionOptions ([f2c8ac4](https://github.com/payloadcms/payload/commit/f2c8ac4a9aa9120339af6759170f5a708469698d))
+* extend locales to have fallbackLocales ([9fac2ef](https://github.com/payloadcms/payload/commit/9fac2ef24e2ade4cf55b0d6a0e7f67e0edf57539))
+
+
+### Bug Fixes
+
+* "The punycode module is deprecated" warning by updating nodemailer ([00d8480](https://github.com/payloadcms/payload/commit/00d8480062d99dee56ef61a955f48a92efa6cbea))
+* adjusts json field joi schema to allow editorOptions ([bff4cf5](https://github.com/payloadcms/payload/commit/bff4cf518f748efb9179f112c606d11d25db3d99))
+* **db-postgres:** Wait for transaction to complete on commit ([#4582](https://github.com/payloadcms/payload/issues/4582)) ([a71d37b](https://github.com/payloadcms/payload/commit/a71d37b39806cd5956378a10246802d01d06c2dd))
+* detect language from request headers accept-language ([#4656](https://github.com/payloadcms/payload/issues/4656)) ([69a9944](https://github.com/payloadcms/payload/commit/69a99445c9f1638a962a9c08ffe0bdc22e538bf6))
+* graphql multiple locales ([98890ee](https://github.com/payloadcms/payload/commit/98890eee1f527c8f245b2353d7e1caca4d2a7d8c))
+* navigation locks when modal is closed with esc ([#4664](https://github.com/payloadcms/payload/issues/4664)) ([be3beab](https://github.com/payloadcms/payload/commit/be3beabb9bafa137aa89e84cf47246017e969be8))
+* req.locale and req.fallbackLocale get reassigned in local operations ([aa048d5](https://github.com/payloadcms/payload/commit/aa048d5409acd42b8f56367a16934085df9fbce2))
+* resets actions array when navigating out of view with actions ([#4585](https://github.com/payloadcms/payload/issues/4585)) ([5c55231](https://github.com/payloadcms/payload/commit/5c5523195ccfa94a9bf42441e2a378f87836e64d))
+* **richtext-lexical:** z-index issues ([#4570](https://github.com/payloadcms/payload/issues/4570)) ([8015e99](https://github.com/payloadcms/payload/commit/8015e999cd5834f532a200ef03fd392d04b3209f))
+* tab field error when using the same interface name ([#4657](https://github.com/payloadcms/payload/issues/4657)) ([f1fa374](https://github.com/payloadcms/payload/commit/f1fa374ed12b50fdf210f17ae1dda603f09a9726))
+
+## [2.5.0](https://github.com/payloadcms/payload/compare/v2.4.0...v2.5.0) (2023-12-19)
+
+
+### Features
+
+* add Chinese Traditional translation ([#4372](https://github.com/payloadcms/payload/issues/4372)) ([50253f6](https://github.com/payloadcms/payload/commit/50253f617c22d0d185bbac7f9d4304cddbc01f06))
+* add context to auth and globals local API ([#4449](https://github.com/payloadcms/payload/issues/4449)) ([168d629](https://github.com/payloadcms/payload/commit/168d6296974042c3ff2a113f9f6c2bded7ba2b3e))
+* adds new `actions` property to admin customization ([#4468](https://github.com/payloadcms/payload/issues/4468)) ([9e8f14a](https://github.com/payloadcms/payload/commit/9e8f14a897e77f6933eedb2410956a468f4187c3))
+* async live preview urls ([#4339](https://github.com/payloadcms/payload/issues/4339)) ([5f17324](https://github.com/payloadcms/payload/commit/5f173241df6dc316d498767b1c81718e9c2b9a51))
+* pass path to FieldDescription ([#4364](https://github.com/payloadcms/payload/issues/4364)) ([3b8a27d](https://github.com/payloadcms/payload/commit/3b8a27d199b3969cbca6ca750450798cb70f21e8))
+* **plugin-form-builder:** Lexical support ([#4487](https://github.com/payloadcms/payload/issues/4487)) ([c6c5cab](https://github.com/payloadcms/payload/commit/c6c5cabfbb7eb954eea51170a6af7582b1f9b84b))
+* prevent querying relationship when filterOptions returns false ([#4392](https://github.com/payloadcms/payload/issues/4392)) ([c1bd338](https://github.com/payloadcms/payload/commit/c1bd338d0d5e899f3892f1d18e355c00b265447a))
+* **richtext-lexical:** improve floating select menu Dropdown classNames ([#4444](https://github.com/payloadcms/payload/issues/4444)) ([9331204](https://github.com/payloadcms/payload/commit/9331204295bfeaf7dd10bc075f42995b2cab2de4))
+* **richtext-lexical:** improve link URL validation ([#4442](https://github.com/payloadcms/payload/issues/4442)) ([9babf68](https://github.com/payloadcms/payload/commit/9babf6804ce04d5828167eb8e7717727fe1cd472))
+* **richtext-lexical:** lazy import React components to prevent client-only code from leaking into the server ([#4290](https://github.com/payloadcms/payload/issues/4290)) ([5de347f](https://github.com/payloadcms/payload/commit/5de347ffffca3bf38315d3d87d2ccc5c28cd2723))
+* **richtext-lexical:** Link & Relationship Feature: field-level configurable allowed relationships ([#4182](https://github.com/payloadcms/payload/issues/4182)) ([7af8f29](https://github.com/payloadcms/payload/commit/7af8f29b4a8dddf389356e4db142f8d434cdc964))
+* **richtext-lexical:** link node: change doc data format to be consistent with relationship field ([#4504](https://github.com/payloadcms/payload/issues/4504)) ([cc0ba89](https://github.com/payloadcms/payload/commit/cc0ba895188f40181c6ba3779f66d547d4ea66f9))
+* **richtext-lexical:** rename TreeviewFeature into TreeViewFeature ([#4520](https://github.com/payloadcms/payload/issues/4520)) ([c49fd66](https://github.com/payloadcms/payload/commit/c49fd6692231b68ca61b079103a0fd7aa4673be1))
+* **richtext-lexical:** Slate to Lexical converter: add blockquote conversion, convert custom link fields ([#4486](https://github.com/payloadcms/payload/issues/4486)) ([31f8f3c](https://github.com/payloadcms/payload/commit/31f8f3cac6bfd08f3adfa0a026a57c4b1b510045))
+* **richtext-lexical:** Upload html serializer: Output picture element if the image has multiple sizes, improve absolute URL creation ([e558894](https://github.com/payloadcms/payload/commit/e55889480fceb8995646621923159d92de6e89c9))
+
+
+### Bug Fixes
+
+* adds bg color for year/month select options in datepicker ([#4508](https://github.com/payloadcms/payload/issues/4508)) ([07371b9](https://github.com/payloadcms/payload/commit/07371b9cad111999f2df4e1f709d6b95cd511c15))
+* correctly fetches externally stored files when passing uploadEdits ([#4505](https://github.com/payloadcms/payload/issues/4505)) ([228d45c](https://github.com/payloadcms/payload/commit/228d45cf52e592cea6377cd93648fba75d73c88d))
+* cursor jumping around inside json field ([#4453](https://github.com/payloadcms/payload/issues/4453)) ([6300037](https://github.com/payloadcms/payload/commit/63000373e66fb39443f882689e0ecf5c11ed8ad0))
+* **db-mongodb:** documentDB unique constraint throws incorrect error ([#4513](https://github.com/payloadcms/payload/issues/4513)) ([05e8914](https://github.com/payloadcms/payload/commit/05e8914db70fa64bfb2d15ecfb58e9c229d71108))
+* **db-postgres:** findOne correctly querying with where queries ([#4550](https://github.com/payloadcms/payload/issues/4550)) ([8bc31cd](https://github.com/payloadcms/payload/commit/8bc31cd5923517ab39ae1427aa0d0fb19d876dab))
+* **db-postgres:** querying nested blocks fields ([#4404](https://github.com/payloadcms/payload/issues/4404)) ([6e9ae65](https://github.com/payloadcms/payload/commit/6e9ae65374124ee000cc2988ef77247c94b0dd18))
+* **db-postgres:** sorting on a not-configured field throws error ([#4382](https://github.com/payloadcms/payload/issues/4382)) ([dbaecda](https://github.com/payloadcms/payload/commit/dbaecda0e92fcb0fa67b4c5ac085e025f02de53a))
+* defaultValues computed on new globals ([#4380](https://github.com/payloadcms/payload/issues/4380)) ([b6cffce](https://github.com/payloadcms/payload/commit/b6cffcea07b9fa21698b00b8bbed6f27197ded41))
+* disallow duplicate fieldNames to be used on the same level in the config ([#4381](https://github.com/payloadcms/payload/issues/4381)) ([a1d66b8](https://github.com/payloadcms/payload/commit/a1d66b83e0dbea21e8da549b73cd25c537a57938))
+* ensure ui fields do not make it into gql schemas ([#4457](https://github.com/payloadcms/payload/issues/4457)) ([3a20ddc](https://github.com/payloadcms/payload/commit/3a20ddc5f85162a316006f22ba66ee1c7aab99e3))
+* format fields within tab for list controls ([#4516](https://github.com/payloadcms/payload/issues/4516)) ([2650c70](https://github.com/payloadcms/payload/commit/2650c70960a7374307a8862c3940c97d337d1d30))
+* formats locales with multiple labels for versions locale selector ([#4495](https://github.com/payloadcms/payload/issues/4495)) ([8257661](https://github.com/payloadcms/payload/commit/8257661c47b5b968a57fb2228d7045d876a3f484))
+* graphql schema generation for fields without queryable subfields ([#4463](https://github.com/payloadcms/payload/issues/4463)) ([13e3e06](https://github.com/payloadcms/payload/commit/13e3e0671353ca34e603fece57a12199f2082ca0))
+* handles null upload field values ([#4397](https://github.com/payloadcms/payload/issues/4397)) ([cf9a370](https://github.com/payloadcms/payload/commit/cf9a3704df21ce8b32feb0680793cba804cd66f7))
+* **live-preview:** populates rte uploads and relationships ([#4379](https://github.com/payloadcms/payload/issues/4379)) ([4090aeb](https://github.com/payloadcms/payload/commit/4090aebb0e94e776258f0c1c761044a4744a1857))
+* **live-preview:** sends raw js objects through window.postMessage instead of json ([#4354](https://github.com/payloadcms/payload/issues/4354)) ([03a3872](https://github.com/payloadcms/payload/commit/03a387233d1b8876a2fcaa5f3b3fd5ed512c0bc4))
+* make admin navigation transition smoother ([#4217](https://github.com/payloadcms/payload/issues/4217)) ([eb6572e](https://github.com/payloadcms/payload/commit/eb6572e9e56e680cad331c1bc5da47e91306deb9))
+* omit field default value if read access returns false ([#4518](https://github.com/payloadcms/payload/issues/4518)) ([3e9ef84](https://github.com/payloadcms/payload/commit/3e9ef849cd8e69e1e8d7f2f653f0647e93c8ab39))
+* pin ts-node versions which are causing swc errors ([#4447](https://github.com/payloadcms/payload/issues/4447)) ([b9c0248](https://github.com/payloadcms/payload/commit/b9c024882350d14edd57f0f662a2269ed37975e3))
+* properly spreads collection fields into non-tabbed configs [#50](https://github.com/payloadcms/payload/issues/50) ([#51](https://github.com/payloadcms/payload/issues/51)) ([7e88159](https://github.com/payloadcms/payload/commit/7e88159e99e2afdc10addc02cf299c11fe188be7))
+* **plugin-form-builder:** removes use of slate in rich-text serializer ([#4451](https://github.com/payloadcms/payload/issues/4451)) ([3df52a8](https://github.com/payloadcms/payload/commit/3df52a88568622f8fafeabad47c7501229e4ea5f))
+* **plugin-nested-docs:** properly exports field utilities ([#4462](https://github.com/payloadcms/payload/issues/4462)) ([1cc87bd](https://github.com/payloadcms/payload/commit/1cc87bd8ea575dfa2e1f5ce5b38414bbba95b2cb))
+* **richtext-*:** loosen RichTextAdapter types due to re-occuring ts strict mode errors ([#4416](https://github.com/payloadcms/payload/issues/4416)) ([48f1299](https://github.com/payloadcms/payload/commit/48f1299fcba3e3811c6a7f31499f238537f9a5e3))
+* **richtext-lexical:** Blocks field: should not prompt for unsaved changes due to value comparison between null and non-existent props ([#4450](https://github.com/payloadcms/payload/issues/4450)) ([548e78c](https://github.com/payloadcms/payload/commit/548e78c598cb6d029e7cc40f80d9855754f043bc))
+* **richtext-lexical:** do not add unnecessary paragraph before upload, relationship and blocks nodes ([#4441](https://github.com/payloadcms/payload/issues/4441)) ([5c2739e](https://github.com/payloadcms/payload/commit/5c2739ebd144620cfd4ff02531f5812dd62ac61d))
+* **richtext-lexical:** lexicalHTML field not working when used inside of Blocks field ([128f9c4](https://github.com/payloadcms/payload/commit/128f9c4e7e6e20dd1ee221f49428a5bce5179c5f))
+* **richtext-lexical:** lexicalHTML field now works when used inside of row fields ([#4440](https://github.com/payloadcms/payload/issues/4440)) ([0421173](https://github.com/payloadcms/payload/commit/0421173f9e2d6db1b6a94b25884ea807921f2d09))
+* **richtext-lexical:** not all types of URLs are validated correctly ([ac7f980](https://github.com/payloadcms/payload/commit/ac7f9809bc2b9fb6a52b48c10f7d51414801e4de))
+* searching by id sends undefined in where query param ([#4464](https://github.com/payloadcms/payload/issues/4464)) ([46e8c01](https://github.com/payloadcms/payload/commit/46e8c01fbed68856be68804f2bd9744c4c6f5a95))
+* simplifies query validation and fixes nested relationship fields ([#4391](https://github.com/payloadcms/payload/issues/4391)) ([4b5453e](https://github.com/payloadcms/payload/commit/4b5453e8e5484f7afcadbf5bccf8369b552969c6))
+* updates return value of empty arrays in getDataByPath ([#4553](https://github.com/payloadcms/payload/issues/4553)) ([f3748a1](https://github.com/payloadcms/payload/commit/f3748a1534a13e6d844aadd9f0e3e6acbe483d03))
+* upload editing error with plugin-cloud ([#4170](https://github.com/payloadcms/payload/issues/4170)) ([fcbe574](https://github.com/payloadcms/payload/commit/fcbe5744d945dc43642cdaa2007ddc252ecafafa))
+* upload related issues, cropping, fetching local file, external preview image ([#4461](https://github.com/payloadcms/payload/issues/4461)) ([45c472d](https://github.com/payloadcms/payload/commit/45c472d6b35c41e597038089ad1755cdb88193b6))
+* uploads files after validation ([#4218](https://github.com/payloadcms/payload/issues/4218)) ([65adfd2](https://github.com/payloadcms/payload/commit/65adfd21ed538b79628dc4f8ce9e1a5a1bba6aed))
+
+### ⚠ BREAKING CHANGES
+
+#### @payloadcms/richtext-lexical
+
+* **richtext-lexical:** rename TreeviewFeature into TreeViewFeature ([#4520](https://github.com/payloadcms/payload/issues/4520)) ([c49fd66](https://github.com/payloadcms/payload/commit/c49fd6692231b68ca61b079103a0fd7aa4673be1))
+
+If you import TreeviewFeature, you have to rename the import to use TreeViewFeature (capitalized "V")
+
+* **richtext-lexical:** link node: change doc data format to be consistent with relationship field ([#4504](https://github.com/payloadcms/payload/issues/4504)) ([cc0ba89](https://github.com/payloadcms/payload/commit/cc0ba895188f40181c6ba3779f66d547d4ea66f9))
+
+An unpopulated, internal link node no longer saves the doc id under fields.doc.value.id. Now, it saves it under fields.doc.value.
+Migration inside of payload is automatic. If you are reading from the link node inside of your frontend though, you will have to adjust it.
+
+* **richtext-lexical:** improve floating select menu Dropdown classNames ([#4444](https://github.com/payloadcms/payload/issues/4444)) ([9331204](https://github.com/payloadcms/payload/commit/9331204295bfeaf7dd10bc075f42995b2cab2de4))
+
+Dropdown component has a new mandatory sectionKey prop
+
+* **richtext-lexical:** lazy import React components to prevent client-only code from leaking into the server ([#4290](https://github.com/payloadcms/payload/issues/4290)) ([5de347f](https://github.com/payloadcms/payload/commit/5de347ffffca3bf38315d3d87d2ccc5c28cd2723))
+
+1. Most important: If you are updating `@payloadcms/richtext-lexical` to v0.4.0 or higher, you will HAVE to update payload to the latest version as well. If you don't update it, payload likely won't start up due to validation errors. It's generally good practice to upgrade packages prefixed with @payloadcms/ together with payload and keep the versions in sync.
+
+2. `@payloadcms/richtext-slate` is not affected by this.
+
+3. Every single property in the `Feature` interface which accepts a React component now no longer accepts a React component, but a function which imports a React component instead. This is done to ensure no unnecessary client-only code is leaked to the server when importing Features on a server.
+Here's an example migration:
+
+Old:
+
+```ts
+import { BlockIcon } from '../../lexical/ui/icons/Block'
+...
+Icon: BlockIcon,
+```
+
+New:
+
+```ts
+// import { BlockIcon } from '../../lexical/ui/icons/Block' // <= Remove this import
+...
+Icon: () =>
+  // @ts-expect-error
+  import('../../lexical/ui/icons/Block').then((module) => module.BlockIcon),
+```
+
+Or alternatively, if you're using default exports instead of named exports:
+
+```ts
+// import BlockIcon from '../../lexical/ui/icons/Block' // <= Remove this import
+...
+Icon: () =>
+  // @ts-expect-error
+  import('../../lexical/ui/icons/Block'),
+```
+
+4. The types for `SanitizedEditorConfig` and `EditorConfig` have changed. Their respective `lexical` property no longer expects the `LexicalEditorConfig`. It now expects a function returning the `LexicalEditorConfig`. You will have to adjust this if you adjusted that property anywhere, e.g. when initializing the lexical field editor property, or when initializing a new headless editor.
+
+5. The following exports are now exported from the `@payloadcms/richtext-lexical/components` subpath exports instead of `@payloadcms/richtext-lexical`:
+
+- `ToolbarButton`
+- `ToolbarDropdown`
+- `RichTextCell`
+- `RichTextField`
+- `defaultEditorLexicalConfig`
+
+You will have to adjust your imports, only if you import any of those properties in your project.
+
+## @payloadcms/richtext-*
+
+### [@payloadcms/richtext-lexical 0.4.1](https://github.com/payloadcms/payload/compare/richtext-lexical/0.4.0...richtext-lexical/0.4.1) (2023-12-07)
+### [@payloadcms/richtext-slate 1.3.1](https://github.com/payloadcms/payload/compare/richtext-slate/1.3.0...richtext-slate/1.3.1) (2023-12-07)
+
+### Bug Fixes
+
+* **richtext-*:** loosen RichTextAdapter types due to re-occuring ts strict mode errors ([#4416](https://github.com/payloadcms/payload/issues/4416)) ([48f1299](https://github.com/payloadcms/payload/commit/48f1299fcba3e3811c6a7f31499f238537f9a5e3))
+* **richtext-lexical:** lexicalHTML field not working when used inside of Blocks field ([128f9c4](https://github.com/payloadcms/payload/commit/128f9c4e7e6e20dd1ee221f49428a5bce5179c5f))
+
 ## [2.4.0](https://github.com/payloadcms/payload/compare/v2.3.1...v2.4.0) (2023-12-06)
 
 

app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -0,0 +1,22 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views/NotFound/index.js'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const NotFound = ({ params, searchParams }: Args) => NotFoundPage({ config, params, searchParams })
+
+export default NotFound

app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,22 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { RootPage, generatePageMetadata } from '@payloadcms/next/views/Root/index.js'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+
+export default Page

app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes/index.js'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)

app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes/index.js'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes/index.js'
+
+export const POST = GRAPHQL_POST(config)

app/(payload)/layout.tsx

@@ -0,0 +1,15 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from '@payload-config'
+import { RootLayout } from '@payloadcms/next/layouts/Root/index.js'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+
+export default Layout

app/live-preview/(pages)/[slug]/page.client.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { useLivePreview } from '@payloadcms/live-preview-react'
+import React from 'react'
+
+import type { Page as PageType } from '../../../../test/live-preview/payload-types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../_api/serverURL.js'
+import { Blocks } from '../../_components/Blocks/index.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import { Hero } from '../../_components/Hero/index.js'
+
+export const PageClient: React.FC<{
+  page: PageType
+}> = ({ page: initialPage }) => {
+  const { data } = useLivePreview<PageType>({
+    depth: 2,
+    initialData: initialPage,
+    serverURL: PAYLOAD_SERVER_URL,
+  })
+
+  return (
+    <React.Fragment>
+      <Gutter>
+        <h1 id="page-title">{data.title}</h1>
+      </Gutter>
+      <Hero {...data?.hero} />
+      <Blocks
+        blocks={[
+          ...(data?.layout ?? []),
+          {
+            blockName: 'Relationships',
+            blockType: 'relationships',
+            data,
+          },
+        ]}
+        disableTopPadding={
+          !data?.hero || data?.hero?.type === 'none' || data?.hero?.type === 'lowImpact'
+        }
+      />
+    </React.Fragment>
+  )
+}

app/live-preview/(pages)/[slug]/page.tsx

@@ -0,0 +1,37 @@
+import { notFound } from 'next/navigation.js'
+import React from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { fetchDoc } from '../../_api/fetchDoc.js'
+import { fetchDocs } from '../../_api/fetchDocs.js'
+import { PageClient } from './page.client.js'
+
+// eslint-disable-next-line no-restricted-exports
+export default async function Page({ params: { slug = 'home' } }) {
+  let page: Page | null = null
+
+  try {
+    page = await fetchDoc<Page>({
+      slug,
+      collection: 'pages',
+    })
+  } catch (error) {
+    console.error(error)
+  }
+
+  if (!page) {
+    return notFound()
+  }
+
+  return <PageClient page={page} />
+}
+
+export async function generateStaticParams() {
+  try {
+    const pages = await fetchDocs<Page>('pages')
+    return pages?.map(({ slug }) => slug)
+  } catch (error) {
+    return []
+  }
+}

app/live-preview/(pages)/posts/[slug]/page.client.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { useLivePreview } from '@payloadcms/live-preview-react'
+import React from 'react'
+
+import type { Post as PostType } from '../../../../../test/live-preview/payload-types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import { Blocks } from '../../../_components/Blocks/index.js'
+import { PostHero } from '../../../_heros/PostHero/index.js'
+
+export const PostClient: React.FC<{
+  post: PostType
+}> = ({ post: initialPost }) => {
+  const { data } = useLivePreview<PostType>({
+    depth: 2,
+    initialData: initialPost,
+    serverURL: PAYLOAD_SERVER_URL,
+  })
+
+  return (
+    <React.Fragment>
+      <PostHero post={data} />
+      <Blocks blocks={data?.layout} />
+      <Blocks
+        blocks={[
+          {
+            blockName: 'Related Posts',
+            blockType: 'relatedPosts',
+            docs: data?.relatedPosts,
+            introContent: [
+              {
+                type: 'h4',
+                children: [
+                  {
+                    text: 'Related posts',
+                  },
+                ],
+              },
+              {
+                type: 'p',
+                children: [
+                  {
+                    text: 'The posts displayed here are individually selected for this page. Admins can select any number of related posts to display here and the layout will adjust accordingly. Alternatively, you could swap this out for the "Archive" block to automatically populate posts by category complete with pagination. To manage related posts, ',
+                  },
+                  {
+                    type: 'link',
+                    children: [
+                      {
+                        text: 'navigate to the admin dashboard',
+                      },
+                    ],
+                    url: `/admin/collections/posts/${data?.id}`,
+                  },
+                  {
+                    text: '.',
+                  },
+                ],
+              },
+            ],
+            relationTo: 'posts',
+          },
+        ]}
+        disableTopPadding
+      />
+    </React.Fragment>
+  )
+}

app/live-preview/(pages)/posts/[slug]/page.tsx

@@ -0,0 +1,36 @@
+import { notFound } from 'next/navigation.js'
+import React from 'react'
+
+import type { Post } from '../../../../../test/live-preview/payload-types.js'
+
+import { fetchDoc } from '../../../_api/fetchDoc.js'
+import { fetchDocs } from '../../../_api/fetchDocs.js'
+import { PostClient } from './page.client.js'
+
+export default async function Post({ params: { slug = '' } }) {
+  let post: Post | null = null
+
+  try {
+    post = await fetchDoc<Post>({
+      slug,
+      collection: 'posts',
+    })
+  } catch (error) {
+    console.error(error) // eslint-disable-line no-console
+  }
+
+  if (!post) {
+    notFound()
+  }
+
+  return <PostClient post={post} />
+}
+
+export async function generateStaticParams() {
+  try {
+    const posts = await fetchDocs<Post>('posts')
+    return posts?.map(({ slug }) => slug)
+  } catch (error) {
+    return []
+  }
+}

app/live-preview/_api/fetchDoc.ts

@@ -1,14 +1,14 @@
 import QueryString from 'qs'
-import type { Config } from '../../payload-types'
-import { PAYLOAD_SERVER_URL } from './serverURL'
+
+import { PAYLOAD_SERVER_URL } from './serverURL.js'
 
 export const fetchDoc = async <T>(args: {
-  collection: keyof Config['collections']
-  slug?: string
-  id?: string
+  collection: string
   depth?: number
+  id?: string
+  slug?: string
 }): Promise<T> => {
-  const { collection, slug, id, depth = 2 } = args || {}
+  const { id, slug, collection, depth = 2 } = args || {}
 
   const queryString = QueryString.stringify(
     {
@@ -19,11 +19,11 @@ export const fetchDoc = async <T>(args: {
   )
 
   const doc: T = await fetch(`${PAYLOAD_SERVER_URL}/api/${collection}${queryString}`, {
-    method: 'GET',
     cache: 'no-store',
     headers: {
       'Content-Type': 'application/json',
     },
+    method: 'GET',
   })
     ?.then((res) => res.json())
     ?.then((res) => {

app/live-preview/_api/fetchDocs.ts

@@ -0,0 +1,19 @@
+import { PAYLOAD_SERVER_URL } from './serverURL.js'
+
+export const fetchDocs = async <T>(collection: string): Promise<T[]> => {
+  const docs: T[] = await fetch(`${PAYLOAD_SERVER_URL}/api/${collection}?depth=0&limit=100`, {
+    cache: 'no-store',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'GET',
+  })
+    ?.then((res) => res.json())
+    ?.then((res) => {
+      if (res.errors) throw new Error(res?.errors?.[0]?.message ?? 'Error fetching docs')
+
+      return res?.docs
+    })
+
+  return docs
+}

app/live-preview/_api/fetchFooter.ts

@@ -1,15 +1,16 @@
-import type { Footer } from '../../payload-types'
-import { PAYLOAD_SERVER_URL } from './serverURL'
+import type { Footer } from '../../../test/live-preview/payload-types.js'
+
+import { PAYLOAD_SERVER_URL } from './serverURL.js'
 
 export async function fetchFooter(): Promise<Footer> {
   if (!PAYLOAD_SERVER_URL) throw new Error('PAYLOAD_SERVER_URL not found')
 
   const footer = await fetch(`${PAYLOAD_SERVER_URL}/api/globals/footer`, {
-    method: 'GET',
     cache: 'no-store',
     headers: {
       'Content-Type': 'application/json',
     },
+    method: 'GET',
   })
     .then((res) => {
       if (!res.ok) throw new Error('Error fetching doc')

app/live-preview/_api/fetchHeader.ts

@@ -1,15 +1,16 @@
-import type { Header } from '../../payload-types'
-import { PAYLOAD_SERVER_URL } from './serverURL'
+import type { Header } from '../../../test/live-preview/payload-types.js'
+
+import { PAYLOAD_SERVER_URL } from './serverURL.js'
 
 export async function fetchHeader(): Promise<Header> {
   if (!PAYLOAD_SERVER_URL) throw new Error('PAYLOAD_SERVER_URL not found')
 
   const header = await fetch(`${PAYLOAD_SERVER_URL}/api/globals/header`, {
-    method: 'GET',
     cache: 'no-store',
     headers: {
       'Content-Type': 'application/json',
     },
+    method: 'GET',
   })
     ?.then((res) => {
       if (!res.ok) throw new Error('Error fetching doc')

app/live-preview/_blocks/ArchiveBlock/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import type { ArchiveBlockProps } from './types.js'
+
+import { CollectionArchive } from '../../_components/CollectionArchive/index.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+export const ArchiveBlock: React.FC<
+  ArchiveBlockProps & {
+    id?: string
+  }
+> = (props) => {
+  const {
+    id,
+    categories,
+    introContent,
+    limit,
+    populateBy,
+    populatedDocs,
+    populatedDocsTotal,
+    relationTo,
+    selectedDocs,
+  } = props
+
+  return (
+    <div className={classes.archiveBlock} id={`block-${id}`}>
+      {introContent && (
+        <Gutter className={classes.introContent}>
+          <RichText content={introContent} />
+        </Gutter>
+      )}
+      <CollectionArchive
+        categories={categories}
+        limit={limit}
+        populateBy={populateBy}
+        populatedDocs={populatedDocs}
+        populatedDocsTotal={populatedDocsTotal}
+        relationTo={relationTo}
+        selectedDocs={selectedDocs}
+        sort="-publishedDate"
+      />
+    </div>
+  )
+}

app/live-preview/_blocks/ArchiveBlock/types.ts

@@ -0,0 +1,6 @@
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+export type ArchiveBlockProps = Extract<
+  Exclude<Page['layout'], undefined>[0],
+  { blockType: 'archive' }
+>

app/live-preview/_blocks/CallToAction/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import { CMSLink } from '../../_components/Link/index.js'
+import RichText from '../../_components/RichText/index.js'
+import { VerticalPadding } from '../../_components/VerticalPadding/index.js'
+import classes from './index.module.scss'
+
+type Props = Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'cta' }>
+
+export const CallToActionBlock: React.FC<
+  Props & {
+    id?: string
+  }
+> = ({ invertBackground, links, richText }) => {
+  return (
+    <Gutter>
+      <VerticalPadding
+        className={[classes.callToAction, invertBackground && classes.invert]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <div className={classes.wrap}>
+          <div className={classes.content}>
+            <RichText className={classes.richText} content={richText} />
+          </div>
+          <div className={classes.linkGroup}>
+            {(links || []).map(({ link }, i) => {
+              return <CMSLink key={i} {...link} invert={invertBackground} />
+            })}
+          </div>
+        </div>
+      </VerticalPadding>
+    </Gutter>
+  )
+}

app/live-preview/_blocks/Content/index.tsx

@@ -0,0 +1,39 @@
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import { CMSLink } from '../../_components/Link/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+type Props = Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'content' }>
+
+export const ContentBlock: React.FC<
+  Props & {
+    id?: string
+  }
+> = (props) => {
+  const { columns } = props
+
+  return (
+    <Gutter className={classes.content}>
+      <div className={classes.grid}>
+        {columns && columns.length > 0 ? (
+          <Fragment>
+            {columns.map((col, index) => {
+              const { enableLink, link, richText, size } = col
+
+              return (
+                <div className={[classes.column, classes[`column--${size}`]].join(' ')} key={index}>
+                  <RichText content={richText} />
+                  {enableLink && <CMSLink className={classes.link} {...link} />}
+                </div>
+              )
+            })}
+          </Fragment>
+        ) : null}
+      </div>
+    </Gutter>
+  )
+}

app/live-preview/_blocks/MediaBlock/index.tsx

@@ -0,0 +1,42 @@
+import type { StaticImageData } from 'next/image.js'
+
+import React from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import { Media } from '../../_components/Media/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+type Props = Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'mediaBlock' }> & {
+  id?: string
+  staticImage?: StaticImageData
+}
+
+export const MediaBlock: React.FC<Props> = (props) => {
+  const { media, position = 'default', staticImage } = props
+
+  let caption
+  if (media && typeof media === 'object') caption = media.caption
+
+  return (
+    <div className={classes.mediaBlock}>
+      {position === 'fullscreen' && (
+        <div className={classes.fullscreen}>
+          <Media resource={media} src={staticImage} />
+        </div>
+      )}
+      {position === 'default' && (
+        <Gutter>
+          <Media resource={media} src={staticImage} />
+        </Gutter>
+      )}
+      {caption && (
+        <Gutter className={classes.caption}>
+          <RichText content={caption} />
+        </Gutter>
+      )}
+    </div>
+  )
+}

app/live-preview/_blocks/RelatedPosts/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import type { Post } from '../../../../test/live-preview/payload-types.js'
+
+import { Card } from '../../_components/Card/index.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+export type RelatedPostsProps = {
+  blockName: string
+  blockType: 'relatedPosts'
+  docs?: (Post | string)[] | null
+  introContent?: any
+  relationTo: 'posts'
+}
+
+export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
+  const { docs, introContent, relationTo } = props
+
+  return (
+    <div className={classes.relatedPosts}>
+      {introContent && (
+        <Gutter className={classes.introContent}>
+          <RichText content={introContent} />
+        </Gutter>
+      )}
+      <Gutter>
+        <div className={classes.grid}>
+          {docs?.map((doc, index) => {
+            if (typeof doc === 'string') return null
+
+            return (
+              <div
+                className={[
+                  classes.column,
+                  docs.length === 2 && classes['cols-half'],
+                  docs.length >= 3 && classes['cols-thirds'],
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                key={index}
+              >
+                <Card doc={doc} relationTo={relationTo} showCategories />
+              </div>
+            )
+          })}
+        </div>
+      </Gutter>
+    </div>
+  )
+}

app/live-preview/_blocks/Relationships/index.tsx

@@ -0,0 +1,196 @@
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+export type RelationshipsBlockProps = {
+  blockName: string
+  blockType: 'relationships'
+  data: Page
+}
+
+export const RelationshipsBlock: React.FC<RelationshipsBlockProps> = (props) => {
+  const { data } = props
+
+  return (
+    <div className={classes.relationshipsBlock}>
+      <Gutter>
+        <p>
+          This block is for testing purposes only. It renders every possible type of relationship.
+        </p>
+        <p>
+          <b>Rich Text — Slate:</b>
+        </p>
+        {data?.richTextSlate && <RichText content={data.richTextSlate} renderUploadFilenameOnly />}
+        <p>
+          <b>Rich Text — Lexical:</b>
+        </p>
+        {data?.richTextLexical && (
+          <RichText content={data.richTextLexical} renderUploadFilenameOnly serializer="lexical" />
+        )}
+        <p>
+          <b>Upload:</b>
+        </p>
+        {data?.relationshipAsUpload ? (
+          <div>
+            {typeof data?.relationshipAsUpload === 'string'
+              ? data?.relationshipAsUpload
+              : data?.relationshipAsUpload.filename}
+          </div>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Monomorphic Has One:</b>
+        </p>
+        {data?.relationshipMonoHasOne ? (
+          <div>
+            {typeof data?.relationshipMonoHasOne === 'string'
+              ? data?.relationshipMonoHasOne
+              : data?.relationshipMonoHasOne.title}
+          </div>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Monomorphic Has Many:</b>
+        </p>
+        {data?.relationshipMonoHasMany ? (
+          <Fragment>
+            {data?.relationshipMonoHasMany.length
+              ? data?.relationshipMonoHasMany?.map((item, index) =>
+                  item ? (
+                    <div key={index}>{typeof item === 'string' ? item : item.title}</div>
+                  ) : (
+                    'null'
+                  ),
+                )
+              : 'None'}
+          </Fragment>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Polymorphic Has One:</b>
+        </p>
+        {data?.relationshipPolyHasOne ? (
+          <div>
+            {typeof data?.relationshipPolyHasOne.value === 'string'
+              ? data?.relationshipPolyHasOne.value
+              : data?.relationshipPolyHasOne.value.title}
+          </div>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Polymorphic Has Many:</b>
+        </p>
+        {data?.relationshipPolyHasMany ? (
+          <Fragment>
+            {data?.relationshipPolyHasMany.length
+              ? data?.relationshipPolyHasMany?.map((item, index) =>
+                  item.value ? (
+                    <div key={index}>
+                      {typeof item.value === 'string' ? item.value : item.value.title}
+                    </div>
+                  ) : (
+                    'null'
+                  ),
+                )
+              : 'None'}
+          </Fragment>
+        ) : (
+          <div>None</div>
+        )}
+        <p>
+          <b>Array of Relationships:</b>
+        </p>
+        {data?.arrayOfRelationships?.map((item, index) => (
+          <div className={classes.array} key={index}>
+            <p>
+              <b>Rich Text:</b>
+            </p>
+            {item?.richTextInArray && <RichText content={item.richTextInArray} />}
+            <p>
+              <b>Upload:</b>
+            </p>
+            {item?.uploadInArray ? (
+              <div>
+                {typeof item?.uploadInArray === 'string'
+                  ? item?.uploadInArray
+                  : item?.uploadInArray.filename}
+              </div>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Monomorphic Has One:</b>
+            </p>
+            {item?.relationshipInArrayMonoHasOne ? (
+              <div>
+                {typeof item?.relationshipInArrayMonoHasOne === 'string'
+                  ? item?.relationshipInArrayMonoHasOne
+                  : item?.relationshipInArrayMonoHasOne.title}
+              </div>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Monomorphic Has Many:</b>
+            </p>
+            {item?.relationshipInArrayMonoHasMany ? (
+              <Fragment>
+                {item?.relationshipInArrayMonoHasMany.length
+                  ? item?.relationshipInArrayMonoHasMany?.map((rel, relIndex) =>
+                      rel ? (
+                        <div key={relIndex}>{typeof rel === 'string' ? rel : rel.title}</div>
+                      ) : (
+                        'null'
+                      ),
+                    )
+                  : 'None'}
+              </Fragment>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Polymorphic Has One:</b>
+            </p>
+            {item?.relationshipInArrayPolyHasOne ? (
+              <div>
+                {typeof item?.relationshipInArrayPolyHasOne.value === 'string'
+                  ? item?.relationshipInArrayPolyHasOne.value
+                  : item?.relationshipInArrayPolyHasOne.value.title}
+              </div>
+            ) : (
+              <div>None</div>
+            )}
+            <p>
+              <b>Polymorphic Has Many:</b>
+            </p>
+            {item?.relationshipInArrayPolyHasMany ? (
+              <Fragment>
+                {item?.relationshipInArrayPolyHasMany.length
+                  ? item?.relationshipInArrayPolyHasMany?.map((rel, relIndex) =>
+                      rel.value ? (
+                        <div key={relIndex}>
+                          {typeof rel.value === 'string' ? rel.value : rel.value.title}
+                        </div>
+                      ) : (
+                        'null'
+                      ),
+                    )
+                  : 'None'}
+              </Fragment>
+            ) : (
+              <div>None</div>
+            )}
+          </div>
+        ))}
+      </Gutter>
+    </div>
+  )
+}

app/live-preview/_components/BackgroundColor/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+type Props = {
+  children?: React.ReactNode
+  className?: string
+  id?: string
+  invert?: boolean | null
+}
+
+export const BackgroundColor: React.FC<Props> = (props) => {
+  const { id, children, className, invert } = props
+
+  return (
+    <div className={[invert && classes.invert, className].filter(Boolean).join(' ')} id={id}>
+      {children}
+    </div>
+  )
+}

app/live-preview/_components/Blocks/index.tsx

@@ -0,0 +1,88 @@
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+import type { RelationshipsBlockProps } from '../../_blocks/Relationships/index.js'
+import type { VerticalPaddingOptions } from '../VerticalPadding/index.js'
+
+import { ArchiveBlock } from '../../_blocks/ArchiveBlock/index.js'
+import { CallToActionBlock } from '../../_blocks/CallToAction/index.js'
+import { ContentBlock } from '../../_blocks/Content/index.js'
+import { MediaBlock } from '../../_blocks/MediaBlock/index.js'
+import { RelatedPosts, type RelatedPostsProps } from '../../_blocks/RelatedPosts/index.js'
+import { RelationshipsBlock } from '../../_blocks/Relationships/index.js'
+import { toKebabCase } from '../../_utilities/toKebabCase.js'
+import { BackgroundColor } from '../BackgroundColor/index.js'
+import { VerticalPadding } from '../VerticalPadding/index.js'
+
+const blockComponents = {
+  archive: ArchiveBlock,
+  content: ContentBlock,
+  cta: CallToActionBlock,
+  mediaBlock: MediaBlock,
+  relatedPosts: RelatedPosts,
+  relationships: RelationshipsBlock,
+}
+
+type Block = NonNullable<Page['layout']>[number]
+
+export const Blocks: React.FC<{
+  blocks?: (Block | RelatedPostsProps | RelationshipsBlockProps)[] | null
+  disableTopPadding?: boolean
+}> = (props) => {
+  const { blocks, disableTopPadding } = props
+
+  const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
+
+  if (hasBlocks) {
+    return (
+      <Fragment>
+        {blocks.map((block, index) => {
+          const { blockName, blockType } = block
+
+          if (blockType && blockType in blockComponents) {
+            const Block = blockComponents[blockType]
+
+            // the cta block is containerized, so we don't consider it to be inverted at the block-level
+            const blockIsInverted =
+              'invertBackground' in block && blockType !== 'cta' ? block.invertBackground : false
+            const prevBlock = blocks[index - 1]
+
+            const prevBlockInverted =
+              prevBlock && 'invertBackground' in prevBlock && prevBlock?.invertBackground
+
+            const isPrevSame = Boolean(blockIsInverted) === Boolean(prevBlockInverted)
+
+            let paddingTop: VerticalPaddingOptions = 'large'
+            let paddingBottom: VerticalPaddingOptions = 'large'
+
+            if (prevBlock && isPrevSame) {
+              paddingTop = 'none'
+            }
+
+            if (index === blocks.length - 1) {
+              paddingBottom = 'large'
+            }
+
+            if (disableTopPadding && index === 0) {
+              paddingTop = 'none'
+            }
+
+            if (Block) {
+              return (
+                <BackgroundColor invert={blockIsInverted} key={index}>
+                  <VerticalPadding bottom={paddingBottom} top={paddingTop}>
+                    {/* @ts-expect-error */}
+                    <Block id={toKebabCase(blockName)} {...block} />
+                  </VerticalPadding>
+                </BackgroundColor>
+              )
+            }
+          }
+          return null
+        })}
+      </Fragment>
+    )
+  }
+
+  return null
+}

app/live-preview/_components/Button/index.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import type { ElementType } from 'react'
+
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export type Props = {
+  appearance?: 'default' | 'none' | 'primary' | 'secondary'
+  className?: string
+  disabled?: boolean
+  el?: 'a' | 'button' | 'link'
+  href?: string
+  invert?: boolean
+  label?: string
+  newTab?: boolean
+  onClick?: () => void
+  type?: 'button' | 'submit'
+}
+
+export const Button: React.FC<Props> = ({
+  type = 'button',
+  appearance,
+  className: classNameFromProps,
+  disabled,
+  el: elFromProps = 'link',
+  href,
+  invert,
+  label,
+  newTab,
+  onClick,
+}) => {
+  let el = elFromProps
+
+  const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
+
+  const className = [
+    classes.button,
+    classNameFromProps,
+    classes[`appearance--${appearance}`],
+    invert && classes[`${appearance}--invert`],
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const content = (
+    <div className={classes.content}>
+      <span className={classes.label}>{label}</span>
+    </div>
+  )
+
+  if (onClick || type === 'submit') el = 'button'
+
+  if (el === 'link') {
+    return (
+      <Link className={className} href={href || ''} {...newTabProps} onClick={onClick}>
+        {content}
+      </Link>
+    )
+  }
+
+  const Element: ElementType = el
+
+  return (
+    <Element
+      className={className}
+      href={href}
+      type={type}
+      {...newTabProps}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {content}
+    </Element>
+  )
+}

app/live-preview/_components/Card/index.tsx

@@ -0,0 +1,88 @@
+import LinkWithDefault from 'next/link.js'
+import React, { Fragment } from 'react'
+
+import type { Post } from '../../../../test/live-preview/payload-types.js'
+
+import { Media } from '../Media/index.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export const Card: React.FC<{
+  alignItems?: 'center'
+  className?: string
+  doc?: Post
+  hideImagesOnMobile?: boolean
+  orientation?: 'horizontal' | 'vertical'
+  relationTo?: 'posts'
+  showCategories?: boolean
+  title?: string
+}> = (props) => {
+  const {
+    className,
+    doc,
+    orientation = 'vertical',
+    relationTo,
+    showCategories,
+    title: titleFromProps,
+  } = props
+
+  const { slug, categories, meta, title } = doc || {}
+  const { description, image: metaImage } = meta || {}
+
+  const hasCategories = categories && Array.isArray(categories) && categories.length > 0
+  const titleToUse = titleFromProps || title
+  const sanitizedDescription = description?.replace(/\s/g, ' ') // replace non-breaking space with white space
+  const href = `/live-preview/${relationTo}/${slug}`
+
+  return (
+    <div
+      className={[classes.card, className, orientation && classes[orientation]]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <Link className={classes.mediaWrapper} href={href}>
+        {!metaImage && <div className={classes.placeholder}>No image</div>}
+        {metaImage && typeof metaImage !== 'string' && (
+          <Media fill imgClassName={classes.image} resource={metaImage} />
+        )}
+      </Link>
+      <div className={classes.content}>
+        {showCategories && hasCategories && (
+          <div className={classes.leader}>
+            {showCategories && hasCategories && (
+              <div>
+                {categories?.map((category, index) => {
+                  const titleFromCategory = typeof category === 'string' ? category : category.title
+
+                  const categoryTitle = titleFromCategory || 'Untitled category'
+
+                  const isLast = index === categories.length - 1
+
+                  return (
+                    <Fragment key={index}>
+                      {categoryTitle}
+                      {!isLast && <Fragment>, &nbsp;</Fragment>}
+                    </Fragment>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        )}
+        {titleToUse && (
+          <h4 className={classes.title}>
+            <Link className={classes.titleLink} href={href}>
+              {titleToUse}
+            </Link>
+          </h4>
+        )}
+        {description && (
+          <div className={classes.body}>
+            {description && <p className={classes.description}>{sanitizedDescription}</p>}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

app/live-preview/_components/Chevron/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+export const Chevron: React.FC<{
+  className?: string
+  rotate?: number
+}> = ({ className, rotate }) => {
+  return (
+    <svg
+      className={className}
+      height="100%"
+      style={{
+        transform: typeof rotate === 'number' ? `rotate(${rotate || 0}deg)` : undefined,
+      }}
+      viewBox="0 0 24 24"
+      width="100%"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M23.245 4l-11.245 14.374-11.219-14.374-.781.619 12 15.381 12-15.391-.755-.609z"
+        fill="none"
+        stroke="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  )
+}

app/live-preview/_components/CollectionArchive/PopulateByCollection/index.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+import qs from 'qs'
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+
+import type { Post } from '../../../../../test/live-preview/payload-types.js'
+import type { ArchiveBlockProps } from '../../../_blocks/ArchiveBlock/types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import { Card } from '../../Card/index.js'
+import { Gutter } from '../../Gutter/index.js'
+import { PageRange } from '../../PageRange/index.js'
+import { Pagination } from '../../Pagination/index.js'
+import classes from './index.module.scss'
+
+type Result = {
+  docs: (Post | string)[]
+  hasNextPage: boolean
+  hasPrevPage: boolean
+  nextPage: number
+  page: number
+  prevPage: number
+  totalDocs: number
+  totalPages: number
+}
+
+export type Props = Omit<ArchiveBlockProps, 'blockType'> & {
+  className?: string
+  onResultChange?: (result: Result) => void // eslint-disable-line no-unused-vars
+  showPageRange?: boolean
+  sort?: string
+}
+
+export const CollectionArchiveByCollection: React.FC<Props> = (props) => {
+  const {
+    categories: catsFromProps,
+    className,
+    limit = 10,
+    onResultChange,
+    populatedDocs,
+    populatedDocsTotal,
+    relationTo,
+    showPageRange,
+    sort = '-createdAt',
+  } = props
+
+  const [results, setResults] = useState<Result>({
+    docs: populatedDocs?.map((doc) => doc.value) || [],
+    hasNextPage: false,
+    hasPrevPage: false,
+    nextPage: 1,
+    page: 1,
+    prevPage: 1,
+    totalDocs: typeof populatedDocsTotal === 'number' ? populatedDocsTotal : 0,
+    totalPages: 1,
+  })
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const hasHydrated = useRef(false)
+  const [page, setPage] = useState(1)
+
+  const scrollToRef = useCallback(() => {
+    const { current } = scrollRef
+    if (current) {
+      // current.scrollIntoView({
+      //   behavior: 'smooth',
+      // })
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isLoading && typeof results.page !== 'undefined') {
+      // scrollToRef()
+    }
+  }, [isLoading, scrollToRef, results])
+
+  useEffect(() => {
+    // hydrate the block with fresh content after first render
+    // don't show loader unless the request takes longer than x ms
+    // and don't show it during initial hydration
+    const timer = setTimeout(() => {
+      if (hasHydrated) {
+        setIsLoading(true)
+      }
+    }, 500)
+
+    const searchQuery = qs.stringify(
+      {
+        depth: 1,
+        limit,
+        page,
+        sort,
+        where: {
+          ...(catsFromProps && catsFromProps?.length > 0
+            ? {
+                categories: {
+                  in:
+                    typeof catsFromProps === 'string'
+                      ? [catsFromProps]
+                      : catsFromProps
+                          .map((cat) => (typeof cat === 'object' && cat !== null ? cat.id : cat))
+                          .join(','),
+                },
+              }
+            : {}),
+        },
+      },
+      { encode: false },
+    )
+
+    const makeRequest = async () => {
+      try {
+        const req = await fetch(`${PAYLOAD_SERVER_URL}/api/${relationTo}?${searchQuery}`)
+        const json = await req.json()
+        clearTimeout(timer)
+        hasHydrated.current = true
+
+        const { docs } = json as { docs: Post[] }
+
+        if (docs && Array.isArray(docs)) {
+          setResults(json)
+          setIsLoading(false)
+          if (typeof onResultChange === 'function') {
+            onResultChange(json)
+          }
+        }
+      } catch (err) {
+        console.warn(err) // eslint-disable-line no-console
+        setIsLoading(false)
+        setError(`Unable to load "${relationTo} archive" data at this time.`)
+      }
+    }
+
+    void makeRequest()
+
+    return () => {
+      if (timer) clearTimeout(timer)
+    }
+  }, [page, catsFromProps, relationTo, onResultChange, sort, limit])
+
+  return (
+    <div className={[classes.collectionArchive, className].filter(Boolean).join(' ')}>
+      <div className={classes.scrollRef} ref={scrollRef} />
+      {!isLoading && error && <Gutter>{error}</Gutter>}
+      <Fragment>
+        {showPageRange !== false && (
+          <Gutter>
+            <div className={classes.pageRange}>
+              <PageRange
+                collection={relationTo}
+                currentPage={results.page}
+                limit={limit}
+                totalDocs={results.totalDocs}
+              />
+            </div>
+          </Gutter>
+        )}
+        <Gutter>
+          <div className={classes.grid}>
+            {results.docs?.map((result, index) => {
+              if (typeof result === 'string') {
+                return null
+              }
+
+              return (
+                <div className={classes.column} key={index}>
+                  <Card doc={result} relationTo="posts" showCategories />
+                </div>
+              )
+            })}
+          </div>
+          {results.totalPages > 1 && (
+            <Pagination
+              className={classes.pagination}
+              onClick={setPage}
+              page={results.page}
+              totalPages={results.totalPages}
+            />
+          )}
+        </Gutter>
+      </Fragment>
+    </div>
+  )
+}

app/live-preview/_components/CollectionArchive/PopulateBySelection/index.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import React, { Fragment } from 'react'
+
+import type { ArchiveBlockProps } from '../../../_blocks/ArchiveBlock/types.js'
+
+import { Card } from '../../Card/index.js'
+import { Gutter } from '../../Gutter/index.js'
+import classes from './index.module.scss'
+
+export type Props = {
+  className?: string
+  selectedDocs?: ArchiveBlockProps['selectedDocs']
+}
+
+export const CollectionArchiveBySelection: React.FC<Props> = (props) => {
+  const { className, selectedDocs } = props
+
+  const result = selectedDocs?.map((doc) => doc.value)
+
+  return (
+    <div className={[classes.collectionArchive, className].filter(Boolean).join(' ')}>
+      <Fragment>
+        <Gutter>
+          <div className={classes.grid}>
+            {result?.map((result, index) => {
+              if (typeof result === 'string') {
+                return null
+              }
+
+              return (
+                <div className={classes.column} key={index}>
+                  <Card doc={result} relationTo="posts" showCategories />
+                </div>
+              )
+            })}
+          </div>
+        </Gutter>
+      </Fragment>
+    </div>
+  )
+}

app/live-preview/_components/CollectionArchive/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import type { ArchiveBlockProps } from '../../_blocks/ArchiveBlock/types.js'
+
+import { CollectionArchiveByCollection } from './PopulateByCollection/index.js'
+import { CollectionArchiveBySelection } from './PopulateBySelection/index.js'
+
+export type Props = Omit<ArchiveBlockProps, 'blockType'> & {
+  className?: string
+  sort?: string
+}
+
+export const CollectionArchive: React.FC<Props> = (props) => {
+  const { className, populateBy, selectedDocs } = props
+
+  if (populateBy === 'selection') {
+    return <CollectionArchiveBySelection className={className} selectedDocs={selectedDocs} />
+  }
+
+  if (populateBy === 'collection') {
+    return <CollectionArchiveByCollection {...props} className={className} />
+  }
+
+  return null
+}

app/live-preview/_components/Footer/index.tsx

@@ -0,0 +1,41 @@
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import { fetchFooter } from '../../_api/fetchFooter.js'
+import { Gutter } from '../Gutter/index.js'
+import { CMSLink } from '../Link/index.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export async function Footer() {
+  const footer = await fetchFooter()
+
+  const navItems = footer?.navItems || []
+
+  return (
+    <footer className={classes.footer}>
+      <Gutter className={classes.wrap}>
+        <Link href="/">
+          <picture>
+            <img
+              alt="Payload Logo"
+              className={classes.logo}
+              src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-light.svg"
+            />
+          </picture>
+        </Link>
+        <nav className={classes.nav}>
+          {navItems.map(({ link }, i) => {
+            return <CMSLink key={i} {...link} />
+          })}
+          <Link href="/admin">Admin</Link>
+          <Link href="https://github.com/payloadcms/payload/tree/main/templates/ecommerce">
+            Source Code
+          </Link>
+          <Link href="https://github.com/payloadcms/payload">Payload</Link>
+        </nav>
+      </Gutter>
+    </footer>
+  )
+}

app/live-preview/_components/Gutter/index.tsx

@@ -0,0 +1,35 @@
+import type { Ref } from 'react'
+
+import React, { forwardRef } from 'react'
+
+import classes from './index.module.scss'
+
+type Props = {
+  children: React.ReactNode
+  className?: string
+  left?: boolean
+  ref?: Ref<HTMLDivElement>
+  right?: boolean
+}
+
+export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const { children, className, left = true, right = true } = props
+
+  return (
+    <div
+      className={[
+        classes.gutter,
+        left && classes.gutterLeft,
+        right && classes.gutterRight,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      ref={ref}
+    >
+      {children}
+    </div>
+  )
+})
+
+Gutter.displayName = 'Gutter'

app/live-preview/_components/Header/Nav/index.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import React from 'react'
+
+import type { Header as HeaderType } from '../../../../../test/live-preview/payload-types.js'
+
+import { CMSLink } from '../../Link/index.js'
+import classes from './index.module.scss'
+
+export const HeaderNav: React.FC<{ header: HeaderType }> = ({ header }) => {
+  const navItems = header?.navItems || []
+
+  return (
+    <nav className={classes.nav}>
+      {navItems.map(({ link }, i) => {
+        return <CMSLink key={i} {...link} />
+      })}
+    </nav>
+  )
+}

app/live-preview/_components/Header/index.tsx

@@ -0,0 +1,28 @@
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import { fetchHeader } from '../../_api/fetchHeader.js'
+import { Gutter } from '../Gutter/index.js'
+import { HeaderNav } from './Nav/index.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export async function Header() {
+  const header = await fetchHeader()
+
+  return (
+    <header className={classes.header}>
+      <Gutter className={classes.wrap}>
+        <Link href="/live-preview">
+          <img
+            alt="Payload Logo"
+            className={classes.logo}
+            src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-dark.svg"
+          />
+        </Link>
+        <HeaderNav header={header} />
+      </Gutter>
+    </header>
+  )
+}

app/live-preview/_components/Hero/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { HighImpactHero } from '../../_heros/HighImpact/index.js'
+import { LowImpactHero } from '../../_heros/LowImpact/index.js'
+
+const heroes = {
+  highImpact: HighImpactHero,
+  lowImpact: LowImpactHero,
+}
+
+export const Hero: React.FC<Page['hero']> = (props) => {
+  const { type } = props || {}
+
+  if (!type || type === 'none') return null
+
+  const HeroToRender = heroes[type]
+
+  if (!HeroToRender) return null
+
+  return <HeroToRender {...props} />
+}

app/live-preview/_components/Link/index.tsx

@@ -0,0 +1,67 @@
+import LinkWithDefault from 'next/link.js'
+import React from 'react'
+
+import type { Page, Post } from '../../../../test/live-preview/payload-types.js'
+import type { Props as ButtonProps } from '../Button/index.js'
+
+import { Button } from '../Button/index.js'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+type CMSLinkType = {
+  appearance?: ButtonProps['appearance']
+  children?: React.ReactNode
+  className?: string
+  invert?: ButtonProps['invert']
+  label?: string
+  newTab?: boolean
+  reference?: {
+    relationTo: 'pages' | 'posts'
+    value: Page | Post | string
+  }
+  type?: 'custom' | 'reference'
+  url?: string
+}
+
+export const CMSLink: React.FC<CMSLinkType> = ({
+  type,
+  appearance,
+  children,
+  className,
+  invert,
+  label,
+  newTab,
+  reference,
+  url,
+}) => {
+  const href =
+    type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
+      ? `/${reference.value.slug}`
+      : url
+
+  if (!href) return null
+
+  if (!appearance) {
+    const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
+
+    if (href || url) {
+      return (
+        <Link {...newTabProps} className={className} href={href || url || ''}>
+          {label && label}
+          {children && children}
+        </Link>
+      )
+    }
+  }
+
+  return (
+    <Button
+      appearance={appearance}
+      className={className}
+      href={href}
+      invert={invert}
+      label={label}
+      newTab={newTab}
+    />
+  )
+}

app/live-preview/_components/Media/Image/index.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import type { StaticImageData } from 'next/image.js'
+
+import NextImageWithDefault from 'next/image.js'
+import React from 'react'
+
+import type { Props as MediaProps } from '../types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import cssVariables from '../../../cssVariables.js'
+import classes from './index.module.scss'
+
+const { breakpoints } = cssVariables
+
+const NextImage = (NextImageWithDefault.default ||
+  NextImageWithDefault) as typeof NextImageWithDefault.default
+
+export const Image: React.FC<MediaProps> = (props) => {
+  const {
+    alt: altFromProps,
+    fill,
+    imgClassName,
+    onClick,
+    onLoad: onLoadFromProps,
+    priority,
+    resource,
+    src: srcFromProps,
+  } = props
+
+  const [isLoading, setIsLoading] = React.useState(true)
+
+  let width: number | undefined
+  let height: number | undefined
+  let alt = altFromProps
+  let src: StaticImageData | string = srcFromProps || ''
+
+  if (!src && resource && typeof resource !== 'string') {
+    const {
+      alt: altFromResource,
+      filename: fullFilename,
+      height: fullHeight,
+      width: fullWidth,
+    } = resource
+
+    width = fullWidth || undefined
+    height = fullHeight || undefined
+    alt = altFromResource
+
+    const filename = fullFilename
+
+    src = `${PAYLOAD_SERVER_URL}/api/media/file/${filename}`
+  }
+
+  // NOTE: this is used by the browser to determine which image to download at different screen sizes
+  const sizes = Object.entries(breakpoints)
+    .map(([, value]) => `(max-width: ${value}px) ${value}px`)
+    .join(', ')
+
+  return (
+    <NextImage
+      alt={alt || ''}
+      className={[isLoading && classes.placeholder, classes.image, imgClassName]
+        .filter(Boolean)
+        .join(' ')}
+      fill={fill}
+      height={!fill ? height : undefined}
+      onClick={onClick}
+      onLoad={() => {
+        setIsLoading(false)
+        if (typeof onLoadFromProps === 'function') {
+          onLoadFromProps()
+        }
+      }}
+      priority={priority}
+      sizes={sizes}
+      src={src}
+      width={!fill ? width : undefined}
+    />
+  )
+}

app/live-preview/_components/Media/Video/index.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+
+import type { Props as MediaProps } from '../types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
+import classes from './index.module.scss'
+
+export const Video: React.FC<MediaProps> = (props) => {
+  const { onClick, resource, videoClassName } = props
+
+  const videoRef = useRef<HTMLVideoElement>(null)
+  // const [showFallback] = useState<boolean>()
+
+  useEffect(() => {
+    const { current: video } = videoRef
+    if (video) {
+      video.addEventListener('suspend', () => {
+        // setShowFallback(true);
+        // console.warn('Video was suspended, rendering fallback image.')
+      })
+    }
+  }, [])
+
+  if (resource && typeof resource !== 'string') {
+    const { filename } = resource
+
+    return (
+      <video
+        autoPlay
+        className={[classes.video, videoClassName].filter(Boolean).join(' ')}
+        controls={false}
+        loop
+        muted
+        onClick={onClick}
+        playsInline
+        ref={videoRef}
+      >
+        <source src={`${PAYLOAD_SERVER_URL}/media/${filename}`} />
+      </video>
+    )
+  }
+
+  return null
+}

app/live-preview/_components/Media/index.tsx

@@ -0,0 +1,31 @@
+import type { ElementType } from 'react'
+
+import React, { Fragment } from 'react'
+
+import type { Props } from './types.js'
+
+import { Image } from './Image/index.js'
+import { Video } from './Video/index.js'
+
+export const Media: React.FC<Props> = (props) => {
+  const { className, htmlElement = 'div', resource } = props
+
+  const isVideo = typeof resource !== 'string' && resource?.mimeType?.includes('video')
+  const Tag = (htmlElement as ElementType) || Fragment
+
+  return (
+    <Tag
+      {...(htmlElement !== null
+        ? {
+            className,
+          }
+        : {})}
+    >
+      {isVideo ? (
+        <Video {...props} />
+      ) : (
+        <Image {...props} /> // eslint-disable-line
+      )}
+    </Tag>
+  )
+}

app/live-preview/_components/Media/types.ts

@@ -0,0 +1,20 @@
+import type { StaticImageData } from 'next/image'
+import type { ElementType, Ref } from 'react'
+
+import type { Media as MediaType } from '../../../payload-types'
+
+export interface Props {
+  alt?: string
+  className?: string
+  fill?: boolean // for NextImage only
+  htmlElement?: ElementType | null
+  imgClassName?: string
+  onClick?: () => void
+  onLoad?: () => void
+  priority?: boolean // for NextImage only
+  ref?: Ref<HTMLImageElement | HTMLVideoElement | null>
+  resource?: MediaType | string // for Payload media
+  size?: string // for NextImage only
+  src?: StaticImageData // for static media
+  videoClassName?: string
+}

app/live-preview/_components/PageRange/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+const defaultLabels = {
+  plural: 'Docs',
+  singular: 'Doc',
+}
+
+const defaultCollectionLabels = {
+  products: {
+    plural: 'Products',
+    singular: 'Product',
+  },
+}
+
+export const PageRange: React.FC<{
+  className?: string
+  collection?: string
+  collectionLabels?: {
+    plural?: string
+    singular?: string
+  }
+  currentPage?: number
+  limit?: number
+  totalDocs?: number
+}> = (props) => {
+  const {
+    className,
+    collection,
+    collectionLabels: collectionLabelsFromProps,
+    currentPage,
+    limit,
+    totalDocs,
+  } = props
+
+  const indexStart = (currentPage ? currentPage - 1 : 1) * (limit || 1) + 1
+  let indexEnd = (currentPage || 1) * (limit || 1)
+  if (totalDocs && indexEnd > totalDocs) indexEnd = totalDocs
+
+  const { plural, singular } =
+    collectionLabelsFromProps || defaultCollectionLabels[collection || ''] || defaultLabels || {}
+
+  return (
+    <div className={[className, classes.pageRange].filter(Boolean).join(' ')}>
+      {(typeof totalDocs === 'undefined' || totalDocs === 0) && 'Search produced no results.'}
+      {typeof totalDocs !== 'undefined' &&
+        totalDocs > 0 &&
+        `Showing ${indexStart} - ${indexEnd} of ${totalDocs} ${totalDocs > 1 ? plural : singular}`}
+    </div>
+  )
+}

app/live-preview/_components/Pagination/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { Chevron } from '../Chevron/index.js'
+import classes from './index.module.scss'
+
+export const Pagination: React.FC<{
+  className?: string
+  onClick: (page: number) => void
+  page: number
+  totalPages: number
+}> = (props) => {
+  const { className, onClick, page, totalPages } = props
+  const hasNextPage = page < totalPages
+  const hasPrevPage = page > 1
+
+  return (
+    <div className={[classes.pagination, className].filter(Boolean).join(' ')}>
+      <button
+        className={classes.button}
+        disabled={!hasPrevPage}
+        onClick={() => {
+          onClick(page - 1)
+        }}
+        type="button"
+      >
+        <Chevron className={classes.icon} rotate={90} />
+      </button>
+      <div className={classes.pageRange}>
+        <span className={classes.pageRangeLabel}>
+          Page {page} of {totalPages}
+        </span>
+      </div>
+      <button
+        className={classes.button}
+        disabled={!hasNextPage}
+        onClick={() => {
+          onClick(page + 1)
+        }}
+        type="button"
+      >
+        <Chevron className={classes.icon} rotate={-90} />
+      </button>
+    </div>
+  )
+}

app/live-preview/_components/RichText/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+import serializeLexical from './serializeLexical.js'
+import serializeSlate from './serializeSlate.js'
+
+const RichText: React.FC<{
+  className?: string
+  content: any
+  renderUploadFilenameOnly?: boolean
+  serializer?: 'lexical' | 'slate'
+}> = ({ className, content, renderUploadFilenameOnly, serializer = 'slate' }) => {
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div className={[classes.richText, className].filter(Boolean).join(' ')}>
+      {serializer === 'slate'
+        ? serializeSlate(content, renderUploadFilenameOnly)
+        : serializeLexical(content, renderUploadFilenameOnly)}
+    </div>
+  )
+}
+
+export default RichText

app/live-preview/_components/RichText/serializeLexical.tsx

@@ -1,6 +1,9 @@
 import type { SerializedEditorState } from 'lexical'
-import { CMSLink } from '../Link'
-import { Media } from '../Media'
+
+import React from 'react'
+
+import { CMSLink } from '../Link/index.js'
+import { Media } from '../Media/index.js'
 
 const serializer = (
   content?: SerializedEditorState['root']['children'],
@@ -55,10 +58,10 @@ const serializer = (
         return (
           <CMSLink
             key={i}
+            newTab={Boolean(node?.newTab)}
+            reference={node.doc as any}
             type={node.linkType === 'internal' ? 'reference' : 'custom'}
             url={node.url}
-            reference={node.doc as any}
-            newTab={Boolean(node?.newTab)}
           >
             {serializer(node?.children, renderUploadFilenameOnly)}
           </CMSLink>

app/live-preview/_components/RichText/serializeSlate.tsx

@@ -1,18 +1,19 @@
-import React, { Fragment } from 'react'
 import escapeHTML from 'escape-html'
+import React, { Fragment } from 'react'
 import { Text } from 'slate'
-import { CMSLink } from '../Link'
-import { Media } from '../Media'
+
+import { CMSLink } from '../Link/index.js'
+import { Media } from '../Media/index.js'
 
 // eslint-disable-next-line no-use-before-define
 type Children = Leaf[]
 
 type Leaf = {
-  type: string
-  value?: any
-  children?: Children
-  url?: string
   [key: string]: unknown
+  children?: Children
+  type: string
+  url?: string
+  value?: any
 }
 
 const serializeSlate = (
@@ -37,7 +38,7 @@ const serializeSlate = (
 
       if (node.underline) {
         text = (
-          <span style={{ textDecoration: 'underline' }} key={i}>
+          <span key={i} style={{ textDecoration: 'underline' }}>
             {text}
           </span>
         )
@@ -45,7 +46,7 @@ const serializeSlate = (
 
       if (node.strikethrough) {
         text = (
-          <span style={{ textDecoration: 'line-through' }} key={i}>
+          <span key={i} style={{ textDecoration: 'line-through' }}>
             {text}
           </span>
         )
@@ -106,10 +107,10 @@ const serializeSlate = (
         return (
           <CMSLink
             key={i}
+            newTab={Boolean(node?.newTab)}
+            reference={node.doc as any}
             type={node.linkType === 'internal' ? 'reference' : 'custom'}
             url={node.url}
-            reference={node.doc as any}
-            newTab={Boolean(node?.newTab)}
           >
             {serializeSlate(node?.children, renderUploadFilenameOnly)}
           </CMSLink>

app/live-preview/_components/VerticalPadding/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import classes from './index.module.scss'
+
+export type VerticalPaddingOptions = 'large' | 'medium' | 'none'
+
+type Props = {
+  bottom?: VerticalPaddingOptions
+  children: React.ReactNode
+  className?: string
+  top?: VerticalPaddingOptions
+}
+
+export const VerticalPadding: React.FC<Props> = ({
+  bottom = 'medium',
+  children,
+  className,
+  top = 'medium',
+}) => {
+  return (
+    <div
+      className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  )
+}

app/live-preview/_css/app.scss

@@ -0,0 +1,121 @@
+@use './queries.scss' as *;
+@use './colors.scss' as *;
+@use './type.scss' as *;
+
+:root {
+  --base: 24px;
+  --font-body: system-ui;
+  --font-mono: 'Roboto Mono', monospace;
+
+  --gutter-h: 180px;
+  --block-padding: 120px;
+
+  --theme-text: var(--color-base-750);
+
+  @include large-break {
+    --gutter-h: 144px;
+    --block-padding: 96px;
+  }
+
+  @include mid-break {
+    --gutter-h: 24px;
+    --block-padding: 60px;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @extend %body;
+  -webkit-font-smoothing: antialiased;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  margin: 0;
+  color: var(--theme-text);
+}
+
+::selection {
+  background: var(--color-success-500);
+  color: var(--color-base-800);
+}
+
+::-moz-selection {
+  background: var(--color-success-500);
+  color: var(--color-base-800);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+h1 {
+  @extend %h1;
+}
+
+h2 {
+  @extend %h2;
+}
+
+h3 {
+  @extend %h3;
+}
+
+h4 {
+  @extend %h4;
+}
+
+h5 {
+  @extend %h5;
+}
+
+h6 {
+  @extend %h6;
+}
+
+p {
+  margin: var(--base) 0;
+
+  @include mid-break {
+    margin: calc(var(--base) * 0.75) 0;
+  }
+}
+
+#page-title {
+  @extend %h6;
+}
+
+ul,
+ol {
+  padding-left: var(--base);
+  margin: 0 0 var(--base);
+}
+
+a {
+  color: currentColor;
+
+  &:focus {
+    opacity: 0.8;
+    outline: none;
+  }
+
+  &:active {
+    opacity: 0.7;
+    outline: none;
+  }
+}
+
+svg {
+  vertical-align: middle;
+}

app/live-preview/_heros/HighImpact/index.tsx

@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import { Media } from '../../_components/Media/index.js'
+import RichText from '../../_components/RichText/index.js'
+import classes from './index.module.scss'
+
+export const HighImpactHero: React.FC<Page['hero']> = ({ media, richText }) => {
+  return (
+    <Gutter className={classes.hero}>
+      <div className={classes.content}>
+        <RichText content={richText} />
+      </div>
+      <div className={classes.media}>
+        {typeof media === 'object' && media !== null && (
+          <Fragment>
+            <Media
+              // fill
+              imgClassName={classes.image}
+              priority
+              resource={media}
+            />
+            {media?.caption && <RichText className={classes.caption} content={media.caption} />}
+          </Fragment>
+        )}
+      </div>
+    </Gutter>
+  )
+}

app/live-preview/_heros/LowImpact/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import type { Page } from '../../../../test/live-preview/payload-types.js'
+
+import { Gutter } from '../../_components/Gutter/index.js'
+import RichText from '../../_components/RichText/index.js'
+import { VerticalPadding } from '../../_components/VerticalPadding/index.js'
+import classes from './index.module.scss'
+
+export const LowImpactHero: React.FC<Page['hero']> = ({ richText }) => {
+  return (
+    <Gutter className={classes.lowImpactHero}>
+      <div className={classes.content}>
+        <VerticalPadding>
+          <RichText className={classes.richText} content={richText} />
+        </VerticalPadding>
+      </div>
+    </Gutter>
+  )
+}

app/live-preview/_heros/PostHero/index.tsx

@@ -0,0 +1,57 @@
+import LinkWithDefault from 'next/link.js'
+import React, { Fragment } from 'react'
+
+import type { Post } from '../../../../test/live-preview/payload-types.js'
+
+import { PAYLOAD_SERVER_URL } from '../../_api/serverURL.js'
+import { Gutter } from '../../_components/Gutter/index.js'
+import { Media } from '../../_components/Media/index.js'
+import RichText from '../../_components/RichText/index.js'
+import { formatDateTime } from '../../_utilities/formatDateTime.js'
+import classes from './index.module.scss'
+
+const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+
+export const PostHero: React.FC<{
+  post: Post
+}> = ({ post }) => {
+  const { id, createdAt, meta: { description, image: metaImage } = {} } = post
+
+  return (
+    <Fragment>
+      <Gutter className={classes.postHero}>
+        <div className={classes.content}>
+          <RichText className={classes.richText} content={post?.hero?.richText} />
+          <p className={classes.meta}>
+            {createdAt && (
+              <Fragment>
+                {'Created on '}
+                {formatDateTime(createdAt)}
+              </Fragment>
+            )}
+          </p>
+          <div>
+            <p className={classes.description}>
+              {`${description ? `${description} ` : ''}To edit this post, `}
+              <Link href={`${PAYLOAD_SERVER_URL}/admin/collections/posts/${id}`}>
+                navigate to the admin dashboard
+              </Link>
+              .
+            </p>
+          </div>
+        </div>
+        <div className={classes.media}>
+          <div className={classes.mediaWrapper}>
+            {!metaImage && <div className={classes.placeholder}>No image</div>}
+            {metaImage && typeof metaImage !== 'string' && (
+              <Media fill imgClassName={classes.image} resource={metaImage} />
+            )}
+          </div>
+          {metaImage && typeof metaImage !== 'string' && metaImage?.caption && (
+            <RichText className={classes.caption} content={metaImage.caption} />
+          )}
+        </div>
+      </Gutter>
+    </Fragment>
+  )
+}