fix(richtext-lexical): richtext field duplicates description custom component (#13880)

The lexical field component was accidentally rendering the description
component twice.

Fixes #13644

Author: AlessioGr

packages/richtext-lexical/src/field/Field.tsx

@@ -184,7 +184,6 @@ const RichTextComponent: React.FC<
           />
           {AfterInput}
         </ErrorBoundary>
-        {Description}
         <RenderCustomComponent
           CustomComponent={Description}
           Fallback={<FieldDescription description={description} path={path} />}

packages/ui/src/forms/Form/index.tsx

@@ -104,7 +104,7 @@ export const Form: React.FC<FormProps> = (props) => {
   const { startRouteTransition } = useRouteTransition()
   const { getUploadHandler } = useUploadHandlers()
 
-  const { config, getEntityConfig } = useConfig()
+  const { config } = useConfig()
 
   const [disabled, setDisabled] = useState(disabledFromProps || false)
   const [isMounted, setIsMounted] = useState(false)

test/lexical/collections/Lexical/components/Description.tsx

@@ -0,0 +1,7 @@
+export const Description = () => {
+  return (
+    <div className="lexical-blocks-custom-description" style={{ color: 'red' }}>
+      My Custom Lexical Description
+    </div>
+  )
+}

test/lexical/collections/Lexical/e2e/main/e2e.spec.ts

@@ -1446,6 +1446,29 @@ describe('lexicalMain', () => {
     page.getByText('Creating new User')
   })
 
+  test('ensure custom Description component is rendered only once', async () => {
+    await navigateToLexicalFields()
+    const lexicalWithBlocks = page.locator('.rich-text-lexical').nth(2)
+    await lexicalWithBlocks.scrollIntoViewIfNeeded()
+    await expect(lexicalWithBlocks).toBeVisible()
+
+    await expect(lexicalWithBlocks.locator('.lexical-blocks-custom-description')).toHaveCount(1)
+    await expect(lexicalWithBlocks.locator('.lexical-blocks-custom-description')).toBeVisible()
+
+    await expect(lexicalWithBlocks.locator('.field-description')).toHaveCount(0)
+  })
+
+  test('ensure admin.description property is rendered', async () => {
+    await navigateToLexicalFields()
+    const lexicalSimple = page.locator('.rich-text-lexical').nth(1)
+    await lexicalSimple.scrollIntoViewIfNeeded()
+    await expect(lexicalSimple).toBeVisible()
+
+    await expect(lexicalSimple.locator('.field-description')).toHaveCount(1)
+    await expect(lexicalSimple.locator('.field-description')).toBeVisible()
+    await expect(lexicalSimple.locator('.field-description')).toHaveText('A simple lexical field')
+  })
+
   test('ensure links can created from clipboard and deleted', async () => {
     await navigateToLexicalFields()
     const richTextField = page.locator('.rich-text-lexical').first()

test/lexical/collections/Lexical/index.ts

@@ -309,6 +309,9 @@ export const getLexicalFieldsCollection: (args: {
       {
         name: 'lexicalSimple',
         type: 'richText',
+        admin: {
+          description: 'A simple lexical field',
+        },
         editor: lexicalEditor({
           features: ({ defaultFeatures }) => [
             //TestRecorderFeature(),
@@ -347,6 +350,12 @@ export const getLexicalFieldsCollection: (args: {
       {
         name: 'lexicalWithBlocks',
         type: 'richText',
+        admin: {
+          components: {
+            Description: '/collections/Lexical/components/Description.js#Description',
+          },
+          description: 'Should not be rendered',
+        },
         editor: lexicalEditor({
           admin: {
             hideGutter: false,