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:
@@ -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')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user