fix(richtext-lexical): ensure state is up-to-date on inline-block restore (#12128)

### What?
Ensures that the initial state on inline blocks gets updated when an
inline block gets restored from lexical history.

### Why?
If an inline block got edited, removed, and restored (via lexical undo),
the state of the inline block was taken from an outdated initial state
and did not reflect the current form state, see screencast


https://github.com/user-attachments/assets/6f55ded3-57bc-4de0-8ac1-e49331674d5f

### How?
We now ensure that the initial state gets re-initialized after the
component got unmounted, resulting in the expected behavior:


https://github.com/user-attachments/assets/4e97eeb2-6dc4-49b1-91ca-35b59a93a348

---------

Co-authored-by: Germán Jabloñski <43938777+GermanJablo@users.noreply.github.com>
This commit is contained in:
Tobias Odendahl
2025-04-29 18:54:06 +02:00
committed by GitHub
parent 3df1329e19
commit 1b17df9e0b
2 changed files with 63 additions and 1 deletions

View File

@@ -1666,5 +1666,55 @@ describe('lexicalBlocks', () => {
},
})
})
test('ensure inline blocks restore their state after undoing a removal', async () => {
await page.goto('http://localhost:3000/admin/collections/LexicalInBlock?limit=10')
await page.locator('.cell-id a').first().click()
await page.waitForURL(`**/collections/LexicalInBlock/**`)
// Wait for the page to be fully loaded and elements to be stable
await page.waitForLoadState('domcontentloaded')
// Wait for the specific row to be visible and have its content loaded
const row2 = page.locator('#blocks-row-2')
await expect(row2).toBeVisible()
// Get initial count and ensure it's stable
const inlineBlocks = page.locator('#blocks-row-2 .inline-block-container')
const inlineBlockCount = await inlineBlocks.count()
await expect(() => {
expect(inlineBlockCount).toBeGreaterThan(0)
}).toPass()
const inlineBlockElement = inlineBlocks.first()
await inlineBlockElement.locator('.inline-block__editButton').first().click()
await page.locator('.drawer--is-open #field-text').fill('value1')
await page.locator('.drawer--is-open button[type="submit"]').first().click()
// remove inline block
await inlineBlockElement.click()
await page.keyboard.press('Backspace')
// Check both that this specific element is removed and the total count decreased
await expect(inlineBlocks).toHaveCount(inlineBlockCount - 1)
await page.keyboard.press('Escape')
await inlineBlockElement.click()
// Undo the removal using keyboard shortcut
await page.keyboard.press('ControlOrMeta+Z')
// Wait for the block to be restored
await expect(inlineBlocks).toHaveCount(inlineBlockCount)
// Open the drawer again
await inlineBlockElement.locator('.inline-block__editButton').first().click()
// Check if the text field still contains 'value1'
await expect(page.locator('.drawer--is-open #field-text')).toHaveValue('value1')
})
})
})