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

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

@@ -0,0 +1,66 @@
+'use client'
+
+import { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from 'lexical'
+
+import type { FeatureProviderProviderClient } from '../types'
+
+import { IndentDecreaseIcon } from '../../lexical/ui/icons/IndentDecrease'
+import { IndentIncreaseIcon } from '../../lexical/ui/icons/IndentIncrease'
+import { createClientComponent } from '../createClientComponent'
+import { IndentSectionWithEntries } from './floatingSelectToolbarIndentSection'
+
+const IndentFeatureClient: FeatureProviderProviderClient<undefined> = (props) => {
+  return {
+    clientFeatureProps: props,
+    feature: () => ({
+      clientFeatureProps: props,
+      floatingSelectToolbar: {
+        sections: [
+          IndentSectionWithEntries([
+            {
+              ChildComponent: IndentDecreaseIcon,
+              isActive: () => false,
+              isEnabled: ({ selection }) => {
+                if (!selection || !selection?.getNodes()?.length) {
+                  return false
+                }
+                for (const node of selection.getNodes()) {
+                  // If at least one node is indented, this should be active
+                  if (
+                    ('__indent' in node && (node.__indent as number) > 0) ||
+                    (node.getParent() &&
+                      '__indent' in node.getParent() &&
+                      node.getParent().__indent > 0)
+                  ) {
+                    return true
+                  }
+                }
+                return false
+              },
+              key: 'indent-decrease',
+              label: `Decrease Indent`,
+              onClick: ({ editor }) => {
+                editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)
+              },
+              order: 1,
+            },
+          ]),
+          IndentSectionWithEntries([
+            {
+              ChildComponent: IndentIncreaseIcon,
+              isActive: () => false,
+              key: 'indent-increase',
+              label: `Increase Indent`,
+              onClick: ({ editor }) => {
+                editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)
+              },
+              order: 2,
+            },
+          ]),
+        ],
+      },
+    }),
+  }
+}
+
+export const IndentFeatureClientComponent = createClientComponent(IndentFeatureClient)

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

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

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

@@ -1,77 +0,0 @@
-import { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from 'lexical'
-
-import type { FeatureProvider } from '../types'
-
-import { IndentSectionWithEntries } from './floatingSelectToolbarIndentSection'
-
-export const IndentFeature = (): FeatureProvider => {
-  return {
-    feature: () => {
-      return {
-        floatingSelectToolbar: {
-          sections: [
-            IndentSectionWithEntries([
-              {
-                ChildComponent: () =>
-                  // @ts-expect-error-next-line
-                  import('../../lexical/ui/icons/IndentDecrease').then(
-                    (module) => module.IndentDecreaseIcon,
-                  ),
-                isActive: () => false,
-                isEnabled: ({ selection }) => {
-                  if (!selection || !selection?.getNodes()?.length) {
-                    return false
-                  }
-                  for (const node of selection.getNodes()) {
-                    // If at least one node is indented, this should be active
-                    if (
-                      ('__indent' in node && (node.__indent as number) > 0) ||
-                      (node.getParent() &&
-                        '__indent' in node.getParent() &&
-                        node.getParent().__indent > 0)
-                    ) {
-                      return true
-                    }
-                  }
-                  return false
-                },
-                key: 'indent-decrease',
-                label: `Decrease Indent`,
-                onClick: ({ editor }) => {
-                  editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)
-                },
-                order: 1,
-              },
-            ]),
-            IndentSectionWithEntries([
-              {
-                ChildComponent: () =>
-                  // @ts-expect-error-next-line
-                  import('../../lexical/ui/icons/IndentIncrease').then(
-                    (module) => module.IndentIncreaseIcon,
-                  ),
-                isActive: () => false,
-                key: 'indent-increase',
-                label: `Increase Indent`,
-                onClick: ({ editor }) => {
-                  editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)
-                },
-                order: 2,
-              },
-            ]),
-          ],
-        },
-        plugins: [
-          {
-            Component: () =>
-              // @ts-expect-error-next-line
-              import('./plugin').then((module) => module.IndentPlugin),
-            position: 'normal',
-          },
-        ],
-        props: null,
-      }
-    },
-    key: 'indent',
-  }
-}

packages/richtext-lexical/src/field/features/indent/plugin.ts

@@ -1,7 +0,0 @@
-'use client'
-
-import './index.scss'
-
-export function IndentPlugin(): null {
-  return null
-}

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

@@ -1,7 +1,6 @@
 import type { I18n } from '@payloadcms/translations'
 import type { SanitizedConfig } from 'payload/config'
 import type { Field } from 'payload/types'
-import type React from 'react'
 
 import { initI18n } from '@payloadcms/translations'
 import { translations } from '@payloadcms/translations/client'
@@ -53,6 +52,9 @@ export type LinkFeatureServerProps = ExclusiveLinkCollectionsProps & {
 export const LinkFeature: FeatureProviderProviderServer<LinkFeatureServerProps, ClientProps> = (
   props,
 ) => {
+  if (!props) {
+    props = {}
+  }
   return {
     feature: () => {
       return {

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

@@ -13,7 +13,7 @@ import { SubscriptFeature } from '../../../features/format/subscript/feature.ser
 import { SuperscriptFeature } from '../../../features/format/superscript/feature.server'
 import { UnderlineFeature } from '../../../features/format/underline/feature.server'
 import { HeadingFeature } from '../../../features/heading/feature.server'
-import { IndentFeature } from '../../../features/indent'
+import { IndentFeature } from '../../../features/indent/feature.server'
 import { LinkFeature } from '../../../features/link/feature.server'
 import { CheckListFeature } from '../../../features/lists/checklist'
 import { OrderedListFeature } from '../../../features/lists/orderedlist'
@@ -38,7 +38,7 @@ export const defaultEditorFeatures: FeatureProviderServer<unknown, unknown>[] =
   SuperscriptFeature(),
   InlineCodeFeature(),
   ParagraphFeature(),
-  HeadingFeature({}),
+  HeadingFeature(),
   AlignFeature(),
   IndentFeature(),
   UnorderedListFeature(),

packages/richtext-lexical/src/index.ts

@@ -272,7 +272,7 @@ export { SuperscriptFeature } from './field/features/format/superscript/feature.
 export { UnderlineFeature } from './field/features/format/underline/feature.server'
 export { HeadingFeature } from './field/features/heading/feature.server'
 
-export { IndentFeature } from './field/features/indent'
+export { IndentFeature } from './field/features/indent/feature.server'
 export { LinkFeature, type LinkFeatureServerProps } from './field/features/link/feature.server'
 
 export {

test/buildConfigWithDefaults.ts

@@ -4,6 +4,7 @@ import {
   BlocksFeature,
   BoldFeature,
   HeadingFeature,
+  IndentFeature,
   InlineCodeFeature,
   ItalicFeature,
   LinkFeature,
@@ -89,7 +90,7 @@ export function buildConfigWithDefaults(testConfig?: Partial<Config>): Promise<S
     // }),
     editor: lexicalEditor({
       features: [
-        LinkFeature({}),
+        LinkFeature(),
         AlignFeature(),
         BlockQuoteFeature(),
         BoldFeature(),
@@ -101,6 +102,7 @@ export function buildConfigWithDefaults(testConfig?: Partial<Config>): Promise<S
         InlineCodeFeature(),
         TreeViewFeature(),
         HeadingFeature(),
+        IndentFeature(),
         BlocksFeature({
           blocks: [
             {