fix(richtext-lexical): preserve link drawer form state (#17586)

1. Opening a nested upload document drawer can trigger Lexical selection
updates while the Edit Link drawer contains unsaved custom-field data.
2. The link editor could respond by either clearing that data when the
selection became unavailable or rehydrating the drawer from the saved
link node while it remained open.
3. Parent autosave replaces the parent form-state object. The fields
drawer treated that object change as a fresh initialization trigger,
rebuilt its form from the original link-node data, unmounted the nested
document drawer, and discarded the unsaved Asset Link Block.

Preserves `stateData` and `selectedNodes` while the Edit Link drawer
remains open. The fields drawer now reads the latest
`parentDocumentFields` when it genuinely initializes without
reinitializing on parent autosave updates.

End-to-end coverage reproduces the published-document autosave sequence,
verifies the asset drawer remains open with its unsaved block values,
and finalizes the link to confirm the selected Lexical text becomes the
expected anchor.

<!-- e2e-pr-media:start -->
### Before
<!--
- Steps:
  1. Open the persisted `Published asset type` edit view.
2. Type `hyperlink` into Description, select it, and open the Lexical
inline link menu.
3. Fill the link URL, add Hyperlink, choose Asset Link Block, and fill
its Label.
4. Choose the existing `client-asset.jpg` document and click its edit
icon.
  5. Pause on the resulting parent Edit Link drawer.
- Final visible proof:
- Show that the nested document drawer is gone and the Edit Link drawer
has returned to an empty Hyperlink field with only “Add Hyperlink.”
(Incorrect: opening the selected asset should keep the document drawer
open and should not erase the Asset Link Block.)
- Required view(s) and why: the persisted Asset Type edit view plus its
nested drawers show the complete selection-to-edit transition and the
parent form-state loss without unrelated list or card views.
-->

https://github.com/user-attachments/assets/dace3bde-1919-4921-bcac-af19b12906e6

### After
<!--
- Steps:
  1. Open the same persisted `Published asset type` edit view.
2. Type `hyperlink` into Description, select it, and open the Lexical
inline link menu.
3. Fill the same link URL, add Hyperlink, choose Asset Link Block, and
fill its Label.
4. Choose the same existing `client-asset.jpg` document and click its
edit icon.
5. Show the open document drawer, close it, and pause on the retained
Asset Link Block in the parent Edit Link drawer.
- Final visible proof:
- Show the nested document drawer open with `Client asset document`,
then show the parent Asset Link Block still containing label `Client
asset` and asset `client-asset.jpg`. (Correct: the asset drawer stays
open and all unsaved parent link data remains intact.)
- Required view(s) and why: the same persisted Asset Type edit view and
nested drawer stack prove both halves of the fix—stable nested-drawer
lifecycle and preserved parent form data.
-->

https://github.com/user-attachments/assets/6ef5d703-d1e6-4484-979c-05c9cfbe2429
<!-- e2e-pr-media:end -->

Author: JarrodMFlesch

packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/LinkEditor/index.tsx

@@ -14,6 +14,7 @@ import {
   useConfig,
   useEditDepth,
   useLocale,
+  useModal,
   useTranslation,
 } from '@payloadcms/ui'
 import { requests } from '@payloadcms/ui/shared'
@@ -86,6 +87,9 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
     depth: editDepth,
   })
 
+  const { modalState } = useModal()
+  const isDrawerOpenRef = useRef(false)
+  isDrawerOpenRef.current = Boolean(modalState[drawerSlug]?.isOpen)
   const { toggleDrawer } = useLexicalDrawer(drawerSlug)
 
   const setNotLink = useCallback(() => {
@@ -95,11 +99,15 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
       editorRef.current.style.transform = 'translate(-10000px, -10000px)'
     }
     setIsAutoLink(false)
-    setLinkUrl(null)
-    setLinkLabel(null)
-    setSelectedNodes([])
-    setStateData(undefined)
-  }, [setIsLink, setLinkUrl, setLinkLabel, setSelectedNodes])
+    // Nested fields can temporarily move selection away from the editor. Keep the backing form
+    // state until the drawer closes so those interactions cannot reset or unmount its fields.
+    if (!isDrawerOpenRef.current) {
+      setLinkUrl(null)
+      setLinkLabel(null)
+      setSelectedNodes([])
+      setStateData(undefined)
+    }
+  }, [])
 
   const $updateLinkEditor = useCallback(() => {
     const selection = $getSelection()
@@ -212,9 +220,11 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
       }
     }
 
-    setStateData(data)
     setIsLink(true)
-    setSelectedNodes(selection ? selection?.getNodes() : [])
+    if (!isDrawerOpenRef.current) {
+      setStateData(data)
+      setSelectedNodes(selection ? selection?.getNodes() : [])
+    }
 
     if ($isAutoLinkNode(focusLinkParent)) {
       setIsAutoLink(true)

packages/richtext-lexical/src/utilities/fieldsDrawer/DrawerContent.tsx

@@ -8,6 +8,7 @@ import {
   RenderFields,
   useDocumentForm,
   useDocumentInfo,
+  useEffectEvent,
   useServerFunctions,
   useTranslation,
 } from '@payloadcms/ui'
@@ -50,34 +51,36 @@ export const DrawerContent: React.FC<Omit<FieldsDrawerProps, 'drawerSlug' | 'dra
 
   const fields: any = fieldMapOverride ?? featureClientSchemaMap[featureKey]?.[schemaFieldsPath] // Field Schema
 
-  useEffect(() => {
-    const controller = new AbortController()
+  // Parent form state changes after autosave. Read its latest value when initializing without
+  // reinitializing this drawer and discarding its unsaved form state after every parent update.
+  const getInitialState = useEffectEvent(async (controller: AbortController) => {
+    const { state } = await getFormState({
+      id,
+      collectionSlug,
+      data: data ?? {},
+      docPermissions: {
+        fields: true,
+      },
+      docPreferences: await getDocPreferences(),
+      documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields, {
+        excludeFiles: true,
+      }),
+      globalSlug,
+      initialBlockData: data,
+      operation: 'update',
+      readOnly: !isEditable,
+      renderAllFields: true,
+      schemaPath: schemaFieldsPath,
+      signal: controller.signal,
+    })
 
-    const awaitInitialState = async () => {
-      const { state } = await getFormState({
-        id,
-        collectionSlug,
-        data: data ?? {},
-        docPermissions: {
-          fields: true,
-        },
-        docPreferences: await getDocPreferences(),
-        documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields, {
-          excludeFiles: true,
-        }),
-        globalSlug,
-        initialBlockData: data,
-        operation: 'update',
-        readOnly: !isEditable,
-        renderAllFields: true,
-        schemaPath: schemaFieldsPath,
-        signal: controller.signal,
-      })
+    setInitialState(state)
+  })
 
-      setInitialState(state)
-    }
+  useEffect(() => {
+    const controller = new AbortController()
 
-    void awaitInitialState()
+    void getInitialState(controller)
 
     return () => {
       abortAndIgnore(controller)
@@ -91,7 +94,6 @@ export const DrawerContent: React.FC<Omit<FieldsDrawerProps, 'drawerSlug' | 'dra
     isEditable,
     globalSlug,
     getDocPreferences,
-    parentDocumentFields,
   ])
 
   const onChange = useCallback(

test/lexical/baseConfig.ts

@@ -20,7 +20,10 @@ import { LexicalCustomCell } from './collections/LexicalCustomCell/index.js'
 import { LexicalHeadingFeature } from './collections/LexicalHeadingFeature/index.js'
 import { LexicalInBlock } from './collections/LexicalInBlock/index.js'
 import { LexicalJSXConverter } from './collections/LexicalJSXConverter/index.js'
-import { LexicalLinkFeature } from './collections/LexicalLinkFeature/index.js'
+import {
+  LexicalLinkFeature,
+  LexicalLinkFeatureAutosave,
+} from './collections/LexicalLinkFeature/index.js'
 import { LexicalListsFeature } from './collections/LexicalListsFeature/index.js'
 import { LexicalLocalizedFields } from './collections/LexicalLocalized/index.js'
 import { LexicalMigrateFields } from './collections/LexicalMigrate/index.js'
@@ -57,6 +60,7 @@ export const baseConfig: Partial<Config> = {
     LexicalFullyFeatured,
     LexicalAutosave,
     LexicalLinkFeature,
+    LexicalLinkFeatureAutosave,
     LexicalListsFeature,
     LexicalHeadingFeature,
     LexicalJSXConverter,

test/lexical/collections/LexicalLinkFeature/e2e.spec.ts

@@ -1,9 +1,14 @@
 import { expect, test } from '@playwright/test'
-import { lexicalLinkFeatureSlug } from 'lexical/slugs.js'
+import {
+  lexicalLinkFeatureAutosaveSlug,
+  lexicalLinkFeatureSlug,
+  uploadsSlug,
+} from 'lexical/slugs.js'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
 import { ensureCompilationIsDone, waitForFormReady } from '../../../__helpers/e2e/helpers.js'
+import { waitForAutoSaveToRunAndComplete } from '../../../__helpers/e2e/waitForAutoSaveToRunAndComplete.js'
 import { AdminUrlUtil } from '../../../__helpers/shared/adminUrlUtil.js'
 import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js'
 import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
@@ -12,7 +17,7 @@ const filename = fileURLToPath(import.meta.url)
 const currentFolder = path.dirname(filename)
 const dirname = path.resolve(currentFolder, '../../')
 
-const { beforeAll, beforeEach, describe } = test
+const { afterEach, beforeAll, beforeEach, describe } = test
 
 // Unlike the other suites, this one runs in parallel, as they run on the `lexical-fully-featured/create` URL and are "pure" tests
 // PLEASE do not reset the database or perform any operations that modify it in this file.
@@ -25,6 +30,8 @@ const { serverURL } = await initPayloadE2ENoConfig({
 })
 
 describe('Lexical Link Feature', () => {
+  const createdAutosaveDocIDs: Array<number | string> = []
+
   beforeAll(async ({ browser }, testInfo) => {
     testInfo.setTimeout(TEST_TIMEOUT_LONG)
     process.env.SEED_IN_CONFIG_ONINIT = 'false' // Makes it so the payload config onInit seed is not run. Otherwise, the seed would be run unnecessarily twice for the initial test run - once for beforeEach and once for onInit
@@ -39,6 +46,14 @@ describe('Lexical Link Feature', () => {
     await lexical.editor.first().focus()
   })
 
+  afterEach(async ({ page }) => {
+    for (const id of createdAutosaveDocIDs) {
+      await page.request.delete(`${serverURL}/api/${lexicalLinkFeatureAutosaveSlug}/${id}`)
+    }
+
+    createdAutosaveDocIDs.length = 0
+  })
+
   test('can add new custom fields in link feature modal', async ({ page }) => {
     const lexical = new LexicalHelpers(page)
 
@@ -342,4 +357,128 @@ describe('Lexical Link Feature', () => {
       })
       .toBe(true)
   })
+
+  test('should preserve link form state while editing a nested upload document', async ({
+    page,
+  }) => {
+    const lexical = new LexicalHelpers(page)
+
+    await lexical.editor.fill('custom link')
+    await lexical.editor.selectText()
+    await lexical.inlineToolbar.locator('.toolbar-popup__button-link').click()
+
+    const linkDrawer = page.locator('.lexical-link-edit-drawer')
+    const assetLabelField = linkDrawer.locator('#field-hyperlink__0__label')
+    const finalizedURL = 'https://example.com/finalized'
+
+    await linkDrawer.locator('#field-url').fill(finalizedURL)
+    await linkDrawer.getByRole('button', { name: 'Add Hyperlink' }).click()
+    await page.locator('.blocks-drawer__block').filter({ hasText: 'Asset Link Block' }).click()
+    await assetLabelField.fill('Client asset')
+    await linkDrawer.getByRole('button', { name: 'Choose from existing' }).click()
+
+    const uploadListDrawer = page.locator('dialog[id^=list-drawer_2_]').first()
+
+    await uploadListDrawer
+      .getByText(/payload(?:-\d+)?\.jpg/)
+      .first()
+      .click()
+
+    const selectedFilename = linkDrawer.locator('.upload-relationship-details__filename')
+
+    await expect(selectedFilename).toHaveText(/payload(?:-\d+)?\.jpg/)
+
+    await linkDrawer.locator('.upload-relationship-details__edit').click()
+
+    const uploadDocumentDrawer = page.locator(`dialog[id^=doc-drawer_${uploadsSlug}_2_]`).first()
+
+    await expect(uploadDocumentDrawer).toBeVisible()
+    await expect(uploadDocumentDrawer.locator('#field-text')).toBeVisible()
+    await expect(linkDrawer.locator('.blocks-field__row')).toHaveCount(1)
+    await expect(assetLabelField).toHaveValue('Client asset')
+    await expect(selectedFilename).toHaveText(/payload(?:-\d+)?\.jpg/)
+
+    await uploadDocumentDrawer.getByRole('button', { name: 'Close' }).first().click()
+    await expect(uploadDocumentDrawer).toBeHidden()
+    await lexical.save('drawer')
+
+    const createdLink = lexical.editor.getByRole('link', { name: 'custom link' })
+
+    await expect(createdLink).toHaveAttribute('href', finalizedURL)
+    await createdLink.dispatchEvent('mouseover')
+    await page.locator('.link-edit').click()
+    await expect(linkDrawer).toBeVisible()
+    await expect(linkDrawer.locator('.blocks-field__row')).toHaveCount(1)
+    await expect(assetLabelField).toHaveValue('Client asset')
+    await expect(selectedFilename).toHaveText(/payload(?:-\d+)?\.jpg/)
+  })
+
+  test('should preserve an open nested upload drawer and unsaved link fields through parent autosave', async ({
+    page,
+  }) => {
+    const createResponse = await page.request.post(
+      `${serverURL}/api/${lexicalLinkFeatureAutosaveSlug}`,
+      {
+        data: {
+          _status: 'published',
+        },
+      },
+    )
+
+    expect(createResponse.ok()).toBe(true)
+
+    const {
+      doc: { id },
+    } = await createResponse.json()
+    const url = new AdminUrlUtil(serverURL, lexicalLinkFeatureAutosaveSlug)
+
+    createdAutosaveDocIDs.push(id)
+    await page.goto(url.edit(id))
+    await waitForFormReady(page)
+
+    const lexical = new LexicalHelpers(page)
+
+    await lexical.editor.fill('custom link')
+    await lexical.editor.selectText()
+    await lexical.inlineToolbar.locator('.toolbar-popup__button-link').click()
+
+    const linkDrawer = page.locator('.lexical-link-edit-drawer')
+    const assetLabelField = linkDrawer.locator('#field-hyperlink__0__label')
+    const finalizedURL = 'https://example.com/autosave-finalized'
+
+    await linkDrawer.locator('#field-url').fill(finalizedURL)
+    await linkDrawer.getByRole('button', { name: 'Add Hyperlink' }).click()
+    await page.locator('.blocks-drawer__block').filter({ hasText: 'Asset Link Block' }).click()
+    await assetLabelField.fill('Client asset')
+    await linkDrawer.getByRole('button', { name: 'Choose from existing' }).click()
+
+    const uploadListDrawer = page.locator('dialog[id^=list-drawer_2_]').first()
+
+    await uploadListDrawer
+      .getByText(/payload(?:-\d+)?\.jpg/)
+      .first()
+      .click()
+
+    const selectedFilename = linkDrawer.locator('.upload-relationship-details__filename')
+
+    await expect(selectedFilename).toHaveText(/payload(?:-\d+)?\.jpg/)
+    await linkDrawer.locator('.upload-relationship-details__edit').click()
+
+    const uploadDocumentDrawer = page.locator(`dialog[id^=doc-drawer_${uploadsSlug}_2_]`).first()
+
+    await expect(uploadDocumentDrawer).toBeVisible()
+    await waitForAutoSaveToRunAndComplete(page)
+    await expect(uploadDocumentDrawer).toBeVisible()
+    await expect(linkDrawer.locator('.blocks-field__row')).toHaveCount(1)
+    await expect(assetLabelField).toHaveValue('Client asset')
+    await expect(selectedFilename).toHaveText(/payload(?:-\d+)?\.jpg/)
+
+    await uploadDocumentDrawer.getByRole('button', { name: 'Close' }).first().click()
+    await expect(uploadDocumentDrawer).toBeHidden()
+    await lexical.save('drawer')
+
+    const createdLink = lexical.editor.getByRole('link', { name: 'custom link' })
+
+    await expect(createdLink).toHaveAttribute('href', finalizedURL)
+  })
 })