payload icon indicating copy to clipboard operation
payload copied to clipboard

Live Preview View Custom Component is not working

Open tsemachh opened this issue 1 year ago • 2 comments

Link to reproduction

No response

Environment Info

Node.js v22.8.0

Binaries:
  Node: 22.8.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.4.0
Relevant Packages:
  payload: 3.0.0-beta.104
  next: 15.0.0-canary.104
  @payloadcms/db-mongodb: 3.0.0-beta.104
  @payloadcms/graphql: 3.0.0-beta.104
  @payloadcms/live-preview: 3.0.0-beta.104
  @payloadcms/next/utilities: 3.0.0-beta.104
  @payloadcms/plugin-cloud-storage: 3.0.0-beta.104
  @payloadcms/richtext-lexical: 3.0.0-beta.104
  @payloadcms/storage-s3: 3.0.0-beta.104
  @payloadcms/translations: 3.0.0-beta.104
  @payloadcms/ui/shared: 3.0.0-beta.104
  react: 19.0.0-rc-06d0b89e-20240801
  react-dom: 19.0.0-rc-06d0b89e-20240801
Operating System:
  Platform: linux
  Arch: x64
  Version: #44-Ubuntu SMP PREEMPT_DYNAMIC Tue Aug 13 13:35:26 UTC 2024
  Available memory (MB): 31817
  Available CPU cores: 8

Describe the Bug

We try and follow documentation at: https://payloadcms.com/docs/beta/admin/views#document-views

livePreview The LivePreview view is used to display the Live Preview interface. It is rendered within the "Live Preview" tab. More details.

But this is not working because of missing code which should handle it. File: packages/next/src/views/Document/getViewsFromConfig.tsx - Lines 312-325

            case 'preview': {
              if (livePreviewEnabled) {
                DefaultView = {
                  Component: DefaultLivePreviewView,
                }
              }
              break
            }

            case 'versions': {
              if (!overrideDocPermissions && docPermissions?.readVersions?.permission) {
                CustomView = {
                  payloadComponent: getCustomViewByKey(views, 'versions'),
                }

The preview case is not handling the CustomView - aka:

CustomView = {
                  payloadComponent: getCustomViewByKey(views, 'livePreview'),
                }

Reproduction Steps

In payload.config.ts define next customization in one of the Collections:

components: {
      views: {
        edit: {
          default: {
            Component: '/components/views/CustomDefaultEditView',
          },
          livePreview: {
            Component: '/components/views/LivePreview/LivePreviewView'
          }
        },
      },
    }

Expected behavior is that customized live preview view will replace default live preview view , but we got the default.

Adapters and Plugins

No response

tsemachh avatar Sep 18 '24 08:09 tsemachh

If needed I can post a PR , not a big change

tsemachh avatar Sep 18 '24 08:09 tsemachh

pls fix it

malifon avatar Oct 02 '24 14:10 malifon

PR is opened that addresses this issue. https://github.com/payloadcms/payload/pull/8930

kendelljoseph avatar Oct 29 '24 20:10 kendelljoseph

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.

github-actions[bot] avatar Oct 31 '24 04:10 github-actions[bot]

This is released as of beta 122 I believe

paulpopus avatar Oct 31 '24 05:10 paulpopus