feat(richtext-lexical): paragraph feature

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(),