diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx index e88d8bb45493..7996495ba9c9 100644 --- a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx +++ b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Annotations.spec.tsx @@ -51,5 +51,64 @@ test.describe('Portable Text Input', () => { // Assertion: the annotation toolbar popover should be visible await expect(page.getByTestId('annotation-toolbar-popover')).toBeVisible() }) + + test('Can create, and then open the existing annotation again for editing', async ({ + mount, + page, + }) => { + const {getFocusedPortableTextEditor, insertPortableText} = testHelpers({ + page, + }) + await mount() + const $pte = await getFocusedPortableTextEditor('field-body') + + await insertPortableText('Now we should insert a link.', $pte) + + // Backtrack and click link icon in menu bar + await page.keyboard.press('ArrowLeft') + await page.keyboard.press('Shift+ArrowLeft+ArrowLeft+ArrowLeft+ArrowLeft') + await page.getByRole('button', {name: 'Link'}).click() + // Assertion: Wait for link to be re-rendered / PTE internal state to be done + await expect($pte.locator('span[data-link]')).toBeVisible() + + // Assertion: the annotation toolbar popover should not be visible + await expect(page.getByTestId('annotation-toolbar-popover')).not.toBeVisible() + + const $linkEditPopover = page.getByTestId('popover-edit-dialog') + const $linkInput = $linkEditPopover.getByLabel('Link').first() + + // Now we check if the edit popover shows automatically + await expect($linkInput).toBeAttached({timeout: 10000}) + + // Focus the URL input + await $linkInput.focus() + + // Assertion: The URL input should be focused + await expect($linkInput).toBeFocused() + + // Type in the URL + await page.keyboard.type('https://www.sanity.io') + + // Assetion: The URL input should have the correct value + await expect($linkInput).toHaveValue('https://www.sanity.io') + + // Close the popover + await page.keyboard.press('Escape') + + // Expect the editor to have focus after closing the popover + await expect($pte).toBeFocused() + + // Assertion: the annotation toolbar popover should be visible + await expect(page.getByTestId('annotation-toolbar-popover')).toBeVisible() + + // Open up the editing interface again + await page.getByTestId('edit-annotation-button').click() + + // Focus the URL input + await $linkInput.focus() + + // Assertion: The URL input should be focused + await expect($linkInput).toBeFocused() + }) }) }) diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx index 7e93e35e85f9..c81e3775f792 100644 --- a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx +++ b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx @@ -183,6 +183,7 @@ export function AnnotationToolbarPopover(props: AnnotationToolbarPopoverProps) {