fix(richtext-lexical): block names were not loaded (#14698)

Previously, setting a block name for a lexical block caused the block
name field to appear empty after reloading the page. This regression
occurred after merging the form state with the initial state, as the
initial state doesn't include the blockName field (since it's
`admin.disabled`).

Fixes #14650

Author: AlessioGr

packages/richtext-lexical/src/features/blocks/client/component/index.tsx

@@ -104,7 +104,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
 
     // Merge current formData values into the cached form state
     // This ensures that when the component remounts (e.g., due to view changes), we don't lose user edits
-    return Object.fromEntries(
+    const mergedState = Object.fromEntries(
       Object.entries(cachedFormState).map(([fieldName, fieldState]) => [
         fieldName,
         fieldName in formData
@@ -116,6 +116,16 @@ export const BlockComponent: React.FC<Props> = (props) => {
           : fieldState,
       ]),
     )
+
+    // Manually add blockName, as it's not part of cachedFormState
+    mergedState.blockName = {
+      initialValue: formData.blockName,
+      passesCondition: true,
+      valid: true,
+      value: formData.blockName,
+    }
+
+    return mergedState
   })
 
   const hasMounted = useRef(false)

test/lexical/collections/_LexicalFullyFeatured/db/e2e.spec.ts

@@ -247,4 +247,52 @@ describe('Lexical Fully Featured - database', () => {
       },
     )
   })
+
+  test('ensure block name can be saved and loaded', async ({ page }) => {
+    await lexical.slashCommand('myblock')
+    await expect(lexical.editor.locator('.LexicalEditorTheme__block')).toBeVisible()
+
+    const blockNameInput = lexical.editor.locator('#blockName')
+
+    /**
+     * Test on create
+     */
+    await assertNetworkRequests(
+      page,
+      `/admin/collections/${lexicalFullyFeaturedSlug}`,
+      async () => {
+        await blockNameInput.fill('Testing 123')
+      },
+      {
+        minimumNumberOfRequests: 2,
+        allowedNumberOfRequests: 3,
+      },
+    )
+
+    await expect(blockNameInput).toHaveValue('Testing 123')
+    await saveDocAndAssert(page)
+    await expect(blockNameInput).toHaveValue('Testing 123')
+    await page.reload()
+    await expect(blockNameInput).toHaveValue('Testing 123')
+
+    /**
+     * Test on update
+     */
+    await assertNetworkRequests(
+      page,
+      `/admin/collections/${lexicalFullyFeaturedSlug}`,
+      async () => {
+        await blockNameInput.fill('Updated blockname')
+      },
+      {
+        minimumNumberOfRequests: 2,
+        allowedNumberOfRequests: 2,
+      },
+    )
+    await expect(blockNameInput).toHaveValue('Updated blockname')
+    await saveDocAndAssert(page)
+    await expect(blockNameInput).toHaveValue('Updated blockname')
+    await page.reload()
+    await expect(blockNameInput).toHaveValue('Updated blockname')
+  })
 })