fix(richtext-lexical): afterRead hooks were not awaited (#10747)

This was a tricky one.

Fixes #10700

May potentially fix 9163

This could have also been causing glitchyness related to things like
lexical upload / relationship / link node population.

## Issue and solution explained

The lexical field afterRead hook is responsible for executing afterRead
hooks (this includes relationship population) for all sub-nodes, e.g.
upload or block nodes.

Any field and population promises that were created in the process of
traversing the lexical editor state were added to the parent
`fieldPromises` and `populationPromises` array.

Now this lexical `afterRead` hook, which is responsible for creating and
adding all field and population promises of its sub-nodes to the parent
`fieldPromises` and `populationPromises` arrays, was itself part of the
**same** `fieldPromises` array.

The execution of this lexical `afterRead` hook itself is happening while
the `fieldPromises` array is being awaited. This means that new field
and population promises were being added to this same array DURING the
process of awaiting all promises of this array.

As a result, any promises dynamically added while awaiting the initial
set of fieldPromises were not included in the initial `Promise.all()`
awaiting process, leading to unhandled promises.

This PR resolves the issue by ensuring that promises are repeatedly
awaited until no new promises remain in the arrays. By continuously
awaiting the `fieldPromises` and `populationPromises` until all
dynamically added promises are fully resolved, this PR ensures that any
promises added during the processing of a parent promise are also
properly awaited. This guarantees that no promises are skipped,
preserving the intended behavior of the afterRead hook

Author: AlessioGr

packages/payload/src/fields/hooks/afterRead/index.ts

@@ -3,7 +3,6 @@ import type { SanitizedGlobalConfig } from '../../../globals/config/types.js'
 import type { RequestContext } from '../../../index.js'
 import type { JsonObject, PayloadRequest, PopulateType, SelectType } from '../../../types/index.js'
 
-import { deepCopyObjectSimple } from '../../../utilities/deepCopyObject.js'
 import { getSelectMode } from '../../../utilities/getSelectMode.js'
 import { traverseFields } from './traverseFields.js'
 
@@ -95,8 +94,26 @@ export async function afterRead<T extends JsonObject>(args: Args<T>): Promise<T>
     siblingDoc: incomingDoc,
   })
 
-  await Promise.all(fieldPromises)
-  await Promise.all(populationPromises)
+  /**
+   * Await all field and population promises in parallel.
+   * A field promise is able to add more field promises to the fieldPromises array, which will not be
+   * awaited in the first run.
+   * This is why we need to loop again to process the new field promises, until there are no more field promises left.
+   */
+  let iterations = 0
+  while (fieldPromises.length > 0 || populationPromises.length > 0) {
+    const currentFieldPromises = fieldPromises.splice(0, fieldPromises.length)
+    const currentPopulationPromises = populationPromises.splice(0, populationPromises.length)
 
+    await Promise.all(currentFieldPromises)
+    await Promise.all(currentPopulationPromises)
+
+    iterations++
+    if (iterations >= 100) {
+      throw new Error(
+        'Infinite afterRead promise loop detected. A hook is likely adding field promises in an infinitely recursive way.',
+      )
+    }
+  }
   return incomingDoc
 }

test/fields/collections/Lexical/blocks.ts

@@ -4,6 +4,44 @@ import { BlocksFeature, FixedToolbarFeature, lexicalEditor } from '@payloadcms/r
 
 import { textFieldsSlug } from '../Text/shared.js'
 
+async function asyncFunction(param: string) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(param?.toUpperCase())
+    }, 1000)
+  })
+}
+export const AsyncHooksBlock: Block = {
+  slug: 'asyncHooksBlock',
+  fields: [
+    {
+      name: 'test1',
+      label: 'Text',
+      type: 'text',
+      hooks: {
+        afterRead: [
+          ({ value }) => {
+            return value?.toUpperCase()
+          },
+        ],
+      },
+    },
+    {
+      name: 'test2',
+      label: 'Text',
+      type: 'text',
+      hooks: {
+        afterRead: [
+          async ({ value }) => {
+            const valuenew = await asyncFunction(value)
+            return valuenew
+          },
+        ],
+      },
+    },
+  ],
+}
+
 export const BlockColumns = ({ name }: { name: string }): ArrayField => ({
   type: 'array',
   name,

test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts

@@ -312,6 +312,49 @@ describe('lexicalBlocks', () => {
     })
   })
 
+  test('ensure async hooks are awaited properly', async () => {
+    const { richTextField } = await navigateToLexicalFields()
+
+    const lastParagraph = richTextField.locator('p').last()
+    await lastParagraph.scrollIntoViewIfNeeded()
+    await expect(lastParagraph).toBeVisible()
+
+    await lastParagraph.click()
+
+    await page.keyboard.press('Enter')
+    await page.keyboard.press('/')
+    await page.keyboard.type('Async')
+
+    // CreateBlock
+    const slashMenuPopover = page.locator('#slash-menu .slash-menu-popup')
+    await expect(slashMenuPopover).toBeVisible()
+
+    const asyncHooksBlockSelectButton = slashMenuPopover.locator('button').first()
+    await expect(asyncHooksBlockSelectButton).toBeVisible()
+    await expect(asyncHooksBlockSelectButton).toContainText('Async Hooks Block')
+    await asyncHooksBlockSelectButton.click()
+    await expect(slashMenuPopover).toBeHidden()
+
+    const newBlock = richTextField
+      .locator('.lexical-block:not(.lexical-block .lexical-block)')
+      .nth(8) // The :not(.lexical-block .lexical-block) makes sure this does not select sub-blocks
+    await newBlock.scrollIntoViewIfNeeded()
+    await newBlock.locator('#field-test1').fill('text1')
+    await newBlock.locator('#field-test2').fill('text2')
+
+    await wait(300)
+
+    // save document and assert
+    await saveDocAndAssert(page)
+    await wait(300)
+
+    // Reload page
+    await page.reload()
+
+    await expect(newBlock.locator('#field-test1')).toHaveValue('TEXT1')
+    await expect(newBlock.locator('#field-test2')).toHaveValue('TEXT2')
+  })
+
   describe('nested lexical editor in block', () => {
     test('should type and save typed text', async () => {
       const { richTextField } = await navigateToLexicalFields()

test/fields/collections/Lexical/index.ts

@@ -20,6 +20,7 @@ import { $convertToMarkdownString } from '@payloadcms/richtext-lexical/lexical/m
 
 import { lexicalFieldsSlug } from '../../slugs.js'
 import {
+  AsyncHooksBlock,
   CodeBlock,
   ConditionalLayoutBlock,
   RadioButtonsBlock,
@@ -73,6 +74,7 @@ const editorConfig: ServerEditorConfig = {
     ModifyInlineBlockFeature(),
     BlocksFeature({
       blocks: [
+        AsyncHooksBlock,
         RichTextBlock,
         TextBlock,
         UploadAndRichTextBlock,
@@ -365,7 +367,7 @@ export const LexicalFields: CollectionConfig = {
             }
 
             // Export to markdown
-            let markdown: string
+            let markdown: string = ''
             headlessEditor.getEditorState().read(() => {
               markdown = $convertToMarkdownString(
                 yourSanitizedEditorConfig?.features?.markdownTransformers,