fix(richtext-lexical): prevent unnecessary requests for inline blocks (#14522)

c-riq · AlessioGr · web-flow · commit 69408f0cb083 · 2025-11-06T23:25:59.000Z
Inline blocks now use cached form state from initialLexicalFormState, matching the pattern used by regular blocks (f8e6b65). #14521 --------- Co-authored-by: Alessio Gravili <alessio@gravili.de>
diff --git a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx
@@ -81,9 +81,28 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
   const editDepth = useEditDepth()
   const firstTimeDrawer = useRef(false)
 
-  const [initialState, setInitialState] = React.useState<false | FormState | undefined>(
-    () => initialLexicalFormState?.[formData.id]?.formState,
-  )
+  const [initialState, setInitialState] = React.useState<false | FormState | undefined>(() => {
+    // Initial form state that was calculated server-side. May have stale values
+    const cachedFormState = initialLexicalFormState?.[formData.id]?.formState
+    if (!cachedFormState) {
+      return false
+    }
+
+    // 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(
+      Object.entries(cachedFormState).map(([fieldName, fieldState]) => [
+        fieldName,
+        fieldName in formData
+          ? {
+              ...fieldState,
+              initialValue: formData[fieldName],
+              value: formData[fieldName],
+            }
+          : fieldState,
+      ]),
+    )
+  })
 
   const hasMounted = useRef(false)
   const prevCacheBuster = useRef(cacheBuster)
diff --git a/test/helpers/e2e/assertNetworkRequests.ts b/test/helpers/e2e/assertNetworkRequests.ts
@@ -18,6 +18,9 @@ import { expect } from '@playwright/test'
  */
 export const assertNetworkRequests = async (
   page: Page,
+  /**
+   * The URL to match in the network requests. The request URL will need to *include* this URL.
+   */
   url: string,
   action: () => Promise<any>,
   {
@@ -26,6 +29,7 @@ export const assertNetworkRequests = async (
     timeout = 5000,
     minimumNumberOfRequests,
     interval = 1000,
+    requestFilter,
   }: {
     allowedNumberOfRequests?: number
     beforePoll?: () => Promise<any> | void
@@ -35,14 +39,18 @@ export const assertNetworkRequests = async (
      * as long as at least this number of requests are made.
      */
     minimumNumberOfRequests?: number
+    /**
+     * If set, only consider requests that match the filter AND the URL.
+     */
+    requestFilter?: (request: Request) => boolean | Promise<boolean>
     timeout?: number
   } = {},
 ): Promise<Array<Request>> => {
   const matchedRequests: Request[] = []
 
   // begin tracking network requests
-  page.on('request', (request) => {
-    if (request.url().includes(url)) {
+  page.on('request', async (request) => {
+    if (request.url().includes(url) && (requestFilter ? await requestFilter(request) : true)) {
       matchedRequests.push(request)
     }
   })
diff --git a/test/lexical/collections/_LexicalFullyFeatured/db/e2e.spec.ts b/test/lexical/collections/_LexicalFullyFeatured/db/e2e.spec.ts
@@ -1,10 +1,15 @@
+import {
+  buildEditorState,
+  type DefaultNodeTypes,
+  type SerializedInlineBlockNode,
+} from '@payloadcms/richtext-lexical'
 import { expect, type Page, test } from '@playwright/test'
 import { lexicalFullyFeaturedSlug } from 'lexical/slugs.js'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
 import type { PayloadTestSDK } from '../../../../helpers/sdk/index.js'
-import type { Config } from '../../../payload-types.js'
+import type { Config, InlineBlockWithSelect } from '../../../payload-types.js'
 
 import { ensureCompilationIsDone, saveDocAndAssert } from '../../../../helpers.js'
 import { AdminUrlUtil } from '../../../../helpers/adminUrlUtil.js'
@@ -173,4 +178,73 @@ describe('Lexical Fully Featured - database', () => {
       await expect(lexical.editor.locator('#field-someText')).toHaveValue('Updated text')
     })
   })
+
+  test('ensure inline block initial form state is applied on load for inline blocks with select fields', async ({
+    page,
+  }) => {
+    const doc = await payload.create({
+      collection: 'lexical-fully-featured',
+      data: {
+        richText: buildEditorState<
+          DefaultNodeTypes | SerializedInlineBlockNode<InlineBlockWithSelect>
+        >({
+          nodes: [
+            {
+              type: 'inlineBlock',
+              version: 1,
+              fields: {
+                blockType: 'inlineBlockWithSelect',
+                id: '1',
+              },
+            },
+            {
+              type: 'inlineBlock',
+              version: 1,
+              fields: {
+                blockType: 'inlineBlockWithSelect',
+                id: '2',
+              },
+            },
+            {
+              type: 'inlineBlock',
+              version: 1,
+              fields: {
+                blockType: 'inlineBlockWithSelect',
+                id: '3',
+              },
+            },
+          ],
+        }),
+      },
+    })
+
+    /**
+     * Ensure there are no unnecessary, additional form state requests made, since we already have the form state as part of the initial state.
+     */
+    await assertNetworkRequests(
+      page,
+      `/admin/collections/${lexicalFullyFeaturedSlug}`,
+      async () => {
+        await page.goto(url.edit(doc.id))
+        await lexical.editor.first().focus()
+      },
+      {
+        minimumNumberOfRequests: 0,
+        allowedNumberOfRequests: 0,
+        requestFilter: (request) => {
+          // Ensure it's a form state request
+          if (request.method() === 'POST') {
+            const requestBody = request.postDataJSON()
+
+            return (
+              Array.isArray(requestBody) &&
+              requestBody.length > 0 &&
+              requestBody[0].name === 'form-state'
+            )
+          }
+          return false
+        },
+      },
+    )
+  })
 })
diff --git a/test/lexical/collections/_LexicalFullyFeatured/index.ts b/test/lexical/collections/_LexicalFullyFeatured/index.ts
@@ -88,6 +88,24 @@ export const LexicalFullyFeatured: CollectionConfig = {
                   },
                 ],
               },
+              {
+                slug: 'inlineBlockWithSelect',
+                interfaceName: 'InlineBlockWithSelect',
+                fields: [
+                  {
+                    // Having this specific select field here reproduces an issue where the initial state is not applied on load, and every
+                    // inline block will make its own form state request on load.
+                    name: 'styles',
+                    type: 'select',
+                    hasMany: true,
+                    options: [
+                      { label: 'Option 1', value: 'opt1' },
+                      { label: 'Option 2', value: 'opt2' },
+                    ],
+                    defaultValue: [],
+                  },
+                ],
+              },
               {
                 slug: 'inlineBlockWithRelationship',
                 fields: [
diff --git a/test/lexical/payload-types.ts b/test/lexical/payload-types.ts
@@ -102,6 +102,7 @@ export interface Config {
     'array-fields': ArrayField;
     OnDemandForm: OnDemandForm;
     OnDemandOutsideForm: OnDemandOutsideForm;
+    'payload-kv': PayloadKv;
     users: User;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
@@ -128,6 +129,7 @@ export interface Config {
     'array-fields': ArrayFieldsSelect<false> | ArrayFieldsSelect<true>;
     OnDemandForm: OnDemandFormSelect<false> | OnDemandFormSelect<true>;
     OnDemandOutsideForm: OnDemandOutsideFormSelect<false> | OnDemandOutsideFormSelect<true>;
+    'payload-kv': PayloadKvSelect<false> | PayloadKvSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
@@ -995,6 +997,23 @@ export interface OnDemandOutsideForm {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-kv".
+ */
+export interface PayloadKv {
+  id: string;
+  key: string;
+  data:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
@@ -1533,6 +1552,14 @@ export interface OnDemandOutsideFormSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-kv_select".
+ */
+export interface PayloadKvSelect<T extends boolean = true> {
+  key?: T;
+  data?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users_select".
@@ -1649,6 +1676,16 @@ export interface TabsWithRichTextSelect<T extends boolean = true> {
   createdAt?: T;
   globalType?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "InlineBlockWithSelect".
+ */
+export interface InlineBlockWithSelect {
+  styles?: ('opt1' | 'opt2')[] | null;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'inlineBlockWithSelect';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "LexicalBlocksRadioButtonsBlock".
