Lexical upload feature breaks live preview due to race conditions in traverseRichText()

[thoerr]

Describe the Bug

I have a collection with a lexical editor. On my front-end I'm using the client-side useLivePreview() hook. It works great, except when using the upload feature in dev mode. I sometimes get this error when inserting an upload -- but most often when trying to drag/move an existing upload to a different position:

    at eval (traverseRichText.js:47:89)
    at Array.forEach (<anonymous>)
    at traverseRichText (traverseRichText.js:34:35)
    at eval (traverseRichText.js:14:20)
    at Array.map (<anonymous>)
    at traverseRichText (traverseRichText.js:10:31)
    at eval (traverseRichText.js:59:31)
    at Array.forEach (<anonymous>)
    at traverseRichText (traverseRichText.js:34:35)
    at eval (traverseRichText.js:59:31)
    at Array.forEach (<anonymous>)
    at traverseRichText (traverseRichText.js:34:35)
    at eval (traverseFields.js:14:111)
    at Array.forEach (<anonymous>)
    at traverseFields (traverseFields.js:9:18)
    at mergeData (mergeData.js:22:71)
    at handleMessage (handleMessage.js:30:90)
    at onMessage (subscribe.js:10:98)

Attempting to understand the issue, I made a small modification to the traverseRichText.js file. When making result.value conditional on line 42 the error will resolve:

const hasChanged = result && typeof result === 'object' && result.value?.id === externallyUpdatedRelationship?.id;

However, still curious why value would be empty, I threw a console log in on the line above:

console.log("RESULT", JSON.stringify(result.value), JSON.stringify(result), result)

Arg 2, the stringified output of my upload, was this:

{"format":"","type":"upload","version":3,"id":"6733c9b00008d0208fbdbeeb","fields":null,"relationTo":"media"} 

whereas arg 3, the unstringified one, was:

    "format": "",
    "type": "upload",
    "version": 3,
    "id": "6733c9b00008d0208fbdbeeb",
    "fields": null,
    "relationTo": "media",
    "value": {
        "id": "6733c9b097098f97e2cb5dbf",
        "filename": "Screenshot 2024-02-16 at 10.49.04 AM (2).png",
        "mimeType": "image/png",
        "filesize": 4271756,
        "width": 3840,
        "height": 2160,
        "focalX": 50,
        "focalY": 50,
        "createdAt": "2024-11-12T21:33:36.341Z",
        "updatedAt": "2024-11-12T21:33:36.341Z",
        "url": "/api/media/file/Screenshot 2024-02-16 at 10.49.04 AM (2).png",
        "thumbnailURL": null
    }
}

It appears there is a problem with race conditions inside the traverseRichText.js with the the upload (and likely other features as well that rely on data from other collections), which causes it to fail when it runs before the data has been populated.

My "fix" above is thus likely a band-aid for the error rather than a solution for a bigger issue further up the functional chain.

It's worth noting that this doesn't happen (or at least hasn't happened to me yet) in the built app, I'm assuming because the data is populated fast enough that traverseRichText.js doesn't run before it's complete. However, the errors in dev mode point to an promise-related issue that probably needs to be resolved in any case and could still happen in production in the right (or, rather, wrong) server environment.

Link to the code that reproduces this issue

https://github.com/thoerr/payload-live-preview-error

Reproduction Steps

1. Install the repo (this is just a quick-and-dirty modification of beta 3.0 repo to set up live preview -- should work with any live preview using lexical editor w/ dev mode).
2. Set up mongo db and create an .env file with

MONGODB_URI=
PAYLOAD_PUBLIC_SERVER_URL=
PAYLOAD_PUBLIC_SITE_URL=
NEXT_PUBLIC_SERVER_URL=

3. Log into the Admin UI and navigate to pages.
4. Create a new document, add an upload in the richText field along with some other content (in between a couple paragraphs, for example), save and open Live Preview.
5. Attempt to drag the upload node to a different location; error will likely appear in preview window's console and live preview will stop functioning.

Which area(s) are affected? (Select all that apply)

plugin: richtext-lexical, plugin: other

Environment Info

Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: 9.7.1
Relevant Packages:
  payload: 3.0.0-beta.124
  next: 15.0.0
  @payloadcms/db-mongodb: 3.0.0-beta.124
  @payloadcms/db-postgres: 3.0.0-beta.124
  @payloadcms/graphql: 3.0.0-beta.124
  @payloadcms/live-preview: 3.0.0-beta.124
  @payloadcms/live-preview-react: 3.0.0-beta.124
  @payloadcms/next/utilities: 3.0.0-beta.124
  @payloadcms/richtext-lexical: 3.0.0-beta.124
  @payloadcms/richtext-slate: 3.0.0-beta.124
  @payloadcms/translations: 3.0.0-beta.124
  @payloadcms/ui/shared: 3.0.0-beta.124
  react: 19.0.0-rc-65a56d0e-20241020
  react-dom: 19.0.0-rc-65a56d0e-20241020
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10