feat(richtext-lexical): inline blocks (#7102)

test/fields/collections/Lexical/InlineFieldsDisplayComponent.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import type React from 'react'
+
+export const EmbedComponent: React.FC<any> = (props) => {
+  const { data } = props
+
+  return <span>{data.key}</span>
+}

test/fields/collections/Lexical/LabelComponent.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import type { Block } from 'payload'
+
+import React from 'react'
+
+export const LabelComponent: Block['admin']['components']['Label'] = (props) => {
+  const { formData } = props
+  return <div>{formData?.key}</div>
+}

test/fields/collections/Lexical/index.ts

@@ -19,6 +19,7 @@ import {
 } from '@payloadcms/richtext-lexical'
 
 import { lexicalFieldsSlug } from '../../slugs.js'
+import { LabelComponent } from './LabelComponent.js'
 import {
   ConditionalLayoutBlock,
   RadioButtonsBlock,
@@ -44,14 +45,14 @@ const editorConfig: ServerEditorConfig = {
         ...defaultFields,
         {
           name: 'rel',
-          label: 'Rel Attribute',
           type: 'select',
-          hasMany: true,
-          options: ['noopener', 'noreferrer', 'nofollow'],
           admin: {
             description:
               'The rel attribute defines the relationship between a linked resource and the current document. This is a custom link field.',
           },
+          hasMany: true,
+          label: 'Rel Attribute',
+          options: ['noopener', 'noreferrer', 'nofollow'],
         },
       ],
     }),
@@ -81,6 +82,23 @@ const editorConfig: ServerEditorConfig = {
         ConditionalLayoutBlock,
         TabBlock,
       ],
+      inlineBlocks: [
+        {
+          slug: 'myInlineBlock',
+          admin: {
+            components: {
+              Label: LabelComponent,
+            },
+          },
+          fields: [
+            {
+              name: 'key',
+              type: 'select',
+              options: ['value1', 'value2', 'value3'],
+            },
+          ],
+        },
+      ],
     }),
     EXPERIMENTAL_TableFeature(),
   ],
@@ -88,13 +106,13 @@ const editorConfig: ServerEditorConfig = {
 
 export const LexicalFields: CollectionConfig = {
   slug: lexicalFieldsSlug,
-  admin: {
-    useAsTitle: 'title',
-    listSearchableFields: ['title', 'richTextLexicalCustomFields'],
-  },
   access: {
     read: () => true,
   },
+  admin: {
+    listSearchableFields: ['title', 'richTextLexicalCustomFields'],
+    useAsTitle: 'title',
+  },
   fields: [
     {
       name: 'title',
@@ -128,13 +146,13 @@ export const LexicalFields: CollectionConfig = {
     {
       name: 'lexicalWithBlocks',
       type: 'richText',
-      required: true,
       editor: lexicalEditor({
         admin: {
           hideGutter: false,
         },
         features: editorConfig.features,
       }),
+      required: true,
     },
     {
       name: 'lexicalWithBlocks_markdown',