Merge branch 'feat/next-poc' of github.com:payloadcms/payload into feat/next-poc

packages/next/src/pages/Document/getViewsFromConfig.tsx

@@ -7,8 +7,12 @@ import type {
 } from 'payload/types'
 
 import { isEntityHidden } from 'payload/utilities'
-import { lazy } from 'react'
 
+import { APIView as DefaultAPIView } from '../API'
+import { EditView as DefaultEditView } from '../Edit'
+import { LivePreviewView as DefaultLivePreviewView } from '../LivePreview'
+import { VersionView as DefaultVersionView } from '../Version'
+import { VersionsView as DefaultVersionsView } from '../Versions'
 import { getCustomViewByKey } from './getCustomViewByKey'
 import { getCustomViewByPath } from './getCustomViewByPath'
 
@@ -59,9 +63,7 @@ export const getViewsFromConfig = async ({
         case 'create': {
           if ('create' in docPermissions && docPermissions?.create?.permission) {
             CustomView = getCustomViewByKey(views, 'Default')
-            DefaultView = lazy(() =>
-              import('../Edit/index.tsx').then((module) => ({ default: module.EditView })),
-            )
+            DefaultView = DefaultEditView
           }
           break
         }
@@ -69,9 +71,7 @@ export const getViewsFromConfig = async ({
         default: {
           if (docPermissions?.read?.permission) {
             CustomView = getCustomViewByKey(views, 'Default')
-            DefaultView = lazy(() =>
-              import('../Edit/index.tsx').then((module) => ({ default: module.EditView })),
-            )
+            DefaultView = DefaultEditView
           }
         }
       }
@@ -84,20 +84,14 @@ export const getViewsFromConfig = async ({
           case 'api': {
             if (collectionConfig?.admin?.hideAPIURL !== true) {
               CustomView = getCustomViewByKey(views, 'API')
-              DefaultView = lazy(() =>
-                import('../API/index.tsx').then((module) => ({ default: module.APIView })),
-              )
+              DefaultView = DefaultAPIView
             }
             break
           }
 
           case 'preview': {
             if (livePreviewEnabled) {
-              DefaultView = lazy(() =>
-                import('../LivePreview/index.tsx').then((module) => ({
-                  default: module.LivePreviewView,
-                })),
-              )
+              DefaultView = DefaultLivePreviewView
             }
             break
           }
@@ -105,11 +99,7 @@ export const getViewsFromConfig = async ({
           case 'versions': {
             if (docPermissions?.readVersions?.permission) {
               CustomView = getCustomViewByKey(views, 'Versions')
-              DefaultView = lazy(() =>
-                import('../Versions/index.tsx').then((module) => ({
-                  default: module.VersionsView,
-                })),
-              )
+              DefaultView = DefaultVersionsView
             }
             break
           }
@@ -127,9 +117,7 @@ export const getViewsFromConfig = async ({
         if (routeSegments[1] === 'versions') {
           if (docPermissions?.readVersions?.permission) {
             CustomView = getCustomViewByKey(views, 'Version')
-            DefaultView = lazy(() =>
-              import('../Version/index.tsx').then((module) => ({ default: module.VersionView })),
-            )
+            DefaultView = DefaultVersionView
           }
         }
       }
@@ -148,9 +136,7 @@ export const getViewsFromConfig = async ({
     if (!routeSegments?.length) {
       if (docPermissions?.read?.permission) {
         CustomView = getCustomViewByKey(views, 'Default')
-        DefaultView = lazy(() =>
-          import('../Edit/index.tsx').then((module) => ({ default: module.EditView })),
-        )
+        DefaultView = DefaultEditView
       }
     } else if (routeSegments?.length === 1) {
       // `../:slug/api`, `../:slug/preview`, `../:slug/versions`, etc
@@ -158,20 +144,14 @@ export const getViewsFromConfig = async ({
         case 'api': {
           if (globalConfig?.admin?.hideAPIURL !== true) {
             CustomView = getCustomViewByKey(views, 'API')
-            DefaultView = lazy(() =>
-              import('../API/index.tsx').then((module) => ({ default: module.APIView })),
-            )
+            DefaultView = DefaultAPIView
           }
           break
         }
 
         case 'preview': {
           if (livePreviewEnabled) {
-            DefaultView = lazy(() =>
-              import('../LivePreview/index.tsx').then((module) => ({
-                default: module.LivePreviewView,
-              })),
-            )
+            DefaultView = DefaultLivePreviewView
           }
           break
         }
@@ -179,9 +159,7 @@ export const getViewsFromConfig = async ({
         case 'versions': {
           if (docPermissions?.readVersions?.permission) {
             CustomView = getCustomViewByKey(views, 'Versions')
-            DefaultView = lazy(() =>
-              import('../Versions/index.tsx').then((module) => ({ default: module.VersionsView })),
-            )
+            DefaultView = DefaultVersionsView
           }
           break
         }
@@ -189,9 +167,7 @@ export const getViewsFromConfig = async ({
         default: {
           if (docPermissions?.read?.permission) {
             CustomView = getCustomViewByKey(views, 'Default')
-            DefaultView = lazy(() =>
-              import('../Edit/index.tsx').then((module) => ({ default: module.EditView })),
-            )
+            DefaultView = DefaultEditView
           }
           break
         }
@@ -201,9 +177,7 @@ export const getViewsFromConfig = async ({
       if (routeSegments[1] === 'versions') {
         if (docPermissions?.readVersions?.permission) {
           CustomView = getCustomViewByKey(views, 'Version')
-          DefaultView = lazy(() =>
-            import('../Version/index.tsx').then((module) => ({ default: module.VersionView })),
-          )
+          DefaultView = DefaultVersionView
         }
       }
     }

packages/richtext-lexical/src/field/features/paragraph/Component.tsx

@@ -1,11 +0,0 @@
-'use client'
-
-import type React from 'react'
-
-import { useLexicalFeature } from '../../../useLexicalFeature'
-import { ParagraphFeature, key } from './index'
-
-export const ParagraphFeatureComponent: React.FC = () => {
-  useLexicalFeature(key, ParagraphFeature)
-  return null
-}

packages/richtext-lexical/src/field/features/paragraph/feature.client.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { $setBlocksType } from '@lexical/selection'
+import { $createParagraphNode, $getSelection } from 'lexical'
+
+import type { FeatureProviderProviderClient } from '../types'
+
+import { SlashMenuOption } from '../../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types'
+import { TextIcon } from '../../lexical/ui/icons/Text'
+import { TextDropdownSectionWithEntries } from '../common/floatingSelectToolbarTextDropdownSection'
+import { createClientComponent } from '../createClientComponent'
+
+const ParagraphFeatureClient: FeatureProviderProviderClient<undefined> = (props) => {
+  return {
+    clientFeatureProps: props,
+    feature: () => ({
+      clientFeatureProps: props,
+      floatingSelectToolbar: {
+        sections: [
+          TextDropdownSectionWithEntries([
+            {
+              ChildComponent: TextIcon,
+              isActive: () => false,
+              key: 'normal-text',
+              label: 'Normal Text',
+              onClick: ({ editor }) => {
+                editor.update(() => {
+                  const selection = $getSelection()
+                  $setBlocksType(selection, () => $createParagraphNode())
+                })
+              },
+              order: 1,
+            },
+          ]),
+        ],
+      },
+      slashMenu: {
+        options: [
+          {
+            displayName: 'Basic',
+            key: 'basic',
+            options: [
+              new SlashMenuOption('paragraph', {
+                Icon: TextIcon,
+                displayName: 'Paragraph',
+                keywords: ['normal', 'paragraph', 'p', 'text'],
+                onSelect: ({ editor }) => {
+                  editor.update(() => {
+                    const selection = $getSelection()
+                    $setBlocksType(selection, () => $createParagraphNode())
+                  })
+                },
+              }),
+            ],
+          },
+        ],
+      },
+    }),
+  }
+}
+
+export const ParagraphFeatureClientComponent = createClientComponent(ParagraphFeatureClient)

packages/richtext-lexical/src/field/features/paragraph/feature.server.ts

@@ -0,0 +1,17 @@
+import type { FeatureProviderProviderServer } from '../types'
+
+import { ParagraphFeatureClientComponent } from './feature.client'
+
+export const ParagraphFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {
+  return {
+    feature: () => {
+      return {
+        ClientComponent: ParagraphFeatureClientComponent,
+        clientFeatureProps: null,
+        serverFeatureProps: props,
+      }
+    },
+    key: 'paragraph',
+    serverFeatureProps: props,
+  }
+}

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

@@ -1,66 +0,0 @@
-import { $setBlocksType } from '@lexical/selection'
-import { $createParagraphNode, $getSelection } from 'lexical'
-
-import type { FeatureProvider } from '../types'
-
-import { SlashMenuOption } from '../../lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types'
-import { TextDropdownSectionWithEntries } from '../common/floatingSelectToolbarTextDropdownSection'
-import { ParagraphFeatureComponent } from './Component'
-
-export const key = 'paragraph' as const
-
-export const ParagraphFeature = (): FeatureProvider => {
-  return {
-    Component: ParagraphFeatureComponent,
-    feature: () => {
-      return {
-        floatingSelectToolbar: {
-          sections: [
-            TextDropdownSectionWithEntries([
-              {
-                ChildComponent: () =>
-                  // @ts-expect-error-next-line
-                  import('../../lexical/ui/icons/Text').then((module) => module.TextIcon),
-                isActive: () => false,
-                key: 'normal-text',
-                label: 'Normal Text',
-                onClick: ({ editor }) => {
-                  editor.update(() => {
-                    const selection = $getSelection()
-                    $setBlocksType(selection, () => $createParagraphNode())
-                  })
-                },
-                order: 1,
-              },
-            ]),
-          ],
-        },
-        props: null,
-        slashMenu: {
-          options: [
-            {
-              displayName: 'Basic',
-              key: 'basic',
-              options: [
-                new SlashMenuOption('paragraph', {
-                  Icon: () =>
-                    // @ts-expect-error-next-line
-                    import('../../lexical/ui/icons/Text').then((module) => module.TextIcon),
-                  displayName: 'Paragraph',
-                  keywords: ['normal', 'paragraph', 'p', 'text'],
-                  onSelect: ({ editor }) => {
-                    editor.update(() => {
-                      const selection = $getSelection()
-                      $setBlocksType(selection, () => $createParagraphNode())
-                    })
-                  },
-                }),
-              ],
-            },
-          ],
-        },
-      }
-    },
-    key,
-  }
-}

packages/richtext-lexical/src/field/lexical/config/server/default.ts

@@ -18,7 +18,7 @@ import { LinkFeature } from '../../../features/link/feature.server'
 import { CheckListFeature } from '../../../features/lists/checklist/feature.server'
 import { OrderedListFeature } from '../../../features/lists/orderedlist/feature.server'
 import { UnorderedListFeature } from '../../../features/lists/unorderedlist/feature.server'
-import { ParagraphFeature } from '../../../features/paragraph'
+import { ParagraphFeature } from '../../../features/paragraph/feature.server'
 import { RelationshipFeature } from '../../../features/relationship'
 import { UploadFeature } from '../../../features/upload'
 import { LexicalEditorTheme } from '../../theme/EditorTheme'
@@ -44,7 +44,7 @@ export const defaultEditorFeatures: FeatureProviderServer<unknown, unknown>[] =
   UnorderedListFeature(),
   OrderedListFeature(),
   CheckListFeature(),
-  LinkFeature({}),
+  LinkFeature(),
   RelationshipFeature(),
   BlockQuoteFeature(),
   UploadFeature(),

packages/richtext-lexical/src/index.ts

@@ -318,7 +318,7 @@ export type {
   SlateNodeConverter,
 } from './field/features/migrations/slateToLexical/converter/types'
 export { SlateToLexicalFeature } from './field/features/migrations/slateToLexical/feature.server'
-export { ParagraphFeature } from './field/features/paragraph'
+export { ParagraphFeature } from './field/features/paragraph/feature.server'
 export { RelationshipFeature } from './field/features/relationship'
 export {
   $createRelationshipNode,

test/buildConfigWithDefaults.ts

@@ -25,6 +25,7 @@ import type { Config, SanitizedConfig } from '../packages/payload/src/config/typ
 import { mongooseAdapter } from '../packages/db-mongodb/src'
 import { postgresAdapter } from '../packages/db-postgres/src'
 import { buildConfig as buildPayloadConfig } from '../packages/payload/src/config/build'
+import { ParagraphFeature } from '../packages/richtext-lexical/src/field/features/paragraph/feature.server'
 // import { slateEditor } from '../packages/richtext-slate/src'
 
 // process.env.PAYLOAD_DATABASE = 'postgres'
@@ -93,6 +94,7 @@ export function buildConfigWithDefaults(testConfig?: Partial<Config>): Promise<S
     // }),
     editor: lexicalEditor({
       features: [
+        ParagraphFeature(),
         LinkFeature(),
         CheckListFeature(),
         UnorderedListFeature(),